%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* Makes sure we have all the required levels on the Tribe Object
*
* @since 4.9.4
*
* @type {PlainObject}
*/
tribe.events = tribe.events || {};
tribe.events.views = tribe.events.views || {};
/**
* Configures Views Object in the Global Tribe variable
*
* @since 4.9.4
*
* @type {PlainObject}
*/
tribe.events.views.viewSelector = {};
/**
* Initializes in a Strict env the code that manages the Event Views
*
* @since 4.9.4
*
* @param {PlainObject} $ jQuery
* @param {PlainObject} obj tribe.events.views.viewSelector
*
* @return {void}
*/
( function( $, obj ) {
'use strict';
var $document = $( document );
/**
* Selectors used for configuration and setup
*
* @since 4.9.7
*
* @type {PlainObject}
*/
obj.selectors = {
viewSelector: '[data-js="tribe-events-view-selector"]',
viewSelectorTabsClass: '.tribe-events-c-view-selector--tabs',
viewSelectorButton: '[data-js="tribe-events-view-selector-button"]',
viewSelectorButtonActiveClass: '.tribe-events-c-view-selector__button--active',
viewSelectorListContainer: '[data-js="tribe-events-view-selector-list-container"]',
};
/**
* Deinitialize accordion based on header and content
*
* @since 4.9.7
*
* @param {jQuery} $header jQuery object of header
* @param {jQuery} $content jQuery object of contents
*
* @return {void}
*/
obj.deinitAccordion = function( $header, $content ) {
tribe.events.views.accordion.deinitAccordion( 0, $header );
tribe.events.views.accordion.deinitAccordionA11yAttrs( $header, $content );
$content.css( 'display', '' );
};
/**
* Initialize accordion based on header and content
*
* @since 4.9.7
*
* @param {jQuery} $container jQuery object of view container
* @param {jQuery} $header jQuery object of header
* @param {jQuery} $content jQuery object of contents
*
* @return {void}
*/
obj.initAccordion = function( $container, $header, $content ) {
tribe.events.views.accordion.initAccordion( $container )( 0, $header );
tribe.events.views.accordion.initAccordionA11yAttrs( $header, $content );
};
/**
* Deinitialize view selector accordion
*
* @since 4.9.7
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.deinitViewSelectorAccordion = function( $container ) {
var $viewSelectorButton = $container.find( obj.selectors.viewSelectorButton );
var $viewSelectorListContainer = $container.find( obj.selectors.viewSelectorListContainer );
obj.deinitAccordion( $viewSelectorButton, $viewSelectorListContainer );
$viewSelectorButton.removeClass( obj.selectors.viewSelectorButtonActiveClass.className() );
};
/**
* Initialize view selector accordion
*
* @since 4.9.7
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.initViewSelectorAccordion = function( $container ) {
var $viewSelectorButton = $container.find( obj.selectors.viewSelectorButton );
var $viewSelectorListContainer = $container.find( obj.selectors.viewSelectorListContainer );
obj.initAccordion( $container, $viewSelectorButton, $viewSelectorListContainer );
};
/**
* Initializes view selector state
*
* @since 4.9.8
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.initState = function( $container ) {
var $viewSelector = $container.find( obj.selectors.viewSelector );
var state = {
mobileInitialized: false,
desktopInitialized: false,
};
$viewSelector.data( 'tribeEventsState', state );
};
/**
* Deinitializes view selector
*
* @since 4.9.7
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.deinitViewSelector = function( $container ) {
obj.deinitViewSelectorAccordion( $container );
};
/**
* Initializes view selector
*
* @since 4.9.8
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.initViewSelector = function( $container ) {
var $viewSelector = $container.find( obj.selectors.viewSelector );
if ( $viewSelector.length ) {
var state = $viewSelector.data( 'tribeEventsState' );
var isTabs = $viewSelector.hasClass( obj.selectors.viewSelectorTabsClass.className() );
// If view selector is tabs (has 3 or less options)
if ( isTabs ) {
var containerState = $container.data( 'tribeEventsState' );
var isMobile = containerState.isMobile;
// If viewport is mobile and mobile state is not initialized
if ( isMobile && ! state.mobileInitialized ) {
obj.initViewSelectorAccordion( $container );
state.desktopInitialized = false;
state.mobileInitialized = true;
$viewSelector.data( 'tribeEventsState', state );
// If viewport is desktop and desktop state is not initialized
} else if ( ! isMobile && ! state.desktopInitialized ) {
obj.deinitViewSelectorAccordion( $container );
state.mobileInitialized = false;
state.desktopInitialized = true;
$viewSelector.data( 'tribeEventsState', state );
}
/**
* If view selector is not tabs (has more than 3 options), it is always an accordion.
* Check if both mobile and desktop states are initialized.
* If mobile and desktop states are not initialized:
*/
} else if ( ! state.mobileInitialized && ! state.desktopInitialized ) {
obj.initViewSelectorAccordion( $container );
state.desktopInitialized = true;
state.mobileInitialized = true;
$viewSelector.data( 'tribeEventsState', state );
}
}
};
/**
* Toggles active class on view selector button
*
* @since 4.9.7
*
* @param {Event} event event object for click event
*
* @return {void}
*/
obj.handleViewSelectorButtonClick = function( event ) {
event.data.target.toggleClass( obj.selectors.viewSelectorButtonActiveClass.className() );
};
/**
* Handles click event on document
*
* @since 4.9.7
*
* @param {Event} event event object for click event
*
* @return {void}
*/
obj.handleClick = function( event ) {
var isParentViewSelector = Boolean( $( event.target ).closest( obj.selectors.viewSelector ).length );
if ( ! isParentViewSelector ) {
var $container = event.data.container;
var $viewSelector = $container.find( obj.selectors.viewSelector );
var $viewSelectorButton = $viewSelector.find( obj.selectors.viewSelectorButton );
if ( $viewSelectorButton.hasClass( obj.selectors.viewSelectorButtonActiveClass.className() ) ) {
var $viewSelectorListContainer = $viewSelector.find( obj.selectors.viewSelectorListContainer );
$viewSelectorButton.removeClass( obj.selectors.viewSelectorButtonActiveClass.className() );
tribe.events.views.accordion.closeAccordion( $viewSelectorButton, $viewSelectorListContainer );
}
}
};
/**
* Handles resize event
*
* @since 4.9.7
*
* @param {Event} event event object for 'resize.tribeEvents' event
*
* @return {void}
*/
obj.handleResize = function( event ) {
obj.initViewSelector( event.data.container );
};
/**
* Unbinds events for container
*
* @since 4.9.7
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.unbindEvents = function( $container ) {
$document
.off( 'click', obj.handleClick );
$container
.off( 'resize.tribeEvents', obj.handleResize )
.find( obj.selectors.viewSelectorButton )
.off( 'click', obj.handleViewSelectorButtonClick );
};
/**
* Binds events for container
*
* @since 4.9.7
*
* @param {jQuery} $container jQuery object of view container
*
* @return {void}
*/
obj.bindEvents = function( $container ) {
var $viewSelectorButton = $container.find( obj.selectors.viewSelectorButton );
$document.on( 'click', { container: $container }, obj.handleClick );
$container.on( 'resize.tribeEvents', { container: $container }, obj.handleResize );
$viewSelectorButton.on( 'click', { target: $viewSelectorButton }, obj.handleViewSelectorButtonClick );
};
/**
* Deinitialize view selector JS
*
* @since 4.9.7
*
* @param {Event} event event object for 'beforeAjaxSuccess.tribeEvents' event
* @param {jqXHR} jqXHR Request object
* @param {PlainObject} settings Settings that this request was made with
*
* @return {void}
*/
obj.deinit = function( event, jqXHR, settings ) {
var $container = event.data.container;
obj.deinitViewSelector( $container );
obj.unbindEvents( $container );
$container.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit );
};
/**
* Initialize view selector JS
*
* @since 4.9.8
*
* @param {Event} event event object for 'afterSetup.tribeEvents' event
* @param {integer} index jQuery.each index param from 'afterSetup.tribeEvents' event
* @param {jQuery} $container jQuery object of view container
* @param {object} data data object passed from 'afterSetup.tribeEvents' event
*
* @return {void}
*/
obj.init = function( event, index, $container, data ) {
var $viewSelector = $container.find( obj.selectors.viewSelector );
if ( ! $viewSelector.length ) {
return;
}
obj.initState( $container );
obj.initViewSelector( $container );
obj.bindEvents( $container );
$container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );
};
/**
* Handles the initialization of the view selector when Document is ready
*
* @since 4.9.4
*
* @return {void}
*/
obj.ready = function() {
$document.on( 'afterSetup.tribeEvents', tribe.events.views.manager.selectors.container, obj.init );
};
// Configure on document ready
$( obj.ready );
} )( jQuery, tribe.events.views.viewSelector );
Zerion Mini Shell 1.0