File "events-bar-inputs.js"
Full Path: /home/londdqdw/public_html/06/wp-content/plugins/the-events-calendar/src/resources/js/views/events-bar-inputs.js
File size: 4.44 KB
MIME-type: text/plain
Charset: utf-8
/**
* 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 Events Bar Inputs Object in the Global Tribe variable
*
* @since 4.9.4
*
* @type {PlainObject}
*/
tribe.events.views.eventsBarInputs = {};
/**
* 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.eventsBarInputs
*
* @return {void}
*/
( function( $, obj ) {
'use strict';
var $document = $( document );
/**
* Selectors used for configuration and setup
*
* @since 4.9.4
*
* @type {PlainObject}
*/
obj.selectors = {
input: '[data-js="tribe-events-events-bar-input-control-input"]',
inputWrapper: '[data-js="tribe-events-events-bar-input-control"]',
};
/**
* Toggles input class if it has a value
*
* @since 4.9.4
*
* @param {Event} event event object of click event
*
* @return {void}
*/
obj.handleInputChange = function( event ) {
var $input = event.data.target;
var $wrapper = event.data.wrapper;
// Set the focus class if it has content.
$wrapper.toggleClass( event.data.inputClassFocus, '' !== $input.val().trim() );
};
/**
* Unbind events for the events bar input.
*
* @since 4.9.5
*
* @param {jQuery} $container jQuery object of container.
*
* @return {void}
*/
obj.unbindInputEvents = function( $container ) {
$container
.find( obj.selectors.inputWrapper )
.each( function( index, wrapper ) {
var $input = $( wrapper ).find( obj.selectors.input );
// Bail in case we dont find the input.
if ( ! $input.length ) {
return;
}
$input.off();
} );
};
/**
* Bind events for the events bar input, on focus and according to their value.
*
* @since 4.9.4
*
* @param {jQuery} $container jQuery object of container.
*
* @return {void}
*/
obj.bindInputEvents = function( $container ) {
$container
.find( obj.selectors.inputWrapper )
.each( function( index, wrapper ) {
var inputWrapperClass = wrapper
.className
.match( /tribe-events-c-search__input-control--[a-z]+/ );
if ( ! inputWrapperClass ) {
return;
}
var inputWrapperFocus = inputWrapperClass[0] + '-focus';
var $wrapper = $( wrapper );
var $input = $wrapper.find( obj.selectors.input );
// Bail in case we dont find the input.
if ( ! $input.length ) {
return;
}
$wrapper.toggleClass( inputWrapperFocus, '' !== $input.val().trim() );
$input.on(
'change',
{ target: $input, wrapper: $wrapper, inputClassFocus: inputWrapperFocus },
obj.handleInputChange
);
} );
};
/**
* Unbinds events for container
*
* @since 4.9.5
*
* @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.unbindEvents = function( event, jqXHR, settings ) { // eslint-disable-line no-unused-vars
var $container = event.data.container;
obj.unbindInputEvents( $container );
$container.off( 'beforeAjaxSuccess.tribeEvents', obj.unbindEvents );
};
/**
* Binds events for the events bar input change listeners
*
* @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.bindEvents = function( event, index, $container, data ) { // eslint-disable-line no-unused-vars, max-len
var $inputWrapper = $container.find( obj.selectors.inputWrapper );
if ( ! $inputWrapper.length ) {
return;
}
obj.bindInputEvents( $container );
$container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.unbindEvents );
};
/**
* Handles the initialization of the Events Bar Inputs when Document is ready
*
* @since 4.9.4
*
* @return {void}
*/
obj.ready = function() {
$document.on(
'afterSetup.tribeEvents',
tribe.events.views.manager.selectors.container,
obj.bindEvents
);
};
// Configure on document ready
$( obj.ready );
} )( jQuery, tribe.events.views.eventsBarInputs );