https://www.2dh5.nl/app/plugins/the-events-calendar/src/resources/js/views/view-selector.js

1/**
2 * Makes sure we have all the required levels on the Tribe Object
3 *
4 * @since 4.9.4
5 *
6 * @type   {PlainObject}
7 */
8tribe.events = tribe.events || {};
9tribe.events.views = tribe.events.views || {};
10
11/**
12 * Configures Views Object in the Global Tribe variable
13 *
14 * @since 4.9.4
15 *
16 * @type   {PlainObject}
17 */
18tribe.events.views.viewSelector = {};
19
20/**
21 * Initializes in a Strict env the code that manages the Event Views
22 *
23 * @since 4.9.4
24 *
25 * @param  {PlainObject} $   jQuery
26 * @param  {PlainObject} obj tribe.events.views.viewSelector
27 *
28 * @return {void}
29 */
30( function( $, obj ) {
31	'use strict';
32	var $document = $( document );
33
34	/**
35	 * Selectors used for configuration and setup
36	 *
37	 * @since 4.9.7
38	 *
39	 * @type {PlainObject}
40	 */
41	obj.selectors = {
42		viewSelector: '[data-js="tribe-events-view-selector"]',
43		viewSelectorTabsClass: '.tribe-events-c-view-selector--tabs',
44		viewSelectorButton: '[data-js="tribe-events-view-selector-button"]',
45		viewSelectorButtonActiveClass: '.tribe-events-c-view-selector__button--active',
46		viewSelectorListContainer: '[data-js="tribe-events-view-selector-list-container"]',
47	};
48
49	/**
50	 * Deinitialize accordion based on header and content
51	 *
52	 * @since 4.9.7
53	 *
54	 * @param {jQuery} $header jQuery object of header
55	 * @param {jQuery} $content jQuery object of contents
56	 *
57	 * @return {void}
58	 */
59	obj.deinitAccordion = function( $header, $content ) {
60		tribe.events.views.accordion.deinitAccordion( 0, $header );
61		tribe.events.views.accordion.deinitAccordionA11yAttrs( $header, $content );
62		$content.css( 'display', '' );
63	};
64
65	/**
66	 * Initialize accordion based on header and content
67	 *
68	 * @since 4.9.7
69	 *
70	 * @param {jQuery} $container jQuery object of view container
71	 * @param {jQuery} $header jQuery object of header
72	 * @param {jQuery} $content jQuery object of contents
73	 *
74	 * @return {void}
75	 */
76	obj.initAccordion = function( $container, $header, $content ) {
77		tribe.events.views.accordion.initAccordion( $container )( 0, $header );
78		tribe.events.views.accordion.initAccordionA11yAttrs( $header, $content );
79	};
80
81	/**
82	 * Deinitialize view selector accordion
83	 *
84	 * @since 4.9.7
85	 *
86	 * @param {jQuery} $container jQuery object of view container
87	 *
88	 * @return {void}
89	 */
90	obj.deinitViewSelectorAccordion = function( $container ) {
91		var $viewSelectorButton = $container.find( obj.selectors.viewSelectorButton );
92		var $viewSelectorListContainer = $container.find( obj.selectors.viewSelectorListContainer );
93		obj.deinitAccordion( $viewSelectorButton, $viewSelectorListContainer );
94		$viewSelectorButton.removeClass( obj.selectors.viewSelectorButtonActiveClass.className() );
95	};
96
97	/**
98	 * Initialize view selector accordion
99	 *
100	 * @since 4.9.7
101	 *
102	 * @param {jQuery} $container jQuery object of view container
103	 *
104	 * @return {void}
105	 */
106	obj.initViewSelectorAccordion = function( $container ) {
107		var $viewSelectorButton = $container.find( obj.selectors.viewSelectorButton );
108		var $viewSelectorListContainer = $container.find( obj.selectors.viewSelectorListContainer );
109		obj.initAccordion( $container, $viewSelectorButton, $viewSelectorListContainer );
110	};
111
112	/**
113	 * Initializes view selector state
114	 *
115	 * @since 4.9.8
116	 *
117	 * @param {jQuery} $container jQuery object of view container
118	 *
119	 * @return {void}
120	 */
121	obj.initState = function( $container ) {
122		var $viewSelector = $container.find( obj.selectors.viewSelector );
123		var state = {
124			mobileInitialized: false,
125			desktopInitialized: false,
126		};
127
128		$viewSelector.data( 'tribeEventsState', state );
129	};
130
131	/**
132	 * Deinitializes view selector
133	 *
134	 * @since 4.9.7
135	 *
136	 * @param {jQuery} $container jQuery object of view container
137	 *
138	 * @return {void}
139	 */
140	obj.deinitViewSelector = function( $container ) {
141		obj.deinitViewSelectorAccordion( $container );
142	};
143
144	/**
145	 * Initializes view selector
146	 *
147	 * @since 4.9.8
148	 *
149	 * @param {jQuery} $container jQuery object of view container
150	 *
151	 * @return {void}
152	 */
153	obj.initViewSelector = function( $container ) {
154		var $viewSelector = $container.find( obj.selectors.viewSelector );
155
156		if ( $viewSelector.length ) {
157			var state = $viewSelector.data( 'tribeEventsState' );
158			var isTabs = $viewSelector.hasClass( obj.selectors.viewSelectorTabsClass.className() );
159

160			// If view selector is tabs (has 3 or less options)
161			if ( isTabs ) {
162				var containerState = $container.data( 'tribeEventsState' );
163				var isMobile = containerState.isMobile;
164
165				// If viewport is mobile and mobile state is not initialized
166				if ( isMobile && ! state.mobileInitialized ) {
167					obj.initViewSelectorAccordion( $container );
168					state.desktopInitialized = false;
169					state.mobileInitialized = true;
170					$viewSelector.data( 'tribeEventsState', state );
171
172				// If viewport is desktop and desktop state is not initialized
173				} else if ( ! isMobile && ! state.desktopInitialized ) {
174					obj.deinitViewSelectorAccordion( $container );
175					state.mobileInitialized = false;
176					state.desktopInitialized = true;
177					$viewSelector.data( 'tribeEventsState', state );
178				}
179
180			/**
181			 * If view selector is not tabs (has more than 3 options), it is always an accordion.
182			 * Check if both mobile and desktop states are initialized.
183			 * If mobile and desktop states are not initialized:
184			 */
185			} else if ( ! state.mobileInitialized && ! state.desktopInitialized ) {
186				obj.initViewSelectorAccordion( $container );
187				state.desktopInitialized = true;
188				state.mobileInitialized = true;
189				$viewSelector.data( 'tribeEventsState', state );
190			}
191		}
192	};
193
194	/**
195	 * Toggles active class on view selector button
196	 *
197	 * @since 4.9.7
198	 *
199	 * @param {Event} event event object for click event
200	 *
201	 * @return {void}
202	 */
203	obj.handleViewSelectorButtonClick = function( event ) {
204		event.data.target.toggleClass( obj.selectors.viewSelectorButtonActiveClass.className() );
205	};
206
207	/**
208	 * Handles click event on document
209	 *
210	 * @since 4.9.7
211	 *
212	 * @param {Event} event event object for click event
213	 *
214	 * @return {void}
215	 */
216	obj.handleClick = function( event ) {
217		var isParentViewSelector = Boolean(
218			$( event.target ).closest( obj.selectors.viewSelector ).length
219		);
220
221		if ( ! isParentViewSelector ) {
222			var $container = event.data.container;
223			var $viewSelector = $container.find( obj.selectors.viewSelector );
224			var $viewSelectorButton = $viewSelector.find( obj.selectors.viewSelectorButton );
225
226			/* eslint-disable max-len */
227			if ( $viewSelectorButton.hasClass( obj.selectors.viewSelectorButtonActiveClass.className() ) ) {
228				var $viewSelectorListContainer = $viewSelector.find( obj.selectors.viewSelectorListContainer );
229				$viewSelectorButton.removeClass( obj.selectors.viewSelectorButtonActiveClass.className() );
230				tribe.events.views.accordion.closeAccordion( $viewSelectorButton, $viewSelectorListContainer );
231			}
232			/* eslint-enable max-len */
233		}
234	};
235
236	/**
237	 * Handles resize event
238	 *
239	 * @since 4.9.7
240	 *
241	 * @param {Event} event event object for 'resize.tribeEvents' event
242	 *
243	 * @return {void}
244	 */
245	obj.handleResize = function( event ) {
246		obj.initViewSelector( event.data.container );
247	};
248
249	/**
250	 * Unbinds events for container
251	 *
252	 * @since  4.9.7
253	 *
254	 * @param  {jQuery}  $container jQuery object of view container
255	 *
256	 * @return {void}
257	 */
258	obj.unbindEvents = function( $container ) {
259		$document
260			.off( 'click', obj.handleClick );
261		$container
262			.off( 'resize.tribeEvents', obj.handleResize )
263			.find( obj.selectors.viewSelectorButton )
264			.off( 'click', obj.handleViewSelectorButtonClick );
265	};
266
267	/**
268	 * Binds events for container
269	 *
270	 * @since 4.9.7
271	 *
272	 * @param  {jQuery} $container jQuery object of view container
273	 *
274	 * @return {void}
275	 */
276	obj.bindEvents = function( $container ) {
277		var $viewSelectorButton = $container.find( obj.selectors.viewSelectorButton );
278
279		$document.on( 'click', { container: $container }, obj.handleClick );
280		$container.on( 'resize.tribeEvents', { container: $container }, obj.handleResize );
281		$viewSelectorButton.on(
282			'click',
283			{ target: $viewSelectorButton },
284			obj.handleViewSelectorButtonClick
285		);
286	};
287
288	/**
289	 * Deinitialize view selector JS
290	 *
291	 * @since 4.9.7
292	 *
293	 * @param  {Event}       event    event object for 'beforeAjaxSuccess.tribeEvents' event
294	 * @param  {jqXHR}       jqXHR    Request object
295	 * @param  {PlainObject} settings Settings that this request was made with
296	 *
297	 * @return {void}
298	 */
299	obj.deinit = function( event, jqXHR, settings ) { // eslint-disable-line no-unused-vars
300		var $container = event.data.container;
301		obj.deinitViewSelector( $container );
302		obj.unbindEvents( $container );
303		$container.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit );
304	};
305
306	/**
307	 * Initialize view selector JS
308	 *
309	 * @since 4.9.8

310	 *
311	 * @param  {Event}   event      event object for 'afterSetup.tribeEvents' event
312	 * @param  {integer} index      jQuery.each index param from 'afterSetup.tribeEvents' event
313	 * @param  {jQuery}  $container jQuery object of view container
314	 * @param  {object}  data       data object passed from 'afterSetup.tribeEvents' event
315	 *
316	 * @return {void}
317	 */
318	obj.init = function( event, index, $container, data ) { // eslint-disable-line no-unused-vars
319		var $viewSelector = $container.find( obj.selectors.viewSelector );
320
321		if ( ! $viewSelector.length ) {
322			return;
323		}
324
325		obj.initState( $container );
326		obj.initViewSelector( $container );
327		obj.bindEvents( $container );
328		$container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );
329	};
330
331	/**
332	 * Handles the initialization of the view selector when Document is ready
333	 *
334	 * @since 4.9.4
335	 *
336	 * @return {void}
337	 */
338	obj.ready = function() {
339		$document.on(
340			'afterSetup.tribeEvents',
341			tribe.events.views.manager.selectors.container,
342			obj.init
343		);
344	};
345
346	// Configure on document ready
347	$( obj.ready );
348} )( jQuery, tribe.events.views.viewSelector );