| 1 |
import Isotope from 'isotope-layout'; |
| 2 |
import imagesLoaded from 'imagesloaded'; |
| 3 |
|
| 4 |
import '../../css/public/filter.scss'; |
| 5 |
import '../../css/public/grid.scss'; |
| 6 |
import '../../css/public/pagination.scss'; |
| 7 |
import '../../css/public/responsive.scss'; |
| 8 |
|
| 9 |
import './filters/clear'; |
| 10 |
import './filters/isotope'; |
| 11 |
import './pagination/pages'; |
| 12 |
|
| 13 |
import gridCustomFields from './grid/custom-fields'; |
| 14 |
import gridDeeplinking from './grid/deeplinking'; |
| 15 |
import gridEmpty from './grid/empty'; |
| 16 |
import gridEvents from './grid/events'; |
| 17 |
import gridFilters from './grid/filters'; |
| 18 |
import gridHover from './grid/hover'; |
| 19 |
import gridLayout from './grid/layout'; |
| 20 |
import gridPagination from './grid/pagination'; |
| 21 |
import gridResponsive from './grid/responsive'; |
| 22 |
import gridSorting from './grid/sorting'; |
| 23 |
|
| 24 |
window.WPUPG_Grids = {}; |
| 25 |
|
| 26 |
window.WPUPG_Grid = { |
| 27 |
init: ( elemId, args = false ) => { |
| 28 |
const elem = document.querySelector( '#' + elemId ); |
| 29 |
|
| 30 |
if ( elem ) { |
| 31 |
if ( wpupg_public.debugging ) { console.log( 'WPUPG Init', args ); } |
| 32 |
|
| 33 |
const gridId = elem.dataset.hasOwnProperty( 'gridId' ) ? elem.dataset.gridId : elemId.substr( 11 ); |
| 34 |
const gridSlug = elemId.substr( 11 ); |
| 35 |
|
| 36 |
// Remove loading class. |
| 37 |
elem.classList.remove( 'wpupg-grid-loading' ); |
| 38 |
|
| 39 |
// Try to get args from localized data if not set. |
| 40 |
if ( false === args ) { |
| 41 |
if ( window.hasOwnProperty( `wpupg_grid_args_${ gridId }` ) ) { |
| 42 |
args = window[ `wpupg_grid_args_${ gridId }` ]; |
| 43 |
} else { |
| 44 |
// No arguments found to init, return. |
| 45 |
return; |
| 46 |
} |
| 47 |
} |
| 48 |
|
| 49 |
// Check if already exists. |
| 50 |
if ( WPUPG_Grids.hasOwnProperty( elemId ) ) { |
| 51 |
WPUPG_Grids[ elemId ].isotope.destroy(); |
| 52 |
delete WPUPG_Grids[ elemId ]; |
| 53 |
} |
| 54 |
|
| 55 |
WPUPG_Grids[ elemId ] = { |
| 56 |
args, |
| 57 |
elem, |
| 58 |
gridId, |
| 59 |
gridSlug, |
| 60 |
elemId, |
| 61 |
isPreview: args.hasOwnProperty( 'is_preview' ) ? args.is_preview : false, |
| 62 |
isotope: new Isotope( elem, args.isotope ), |
| 63 |
layout() { |
| 64 |
this.isotope.layout(); |
| 65 |
}, |
| 66 |
// Moved to separate files for readability. |
| 67 |
...gridCustomFields( elemId, args ), |
| 68 |
...gridDeeplinking( elemId, args ), |
| 69 |
...gridEmpty( elemId, args ), |
| 70 |
...gridEvents( elemId, args ), |
| 71 |
...gridFilters( elemId, args ), |
| 72 |
...gridHover( elemId, args ), |
| 73 |
...gridLayout( elemId, args ), |
| 74 |
...gridPagination( elemId, args ), |
| 75 |
...gridResponsive( elemId, args ), |
| 76 |
...gridSorting( elemId, args ), |
| 77 |
init() { |
| 78 |
// Init events first. |
| 79 |
this.initEvents(); |
| 80 |
|
| 81 |
// Init rest. |
| 82 |
this.initDeeplinking(); |
| 83 |
this.initEmpty(); |
| 84 |
this.initHover(); |
| 85 |
this.initLayout(); |
| 86 |
this.initPagination(); |
| 87 |
this.initResponsive(); |
| 88 |
this.initFilters(); |
| 89 |
|
| 90 |
// Fire init ready hook. |
| 91 |
this.fireEvent( 'initReady' ); |
| 92 |
|
| 93 |
// Relayout after images have loaded. |
| 94 |
imagesLoaded( this.elem, () => { |
| 95 |
this.layout(); |
| 96 |
} ); |
| 97 |
}, |
| 98 |
}; |
| 99 |
WPUPG_Grids[ elemId ].init(); |
| 100 |
} |
| 101 |
}, |
| 102 |
}; |
| 103 |
|
| 104 |
// Init all grids we can find when the page is ready. |
| 105 |
ready(() => { |
| 106 |
const grids = document.querySelectorAll( '.wpupg-grid' ); |
| 107 |
|
| 108 |
for ( let grid of grids ) { |
| 109 |
WPUPG_Grid.init( grid.id ); |
| 110 |
} |
| 111 |
}); |
| 112 |
|
| 113 |
// Source: http://youmightnotneedjquery.com/#ready |
| 114 |
function ready( fn ) { |
| 115 |
if (document.readyState != 'loading'){ |
| 116 |
fn(); |
| 117 |
} else { |
| 118 |
document.addEventListener('DOMContentLoaded', fn); |
| 119 |
} |
| 120 |
} |
