http://www.scphn.org/wp-content/plugins/the-events-calendar/src/re…/js/views/month-mobile-events.js?ver=5.10.1

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 Month Mobile Events Object in the Global Tribe variable
13 *
14 * @since 4.9.4
15 *
16 * @type   {PlainObject}
17 */
18tribe.events.views.monthMobileEvents = {};
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.monthMobileEvents
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.8
38	 *
39	 * @type {PlainObject}
40	 */
41	obj.selectors = {
42		calendar: '[data-js="tribe-events-month-grid"]',
43		calendarDay: '[data-js="tribe-events-calendar-month-day-cell-mobile"]',
44		calendarDaySelectedClass: '.tribe-events-calendar-month__day-cell--selected',
45		mobileEvents: '[data-js="tribe-events-calendar-month-mobile-events"]',
46		mobileEventsMobileDayShowClass: '.tribe-events-calendar-month-mobile-events__mobile-day--show',
47		mobileEventsDefaultNotices: '.tribe-events-header__messages--mobile:not(.tribe-events-header__messages--day)', // eslint-disable-line max-len
48	};
49
50	/**
51	 * Closes all mobile events
52	 *
53	 * @since 4.9.4
54	 *
55	 * @param {jQuery} $container jQuery object of view container
56	 *
57	 * @return {void}
58	 */
59	obj.closeAllEvents = function( $container ) {
60		$container.find( obj.selectors.calendarDay ).each( function( index, header ) {
61			var $header = $( header );
62			var contentId = $header.attr( 'aria-controls' );
63
64			/**
65			 * Define empty jQuery object in the case contentId is false or undefined
66			 * so that we don't get selectors like #false or #undefined.
67			 * Also only perform accordion actions if header has aria-controls attribute.
68			 */
69			var $content = $( '' );
70			if ( contentId ) {
71				$content = $container.find( '#' + contentId );
72				tribe.events.views.accordion.closeAccordion( $header, $content );
73			}
74
75			obj.closeMobileEvents( $header, $content );
76		} );
77	};
78
79
80	/**
81	 * Handle the display state of the default "No events found in month" messages.
82	 *
83	 * @param {jQuery} $container jQuery object of view container
84	 * @param {bool} showDefaultNotices Whether to show or hide the default notices, if no day is selected.
85	 */
86	obj.handleMobileDayClick = function( $container, showDefaultNotices ) {
87		var $defaultNotices = $container.find( obj.selectors.mobileEventsDefaultNotices );
88		var daySelected = $container.find( obj.selectors.mobileEventsMobileDayShowClass ).length > 0;
89
90		if ( showDefaultNotices && ! daySelected ) {
91			$defaultNotices.removeClass( 'tribe-common-a11y-hidden' );
92		} else {
93			$defaultNotices.addClass( 'tribe-common-a11y-hidden' );
94		}
95	};
96
97	/**
98	 * Opens mobile events
99	 *
100	 * @since 4.9.8
101	 *
102	 * @param {jQuery} $header jQuery object of mobile day button
103	 * @param {jQuery} $content jQuery object of mobile events container
104	 *
105	 * @return {void}
106	 */
107	obj.openMobileEvents = function( $header, $content ) {
108		// only perform accordion actions if $header has aria-controls attribute.
109		var contentId = $header.attr( 'aria-controls' );
110		if ( contentId ) {
111			tribe.events.views.accordion.openAccordion( $header, $content );
112		}
113
114		$header.addClass( obj.selectors.calendarDaySelectedClass.className() );
115		$content.addClass( obj.selectors.mobileEventsMobileDayShowClass.className() );
116	};
117
118	/**
119	 * Closes mobile events
120	 *
121	 * @since 4.9.8
122	 *
123	 * @param {jQuery} $header jQuery object of mobile day button
124	 * @param {jQuery} $content jQuery object of mobile events container
125	 *
126	 * @return {void}
127	 */
128	obj.closeMobileEvents = function( $header, $content ) {
129		// only perform accordion actions if $header has aria-controls attribute.
130		var contentId = $header.attr( 'aria-controls' );
131		if ( contentId ) {
132			tribe.events.views.accordion.closeAccordion( $header, $content );
133		}
134
135		$header.removeClass( obj.selectors.calendarDaySelectedClass.className() );
136		$content.removeClass( obj.selectors.mobileEventsMobileDayShowClass.className() );
137	};
138
139	/**
140	 * Toggles mobile events on mobile day click
141	 *
142	 * @since 4.9.4
143	 *
144	 * @param {Event} event event object of click event
145	 *
146	 * @return {void}
147	 */
148	obj.toggleMobileEvents = function( event ) {
149		var $container = event.data.container;
150		var $header = $( event.data.target );
151		var contentId = $header.attr( 'aria-controls' );
152
153		/**
154		 * Define empty jQuery object in the case contentId is false or undefined
155		 * so that we don't get selectors like #false or #undefined.
156		 */
157		var $content = $( '' );
158		if ( contentId ) {
159			$content = $container.find( '#' + contentId );
160		}
161
162		if ( $header.hasClass( obj.selectors.calendarDaySelectedClass.className() ) ) {
163			obj.closeMobileEvents( $header, $content );
164			obj.handleMobileDayClick( $container, true );
165		} else {
166			obj.closeAllEvents( $container );
167			obj.handleMobileDayClick( $container, false );
168			obj.openMobileEvents( $header, $content );
169		}
170	};
171
172	/**
173	 * Unbinds events for calendar
174	 *
175	 * @since 4.9.4
176	 *
177	 * @param {jQuery} $container jQuery object of view container
178	 *
179	 * @return {void}
180	 */
181	obj.unbindCalendarEvents = function( $container ) {
182		var $calendar = $container.find( obj.selectors.calendar );
183		$calendar
184			.find( obj.selectors.calendarDay )
185			.each( function( index, day ) {
186				$( day ).off( 'click', obj.toggleMobileEvents );
187			} );
188	};
189
190	/**
191	 * Binds events for calendar
192	 *
193	 * @since 4.9.5
194	 *
195	 * @param {jQuery} $container jQuery object of view container
196	 *
197	 * @return {void}
198	 */
199	obj.bindCalendarEvents = function( $container ) {
200		var $calendar = $container.find( obj.selectors.calendar );
201		$calendar
202			.find( obj.selectors.calendarDay )
203			.each( function( index, day ) {
204				$( day ).on( 'click', {
205					target: day,
206					container: $container,
207					calendar: $calendar,
208				}, obj.toggleMobileEvents );
209			} );
210	};
211
212	/**
213	 * Initializes mobile events state
214	 *
215	 * @since 4.9.8

216	 *
217	 * @param {jQuery} $container jQuery object of view container
218	 *
219	 * @return {void}
220	 */
221	obj.initState = function( $container ) {
222		var $mobileEvents = $container.find( obj.selectors.mobileEvents );
223		var containerState = $container.data( 'tribeEventsState' );
224		var isMobile = containerState.isMobile;
225
226		var state = {
227			desktopInitialized: ! isMobile,
228		};
229
230		$mobileEvents.data( 'tribeEventsState', state );
231	};
232
233	/**
234	 * Handles resize event
235	 *
236	 * @since 4.9.8
237	 *
238	 * @param {Event} event event object for 'beforeAjaxSuccess.tribeEvents' event
239	 *
240	 * @return {void}
241	 */
242	obj.handleResize = function( event ) {
243		var $container = event.data.container;
244		var $mobileEvents = $container.find( obj.selectors.mobileEvents );
245		var state = $mobileEvents.data( 'tribeEventsState' );
246		var containerState = $container.data( 'tribeEventsState' );
247		var isMobile = containerState.isMobile;
248
249		if ( ! isMobile ) {
250			if ( ! state.desktopInitialized ) {
251				obj.closeAllEvents( $container );
252				state.desktopInitialized = true;
253			}
254		} else {
255			obj.handleMobileDayClick( $container, true );
256
257			if ( state.desktopInitialized ) {
258				state.desktopInitialized = false;
259			}
260		}
261
262		$mobileEvents.data( 'tribeEventsState', state );
263	};
264
265	/**
266	 * Deinitializes mobile days
267	 *
268	 * @since 4.9.8
269	 *
270	 * @param  {Event}       event    event object for 'beforeAjaxSuccess.tribeEvents' event
271	 * @param  {jqXHR}       jqXHR    Request object
272	 * @param  {PlainObject} settings Settings that this request was made with
273	 *
274	 * @return {void}
275	 */
276	obj.deinit = function( event, jqXHR, settings ) { // eslint-disable-line no-unused-vars
277		var $container = event.data.container;
278		obj.unbindCalendarEvents( $container );
279		$container
280			.off( 'resize.tribeEvents', obj.handleResize )
281			.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit );
282	};
283
284	/**
285	 * Initializes mobile days
286	 *
287	 * @since 4.9.8
288	 *
289	 * @param  {Event}   event      event object for 'afterSetup.tribeEvents' event
290	 * @param  {integer} index      jQuery.each index param from 'afterSetup.tribeEvents' event
291	 * @param  {jQuery}  $container jQuery object of view container
292	 * @param  {object}  data       data object passed from 'afterSetup.tribeEvents' event
293	 *
294	 * @return {void}
295	 */
296	obj.init = function( event, index, $container, data ) { // eslint-disable-line no-unused-vars
297		var $mobileEvents = $container.find( obj.selectors.mobileEvents );
298
299		if ( ! $mobileEvents.length ) {
300			return;
301		}
302
303		obj.handleMobileDayClick( $container, true );
304		obj.initState( $container );
305		obj.bindCalendarEvents( $container );
306		$container
307			.on( 'resize.tribeEvents', { container: $container }, obj.handleResize )
308			.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );
309	};
310
311	/**
312	 * Handles the initialization of the mobile days when Document is ready
313	 *
314	 * @since 4.9.4
315	 *
316	 * @return {void}
317	 */
318	obj.ready = function() {
319		$document.on(
320			'afterSetup.tribeEvents',
321			tribe.events.views.manager.selectors.container,
322			obj.init
323		);
324	};
325
326	// Configure on document ready
327	$( obj.ready );
328} )( jQuery, tribe.events.views.monthMobileEvents );