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

1/**
2 * Makes sure we have all the required levels on the Tribe Object
3 *
4 * @since 4.7.6
5 *
6 * @type   {PlainObject}
7 */
8tribe.events = tribe.events || {};
9tribe.events.views = tribe.events.views || {};
10
11/**
12 * Configures Week Day Selector Object in the Global Tribe variable
13 *
14 * @since 4.7.6
15 *
16 * @type  {PlainObject}
17 */
18tribe.events.views.weekDaySelector = {};
19
20/**
21 * Initializes in a Strict env the code that manages the Event Views
22 *
23 * @since 4.7.6
24 *
25 * @param  {PlainObject} $   jQuery
26 * @param  {PlainObject} obj tribe.events.views.manager
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.7.6
38	 *
39	 * @type {PlainObject}
40	 */
41	obj.selectors = {
42		daySelectorDay: '[data-js="tribe-events-pro-week-day-selector-day"]',
43		daySelectorDayActiveClass: '.tribe-events-pro-week-day-selector__day--active',
44		mobileEventsDayActiveClass: '.tribe-events-pro-week-mobile-events__day--active',
45	};
46
47	/**
48	 * Opens day with mobile events
49	 *
50	 * @since 4.7.6
51	 *
52	 * @param {jQuery} $header jQuery object of day selector day button
53	 * @param {jQuery} $content jQuery object of mobile events container
54	 *
55	 * @return {void}
56	 */
57	obj.openDay = function( $header, $content ) {
58		// only perform accordion actions if $header has aria-controls attribute.
59		var contentId = $header.attr( 'aria-controls' );
60		if ( contentId ) {
61			tribe.events.views.accordion.openAccordion( $header, $content );
62		}
63
64		$header.addClass( obj.selectors.daySelectorDayActiveClass.className() );
65	};
66
67	/**
68	 * Closes day with mobile events
69	 *
70	 * @since 4.7.6
71	 *
72	 * @param {jQuery} $header jQuery object of day selector day button
73	 * @param {jQuery} $content jQuery object of mobile events container
74	 *
75	 * @return {void}
76	 */
77	obj.closeDay = function( $header, $content ) {
78		// only perform accordion actions if $header has aria-controls attribute.
79		var contentId = $header.attr( 'aria-controls' );
80		if ( contentId ) {
81			tribe.events.views.accordion.closeAccordion( $header, $content );
82		}
83
84		$header.removeClass( obj.selectors.daySelectorDayActiveClass.className() );
85		$content.removeClass( obj.selectors.mobileEventsDayActiveClass.className() );
86	};
87
88	/**
89	 * Closes all days
90	 *
91	 * @since 4.7.6
92	 *
93	 * @param {jQuery} $container jQuery object of view container
94	 *
95	 * @return {void}
96	 */
97	obj.closeAllDays = function( $container ) {
98		$container
99			.find( obj.selectors.daySelectorDay )
100			.each( function( index, header ) {
101				var $header = $( header );
102				var contentId = $header.attr( 'aria-controls' );
103
104				/**
105				 * Define empty jQuery object in the case contentId is false or undefined
106				 * so that we don't get selectors like #false or #undefined.
107				 * Also only perform accordion actions if header has aria-controls attribute.
108				 */
109				var $content = $( '' );
110				if ( contentId ) {
111					$content = $container.find( '#' + contentId );
112					tribe.events.views.accordion.closeAccordion( $header, $content );
113				}
114
115				obj.closeDay( $header, $content );
116			} );
117	};
118
119	/**
120	 * Handle click event on day button
121	 *
122	 * @since 4.7.6
123	 *
124	 * @param {Event} event event object of click event
125	 *
126	 * @return {void}
127	 */
128	obj.handleClick = function( event ) {
129		var $container = event.data.container;
130		var $header = $( event.data.target );
131		var contentId = $header.attr( 'aria-controls' );
132
133		/**
134		 * Define empty jQuery object in the case contentId is false or undefined
135		 * so that we don't get selectors like #false or #undefined.
136		 */
137		var $content = $( '' );
138		if ( contentId ) {
139			$content = $container.find( '#' + contentId );
140		}
141
142		obj.closeAllDays( $container );
143		obj.openDay( $header, $content );
144	};
145
146	/**
147	 * Deinitialize day selector
148	 *
149	 * @since 4.7.6
150	 *
151	 * @param {jQuery} $container jQuery object of view container.
152	 *
153	 * @return {void}
154	 */
155	obj.deinitDaySelector = function( $container ) {
156		var $daySelector = $container.find( obj.selectors.daySelector );
157		$daySelector
158			.find( obj.selectors.daySelectorDay )
159			.each( function( index, day ) {
160				$( day ).off( 'click', obj.handleClick );
161			} );
162	};
163
164	/**
165	 * Initialize day selector
166	 *
167	 * @since 4.7.6
168	 *
169	 * @param {jQuery} $container jQuery object of view container.
170	 *
171	 * @return {void}
172	 */
173	obj.initDaySelector = function( $container ) {
174		$container
175			.find( obj.selectors.daySelectorDay )
176			.each( function( index, day ) {
177				$( day ).on( 'click', {
178					target: day,
179					container: $container,
180				}, obj.handleClick );
181			} );
182	};
183
184	/**
185	 * Deinitialize week day selector.
186	 *
187	 * @since 4.7.6
188	 *
189	 * @param  {Event}       event    event object for 'afterSetup.tribeEvents' event
190	 * @param  {jqXHR}       jqXHR    Request object
191	 * @param  {PlainObject} settings Settings that this request was made with
192	 *
193	 * @return {void}
194	 */
195	obj.deinit = function( event, jqXHR, settings ) { // eslint-disable-line no-unused-vars
196		var $container = event.data.container;
197		obj.deinitDaySelector( $container );
198		$container.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit );
199	};
200
201	/**
202	 * Initialize week day selector.
203	 *
204	 * @since 4.7.8
205	 *
206	 * @param {Event}   event      JS event triggered.
207	 * @param {integer} index      jQuery.each index param from 'afterSetup.tribeEvents' event.
208	 * @param {jQuery}  $container jQuery object of view container.
209	 * @param {object}  data       data object passed from 'afterSetup.tribeEvents' event.
210	 *
211	 * @return {void}
212	 */
213	obj.init = function( event, index, $container, data ) {
214		if ( 'week' !== data.slug && 'widget-week' !== data.slug ) {
215			return;
216		}
217
218		obj.initDaySelector( $container );
219		$container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );
220	};
221
222	/**
223	 * Handles the initialization of the week day selector when Document is ready
224	 *
225	 * @since 4.7.6
226	 *
227	 * @return {void}
228	 */
229	obj.ready = function() {
230		$document.on(
231			'afterSetup.tribeEvents',
232			tribe.events.views.manager.selectors.container,
233			obj.init
234		);
235	};
236
237	// Configure on document ready
238	$( obj.ready );
239} )( jQuery, tribe.events.views.weekDaySelector );