WP Ultimate Post Grid / 4.0.1

WP Ultimate Post Grid v4.0.1

wp-ultimate-post-grid / assets / js / public / grid / pagination.js

pagination.js in WP Ultimate Post Grid 4.0.1, at assets/js/public/grid/pagination.js

188 lines 6.9 KB

Raw Download Zip

1	import imagesLoaded from 'imagesloaded';
2
3	import Api from '../Api';
4
5	export default ( elemId, args ) => {
6	let pagination = false;
7	const paginationType = args.pagination_type;
8	if ( 'none' !== paginationType ) {
9	if ( 'object' === typeof window[ 'WPUPG_Pagination_' + paginationType ] ) {
10	pagination = window[ 'WPUPG_Pagination_' + paginationType ].init( elemId, args.pagination );
11	}
12	}
13
14	return {
15	pagination,
16	dynamicRules: args.hasOwnProperty( 'dynamic_rules' ) ? args.dynamic_rules : [],
17	itemIds: args.hasOwnProperty( 'item_ids' ) ? args.item_ids : [],
18	totalIds: args.hasOwnProperty( 'total_ids' ) ? args.total_ids : false,
19	loadItems( args, callback = false ) {
20	// Make sure type is set.
21	args.type = args.hasOwnProperty( 'type' ) ? args.type : 'load';
22
23	// Get filter query args.
24	if ( ! args.hasOwnProperty( 'filters' ) ) {
25	const filterArgs = [];
26	for ( let filter of this.filters ) {
27	if ( filter.hasOwnProperty( 'getQueryArgs' ) ) {
28	const queryArgs = filter.getQueryArgs();
29
30	if ( queryArgs ) {
31	filterArgs.push( queryArgs );
32	}
33	}
34	}
35	args.filters = filterArgs;
36	}
37
38	// Get current sort order.
39	if ( ! this.usingDefaultOrder() ) {
40	args.currentOrder = this.order;
41	}
42
43	// Add to load items queue.
44	this.loadItemsQueue.push({
45	args,
46	callback,
47	});
48	this.loadNextInQueue();
49	},
50	loadItemsQueue: [],
51	loadingItems: false,
52	loadNextInQueue() {
53	if ( ! this.loadingItems && 0 < this.loadItemsQueue.length ) {
54	// Start optional pagination loader.
55	if ( this.pagination && this.pagination.hasOwnProperty( 'startLoader' ) ) {
56	this.pagination.startLoader();
57	}
58
59	this.loadingItems = true;
60	const nextLoad = this.loadItemsQueue.shift();
61
62	this.loadItemsQueued( nextLoad.args, nextLoad.callback )
63	.then( ( response ) => {
64	this.loadingItems = false;
65	this.loadNextInQueue();
66	})
67	.catch( ( error ) => {
68	this.loadingItems = false;
69	this.loadNextInQueue();
70	} );
71	} else if ( ! this.loadItemsQueue.length ) {
72	// Stop optional pagination loader.
73	if ( this.pagination && this.pagination.hasOwnProperty( 'stopLoader' ) ) {
74	this.pagination.stopLoader();
75	}
76	}
77	},
78	loadItemsQueued( args, callback ) {
79	// Exclude items already loaded.
80	args.loaded_ids = this.itemIds;
81
82	// Add dynamic rules.
83	args.dynamic_rules = this.dynamicRules;
84
85	// Get new items through API.
86	const body = {
87	id: this.gridId,
88	args,
89	}
90
91	if ( wpupg_public.debugging ) { console.log( 'WPUPG Load Items - body', body ); }
92	return Api.loadItems( body ).then((data) => {
93	if ( wpupg_public.debugging ) { console.log( 'WPUPG Load Items - data', data ); }
94	if ( data && data.items && data.items.hasOwnProperty( 'ids' ) ) {
95	const newIds = Array.isArray( data.items.ids ) ? data.items.ids : Object.values( data.items.ids );
96	this.itemIds = this.itemIds.concat( newIds );
97	this.insertItems( data.items.html );
98	}
99
100	this.fireEvent( 'itemsLoaded', data );
101
102	if ( false !== callback ) {
103	callback( data );
104	}
105	});
106	},
107	loadOnFilter: args.pagination.hasOwnProperty( 'load_on_filter' ) ? args.pagination.load_on_filter : false,
108	maybeLoadItemsAndFilter( args = {}, callback = false ) {
109	// Check if args includes search filter.
110	let hasSearchFilter = false;
111	if ( args.hasOwnProperty( 'filters' ) ) {
112	for ( let filter of args.filters ) {
113	if ( 'search' === filter.type ) {
114	hasSearchFilter = true;
115	break;
116	}
117	}
118	}
119
120	// If all items have been loaded, no need for an API call. Unless we're doing a text search.
121	if ( ! hasSearchFilter && this.totalIds && this.itemIds.length >= this.totalIds ) {
122	if ( wpupg_public.debugging ) { console.log( 'WPUPG No API call needed, all items loaded - ', this.totalIds ); }
123	this.filter();
124
125	if ( false !== callback ) {
126	callback( false );
127	}
128	} else {
129	// Still items left to be loaded.
130	if ( this.loadOnFilter ) {
131	this.loadItems( {
132	...args,
133	type: 'load_all',
134	}, ( data ) => {
135	this.filter();
136
137	if ( false !== callback ) {
138	callback( data );
139	}
140	} );
141	} else {
142	this.filter();
143	this.loadItems( {
144	...args,
145	type: 'count',
146	}, callback );
147	}
148	}
149	},
150	insertItems( html ) {
151	const domparser = new DOMParser();
152	const parsed = domparser.parseFromString( html, 'text/html' );
153	const items = parsed.body.children;
154
155	// Indicate item as being inserted.
156	for ( let item of items ) {
157	item.classList.add( 'wpupg-item-inserted' );
158	}
159
160	// Insert into grid.
161	this.isotope.insert( items );
162
163	// Update newly inserted items.
164	const inserted = this.elem.querySelectorAll( '.wpupg-item-inserted' );
165
166	for ( let item of inserted ) {
167	// Force image take up its space.
168	const images = item.querySelectorAll( 'img' );
169
170	for ( let image of images ) {
171	image.outerHTML = image.outerHTML;
172	}
173
174	item.classList.remove( 'wpupg-item-inserted' );
175	}
176
177	// Relayout grid when the images above have actually loaded.
178	imagesLoaded( this.elem, () => {
179	this.layout();
180	} );
181	},
182	initPagination() {
183	if ( pagination.hasOwnProperty( 'init' ) ) {
184	pagination.init();
185	}
186	}
187	}
188	};