https://www.diocesisgetafe.es/wp-content/plugins/jet-engine-items-…/items-number-switcher.js?ver=3.8.15

1( function( $ ) {
2
3	"use strict";
4
5	const eventBaseName = 'jet-engine/items-number-switcher/breakpoint-switched/';
6
7	//apply items number filters after Listing Grid lazy load
8	$( document ).on( 'jet-engine/listing-grid/after-lazy-load', function( e, args ) {
9		
10		const loadedProvider = args.container.find( 'div.jet-listing-grid.jet-listing' );
11
12		for ( const groupName in JetSmartFilters.filterGroups ) {
13			const filterGroup = JetSmartFilters.filterGroups[ groupName ];
14			const groupProvider = filterGroup.getProvider();
15			
16			if ( loadedProvider[0] === groupProvider[0] ) {
17				filterGroup.filters.forEach( ( filter ) => {
18					if ( filter.name !== 'items-number-switcher' ) {
19						return;
20					}
21
22					const builder = filter.getBuilder();
23
24					dispatchEvent( getBreakpointByBuilder( builder ), builder )
25				} );
26			}
27		}
28	} );
29
30	function dispatchEvent( breakpoint = '', builder = 'elementor' ) {
31		const e = new CustomEvent(
32			eventBaseName + builder,
33			{
34				detail: {
35					breakpoint: breakpoint,
36					builder: builder,
37				},
38			}
39		);
40
41		document.dispatchEvent( e );
42	}
43
44	function getItemsPerPage( provider, queryId ) {
45		return JetSmartFilterSettings?.props?.[ provider ]?.[ queryId ]?.per_page || 0;
46	}
47
48	function getBreakpointByBuilder( builder ) {
49
50		if ( ! window.JetEngine ) {
51			return '';
52		}
53
54		const wWidth = window.innerWidth;
55
56		switch ( builder ) {
57			case 'elementor':
58				return elementorFrontend.getCurrentDeviceMode();
59			case 'bricks':
60				let breakpoint = JetEngineSettings.bricksBreakpoints[0]['name'];
61				let smallest   = breakpoint;
62
63				JetEngineSettings.bricksBreakpoints.forEach( ( b ) => {
64					if ( +b['width'] <= +wWidth ) {
65						breakpoint = b['name'];
66					}
67				} );
68
69				if ( wWidth < smallest['width'] ) {
70					breakpoint = smallest['name'];
71				}
72
73				return breakpoint;
74			case 'blocks':
75				return wWidth;
76		}
77	}
78
79	const initBreakpointObserver = function() {
80		const breakpointObserver = class BreakpointObserver {
81
82			timeouts = {};
83			breakpoints = {};
84
85			constructor() {
86				this.init();
87			}
88
89			init() {
90				if ( ! window.JetEngineSettings ) {
91					return;
92				}
93				
94				if ( window.elementorFrontend ) {
95					this.initElementor();
96				}
97
98				if ( window.bricksData ) {
99					this.initBricks();
100				}
101
102				this.initBlocks();
103			}
104
105			initElementor() {
106				this.breakpoints['elementor'] = elementorFrontend.getCurrentDeviceMode();
107
108				const observer = new MutationObserver( () => {
109
110					clearTimeout( this.timeouts['elementor'] );
111
112					this.timeouts['elementor'] = setTimeout(
113						() => {
114							const newMode = elementorFrontend.getCurrentDeviceMode();
115							
116							if ( newMode === this.breakpoints['elementor'] ) {
117								return;
118							}
119
120							this.breakpoints['elementor'] = newMode;
121							
122							dispatchEvent( newMode, 'elementor' )
123						}, 500
124					);
125				} );
126
127				observer.observe(
128					document.body,
129					{
130						attributes: true,
131						attributeFilter: ['data-elementor-device-mode']
132					}
133				);
134			}
135
136			initBricks() {
137				this.breakpoints['bricks'] = getBreakpointByBuilder( 'bricks' );
138
139				window.addEventListener(
140					'resize',
141					() => {
142
143						clearTimeout( this.timeouts['bricks'] );
144	
145						this.timeouts['bricks'] = setTimeout(
146							() => {
147								const newMode = getBreakpointByBuilder( 'bricks' );
148								
149								if ( newMode === this.breakpoints['bricks'] ) {
150									return;
151								}
152	
153								this.breakpoints['bricks'] = newMode;
154								
155								dispatchEvent( newMode, 'bricks' )
156							}, 500
157						);
158					}
159				);
160			}
161
162			initBlocks() {
163				window.addEventListener(
164					'resize',
165					() => {
166
167						clearTimeout( this.timeouts['blocks'] );
168	
169						this.timeouts['blocks'] = setTimeout(
170							() => {
171								this.breakpoints['blocks'] = getBreakpointByBuilder( 'blocks' );
172								dispatchEvent( this.breakpoints['blocks'], 'blocks' )
173							}, 500
174						);
175					}
176				);
177			}
178
179		};
180
181		new breakpointObserver();
182
183	}
184
185	const initItemsNumberSwitcher = function() {
186
187		window.JetSmartFilters.filtersList.JetEngineItemsNumberSwitcher = 'jet-smart-filters-items-number-switcher';
188		window.JetSmartFilters.filters.JetEngineItemsNumberSwitcher = class JetEngineItemsNumberSwitcher extends window.JetSmartFilters.filters.BasicFilter {
189
190			name = 'items-number-switcher';
191
192			dataValue = '';
193
194			builder;
195
196			constructor( $container ) {
197				
198				const $filter = $container.find( '.jet-smart-filters-items-number-switcher' );
199				
200				super( $container, $filter );
201
202				this.$container = $container;
203
204				//JetSmartFilters.events.subscribe( 'ajaxFilters/updated', this.reapplyPagination.bind( this ) );				
205
206				window.addEventListener(
207					'load',
208					() => {
209						const builder = this.getBuilder();
210						document.addEventListener( eventBaseName + builder, this.switchNumberOnEvent.bind( this ) );
211
212						if ( this.providerReady() ) {

213							dispatchEvent( getBreakpointByBuilder( builder ), builder );
214						}
215					}
216				);
217			}
218
219			providerReady() {
220				if ( this.filterGroup.$provider.hasClass( 'jet-listing-grid--lazy-load' ) ) {
221					return false;
222				}
223
224				return true;
225			}
226
227			getItemsNumber( breakpoint, builder = 'elementor' ) {
228				let itemsNumber = false;
229
230				switch ( builder ) {
231					case 'elementor':
232					case 'bricks':
233						itemsNumber = this.$filter.data( 'posts_num_responsive_' + breakpoint );
234
235						if ( ! itemsNumber ) {
236							itemsNumber = this.$filter.data( 'posts_num_responsive' );
237						}
238
239						break;
240					case 'blocks':
241						const filterBreakpoints = {};
242
243						for ( const attr of this.$filter[0].attributes ) {
244						  if ( /^data-posts_num_responsive_.+/.test( attr.name ) ) {
245							const breakpointWidth = attr.name.replace( 'data-posts_num_responsive_', '' );
246							filterBreakpoints[ breakpointWidth ] = attr.value;
247						  }
248						}
249
250						let widthList = Object.keys( filterBreakpoints );
251						widthList.sort( (a, b) => Math.sign( b - a ) );
252
253						const wWidth = window.innerWidth;
254
255						for ( const c of widthList ) {
256							if ( wWidth >= c ) {
257								itemsNumber = filterBreakpoints[ c ];
258								break;
259							}
260						}
261
262						if ( ! itemsNumber ) {
263							itemsNumber = filterBreakpoints[ Math.min( ...widthList ) ];
264						}
265
266						break;
267				}
268
269				return itemsNumber;
270			}
271
272			getBuilder() {
273				if ( this.builder !== undefined ) {
274					return this.builder;
275				}
276
277				const $filter = this?.$filter;
278
279				if ( ! $filter?.length ) {
280					this.builder = false;
281					return false;
282				}
283				
284				if ( $filter.parent().filter( '.elementor-widget-container, .elementor-widget' ).length ) {
285					this.builder = 'elementor';
286				} else if ( $filter.parent().filter( '[class*="brxe-"]' ).length ) {
287					this.builder = 'bricks';
288				} else if ( $filter.data( 'isBlock' ) ) {
289					this.builder = 'blocks';
290				}
291
292				return this.builder;
293			}
294
295			switchNumberOnEvent( e ) {
296				const breakpoint = e?.detail?.breakpoint;
297				const builder = e?.detail?.builder || 'elementor';
298				
299				if ( this.getBuilder() !== builder ) {
300					return;
301				}
302
303				this.switchNumber( this.getItemsNumber( breakpoint, builder ) );
304			}
305
306			switchNumber( itemsNumber ) {
307
308				if ( ! itemsNumber ) {
309					return;
310				}
311
312				if ( this.dataValue && +this.dataValue === +itemsNumber ) {
313					return;
314				}
315
316				// let originalReset = this.filterGroup.resetFiltersByName;
317
318				// this.filterGroup.resetFiltersByName = function( filterType ) {
319				// 	if ( filterType === 'pagination' ) {
320				// 		return;
321				// 	}
322
323				// 	originalReset( filterType );
324				// }
325
326				// if ( this.dataValue ) {
327				// 	this.prevPerPage = this.dataValue;
328				// 	this.prevPage = this.getCurrentPage();
329				// }
330
331				this.dataValue = +itemsNumber;
332
333				//this.reapplyPagination();
334
335				this.wasChanged ? this.wasChanged() : this.wasСhanged();
336
337				//this.filterGroup.resetFiltersByName = originalReset;
338			}
339
340			reapplyPagination() {
341				if ( ! this.prevPerPage || ! this.prevPage ) {
342					return;
343				}
344
345				const prevPage = this.prevPage;
346				const prevPerPage = this.prevPerPage;
347				const newPerPage =  this.dataValue;
348
349				let newPage = false;
350
351				if ( prevPage < 2 ) {
352					return;
353				}
354
355				newPage = Math.floor( ( prevPage - 1 ) * prevPerPage / newPerPage ) + 1;
356				
357				if ( prevPage === newPage ) {
358					return;
359				}
360
361				for ( const filter of this.filterGroup.filters ) {
362					if ( filter.name === 'pagination' ) {
363						filter.$filter.find( `.jet-filters-pagination__item[data-value="${newPage}"]` ).click();
364						break;
365					}
366				}
367			}
368
369			getNewPage( newPerPage ) {
370				const currentPage = this.getCurrentPage();
371
372				if ( currentPage < 2 ) {
373					return false;
374				}
375
376				return Math.floor( ( currentPage - 1 ) * this.prevPerPage / newPerPage ) + 1;
377			}
378
379			getCurrentPage() {
380				for ( const filter of this.filterGroup.filters ) {
381					if ( filter.name === 'pagination' ) {
382						if ( ! filter.$filter.find( '.jet-filters-pagination__item' ).length ) {
383							continue;
384						}
385						
386						return filter.dataValue;
387					}
388				}
389
390				return 0;
391			}
392
393			reset() {}
394
395			processData() {
396				return;
397			}
398
399		};
400
401	}
402
403	document.addEventListener( 'DOMContentLoaded', ( e ) => {
404		initBreakpointObserver();
405		initItemsNumberSwitcher();
406	});
407
408}( jQuery ) );