https://www.jccsf.org/wp-content/plugins/the-events-calendar/src/r…/js/views/multiday-events.js?ver=5.10.0

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 Multiday Events Object in the Global Tribe variable
13 *
14 * @since 4.9.4
15 *
16 * @type  {PlainObject}
17 */
18tribe.events.views.multidayEvents = {};
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.multidayEvents
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.5
38	 *
39	 * @type {PlainObject}
40	 */
41	obj.selectors = {};
42
43	/**
44	 * Selector prefixes used for creating selectors
45	 *
46	 * @since 4.9.5
47	 *
48	 * @type {PlainObject}
49	 */
50	obj.selectorPrefixes = {
51		month: '.tribe-events-calendar-month__',
52	};
53
54	/**
55	 * Selector suffixes used for creating selectors
56	 *
57	 * @since 4.9.5
58	 *
59	 * @type {PlainObject}
60	 */
61	obj.selectorSuffixes = {
62		multidayEvent: 'multiday-event',
63		hiddenMultidayEvent: 'multiday-event-hidden',
64		multidayEventBarInner: 'multiday-event-bar-inner',
65		multidayEventBarInnerFocus: 'multiday-event-bar-inner--focus',
66		multidayEventBarInnerHover: 'multiday-event-bar-inner--hover',
67	};
68
69	/**
70	 * Find visible multiday event that relates to the hidden multiday event
71	 *
72	 * @since 4.9.5
73	 *
74	 * @param {jQuery} $container jQuery object of view container.
75	 * @param {jQuery} $hiddenMultidayEvent jQuery object of hidden multiday event
76	 *
77	 * @return {jQuery} jQuery object of visible multiday event or false if none found
78	 */
79	obj.findVisibleMultidayEvents = function( $container, $hiddenMultidayEvent ) {
80		var eventId = $hiddenMultidayEvent.closest( obj.selectors.multidayEvent ).data( 'event-id' );
81
82		return $container
83			.find( obj.selectors.multidayEvent + '[data-event-id=' + eventId + ']' )
84	};
85
86	/**
87	 * Toggle hover class on visible multiday event when hidden multiday triggers hover event
88	 *
89	 * @since 4.9.4
90	 *
91	 * @param {Event} event event object
92	 *
93	 * @return {void}
94	 */
95	obj.toggleHoverClass = function( event ) {
96		event.data.target.toggleClass( obj.selectors.multidayEventBarInnerHover.className() );
97	};
98
99	/**
100	 * Toggle focus class on visible multiday event when hidden multiday triggers focus event
101	 *
102	 * @since 4.9.4
103	 *
104	 * @param {Event} event event object
105	 *
106	 * @return {void}
107	 */
108	obj.toggleFocusClass = function( event ) {
109		event.data.target.toggleClass( obj.selectors.multidayEventBarInnerFocus.className() );
110	};
111
112	/**
113	 * Unbinds events for hover and focus of hidden multiday events.
114	 *
115	 * @since 4.9.5
116	 *
117	 * @param {jQuery} $container jQuery object of view container.
118	 *
119	 * @return {void}
120	 */
121	obj.unbindMultidayEvents = function( $container ) {
122		var $hiddenMultidayEvents = $container.find( obj.selectors.hiddenMultidayEvent );
123
124		$hiddenMultidayEvents.each( function( hiddenIndex, hiddenMultidayEvent ) {
125			$( hiddenMultidayEvent ).off();
126		} );
127	};
128
129	/**
130	 * Binds events for hover and focus of hidden multiday events.
131	 *
132	 * @since 4.9.4
133	 *
134	 * @param {jQuery} $container jQuery object of view container.
135	 *
136	 * @return {void}
137	 */
138	obj.bindMultidayEvents = function( $container ) {
139		var $hiddenMultidayEvents = $container.find( obj.selectors.hiddenMultidayEvent );
140
141		$hiddenMultidayEvents.each( function( hiddenIndex, hiddenMultidayEvent ) {
142			var $hiddenMultidayEvent = $( hiddenMultidayEvent );
143			var $visibleMultidayEvents = obj.findVisibleMultidayEvents( $container, $hiddenMultidayEvent ); // eslint-disable-line max-len
144
145			$visibleMultidayEvents.each( function( visibleIndex, visibleMultidayEvent ) {
146				var $visibleMultidayEvent = $( visibleMultidayEvent );
147				var $visiblemultidayEventBarInner = $visibleMultidayEvent.find( obj.selectors.multidayEventBarInner ); // eslint-disable-line max-len
148
149				$hiddenMultidayEvent
150					.on(
151						'mouseenter mouseleave',
152						{ target: $visiblemultidayEventBarInner },
153						obj.toggleHoverClass
154					)
155					.on( 'focus blur', { target: $visiblemultidayEventBarInner }, obj.toggleFocusClass );
156			} );
157		} );
158	};
159
160	/**
161	 * Resets selectors to empty object
162	 *
163	 * @since 4.9.5
164	 *
165	 * @return {void}
166	 */
167	obj.deinitSelectors = function() {
168		obj.selectors = {};
169	};
170
171	/**
172	 * Initializes selectors based on view slug
173	 *
174	 * @since 4.9.5
175	 *
176	 * @param {string} viewSlug slug of view
177	 *
178	 * @return {void}
179	 */
180	obj.initSelectors = function( viewSlug ) {
181		var selectorPrefix = obj.selectorPrefixes[ viewSlug ];
182
183		Object
184			.keys( obj.selectorSuffixes )
185			.forEach( function( key ) {
186				obj.selectors[ key ] = selectorPrefix + obj.selectorSuffixes[ key ];
187			} );
188	};
189
190	/**
191	 * Unbinds events for container.
192	 *
193	 * @since 4.9.5
194	 *
195	 * @param  {Event}       event    event object for 'beforeAjaxSuccess.tribeEvents' event
196	 * @param  {jqXHR}       jqXHR    Request object
197	 * @param  {PlainObject} settings Settings that this request was made with
198	 *
199	 * @return {void}
200	 */
201	obj.unbindEvents = function( event, jqXHR, settings ) { // eslint-disable-line no-unused-vars
202		var $container = event.data.container;
203		obj.deinitSelectors();
204		obj.unbindMultidayEvents( $container );
205		$container.off( 'beforeAjaxSuccess.tribeEvents', obj.unbindEvents );
206	};
207
208	/**
209	 * Binds events for container.
210	 *
211	 * @since 4.9.9
212	 *
213	 * @param {jQuery}  $container jQuery object of view container.
214	 * @param {object}  data       data object passed from 'afterSetup.tribeEvents' event.
215	 *
216	 * @return {void}
217	 */
218	obj.bindEvents = function( $container, data ) {
219		var viewSlug = data.slug;
220		var allowedViews = $container.data( 'tribeEventsMultidayEventsAllowedViews' );
221
222		if ( -1 === allowedViews.indexOf( viewSlug ) ) {
223			return;
224		}
225
226		obj.initSelectors( viewSlug );
227		obj.bindMultidayEvents( $container );
228		$container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.unbindEvents );
229	};
230
231	/**
232	 * Initialize allowed views
233	 *
234	 * @since 4.9.9
235	 *
236	 * @param {jQuery} $container jQuery object of view container.
237	 *
238	 * @return {void}
239	 */
240	obj.initAllowedViews = function( $container ) {
241		$container.trigger( 'beforeMultidayEventsInitAllowedViews.tribeEvents', [ $container ] );
242
243		var theme = [ 'month' ];
244		$container.data( 'tribeEventsMultidayEventsAllowedViews', theme );
245
246		$container.trigger( 'afterMultidayEventsInitAllowedViews.tribeEvents', [ $container ] );
247	};
248
249	/**
250	 * Initialize multiday events.
251	 *
252	 * @since 4.9.9
253	 *
254	 * @param {Event}   event      event object for 'afterSetup.tribeEvents' event
255	 * @param {integer} index      jQuery.each index param from 'afterSetup.tribeEvents' event.
256	 * @param {jQuery}  $container jQuery object of view container.
257	 * @param {object}  data       data object passed from 'afterSetup.tribeEvents' event.
258	 *
259	 * @return {void}
260	 */
261	obj.init = function( event, index, $container, data ) {
262		obj.initAllowedViews( $container );
263		obj.bindEvents( $container, data );
264	};
265
266	/**
267	 * Handles the initialization of multiday events when Document is ready
268	 *
269	 * @since 4.9.4
270	 *
271	 * @return {void}
272	 */
273	obj.ready = function() {
274		$document.on(
275			'afterSetup.tribeEvents',
276			tribe.events.views.manager.selectors.container,
277			obj.init
278		);
279	};
280
281	// Configure on document ready
282	$( obj.ready );
283} )( jQuery, tribe.events.views.multidayEvents );