";
},
option: function (item, escape) {
let meta = '';
if( typeof(item.address) !== 'undefined' ) {
if (item.address !== '' && item.town !== '') {
meta = escape(item.address) + ', ' + escape(item.town);
} else if (item.address !== '') {
meta = escape(item.address);
} else if (item.town !== '') {
meta = escape(item.town);
}
}
return '
' +
'
' + escape(item.label) + '
' +
'
' + meta + '
' +
'
';
},
},
load: function (query, callback) {
if (!query.length) return callback();
$.ajax({
url: EM.locationajaxurl,
data: {
q : query,
method : 'selectize'
},
dataType : 'json',
type: "POST",
error: function () {
callback();
},
success: function ( data ) {
callback( data );
},
});
},
onItemAdd : function (value, data) {
this.clearCache();
var option = this.options[value];
if( value === option.label ){
jQuery('input#location-address').focus();
return;
}
jQuery("input#location-name" ).val(option.value);
jQuery('input#location-address').val(option.address);
jQuery('input#location-town').val(option.town);
jQuery('input#location-state').val(option.state);
jQuery('input#location-region').val(option.region);
jQuery('input#location-postcode').val(option.postcode);
jQuery('input#location-latitude').val(option.latitude);
jQuery('input#location-longitude').val(option.longitude);
if( typeof(option.country) === 'undefined' || option.country === '' ){
jQuery('select#location-country option:selected').removeAttr('selected');
}else{
jQuery('select#location-country option[value="'+option.country+'"]').attr('selected', 'selected');
}
jQuery("input#location-id" ).val(option.id).trigger('change');
jQuery('div.em-location-data input, div.em-location-data select').prop('readonly', true).css('opacity', '0.5');
jQuery('#em-location-reset').show();
jQuery('#em-location-search-tip').hide();
// selectize stuff
this.disable();
this.$control.blur();
jQuery('div.em-location-data [class^="em-selectize"]').each( function(){
if( 'selectize' in this ) {
this.selectize.disable();
}
})
// trigger hook
jQuery(document).triggerHandler('em_locations_autocomplete_selected', [event, option]);
}
});
jQuery('#em-location-reset a').on('click', function(){
jQuery('div.em-location-data input, div.em-location-data select').each( function(){
this.style.removeProperty('opacity')
this.readOnly = false;
if( this.type == 'text' ) this.value = '';
});
jQuery('div.em-location-data option:selected').removeAttr('selected');
jQuery('input#location-id').val('');
jQuery('#em-location-reset').hide();
jQuery('#em-location-search-tip').show();
jQuery('#em-map').hide();
jQuery('#em-map-404').show();
if(typeof(marker) !== 'undefined'){
marker.setPosition(new google.maps.LatLng(0, 0));
infoWindow.close();
marker.setDraggable(true);
}
// clear selectize autocompleter values, re-enable any selectize ddms
let $selectize = $("div.em-location-data input#location-name")[0].selectize;
$selectize.enable();
$selectize.clear(true);
$selectize.clearOptions();
jQuery('div.em-location-data select.em-selectize').each( function(){
if( 'selectize' in this ){
this.selectize.enable();
this.selectize.clear(true);
}
});
// return true
return false;
});
if( jQuery('input#location-id').val() != '0' && jQuery('input#location-id').val() != '' ){
jQuery('div.em-location-data input, div.em-location-data select').each( function(){
this.style.setProperty('opacity','0.5', 'important')
this.readOnly = true;
});
jQuery('#em-location-reset').show();
jQuery('#em-location-search-tip').hide();
jQuery('div.em-location-data select.em-selectize, div.em-location-data input.em-selectize-autocomplete').each( function(){
if( 'selectize' in this ) this.selectize.disable();
});
}
}
// trigger selectize loader
em_setup_ui_elements(document);
/* Done! */
$(document).triggerHandler('em_javascript_loaded');
});
/**
* Sets up external UI libraries and adds them to elements within the supplied container. This can be a jQuery or DOM element, subfunctions will either handle accordingly or this function will ensure it's the right one to pass on..
* @param jQuery|DOMElement container
*/
function em_setup_ui_elements ( $container ) {
let container = ( $container instanceof jQuery ) ? $container[0] : $container;
// Selectize
em_setup_selectize( $container );
// Tippy
em_setup_tippy( $container );
// Moment JS
em_setup_moment_times( $container );
// Date & Time Pickers
if( container.querySelector('.em-datepicker') ){
em_setup_datepicker( container );
}
if( container.querySelector(".em-time-input") ){
em_setup_timepicker( container );
}
// Phone numbers
em_setup_phone_inputs( container );
// let other things hook in
document.dispatchEvent( new CustomEvent( 'em_setup_ui_elements', { detail: { container : container } } ) );
}
/**
* Unsetup containers with UI elements, primarily useful if intending on duplicating an element which would require re-setup.
* @param $container
*/
function em_unsetup_ui_elements( $container ) {
let container = $container instanceof jQuery ? $container[0] : $container;
em_unsetup_selectize( container );
em_unsetup_tippy( container );
em_unsetup_datepicker( container );
em_unsetup_timepicker( container );
em_unsetup_phone_inputs( container );
// let other things hook in
document.dispatchEvent( new CustomEvent( 'em_unsetup_ui_elements', { detail: { container : container } } ) );
}
/* Local JS Timezone related placeholders */
/* Moment JS Timzeone PH */
function em_setup_moment_times( container_element ) {
container = jQuery(container_element);
if( window.moment ){
var replace_specials = function( day, string ){
// replace things not supported by moment
string = string.replace(/##T/g, Intl.DateTimeFormat().resolvedOptions().timeZone);
string = string.replace(/#T/g, "GMT"+day.format('Z'));
string = string.replace(/###t/g, day.utcOffset()*-60);
string = string.replace(/##t/g, day.isDST());
string = string.replace(/#t/g, day.daysInMonth());
return string;
};
container.find('.em-date-momentjs').each( function(){
// Start Date
var el = jQuery(this);
var day_start = moment.unix(el.data('date-start'));
var date_start_string = replace_specials(day_start, day_start.format(el.data('date-format')));
if( el.data('date-start') !== el.data('date-end') ){
// End Date
var day_end = moment.unix(el.data('date-end'));
var day_end_string = replace_specials(day_start, day_end.format(el.data('date-format')));
// Output
var date_string = date_start_string + el.data('date-separator') + day_end_string;
}else{
var date_string = date_start_string;
}
el.text(date_string);
});
var get_date_string = function(ts, format){
let date = new Date(ts * 1000);
let minutes = date.getMinutes();
if( format == 24 ){
let hours = date.getHours();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours + ':' + minutes;
}else{
let hours = date.getHours() % 12;
let ampm = hours >= 12 ? 'PM' : 'AM';
if( hours === 0 ) hours = 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
return hours + ':' + minutes + ' ' + ampm;
}
}
container.find('.em-time-localjs').each( function(){
var el = jQuery(this);
var strTime = get_date_string( el.data('time'), el.data('time-format') );
if( el.data('time-end') ){
var separator = el.data('time-separator') ? el.data('time-separator') : ' - ';
strTime = strTime + separator + get_date_string( el.data('time-end'), el.data('time-format') );
}
el.text(strTime);
});
}
};
function em_load_jquery_css( wrapper = false ){
if( EM.ui_css && jQuery('link#jquery-ui-em-css').length == 0 ){
var script = document.createElement("link");
script.id = 'jquery-ui-em-css';
script.rel = "stylesheet";
script.href = EM.ui_css;
document.body.appendChild(script);
if( wrapper ){
em_setup_jquery_ui_wrapper();
}
}
}
function em_setup_jquery_ui_wrapper(){
if( jQuery('#em-jquery-ui').length === 0 ){
jQuery('body').append('
');
}
}
/* Useful function for adding the em_ajax flag to a url, regardless of querystring format */
var em_ajaxify = function(url){
if ( url.search('em_ajax=0') != -1){
url = url.replace('em_ajax=0','em_ajax=1');
}else if( url.search(/\?/) != -1 ){
url = url + "&em_ajax=1";
}else{
url = url + "?em_ajax=1";
}
return url;
};
// load externals after DOM load, supplied by EM.assets, only if selector matches
var em_setup_scripts = function( $container = false ) {
let container = $container || document;
if( EM && 'assets' in EM ) {
let baseURL = EM.url + '/includes/external/';
for ( const [selector, assets] of Object.entries(EM.assets) ) {
// load scripts if one element exists for selector
if ( container.querySelector(selector) ) {
if ('css' in assets) {
// Iterate through assets.css object and add stylesheet to head
for (const [id, value] of Object.entries(assets.css)) {
// Check if the stylesheet with the given ID already exists
if (!document.getElementById( id + '-css' )) {
// Create a new link element for the stylesheet
const link = document.createElement('link');
link.id = id + '-css';
link.rel = 'stylesheet';
link.href = value.match(/^http/) ? value : baseURL + value;
// Append the stylesheet to the document head
document.head.appendChild(link);
}
}
}
if ('js' in assets) {
// add a tracking of all assets to load, and execute loaded hooks after all assets are loaded and in order of dependence
let loaded = {};
let loadedListener = function( id ) {
loaded[id] = false;
if ( Object.entries( loaded ).length === Object.entries( assets.js ).length ) {
// all items for this asset loaded, so we go through all the entries and fire their events
for ( id of Object.keys( loaded ) ) {
loadAsset( id )
}
}
};
let loadAsset = function( id ) {
if ( !loaded[id] ) {
let asset = assets.js[id];
if ( typeof asset === 'object' && 'event' in asset ) {
if ( asset?.requires) {
loadAsset( asset.requires );
}
document.dispatchEvent( new CustomEvent( asset.event, {
detail: {
container: container,
}
} ) );
}
loaded[id] = true;
}
};
// Iterate through assets.js object and add script to head
for ( const [ id, value ] of Object.entries(assets.js)) {
// Check if the script with the given ID already exists
if ( !document.getElementById( id + '-js' ) ) {
// Create a new script element for the JavaScript file
const script = document.createElement('script');
script.id = id + '-js';
script.async = true;
if ( typeof value === 'object' ) {
// add locale data
if ( 'locale' in value && value.locale ) {
script.dataset.locale = value.locale;
}
script.src = value.url.match(/^http/g) ? value.url : baseURL + value.url;
} else {
script.src = value.match(/^http/g) ? value : baseURL + value;
}
// listen for loads so we execute the real onload hooks once all files are loaded (or errorred out)
script.onload = () => loadedListener(id);
script.onerror = () => loadedListener(id);
// Append the script to the document head
document.head.appendChild(script);
}
}
}
}
}
}
}
document.addEventListener('DOMContentLoaded', () => em_setup_scripts( document ));
document.addEventListener('DOMContentLoaded', function() {
// load event recurrence data
document.querySelectorAll('.em-recurrence-sets').forEach( function( recurrenceSets ) {
recurrenceSets.querySelector('.em-recurrence-set[data-type="include"]:first-child').dataset.primary = "1"; // set primary recurrence flag for JS (CSS uses selector instead)
document.dispatchEvent( new CustomEvent('em_event_editor_recurrences', { detail: { recurrenceSets : recurrenceSets } } ) );
});
// Event Status Warning
document.querySelectorAll('select[name="event_active_status"]').forEach(select => {
select.addEventListener('change', function (event) {
if ( select.value === '0' && !confirm( EM.event_cancellations.warning.replace(/\\n/g, '\n') ) ) {
event.preventDefault();
}
});
});
// Handle the recurring/repeating event selection and initialize showing/hiding relevant recurring sections
document.querySelectorAll( '.event_type' ).forEach( eventType => {
const form = eventType.closest( 'form' );
eventType.addEventListener( 'change', function () {
// When set to recurring or repeating, sync the main event data to primary recurrence set
if ( handleRecurring() ) {
let eventDateTimes = form.querySelector('.event-form-when');
let eventDatePicker = eventDateTimes.querySelector('.em-datepicker.em-event-dates');
let selectedDates;
if ( eventDatePicker.classList.contains('em-datepicker-until') ) {
selectedDates = [
eventDatePicker.querySelector('.em-date-input-start.flatpickr-input')._flatpickr.selectedDates[0],
eventDatePicker.querySelector('.em-date-input-end.flatpickr-input')._flatpickr.selectedDates[0]
];
} else {
selectedDates = eventDatePicker.querySelector('.em-date-input.flatpickr-input')._flatpickr.selectedDates;
}
let eventTimeRange = eventDateTimes.querySelector('.event-times.em-time-range');
// we need to get jQuery elements to handle the timepicker
let eventStartTime = eventTimeRange.querySelector('.em-time-input.em-time-start');
let eventEndTime = eventTimeRange.querySelector('.em-time-input.em-time-end');
let eventAllDay = eventTimeRange.querySelector('input.em-time-all-day');
let timezone = eventDateTimes.querySelector('select.event_timezone')?.value;
let eventStatus = eventDateTimes.querySelector('select.event_active_status')?.value;
let setDateTimes = false;
// here, we're copying over all the regular event date/time/timezone data into the primary recurrence so there's some UI continuity in case user started adding dates before selecting recurring type
let recurrenceSet = form.querySelector('.em-recurrence-set[data-primary="1"]');
if ( recurrenceSet ) {
// copy over the times first - if not the datepicker triggers a change loop and sets the 12am times back onto the event
let timeRange = recurrenceSet.querySelector( '.em-recurrence-advanced .em-time-range' );
if ( timeRange ) {
let recurrenceStartTime = timeRange.querySelector( '.em-time-input.em-time-start' );
let recurrenceEndTime = timeRange.querySelector( '.em-time-input.em-time-end' );
let recurrenceAllDay = timeRange.querySelector( '.em-time-all-day' );
if ( recurrenceStartTime ) {
recurrenceStartTime.value = eventStartTime?.value;
}
if ( recurrenceEndTime ) {
recurrenceEndTime.value = eventEndTime?.value;
}
if ( recurrenceAllDay ) {
recurrenceAllDay.checked = eventAllDay?.checked;
}
}
// get equivalent datepicker, timepicker and timezone
if ( recurrenceSet.querySelector('select.recurrence_freq')?.value === 'on' ) {
// we set the selected dates to those we selected in the datepicker, for now
let recurrenceDatePicker = recurrenceSet.querySelector('.em-on-selector .em-date-input.flatpickr-input')?._flatpickr
if ( !recurrenceDatePicker?.selectedDates ) {
recurrenceDatePicker?.setDate( selectedDates, true );
setDateTimes = true; // setting date triggers the setDateTimes event already
}
} else {
// get the regular date range
recurrenceSet.querySelectorAll('.em-recurrence-advanced .em-datepicker .em-date-input.flatpickr-input').forEach( input => {
// add if we don't have dates set already
if ( !input._flatpickr?.selectedDates.length ) {
if (input.closest('.em-datepicker-until')) {
input._flatpickr.setDate( input.classList.contains('em-date-input-start') ? selectedDates[0] : selectedDates[1], true );
setDateTimes = true; // setting date triggers the setDateTimes event already
} else if (input.closest('.em-datepicker-range')) {
input._flatpickr.setDate( selectedDates, true );
setDateTimes = true; // setting date triggers the setDateTimes event already
}
}
});
}
// copy over the timezone
[ 'select.recurrence_timezone', 'select.recurrence_status' ].forEach( selector => {
let select = recurrenceSet.querySelector( selector );
let value = selector === 'select.recurrence_timezone' ? timezone : eventStatus;
if ( value && select ) {
if ( select.selectize ) {
select.selectize.setValue( value, true );
} else {
select.value = value;
}
}
});
// trigger a recurrence summary refresh
if ( !setDateTimes ) {
recurrenceSet.closest( '.em-recurrence-sets' ).dispatchEvent( new CustomEvent( 'setDateTimes' ) );
}
}
}
});
/**
* Handles toggling of recurring event settings for a form element.
* Determines if the event is recurring based on the specified event type and updates the form element's classes accordingly.
*/
let handleRecurring = function() {
// check now if it's recurring as well
let isRecurring = false;
if ( form ) {
// it's recurring/repeating if the checkbox is checked, we add is-recurring regardless
isRecurring = eventType.type === 'checkbox' ? eventType.checked : eventType.value !== 'single';
form.classList.toggle( 'em-is-recurring', isRecurring );
if ( eventType.type === 'checkbox' ) {
// checkboxes are now only for recurring
form.classList.toggle( 'em-type-recurring', eventType.checked );
}
// remove the em-type- classes and add the current selected type, defaulting to single
form.classList.remove( ...[ ...form.classList ].filter( className => className.startsWith( 'em-type-' ) ) );
form.classList.add( 'em-type-' + eventType.value );
}
return isRecurring;
}
handleRecurring();
});
// Add click handler for recurrence conversion links
document.querySelectorAll( '.em-convert-recurrence-link' ).forEach( link => {
link.addEventListener( 'click', function ( e ) {
if ( !confirm( EM.convert_recurring_warning ) ) {
e.preventDefault();
return false;
}
let nonce = this.getAttribute( 'data-nonce' );
if ( nonce ) {
this.href = this.href.replace( 'nonce=x', 'nonce=' + nonce );
}
} );
} );
document.dispatchEvent( new CustomEvent('em_event_editor_loaded') );
});
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
// shortcuts for functions in recurrences/ui-functions.js
let updateRecurrenceSummary = ( recurrenceSet ) => recurrenceSet.dispatchEvent( new CustomEvent('updateRecurrenceSummary', { bubbles: true }) );
let updateSetsCount = () => recurrenceSets.dispatchEvent( new CustomEvent('updateSetsCount') );
let updateRecurrenceOrder = () => recurrenceSets.dispatchEvent( new CustomEvent('updateRecurrenceOrder') );
/* ------------------------------------------------------------
Add/Remove Recurrnces
------------------------------------------------------------ */
// ADD NEW RECURRENCE RULE
let addRecurrence = function ( recurrenceType ) {
let recurrenceTypeSets = recurrenceSets.querySelector('.em-recurrence-type-' + recurrenceType + ' .em-recurrence-type-sets');
// Count existing recurrence sets to determine the new index.
let index = recurrenceTypeSets.querySelectorAll('.em-recurrence-set').length + 1;
// Clone the template (deep clone).
let recurrenceSet = recurrenceSets.querySelector('.em-recurrence-set-template').cloneNode(true);
// Remove the 'hidden' class and template-specific class; add the active class.
recurrenceSet.classList.remove('em-recurrence-set-template', 'hidden');
recurrenceSet.classList.add('em-recurrence-set', 'new-recurrence-set');
recurrenceSet.querySelector('.em-recurrence-set-type').value = recurrenceType;
recurrenceSet.dataset.type = recurrenceType;
recurrenceSet.dataset.index = index;
// Replace all occurrences of "[N%]" with the new index.
recurrenceSet.innerHTML = recurrenceSet.innerHTML.replace(/T%/g, `${recurrenceType}`);
recurrenceSet.innerHTML = recurrenceSet.innerHTML.replace(/N%/g, `${index}`);
if ( recurrenceType === 'exclude' ) {
recurrenceSet.querySelectorAll('.em-recurrence-advanced .only-include-type').forEach(el => el.remove() );
}
if ( recurrenceType === 'include' ) {
recurrenceSet.querySelectorAll('.em-recurrence-advanced .only-exclude-type').forEach(el => el.remove() );
}
// anything more before we append
let result = { recurrenceSet: recurrenceSet, index: index, success: true };
recurrenceTypeSets.dispatchEvent( new CustomEvent('beforeAddRecurrence', { detail: result }) );
if ( result.success ) {
// Insert the new recurrence set above the template.
recurrenceTypeSets.append(recurrenceSet);
em_setup_ui_elements( recurrenceSet );
// run all checks
updateSetsCount();
emRecurrenceEditor.updateIntervalDescriptor( recurrenceSet );
emRecurrenceEditor.updateIntervalSelectors( recurrenceSet );
emRecurrenceEditor.updateDurationDescriptor( recurrenceSet );
updateRecurrenceSummary( recurrenceSet );
}
return recurrenceSet;
}
// add include recurrence
recurrenceSets.querySelectorAll('.em-add-recurrence-set[data-type="include"]').forEach( function( addButton ){
addButton.addEventListener( 'click', () => addRecurrence('include') );
});
// set up listner to add recurrences, exclude and include, the exclude trigger is in reschedule.js
recurrenceSets.querySelectorAll('.em-recurrence-type').forEach( function( recurrenceSetsType ){
recurrenceSetsType.addEventListener( 'addRecurrence', function( e ) {
e.detail.recurrenceSet = addRecurrence( recurrenceSetsType.dataset.type );
});
});
// REMOVE A RECURRENCE RULE
recurrenceSets.addEventListener('click', function ( e ) {
if ( e.target.matches('.em-recurrence-set-action-remove') ) {
let removeButton = e.target;
e.preventDefault();
// Locate the recurrence set container for this remove action.
let recurrenceSet = removeButton.closest('.em-recurrence-set');
// Find the hidden delete field (an input whose name contains "[delete]").
let setId = recurrenceSet.querySelector('input.em-recurrence-set-id');
let deleteField = recurrenceSet.querySelector('input.em-recurrence-set-delete-field');
if (setId && deleteField) {
// Transfer the data-nonce value to the hidden input's value.
deleteField.value = deleteField.getAttribute('data-nonce');
// Move the delete field out of the recurrence set into the recurrence container.
recurrenceSets.appendChild(deleteField);
recurrenceSets.appendChild(setId);
}
// Remove the entire recurrence set from the DOM.
recurrenceSet.remove();
// redo all checks
updateSetsCount();
updateRecurrenceOrder();
}
});
});
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
recurrenceSets.querySelectorAll('.em-recurrence-type-sets').forEach( function( recurrenceTypeSets ) {
let draggedElem = null;
let placeholder = null;
let offsetX = 0, offsetY = 0;
let originalParent = null, originalNextSibling = null;
recurrenceTypeSets.addEventListener('mousedown', function(e) {
recurrenceTypeSets.querySelectorAll('.em-recurrence-set:not(:first-child)').forEach( (recurrenceSet) => recurrenceSet.classList.add('reordering') );
const handle = e.target.closest('.em-recurrence-set-action-order');
if (!handle) return;
const set = handle.closest('.em-recurrence-set');
if (!set) return;
e.preventDefault();
// Store original parent and next sibling for later restoration
originalParent = set.parentNode;
originalNextSibling = set.nextSibling;
const rect = set.getBoundingClientRect();
// Calculate offsets using page coordinates
offsetX = e.pageX - (rect.left + window.pageXOffset);
offsetY = e.pageY - (rect.top + window.pageYOffset);
// wrap set into div for styling preservation via .em
draggedElem = document.createElement('div');
draggedElem.classList.add('em', 'em-recurrence-sets');
draggedElem.append(set);
// Create a placeholder with the same dimensions
placeholder = document.createElement('div');
placeholder.classList.add('drop-placeholder');
placeholder.style.height = rect.height + 'px';
placeholder.style.width = rect.width + 'px';
originalParent.insertBefore(placeholder, originalNextSibling);
// Move the dragged element to document.body so its absolute positioning is relative to the document
document.body.appendChild(draggedElem);
draggedElem.style.position = 'absolute';
draggedElem.style.width = "100%";
draggedElem.style.left = (rect.left + window.pageXOffset) + 'px';
draggedElem.style.top = (rect.top + window.pageYOffset) + 'px';
draggedElem.style.zIndex = '1000';
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
function onMouseMove(e) {
if (!draggedElem) return;
// Update dragged element's position so the cursor stays at the same offset
draggedElem.style.left = (e.pageX - offsetX) + 'px';
draggedElem.style.top = (e.pageY - offsetY) + 'px';
// Determine where to place the placeholder in the container
let sets = Array.from(recurrenceTypeSets.querySelectorAll('.em-recurrence-set'));
let inserted = false;
for (let set of sets) {
let rect = set.getBoundingClientRect();
let setTop = rect.top + window.pageYOffset;
if (e.pageY < setTop + rect.height / 2) {
recurrenceTypeSets.insertBefore(placeholder, set);
inserted = true;
break;
}
}
if (!inserted) {
recurrenceTypeSets.appendChild(placeholder);
}
}
function onMouseUp(e) {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
// Reinsert the dragged element back into its original container before the placeholder
recurrenceTypeSets.insertBefore(draggedElem.firstElementChild, placeholder);
draggedElem.remove();
placeholder.remove();
placeholder = null;
draggedElem = null;
recurrenceTypeSets.querySelectorAll('.em-recurrence-set').forEach( function( recurrenceSet ) {
if ( recurrenceSet.matches(':first-child') ) {
recurrenceSet.dataset.primary = '1';
recurrenceSet.querySelectorAll('.em-time-all-day').forEach( el => { el.indeterminate = false; } );
} else {
delete recurrenceSet.dataset.primary;
}
recurrenceSet.classList.remove('reordering')
});
recurrenceSets.dispatchEvent( new CustomEvent('updateRecurrenceOrder') ); // we could also bubble this on recurrenceTypeSet
}
});
});
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
// exclude references used throughout here for rescheduling logic
let recurrenceExcludeSets = recurrenceSets.querySelector('.em-recurrence-type-exclude');
let recurrenceExcludeModal = recurrenceExcludeSets.querySelector('& > .em-recurrence-set-reshedule-modal');
let rescheduleExcludeAction = recurrenceExcludeModal.querySelector('.recurrence-reschedule-action');
/* ------------------------------------------------------------
UNDO FUNCTIONALITY
------------------------------------------------------------ */
// trigger the undo event when clicked, whether in scope of a recurrent set, set type or all sets
recurrenceSets.querySelectorAll('button.undo').forEach( function( button ) {
button.addEventListener('click', () => {
button.closest('.em-recurrence-set, .em-recurrence-type, .em-recurrence-sets')?.dispatchEvent( new CustomEvent( 'undo', { detail: { button: button }, bubbles: true } ) )
});
});
// listen for an undo event to a single set, set types, or all sets and undo the relevant recurrences.
recurrenceSets.addEventListener('undo', function( e ) {
e.stopPropagation();
let recurrences;
if ( e.target.matches('.em-recurrence-set') ) {
recurrences = [e.target];
} else if ( e.target.matches('.em-recurrence-type') ) {
recurrences = e.target.querySelectorAll('.em-recurrence-set');
} else {
recurrences = recurrenceSets.querySelectorAll('.em-recurrence-set');
}
recurrences.forEach( function( recurrenceSet ) {
// set back previous values and re-disable previously disabled elements
recurrenceSet.querySelectorAll('[data-undo]:not([type="checkbox"]):not(.selectized)').forEach( input => {
input.value = input.dataset.undo;
input.readonly = false;
input.disabled = false;
if ( input.classList.contains('em-recurrence-frequency') ) {
input.dispatchEvent( new Event('change', { bubbles: false }) );
}
});
recurrenceSet.querySelectorAll('input[data-undo][type="checkbox"]').forEach( input => { input.checked = input.dataset.undo === '1'; } );
//recurrenceSet.querySelectorAll('.em-time-input').forEach( input => { jQuery(input).em_timepicker('setTime', new Date('2020-01-01 ' + input.dataset.undo)) } );
recurrenceSet.querySelectorAll('.em-datepicker').forEach( function( datePicker ) {
if ( datePicker.closest('.reschedulable') ) {
datePicker.querySelectorAll('input.em-date-input').forEach( el => { el.disabled = true; el.value = ''; } );
datePicker.querySelectorAll('.em-date-input.disabled, .em-datepicker-dates').forEach( el => { el.classList.add('disabled') } );
}
});
em_setup_datepicker_dates( recurrenceSet );
recurrenceSet.querySelectorAll('select.em-selectize.selectized').forEach( el => {
if ( el.dataset.undo !== undefined ) {
el.selectize?.setValue( el.dataset.undo.split(',') );
}
// disable rescheduling datepickers
if ( el.closest('.reschedulable') ) {
el.selectize?.disable();
}
});
// disable other rechedulable items
recurrenceSet.querySelectorAll('.reschedulable [name]:not(.selectized)').forEach( input => { input.disabled = true; } );
// disable the nonces to reschedule this button type
recurrenceSet.querySelector( 'input[type="hidden"][data-nonce]' ).disabled = true;
// re-enable the reschedule buttons and set flag to false
recurrenceSet.querySelectorAll('.reschedule-trigger').forEach( button => { button.disabled = false } );
delete recurrenceSet.dataset.rescheduled;
// unset modified flag for advanced icon
recurrenceSet.classList.remove('advanced-modified', 'advanced-modified-dates');
// update descriptors and selectors
emRecurrenceEditor.updateIntervalDescriptor( recurrenceSet );
emRecurrenceEditor.updateIntervalSelectors( recurrenceSet );
emRecurrenceEditor.updateDurationDescriptor( recurrenceSet );
});
// exclude logic
if ( e.target.matches('.em-recurrence-type-exclude') ) {
recurrenceExcludeSets.querySelectorAll('.em-recurrence-set.new-recurrence-set').forEach( recurrenceSet => recurrenceSet.querySelector('.em-recurrence-set-action-remove')?.click() );
recurrenceExcludeModal.querySelector('.em-modal-content')?.append( rescheduleExcludeAction );
rescheduleExcludeAction.querySelector('[data-nonce]').disabled = true;
} else if ( e.target.matches('.em-recurrence-set[data-type="exclude"]') ) {
// check if there are more reschedulable sets, if not then remove the reshedulable notice
if ( e.target.closest('.em-recurrence-type-exclude').querySelectorAll('.em-recurrence-set[data-rescheduled]').length === 0 ) {
recurrenceExcludeModal.querySelector('.em-modal-content')?.append( rescheduleExcludeAction );
}
}
recurrenceSets.dispatchEvent( new CustomEvent('updateSetsCount') );
recurrenceSets.dispatchEvent( new CustomEvent('setAdvancedDefaults', { bubbles: true }) );
});
/* ------------------------------------------------------------
RESCHEDULING FUNCTIONALITY
------------------------------------------------------------ */
// RESCHEDULING BUTTONS
// recurrence rescheduling buttons & modals - we don't need to listen to delegated events since this only applies to previously-created recurrences
recurrenceSets.querySelectorAll('.em-recurrence-set').forEach( function( recurrenceSet ){
delete recurrenceSet.dataset.rescheduled;
let modal = recurrenceSet.dataset.type === 'exclude' ? recurrenceExcludeModal : recurrenceSet.querySelector('.em-recurrence-set-reshedule-modal');
// trigger reschedule
recurrenceSet.querySelectorAll('button.reschedule-trigger').forEach( function( button ) {
button.addEventListener('click', function( e ){
if ( recurrenceSet.dataset.rescheduled !== undefined ) {
unlockReschedule( button );
} else {
modal.rescheduleButton = button;
modal.classList.toggle( 'primary-recurrence', recurrenceSet.dataset.primary );
openModal( modal );
}
});
});
if ( recurrenceSet.dataset.type === 'include' ) {
// modal actions confirming reschedule and re-appending modal upon close
modal.addEventListener( 'em_modal_close', function() {
// re-append modal on close for submission
recurrenceSet.append(modal);
delete modal.rescheduleButton;
});
modal.querySelector('button.reschedule-cancel')?.addEventListener( 'click', () => closeModal(modal) );
modal.querySelector('button.reschedule-confirm')?.addEventListener( 'click', function( e ) {
unlockReschedule( modal.rescheduleButton );
// move the reschedule action option to the recurrence set to make it visible
recurrenceSet.querySelector('.em-recurrence-pattern')?.prepend( modal.querySelector('.recurrence-reschedule-action') );
// close modal and mark this as rescheduled
recurrenceSet.dataset.rescheduled = '1';
closeModal(modal);
});
recurrenceSet.addEventListener('undo', function(){
modal.querySelector('.em-modal-content')?.append( recurrenceSet.querySelector('.recurrence-reschedule-action') );
});
}
});
// unlock rescheduling inputs and store undoable values
let unlockReschedule = function ( rescheduleButton ) {
// remove disabled property from inputs contained in button container
let reschedulable = rescheduleButton.closest('.reschedulable');
reschedulable.querySelectorAll('[disabled]').forEach( el => { el.disabled = false } ); // TODO the label of ON datepicker not enabling
reschedulable.querySelectorAll('.disabled').forEach( el => { el.classList.remove('disabled') } ); // TODO the label of ON datepicker not enabling
// save the current date/day selection settings so we can re-establish it
reschedulable.querySelectorAll('.em-datepicker-data input').forEach( input => { input.dataset.undo = input.value; } );
reschedulable.querySelectorAll('select.em-selectize.selectized').forEach( function( el ) {
el.selectize?.enable();
let days = el.selectize?.getValue();
if ( days ) {
el.dataset.undo = days.join();
}
});
// enable the nonce to reschedule this button type
reschedulable.closest('.em-recurrence-set').querySelector( rescheduleButton.dataset.nonce ).disabled = false;
reschedulable.querySelectorAll('.reschedule-trigger').forEach( button => { button.disabled = true } );
};
// EXCLUDE RESCHEDULING
// add warning for currently created recurrences and adding a new exclusion
recurrenceSets.querySelectorAll('.em-add-recurrence-set[data-type="exclude"]').forEach( function( addButton ) {
addButton.addEventListener('click', function (e) {
if ( recurrenceExcludeSets.querySelectorAll('[data-rescheduled]').length > 0 || !recurrenceSets.dataset.event_id ) {
addButton.closest('.em-recurrence-type-exclude')?.dispatchEvent( new CustomEvent('addRecurrence', { bubbles: true }) );
} else {
openModal( recurrenceExcludeModal );
}
});
});
// modal actions - confirming reschedule and re-appending modal upon close
recurrenceExcludeModal.addEventListener( 'em_modal_close', function() {
// re-append modal on close for submission
recurrenceExcludeSets.append(recurrenceExcludeModal);
delete recurrenceExcludeModal.rescheduleButton;
});
recurrenceExcludeModal.querySelector('button.reschedule-cancel')?.addEventListener( 'click', () => closeModal(recurrenceExcludeModal) );
recurrenceExcludeModal.querySelector('button.reschedule-confirm')?.addEventListener( 'click', function(e ) {
let recurrenceSet;
if ( recurrenceExcludeModal.rescheduleButton ) {
unlockReschedule( recurrenceExcludeModal.rescheduleButton )
recurrenceSet = recurrenceExcludeModal.rescheduleButton.closest('.em-recurrence-set');
} else {
// pass a detail so it is populated by reference
let recurrenceTypeSets = recurrenceSets.querySelector('.em-recurrence-type-exclude');
recurrenceTypeSets?.dispatchEvent( new CustomEvent('addRecurrence', { bubbles: true }) );
recurrenceSet = recurrenceTypeSets?.querySelector('.em-recurrence-set:last-child');
}
// mark rescheduled, even if it's new because it essentially can reschedule previously created recurrences by negating them
if ( recurrenceSet ) {
recurrenceSet.dataset.rescheduled = '1';
}
// move the reschedule action option to the recurrence set to make it visible
recurrenceExcludeSets.firstElementChild.after( rescheduleExcludeAction );
rescheduleExcludeAction.querySelector('[data-nonce]').disabled = false;
// close modeal and mark this as rescheduled
closeModal(recurrenceExcludeModal);
});
// move the cancel warning back to reschedule modal if removing an event results in no exclusions
recurrenceSets.addEventListener('updateSetsCount', function() {
if ( recurrenceExcludeSets.dataset.count === '0' ) {
recurrenceExcludeModal.querySelector('.em-modal-content')?.append( rescheduleExcludeAction );
}
});
});
// This file deals with dates and times of the main event, determining the overall recurrence duration in dates and times of the recurring event for display purposes.
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
document.addEventListener('em_luxon_ready', function(){
// Sets the overal event dates, times and timezone based on the earliest and latest recurrence date/time, and the primary recurrence timezone.
// PHP will always handle the real date ranges.
// This is somewhat redundant and needs a review. The reason is because this doesn't account for timezones, for example we could have an earlier string date/time than another, but the later one is in a TZ that's makes it earlier in UTC time.
// For this reason, we need a library like Luxon to accurately calculate and use this for displaying estimated start/end date/times.
// TODO add TimeZone-aware libary to calculate real start/end dates and provide an accurate recurrence summary for all recurrences grouped together.
recurrenceSets.addEventListener('setDateTimes', function() {
let eventDateTimes = recurrenceSets.closest('form').querySelector('.event-form-when');
if ( eventDateTimes ) {
// COLLECT ALL DATES FROM RECURRENCE SETS, update earliest/latest date as we go
/** @type {luxon.DateTime} */
let startDateTime;
/** @type {luxon.DateTime} */
let endDateTime;
/** @type {Element} */
let eventDatePicker = eventDateTimes.querySelector('.em-datepicker.em-event-dates');
/** @type {Element} */
let eventTimeRange = eventDateTimes.querySelector('.event-times.em-time-range');
// we need to get jQuery elements to handle the timepicker
/** @type {jQuery} */
let $eventStartTime = jQuery(eventTimeRange.querySelector('.em-time-input.em-time-start'));
/** @type {jQuery} */
let $eventEndTime = jQuery(eventTimeRange.querySelector('.em-time-input.em-time-end'));
let DateTime = luxon.DateTime;
let timezone = recurrenceSets.querySelector('.em-recurrence-set[data-primary="1"] select.recurrence_timezone')?.value;
// Replace .5 with :30 in timezone string (for half-hour offsets like UTC+5.5)
timezone = timezone?.replace(/\.5/g, ':30') || timezone;
// get primary values for other recurrences
let defaultStartTimeSeconds, defaultEndTimeSeconds;
let defaultStartDate, defaultEndDate;
// Track if all recurrence sets are marked as all-day
let allRecurrencesAllDay = true;
// Track all unique timezones used across recurrence sets
let uniqueTimezones = new Set();
// go through each recurring set to get the start time and date
recurrenceSets.querySelectorAll('.em-recurrence-type-include .em-recurrence-set').forEach( recurrenceSet => {
let recurrenceTimezone = recurrenceSet.querySelector('.em-recurrence-timezone select')?.value || timezone;
// Replace .5 with :30 in timezone string (for half-hour offsets like UTC+5.5)
recurrenceTimezone = recurrenceTimezone?.replace(/\.5/g, ':30') || recurrenceTimezone;
// Add the timezone to our set of unique timezones
if (recurrenceTimezone) {
uniqueTimezones.add(recurrenceTimezone);
}
/** @type {luxon.DateTime} */
let recurrenceStart;
/** @type {luxon.DateTime} */
let recurrenceEnd;
// build the start and end datetime from the recurrence set, starting by getting the date and creating luxon.DateTime objects
if ( recurrenceSet.querySelector('select.recurrence_freq')?.value === 'on' ) {
// get the ON dates rather than the date range
let selectedDates = recurrenceSet.querySelector('.em-on-selector .em-date-input')?._flatpickr?.selectedDates;
if ( selectedDates ) {
selectedDates.sort(function(a, b) { return a - b; });
// get the first and last dates from the selected dates
recurrenceStart = DateTime.fromJSDate( selectedDates[0] );
recurrenceEnd = DateTime.fromJSDate( selectedDates[selectedDates.length - 1] );
}
} else {
// get the regular date range
recurrenceSet.querySelectorAll('.em-recurrence-advanced .em-datepicker .em-date-input.flatpickr-input').forEach( input => {
if ( input._flatpickr?.selectedDates.length ) {
if (input.closest('.em-datepicker-until')) {
if (input.classList.contains('em-date-input-start')) {
recurrenceStart = DateTime.fromJSDate( input._flatpickr.selectedDates[0] );
} else if (input.classList.contains('em-date-input-end')) {
recurrenceEnd = DateTime.fromJSDate( input._flatpickr.selectedDates[0] );
}
} else if (input.closest('.em-datepicker-range')) {
recurrenceStart = DateTime.fromJSDate( input._flatpickr.selectedDates[0] );
if ( input._flatpickr.selectedDates.length >= 2 ) {
recurrenceEnd = DateTime.fromJSDate( input._flatpickr.selectedDates[1] );
} else {
recurrenceEnd = recurrenceStart;
}
}
defaultStartDate ??= recurrenceStart;
defaultEndDate ??= recurrenceEnd;
}
});
}
// make sure we have recurrence dates and the timezones are correctly set
recurrenceStart ??= defaultStartDate;
recurrenceEnd ??= defaultEndDate || defaultStartDate;
recurrenceStart = recurrenceStart?.setZone( recurrenceTimezone, { keepLocalTime: true } );
recurrenceEnd = recurrenceEnd?.setZone( recurrenceTimezone, { keepLocalTime: true } );
// proceed if we have start/end dates
if ( recurrenceStart && recurrenceEnd ) {
// add the time to the start/end dates
let timeRange = recurrenceSet.querySelector( '.em-recurrence-advanced .em-time-range' );
if ( timeRange ) {
let $recurrenceStartTime = jQuery( timeRange.querySelector( '.em-time-input.em-time-start' ) );
let $recurrenceEndTime = jQuery( timeRange.querySelector( '.em-time-input.em-time-end' ) );
// Check if this recurrence set has all-day checkbox checked
let allDayCheckbox = timeRange.querySelector( '.em-time-all-day' );
if ( allDayCheckbox && !allDayCheckbox.checked && !allDayCheckbox.indeterminate ) {
allRecurrencesAllDay = false;
}
if ( timeRange.querySelector( '.em-time-all-day' )?.checked ) {
recurrenceEnd = recurrenceEnd.endOf( 'day' );
// set default start/end times first time for the timepicker for future recurrences
defaultStartTimeSeconds |= 0;
defaultEndTimeSeconds |= 86399; // 23:59:59
} else {
let secondsFromMidnight = $recurrenceStartTime.em_timepicker( 'getSecondsFromMidnight' );
if ( $recurrenceStartTime.val() ) {
recurrenceStart = recurrenceStart.plus( { seconds: secondsFromMidnight } );
} else {
recurrenceStart = recurrenceStart.plus( { seconds: defaultStartTimeSeconds || 0 } );
}
if ( $recurrenceEndTime.val() ) {
let secondsFromMidnight = $recurrenceEndTime.em_timepicker( 'getSecondsFromMidnight' );
recurrenceEnd = recurrenceEnd.plus( { seconds: secondsFromMidnight } );
} else {
recurrenceEnd = recurrenceEnd.plus( { seconds: defaultEndTimeSeconds || 0 } );
}
// set default start/end times first time for the timepicker for future recurrences
defaultStartTimeSeconds |= $recurrenceStartTime.em_timepicker( 'getSecondsFromMidnight' );
defaultEndTimeSeconds |= $recurrenceEndTime.em_timepicker( 'getSecondsFromMidnight' );
}
// account for duration
let duration = recurrenceSet.querySelector( '.recurrence_duration' )?.value;
if ( duration ) {
recurrenceEnd = recurrenceEnd.plus( { days: duration } );
}
}
// Now we have the luxon.DateTime dates/times in correct timezone, we can compare them accurately
if ( recurrenceStart.isValid && ( !startDateTime || recurrenceStart < startDateTime ) ) {
startDateTime = recurrenceStart.setZone( timezone );
}
if ( recurrenceEnd.isValid && (!endDateTime || recurrenceEnd > endDateTime) ) {
endDateTime = recurrenceEnd.setZone( timezone );
}
}
});
if ( startDateTime?.isValid && endDateTime?.isValid ) {
// set the datepicker and timepickers of the main event form
let startDate = startDateTime.setZone( "system", { keepLocalTime: true } ).toJSDate();
let endDate = endDateTime.setZone( "system", { keepLocalTime: true } ).toJSDate();
if ( eventDatePicker.classList.contains('em-datepicker-range') ) {
// set the date range with both dates, even if endDate didn't change
eventDatePicker.querySelector( '.em-date-input.flatpickr-input' )?._flatpickr?.setDate( [ startDate, endDate ], true );
} else {
eventDatePicker.querySelector( '.em-date-input-start.flatpickr-input' )?._flatpickr?.setDate( startDate, true );
eventDatePicker.querySelector( '.em-date-input-end.flatpickr-input' )?._flatpickr?.setDate( endDate, true );
}
$eventStartTime.em_timepicker( 'setTime', startDate );
$eventEndTime.em_timepicker( 'setTime', endDate );
// Check if the start/end times match the all-day pattern (midnight to 11:59:59 PM)
let isStartMidnight = startDateTime.hour === 0 && startDateTime.minute === 0 && startDateTime.second === 0;
let isEndMidnight = endDateTime.hour === 23 && endDateTime.minute === 59 && endDateTime.second === 59;
// we can only consider this an all-day recurring event if all recurrence sets have all-day checked AND the start/end times match midnight in the primary timezone
let allDayCheckbox = eventTimeRange.querySelector('.em-time-all-day');
if (allDayCheckbox) {
if ( allRecurrencesAllDay && (isStartMidnight && isEndMidnight) ) {
// All recurrence sets are all-day and times match the pattern within same timezone
allDayCheckbox.checked = true;
allDayCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
} else {
// At least one recurrence set is not all-day or times don't match the pattern
allDayCheckbox.checked = false;
allDayCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
}
}
// Update recurring summary dates
let recurringSection = eventDateTimes.querySelector('.recurring-summary-dates');
if (recurringSection) {
// Remove 'hidden' class if present
recurringSection.classList.remove('hidden');
// Update start date and time - use the right format from EM settings
let datePickerFormat = 'D';
let timeFormat = EM.show24hours == 1 ? 'H:mm':'h:mm a';
// Update start date element
let startDateElem = recurringSection.querySelector('.date.start-date');
if (startDateElem) {
startDateElem.textContent = startDateTime.toFormat(datePickerFormat);
}
// Update start time element
let startTimeElem = recurringSection.querySelector('.time.start-time');
if (startTimeElem) {
startTimeElem.textContent = ' @ ' + startDateTime.toFormat(timeFormat);
}
// Update end date element
let endDateElem = recurringSection.querySelector('.date.end-date');
if (endDateElem) {
endDateElem.textContent = endDateTime.toFormat(datePickerFormat);
}
// Update end time element
let endTimeElem = recurringSection.querySelector('.time.end-time');
if (endTimeElem) {
endTimeElem.textContent = ' @ ' + endDateTime.toFormat(timeFormat);
}
// Update classes based on all-day status
recurringSection.classList.remove('is-all-day', 'has-all-day');
if ( allDayCheckbox?.checked) {
// True all-day event (all checkboxes checked and times match pattern)
recurringSection.classList.add('is-all-day');
} else if ( allRecurrencesAllDay ) {
// All checkboxes are checked, but start/end times don't match all-day times in the primary timezone
recurringSection.classList.add('has-all-day');
}
// Update timezone
let timezoneElem = recurringSection.querySelector('.recurring-timezone .timezone');
if (timezoneElem && timezone) {
timezoneElem.textContent = timezone;
}
// Add 'has-multiple-timezones' class if multiple timezones are detected
if (uniqueTimezones.size > 1) {
recurringSection.classList.add('has-multiple-timezones');
} else {
recurringSection.classList.remove('has-multiple-timezones');
}
// Hide the missing info message
let missingInfoElem = eventDateTimes.querySelector('.recurring-summary-missing');
if (missingInfoElem) {
missingInfoElem.classList.add('hidden');
}
}
}
}
});
});
let breakpoints = { 'small' : 500, 'large' : false, };
let recurringSummaries = document.querySelectorAll('.em-recurring-summary .recurring-summary-dates');
if ( recurringSummaries.length > 0 ) {
EM_ResizeObserver( breakpoints, recurringSummaries );
}
});
// this section deals with functions that handle display of text, counting sets and redisplaying forms
let emRecurrenceEditor = {
updateIntervalDescriptor : function( container ) {
let sets = container.matches('.em-recurrence-sets') ? container.querySelectorAll('.em-recurrence-set') : [ container.closest('.em-recurrence-set') ];
sets.forEach( function( set ) {
set.querySelectorAll(".interval-desc").forEach( el => el.classList.add('hidden') );
let number = "-plural";
let input = set.querySelector('input.em-recurrence-interval');
if ( input ) {
if ( input.value === "1" || input.value === "" ) {
number = "-singular";
}
}
let select = set.querySelector("select.em-recurrence-frequency");
let freq = select ? select.value : "";
let descriptorSelector = "span.interval-desc.interval-" + freq + number;
set.querySelectorAll( descriptorSelector ).forEach( el => el.classList.remove('hidden') );
set.querySelectorAll('.interval-desc-intro').forEach( el => el.classList.toggle('hidden', freq === 'on') );
});
},
updateDurationDescriptor : function( container ) {
let sets = container.matches('.em-recurrence-sets') ? container.querySelectorAll('.em-recurrence-set') : [ container.closest('.em-recurrence-set') ];
sets.forEach( function( set ) {
set.querySelectorAll(".recurrence-days-desc").forEach( el => el.classList.add('hidden') );
let input = set.querySelector('input.em-recurrence-duration');
let number = input && (input.value === "1" || (input.value === '' && input.placeholder === '1')) ? 'singular' : 'plural';
set.querySelectorAll( ".recurrence-days-desc.em-" + number ).forEach( el => el.classList.remove('hidden') );
});
},
updateIntervalSelectors : function ( container ) {
let sets = container.matches('.em-recurrence-sets') ? container.querySelectorAll('.em-recurrence-set') : [ container.closest('.em-recurrence-set') ];
sets.forEach( function( set ) {
set.querySelectorAll('.alternate-selector').forEach( el => el.classList.add('hidden') );
let select = set.querySelector("select.em-recurrence-frequency");
let freq = select ? select.value : "";
set.querySelectorAll('.em-' + freq + '-selector').forEach( el => el.classList.remove('hidden') );
set.querySelectorAll('.em-recurrence-interval').forEach( el => el.classList.toggle('hidden', freq === 'on') );
});
}
}
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
/**
* Sets placeholders for advanced fields in non-main recurrences so as to show informative recurrence set defaults and descriptions if left blank, since the main recurrence is the default values.
*/
recurrenceSets.addEventListener('setAdvancedDefaults', function () {
// get the first recurrence set
let recurrenceSetPrimary = recurrenceSets.querySelector('.em-recurrence-type-include .em-recurrence-set:first-child');
let selector = '.em-recurrence-type-include .em-recurrence-set:not(:first-child) .em-recurrence-advanced';
// set all recurrence sets to have a 0 value flag to detect modifications of primary
recurrenceSets.querySelectorAll('.em-recurrence-set').forEach( recurrenceSet => { recurrenceSet.dataset.primaryModified = '0'; });
// set the timepicker values for placeholders
let recurrenceTimes = recurrenceSetPrimary.querySelector('.em-recurrence-times');
let allDayInput = recurrenceTimes.querySelector('.em-time-all-day');
let startTimeInput = recurrenceTimes.querySelector('.em-time-start');
let endTimeInput = recurrenceTimes.querySelector('.em-time-end');
recurrenceSets.querySelectorAll('.em-recurrence-set').forEach(recurrenceSet => {
if (recurrenceSet !== recurrenceSetPrimary) {
let timeFields = recurrenceSet.querySelector('.em-recurrence-times');
if (timeFields) {
let hasTime = false;
[['.em-time-start', startTimeInput], ['.em-time-end', endTimeInput]].forEach(([selector, refInput]) => {
let field = timeFields.querySelector(selector);
if (field) {
if (field.value) {
hasTime = true;
}
field.placeholder = refInput.value || refInput.placeholder;
if ( field.value === '' && refInput.value !== refInput.dataset.undo ) {
recurrenceSet.dataset.primaryModified = '1';
}
}
});
timeFields.querySelectorAll('.em-time-all-day').forEach(checkbox => {
checkbox.indeterminate = !hasTime && allDayInput && allDayInput.checked;
});
}
}
});
// Recurse recurrenceSets by recurrence set (.em-recurrence-set) to begin with
recurrenceSets.querySelectorAll('.em-recurrence-set').forEach( function ( recurrenceSet ) {
if ( !recurrenceSet.matches('.em-recurrence-type-include .em-recurrence-set:first-child') ) {
// only applies to recurrences without the 'on' frequency
if ( recurrenceSet.querySelector('select.em-recurrence-frequency')?.value !== 'on' ) {
// loop each flatpickr input and set placeholders and detect if default value has changed
recurrenceSetPrimary.querySelectorAll('.em-recurrence-advanced .em-datepicker .em-date-input.flatpickr-input').forEach(function (input) {
let datePicker = input.closest('.em-datepicker');
let value = input._flatpickr.altInput.value;
let modifiedDefault = input._flatpickr._inputData.some( input => input.value !== input.dataset.undo );
// get the text format directly, we assume it's the same as the datepicker type for events, it's an EM setting (if dev customizations change the template, they'll need to account for it here)
let datesSelector = '.em-recurrence-dates .em-date-input.form-control';
if (datePicker.classList.contains('em-datepicker-range')) {
recurrenceSet.querySelectorAll(datesSelector).forEach(function (dp) {
dp.previousElementSibling.placeholder ||= dp.placeholder;
dp.placeholder = value ? value : dp.previousElementSibling.placeholder;
if ( dp.value === '' && modifiedDefault ) {
dp.closest('.em-recurrence-set').dataset.primaryModified = '1';
}
});
} else if (datePicker.classList.contains('em-datepicker-until')) {
datesSelector += input.classList.contains('em-date-input-start') ? '.em-date-input-start' : '.em-date-input-end';
recurrenceSet.querySelectorAll(datesSelector).forEach(function (dp) {
dp.placeholder = value ? value : dp.previousElementSibling.placeholder;
if ( dp.value === '' && modifiedDefault ) {
dp.closest('.em-recurrence-set').dataset.primaryModified = '1';
}
});
}
});
}
}
});
// Handle timezone and status dropdowns using a shared function
['timezone', 'status'].forEach( function( selectType ) {
const classPrefix = '.em-recurrence-' + selectType;
let select = recurrenceSetPrimary.querySelector(classPrefix + ' select');
if (select) {
// Set placeholder for other recurrences - timezones will also affect the exclude section
let selectors = selectType === 'timezone' ? [ selector, '.em-recurrence-type-exclude .em-recurrence-set .em-recurrence-advanced'] : [ selector ];
selectors.forEach( function( selector ) {
recurrenceSets.querySelectorAll(selector + ' ' + classPrefix + ' select').forEach( function( otherSelect ) {
if ( otherSelect.selectize ) {
if ( select.value ) {
otherSelect.selectize.settings.placeholder = select.querySelector(`option[value="${select.value}"]`)?.textContent || select.value;
otherSelect.selectize.updatePlaceholder();
// no value selected therefore overriden by primary
if ( otherSelect.value === '' && select.value !== select.dataset.undo ) {
otherSelect.closest('.em-recurrence-set').dataset.primaryModified = '1';
}
} else {
otherSelect.selectize.settings.placeholder = select.selectize?.settings.placeholder;
otherSelect.selectize.updatePlaceholder();
}
}
});
});
}
});
// Handle recurrence duration input
let durationInput = recurrenceSetPrimary.querySelector('input.em-recurrence-duration');
if (durationInput && durationInput.value.trim()) {
recurrenceSets.querySelectorAll(selector + ' input.em-recurrence-duration').forEach(function(otherInput) {
otherInput.placeholder = durationInput.value.trim();
if ( otherInput.value === '' && durationInput.value !== durationInput.dataset.undo ) {
otherInput.closest('.em-recurrence-set').dataset.primaryModified = '1';
}
});
}
// check primary overriding values and set additional flags for date ranges which we can reference and detect overriding changes
recurrenceSets.querySelectorAll('.em-recurrence-set').forEach( function( recurrenceSet ) {
// check if each recurrence set is affected by primary modifications
recurrenceSet.classList.toggle('advanced-modified-primary', recurrenceSet.dataset.primaryModified === '1');
if ( recurrenceSet.dataset.primaryModified ) {
recurrenceSet.dispatchEvent( new Event('change', { bubbles: true }) );
}
delete recurrenceSet.dataset.primaryModified;
// check the start/end dates specifically, if they are both set then we need to set a flag so we know they were modified too
let hasDates = 0;
let hasStartDate = false, hasStartDateModified = false;
let hasEndDate = false, hasEndDateModified = false;
let hasModifiedDates;
if ( recurrenceSet.querySelector('select.em-recurrence-frequency')?.value === 'on' ) {
hasDates = 2; // fake this as we don't need a date range for 'on' frequency
} else {
// check if there is a complete date range set (i.e. two dates) and if any of the dates were modified
recurrenceSet.querySelectorAll(`.em-recurrence-dates .em-datepicker-data input[name]`).forEach(function ( input ) {
hasDates += input.value ? 1 : 0;
if ( input.matches(':first-of-type') ) {
hasStartDate = !!input.value;
hasStartDateModified = input.value !== input.dataset.undo;
}
if ( input.matches(':last-of-type') ) {
hasEndDate = !!input.value;
hasEndDateModified = input.value !== input.dataset.undo;
}
hasModifiedDates ||= input.value !== input.dataset.undo;
});
}
recurrenceSet.classList.toggle('has-date-range', hasDates >= 2);
if ( hasDates < 2 ) {
recurrenceSet.classList.toggle( 'has-date-range-start', hasStartDate );
recurrenceSet.classList.toggle( 'has-date-range-end', hasEndDate );
}
if ( hasStartDateModified && hasEndDateModified ) {
recurrenceSet.classList.toggle('has-modified-date-range', true);
recurrenceSet.classList.toggle('has-modified-date-range-start', false);
recurrenceSet.classList.toggle('has-modified-date-range-end', false);
} else {
recurrenceSet.classList.toggle('has-modified-date-range', false);
recurrenceSet.classList.toggle('has-modified-date-range-start', hasStartDateModified);
recurrenceSet.classList.toggle('has-modified-date-range-end', hasEndDateModified);
}
});
// update the recurrence summary
recurrenceSets.dispatchEvent( new Event('updateRecurrenceSummary', { bubbles: true }) );
});
// update the count elements so CSS can do its thing
recurrenceSets.addEventListener('updateSetsCount', function() {
['include', 'exclude'].forEach( function ( recurrenceType ) {
// show or hide remove button
let recurrenceTypeSets = recurrenceSets.querySelector('.em-recurrence-type-' + recurrenceType);
if ( recurrenceTypeSets ) {
let count = recurrenceTypeSets.querySelectorAll('.em-recurrence-set').length;
recurrenceSets.setAttribute('data-' + recurrenceType + '-count', count);
recurrenceTypeSets.dataset.count = count; // CSS will hide things
}
});
});
// reset order of items as per reordering
recurrenceSets.addEventListener('updateRecurrenceOrder', function() {
let primaryRecurrence;
recurrenceSets.querySelectorAll('.em-recurrence-type-include .em-recurrence-set').forEach( function( recurrenceSet, index) {
let order_input = recurrenceSet.querySelector('.em-recurrence-order');
if (order_input) {
order_input.value = index + 1;
}
recurrenceSet.classList.toggle('show-advanced', index === 0);
if ( recurrenceSet !== primaryRecurrence && index === 0 ) {
// copy all the date/time/duration advanced values from primaryRecurrence to here
primaryRecurrence = recurrenceSet;
// set default placehodlers
primaryRecurrence.querySelectorAll('[data-placeholder]').forEach( el => { el.placeholder = el.dataset.placeholder } );
primaryRecurrence.querySelectorAll('.em-datepicker .em-date-input-end.form-control').forEach( el => { el.placeholder = el.previousElementSibling.placeholder });
primaryRecurrence.querySelectorAll('.em-datepicker .em-date-input-start.form-control').forEach( el => { el.placeholder = el.previousElementSibling.placeholder });
recurrenceSets.dispatchEvent( new CustomEvent('updateSetsCount') );
recurrenceSets.dispatchEvent( new CustomEvent('setAdvancedDefaults') );
recurrenceSets.dispatchEvent( new CustomEvent('updateRecurrenceSummary') );
}
if ( recurrenceSet.matches(':first-child') ) {
recurrenceSet.dataset.primary = '1';
recurrenceSet.querySelectorAll('.em-time-all-day').forEach( el => { el.indeterminate = false; } );
} else {
delete recurrenceSet.dataset.primary;
}
});
} );
// show/hide remove button
recurrenceSets.dispatchEvent( new CustomEvent('updateSetsCount') );
// Initialize recurrence descriptor and selectors for this recurrenceSets container
emRecurrenceEditor.updateIntervalDescriptor(recurrenceSets);
emRecurrenceEditor.updateIntervalSelectors(recurrenceSets);
emRecurrenceEditor.updateDurationDescriptor(recurrenceSets);
});
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
// Attach delegated listeners for interval/duration inputs and frequency select within this container
recurrenceSets.addEventListener('keyup', function (e) {
if ( e.target.matches('input.em-recurrence-interval') ) {
emRecurrenceEditor.updateIntervalDescriptor( e.target.closest('.em-recurrence-set') );
} else if (e.target.matches('input.em-recurrence-duration')) {
emRecurrenceEditor.updateDurationDescriptor( e.target.closest('.em-recurrence-set') );
}
});
// recurrency descriptors and selectors that change upon frequency changes
recurrenceSets.addEventListener('change', function (e) {
if (e.target.matches('select.em-recurrence-frequency')) {
let recurrenceSet = e.target.closest('.em-recurrence-set');
emRecurrenceEditor.updateIntervalDescriptor( recurrenceSet );
emRecurrenceEditor.updateIntervalSelectors( recurrenceSet );
}
});
});
document.addEventListener('DOMContentLoaded', function() {
//Event Editor
// Recurrence Warnings
document.querySelectorAll('form.em-event-admin-recurring').forEach(form => {
form.addEventListener('submit', function (event) {
let warning_text;
let recreateInput = form.querySelector('input[name="event_recreate_tickets"]');
if (recreateInput && recreateInput.value === "1") {
warning_text = EM.event_recurrence_bookings;
}
if ( warning_text && !confirm(warning_text) ) {
event.preventDefault();
}
});
});
//Buttons for recurrence warnings within event editor forms
document.querySelectorAll('.em-reschedule-trigger, .em-reschedule-cancel').forEach(trigger => {
trigger.addEventListener('click', e => {
e.preventDefault();
const el = e.currentTarget;
const show = el.matches('.em-reschedule-trigger');
el.closest('.em-recurrence-reschedule')?.querySelector(el.dataset.target)?.classList.toggle('reschedule-hidden', !show);
el.parentElement.querySelectorAll('[data-nonce]').forEach( el => { el.disabled = !show } );
el.parentElement.querySelectorAll('button').forEach( link => link.classList.remove('reschedule-hidden') );
el.classList.add('reschedule-hidden');
});
});
});
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
let setAdvancedDefaults = () => recurrenceSets.dispatchEvent( new CustomEvent('setAdvancedDefaults') );
let updateRecurrenceSummary = ( recurrenceSet ) => recurrenceSet.dispatchEvent( new CustomEvent('updateRecurrenceSummary', { bubbles: true }) )
let setDateTimes = () => recurrenceSets.dispatchEvent( new CustomEvent('setDateTimes') );
// ADVANCED TOGGLE/SECTION
// Open/Close Advanced Section
recurrenceSets.addEventListener('click', function(e) {
const toggleButton = e.target.closest('.em-recurrence-set-action-advanced');
if (!toggleButton) return;
const recurrenceSet = toggleButton.closest('.em-recurrence-set');
recurrenceSet.classList.toggle('show-advanced');
if( '_tippy' in toggleButton ){
if ( recurrenceSet.classList.contains('show-advanced') ) {
toggleButton._tippy.setContent( toggleButton.getAttribute('data-label-hide') );
} else {
toggleButton._tippy.setContent( toggleButton.getAttribute('data-label-show') );
}
}
});
// Function to check advanced inputs and set icon color
let updateAdvancedIcon = function( recurrenceSet ) {
const advancedSection = recurrenceSet.querySelector('.em-recurrence-advanced');
const advancedIcon = recurrenceSet.querySelector('.em-recurrence-set-action-advanced');
if ( !advancedSection || !advancedIcon) return;
const inputs = advancedSection.querySelectorAll('input, select, textarea');
let hasValue = Array.from(inputs).some( input => {
if ( input.type === 'checkbox' ) {
return input.checked;
} else {
return input.value.trim() !== '';
}
});
recurrenceSet.classList.toggle('has-advanced-value', hasValue);
};
// Event listener scoped to current recurrenceSets container
recurrenceSets.addEventListener('change', function(e) {
if ( e.target.closest('.em-recurrence-advanced') ) {
updateAdvancedIcon( e.target.closest('.em-recurrence-set') );
}
});
// Initialize advanced icons on page load for current recurrenceSets container
recurrenceSets.querySelectorAll('.em-recurrence-set').forEach( recurrenceSet => updateAdvancedIcon( recurrenceSet ));
// Track the first recurrence set and update placeholders accordingly
recurrenceSets.querySelectorAll('.em-recurrence-type').forEach( function( recurrenceSetType ) {
recurrenceSetType.addEventListener('change', function(e ){
let recurrenceSet = e.target.closest('.em-recurrence-set');
if ( e.target.closest('.em-recurrence-advanced') ) {
// check changes to main/first recurrence
if ( recurrenceSetType.classList.contains('em-recurrence-type-include') ) {
if ( recurrenceSet === recurrenceSet.parentElement?.firstElementChild ) {
setAdvancedDefaults();
}
setDateTimes();
}
updateRecurrenceSummary( recurrenceSet );
} else if ( recurrenceSet?.querySelector('select.recurrence_freq')?.value === 'on' ) {
// account for 'on' frequency changes
setDateTimes();
}
});
});
// Track changes to the advanced section, for undo logic and other validation
recurrenceSets.addEventListener('change', function(e) {
if ( e.target.closest('.em-recurrence-advanced') ) {
let recurrenceSet = e.target.closest('.em-recurrence-set');
// go through each input with a name property and check if it different to the data-undo property (which may not be set)
let isModified = false;
recurrenceSet.querySelectorAll('.em-recurrence-advanced [name]:not([disabled]):not([data-nonce]').forEach( input => {
if ( input.name && input.dataset.undo ) {
if ( input.type === 'checkbox' ) {
if ( input.checked && input.dataset.undo !== '1' ) {
isModified = true;
}
} else {
if ( input.value !== input.dataset.undo ) {
isModified = true;
}
}
} else if ( recurrenceSets.dataset.event_id && input.value ) {
isModified = true;
}
});
recurrenceSet.classList.toggle('advanced-modified', isModified);
}
// Listen for changes to .em-time-range on non-primary recurrence sets
if ( e.target.matches('.em-time-input') ) {
let recurrenceSet = e.target.closest('.em-recurrence-set');
let startTimeInput = recurrenceSet.querySelector('.em-time-input.em-time-start');
let endTimeInput = recurrenceSet.querySelector('.em-time-input.em-time-end');
let durationInput = recurrenceSet.querySelector('input.em-recurrence-duration');
let isMultiDay = durationInput?.value > 0 || durationInput?.placeholder > 0 || false;
if ( !isMultiDay ) {
let startTime = startTimeInput.dataset.seconds ? parseInt(startTimeInput.dataset.seconds) : null;
let endTime = endTimeInput.dataset.seconds ? parseInt(endTimeInput.dataset.seconds) : null;
if ( !startTime || !endTime ) {
// Select the first recurrence set of type "include" within recurrenceSets
let recurrenceSetPrimary = recurrenceSets.querySelector('.em-recurrence-set[data-type="include"]:first-child');
if ( recurrenceSetPrimary ) {
if ( startTime === null ) {
let seconds = recurrenceSetPrimary.querySelector('.em-time-input.em-time-start')?.dataset.seconds;
startTime = seconds === undefined ? null : parseInt( recurrenceSetPrimary.querySelector('.em-time-input.em-time-start')?.dataset.seconds || 0 );
}
if ( endTime === null ) {
let seconds = recurrenceSetPrimary.querySelector('.em-time-input.em-time-end')?.dataset.seconds;
endTime = seconds === undefined ? null : parseInt( recurrenceSetPrimary.querySelector('.em-time-input.em-time-end')?.dataset.seconds || 0 );
}
}
}
// Ensure end time is not earlier than start time
if ( startTime !== null && endTime !== null ) {
if ( e.target.matches('.em-time-start') && startTime > endTime ) {
endTimeInput.value = startTimeInput.value;
endTimeInput.dispatchEvent(new Event('change'));
}
// Ensure start time is not later than end time
if ( e.target.matches('.em-time-end') && startTime > endTime ) {
startTimeInput.value = endTimeInput.value;
startTimeInput.dispatchEvent(new Event('change'));
}
}
}
}
// if duration is changed, trigger a change for the end time and make sure we're not at 0 with bad start/end times
if ( e.target.matches('input.em-recurrence-duration') ) {
if ( e.target.value === '0' || ( e.target.value === '' && e.target.placeholder === '0' ) ) {
let recurrenceSet = e.target.closest('.em-recurrence-set');
let sets = recurrenceSet.dataset.primary ? recurrenceSet : recurrenceSets;
sets.querySelectorAll('.em-recurrence-times .em-time-end').forEach( el => el.dispatchEvent(new Event('change')));
}
}
// listen for all-day checkbox changes within the non-primary recurrences
let primaryCb = recurrenceSets.querySelector('.em-recurrence-set[data-primary] .em-time-all-day');
if ( e.target.matches('.em-time-all-day') ) {
let cb = e.target;
if ( cb.matches('.em-recurrence-set[data-primary] .em-time-all-day') ) {
if ( cb.readOnly ) {
cb.checked = true;
cb.readOnly = false;
}
} else {
if ( cb.readOnly ) {
cb.checked = true;
cb.readOnly = false;
} else if ( cb.checked && primaryCb.checked ) {
cb.readOnly = true
cb.indeterminate = true;
// unset both times
cb.closest('.em-time-range').querySelectorAll('.em-time-input').forEach( el => { el.value = '' } );
}
}
}
});
// Update the recurrence summary of recurrences
recurrenceSets.addEventListener('updateRecurrenceSummary', function( e ) {
let sets = e.target.matches('.em-recurrence-set') ? [ e.target ] : e.target.querySelectorAll('.em-recurrence-set');
sets.forEach( function ( recurrenceSet ){
let advancedSummary = recurrenceSet.querySelector('.advanced-summary');
if ( advancedSummary ) {
// Initialize objects for values as one-liners
let dateValues = { start: '', end: '', startIsSet: false, endIsSet: false };
let timeValues = { start: '', end: '', startIsSet: false, endIsSet: false };
// Get date values with a loop
let datepickerDates = recurrenceSet.querySelector('.em-recurrence-dates.em-datepicker');
if ( datepickerDates.classList.contains('em-datepicker-until') ) {
['start', 'end'].forEach(function(type) {
let dateInput = datepickerDates.querySelector(`.em-date-input-${type}`);
if (dateInput) {
if (dateInput._flatpickr && dateInput._flatpickr.altInput && dateInput._flatpickr.selectedDates.length) {
// If flatpickr has a selected date, use that
dateValues[type] = dateInput._flatpickr.altInput.value;
dateValues[type + 'IsSet'] = true;
} else if (dateInput.nextElementSibling) {
// Otherwise use the visible input's value or placeholder
dateValues[type] = dateInput.nextElementSibling.value ||
dateInput.nextElementSibling.placeholder;
}
}
});
} else if ( datepickerDates.classList.contains('em-datepicker-range') ) {
let dateInput = datepickerDates.querySelector(`.em-date-input`);
if ( dateInput ) {
// get the dates from flatpickr, formatted into the altinput format
if (dateInput._flatpickr && dateInput._flatpickr.altInput && dateInput._flatpickr.selectedDates.length) {
// If flatpickr has a selected date, use that
dateValues['start'] = dateInput._flatpickr.altInput.value;
dateValues['startIsSet'] = true;
} else if (dateInput.nextElementSibling) {
// Otherwise use the visible input's value or placeholder
dateValues['start'] = dateInput.nextElementSibling.value ||
dateInput.nextElementSibling.placeholder;
}
}
}
// Get time values with a loop
['start', 'end'].forEach(function(type) {
let timeInput = recurrenceSet.querySelector(`.em-recurrence-times .em-time-${type}`);
if (timeInput) {
timeValues[type] = timeInput.value || timeInput.placeholder || '';
if ( timeInput.value ) {
timeValues[type + 'IsSet'] = true;
}
}
});
// Get timezone from select
let timezoneSelect = recurrenceSet.querySelector('.em-recurrence-timezone select');
let timezoneValue = '';
if (timezoneSelect) {
let value = timezoneSelect.value;
if (value) {
// If there's a value, get the text of the selected option (using null-coalescing)
timezoneValue = timezoneSelect.querySelector(`option[value="${value}"]`)?.textContent || '';
} else {
// If no value, try to get the placeholder (using null-coalescing)
timezoneValue = recurrenceSet.querySelector('.em-recurrence-timezone .selectize-input input')?.placeholder || '';
}
}
// Get duration
let durationInput = recurrenceSet.querySelector('.em-recurrence-duration input.em-recurrence-duration');
let durationValue = durationInput ? (durationInput.value.trim() || durationInput.placeholder || '0') : '0';
emRecurrenceEditor.updateDurationDescriptor( recurrenceSet );
// Update elements with direct one-liners
if ( Object.entries(dateValues).length === 4 ) {
advancedSummary.querySelectorAll('.start-date').forEach(el => { el.textContent = dateValues.start; el.classList.toggle('is-set', dateValues.startIsSet); });
advancedSummary.querySelectorAll('.end-date').forEach(el => { el.textContent = dateValues.end; el.classList.toggle('is-set', dateValues.endIsSet); });
} else {
advancedSummary.querySelectorAll('.dates').forEach(el => { el.textContent = dateValues.start; el.classList.toggle('is-set', dateValues.startIsSet); });
}
advancedSummary.querySelectorAll('.times').forEach( function( el ) {
el.innerHTML = `${timeValues.start} - ${timeValues.end}`;
el.firstElementChild.classList.toggle('is-set', timeValues.startIsSet);
el.lastElementChild.classList.toggle('is-set', timeValues.endIsSet);
});
advancedSummary.querySelector('.all-day')?.classList.toggle('is-set', recurrenceSet.querySelector('.em-time-all-day')?.checked );
advancedSummary.querySelectorAll('.timezone').forEach(el => { el.textContent = timezoneValue; el.classList.toggle('is-set', timezoneSelect?.value); });
advancedSummary.querySelectorAll('.duration').forEach(el => { el.textContent = durationValue; el.classList.toggle('is-set', durationInput && durationInput.value !== ''); });
}
});
});
});
document.addEventListener('em_event_editor_recurrences', function( e ) {
let recurrenceSets = e.detail.recurrenceSets;
document.addEventListener('em_setup_ui_elements', function(e) {
// clean up template of UI elements so they can be rebuilt when cloned
if ( e.detail.container === document ) {
let template = recurrenceSets.querySelector('.em-recurrence-set-template');
em_unsetup_ui_elements( template );
}
recurrenceSets.dispatchEvent( new CustomEvent('setAdvancedDefaults') );
recurrenceSets.dispatchEvent( new CustomEvent('setDateTimes') );
});
// track selectize changes
// Add change handlers for selectize dropdowns in first recurrence set
document.addEventListener('em_setup_ui_elements', function( e ) {
if ( e.detail.container === document ) {
// Get the first recurrence set
let firstRecurrenceSet = recurrenceSets.querySelector('.em-recurrence-type-include .em-recurrence-set:first-child');
// Map of recurrence field selectors to event field selectors
const fieldMappings = {
'.em-recurrence-timezone select': 'select[name="event_timezone"]',
'.em-recurrence-status select': 'select[name="event_active_status"]'
};
// Handle each field type
Object.entries(fieldMappings).forEach( function([recurrenceSelector, eventSelector]) {
let recurrenceField = firstRecurrenceSet.querySelector(recurrenceSelector);
// Find the corresponding event field
let eventFormWhen = recurrenceSets.closest('form').querySelector('.event-form-when');
let eventField = eventFormWhen?.querySelector(eventSelector);
if ( recurrenceField && eventField ) {
// Set up change handler using selectize API if available
if (recurrenceField.selectize) {
// For selectize fields
recurrenceField.selectize.on('change', function (value) {
if (eventField.selectize) {
// If event field is also selectize
eventField.selectize.setValue(value, true);
} else {
// If event field is a regular select
eventField.value = value;
eventField.dispatchEvent(new Event('change', {bubbles: true}));
}
});
} else {
// Fallback for regular select fields
recurrenceField.addEventListener('change', function () {
if (eventField.selectize) {
eventField.selectize.setValue(recurrenceField.value, true);
} else {
eventField.value = recurrenceField.value;
eventField.dispatchEvent(new Event('change', {bubbles: true}));
}
});
}
// Also handle initial sync (if recurrence field already has a value)
let initialValue = recurrenceField.selectize ? recurrenceField.selectize.getValue() : recurrenceField.value;
if (initialValue) {
if (eventField.selectize) {
eventField.selectize.setValue(initialValue, true);
} else {
eventField.value = initialValue;
}
}
}
});
}
});
});
//Tickets & Bookings - legacy stuff needing some rewrites
document.addEventListener('em_event_editor_loaded', function(e){
const $ = jQuery.noConflict();
if ( $( "#em-tickets-form" ).length > 0 ) {
//Enable/Disable Bookings
document.getElementById('event-rsvp').addEventListener('click', function (event) {
const nonceInput = this.parentElement.querySelector('input.event_rsvp_delete[data-nonce]');
const rsvpOptions = document.getElementById('event-rsvp-options');
if (!this.checked) {
const confirmation = confirm(EM.disable_bookings_warning);
if (!confirmation) {
event.preventDefault();
} else {
rsvpOptions.classList.add('hidden');
nonceInput.disabled = false;
}
} else {
rsvpOptions.classList.remove('hidden');
nonceInput.disabled = true;
}
});
if ( $( 'input#event-rsvp' ).is( ":checked" ) ) {
$( "div#rsvp-data" ).fadeIn();
} else {
$( "div#rsvp-data" ).hide();
}
//Ticket(s) UI
var reset_ticket_forms = function () {
$( '#em-tickets-form table tbody tr.em-tickets-row' ).show();
$( '#em-tickets-form table tbody tr.em-tickets-row-form' ).hide();
};
// handle indeterminate checkboxes and the hidden inputs they associate with
document.querySelectorAll('#em-tickets-form input.possibly-indeterminate[type="checkbox"], #em-tickets-form input[type="checkbox"][indeterminate]').forEach( cb => {
if ( cb.hasAttribute('indeterminate') && cb.readOnly ) {
cb.indeterminate = true;
}
cb.addEventListener('click', () => {
if ( cb.hasAttribute('indeterminate') && !cb.classList.contains('determinate') ) {
if ( cb.readOnly ) {
cb.checked = true;
cb.readOnly = false;
} else if ( cb.checked ) {
cb.readOnly = true
cb.indeterminate = true;
}
if ( cb.classList.contains('possibly-indeterminate') ) {
cb.nextElementSibling.value = cb.indeterminate ? 'default' : ( cb.checked ? 1 : 0 );
}
} else {
cb.nextElementSibling.value = cb.checked ? 1 : 0;
}
});
});
//Add a new ticket
$( "#em-tickets-add" ).on( 'click', function ( e ) {
e.preventDefault();
reset_ticket_forms();
//create copy of template slot, insert so ready for population
var tickets = $( '#em-tickets-form table tbody' );
tickets.first( '.em-ticket-template' ).find( 'input.em-date-input.flatpickr-input' ).each( function () {
if ( '_flatpickr' in this ) {
this._flatpickr.destroy();
}
} ); //clear all datepickers, should be done first time only, next times it'd be ignored
var rowNo = tickets.length + 1;
var slot = tickets.first( '.em-ticket-template' ).clone( true ).attr( 'id', 'em-ticket-' + rowNo ).removeClass( 'em-ticket-template' ).addClass( 'em-ticket' ).appendTo( $( '#em-tickets-form table' ) );
//change the index of the form element names
slot.find( '*[name]' ).each( function ( index, el ) {
el = $( el );
el.attr( 'name', el.attr( 'name' ).replace( 'em_tickets[0]', 'em_tickets[' + rowNo + ']' ) );
} );
// sort out until datepicker ids
let start_datepicker = slot.find( '.ticket-dates-from-normal' ).first();
if ( start_datepicker.attr( 'data-until-id' ) ) {
let until_id = start_datepicker.attr( 'data-until-id' ).replace( '-0', '-' + rowNo );
start_datepicker.attr( 'data-until-id', until_id );
slot.find( '.ticket-dates-to-normal' ).attr( 'id', start_datepicker.attr( 'data-until-id' ) );
}
//show ticket and switch to editor
slot.show().find( '.ticket-actions-edit' ).trigger( 'click' );
//refresh datepicker and values
slot.find( '.em-time-input' ).off().each( function ( index, el ) {
if ( typeof this.em_timepickerObj == 'object' ) {
this.em_timepicker( 'remove' );
}
} ); //clear all em_timepickers - consequently, also other click/blur/change events, recreate the further down
em_setup_ui_elements( slot );
$( 'html, body' ).animate( { scrollTop: slot.offset().top - 30 } ); //sends user to form
check_ticket_sortability();
// set up a UUID for this ticket
slot.find('.ticket_uuid').val(
"10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
(+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
)
)
} );
//Edit a Ticket
$( document ).on( 'click', '.ticket-actions-edit', function ( e ) {
e.preventDefault();
reset_ticket_forms();
var tbody = $( this ).closest( 'tbody' );
tbody.find( 'tr.em-tickets-row' ).hide();
tbody.find( 'tr.em-tickets-row-form' ).fadeIn();
return false;
} );
$( document ).on( 'click', '.ticket-actions-edited', function ( e ) {
e.preventDefault();
var tbody = $( this ).closest( 'tbody' );
var rowNo = tbody.attr( 'id' ).replace( 'em-ticket-', '' );
tbody.find( '.em-tickets-row' ).fadeIn();
tbody.find( '.em-tickets-row-form' ).hide();
tbody.find( '*[name]' ).each( function ( index, el ) {
el = $( el );
if ( el.attr( 'name' ) == 'ticket_start_pub' ) {
tbody.find( 'span.ticket_start' ).text( el.val() );
} else if ( el.attr( 'name' ) == 'ticket_end_pub' ) {
tbody.find( 'span.ticket_end' ).text( el.val() );
} else if ( el.attr( 'name' ) == 'em_tickets[' + rowNo + '][ticket_type]' ) {
if ( el.find( ':selected' ).val() == 'members' ) {
tbody.find( 'span.ticket_name' ).prepend( '* ' );
}
} else if ( el.attr( 'name' ) == 'em_tickets[' + rowNo + '][ticket_start_recurring_days]' ) {
var text = tbody.find( 'select.ticket-dates-from-recurring-when' ).val() == 'before' ? '-' + el.val() : el.val();
if ( el.val() != '' ) {
tbody.find( 'span.ticket_start_recurring_days' ).text( text );
tbody.find( 'span.ticket_start_recurring_days_text, span.ticket_start_time' ).removeClass( 'hidden' ).show();
} else {
tbody.find( 'span.ticket_start_recurring_days' ).text( ' - ' );
tbody.find( 'span.ticket_start_recurring_days_text, span.ticket_start_time' ).removeClass( 'hidden' ).hide();
}
} else if ( el.attr( 'name' ) == 'em_tickets[' + rowNo + '][ticket_end_recurring_days]' ) {
var text = tbody.find( 'select.ticket-dates-to-recurring-when' ).val() == 'before' ? '-' + el.val() : el.val();
if ( el.val() != '' ) {
tbody.find( 'span.ticket_end_recurring_days' ).text( text );
tbody.find( 'span.ticket_end_recurring_days_text, span.ticket_end_time' ).removeClass( 'hidden' ).show();
} else {
tbody.find( 'span.ticket_end_recurring_days' ).text( ' - ' );
tbody.find( 'span.ticket_end_recurring_days_text, span.ticket_end_time' ).removeClass( 'hidden' ).hide();
}
} else {
var classname = el.attr( 'name' ).replace( 'em_tickets[' + rowNo + '][', '' ).replace( ']', '' ).replace( '[]', '' );
tbody.find( '.em-tickets-row .' + classname ).text( el.val() );
}
} );
//allow for others to hook into this
$( document ).triggerHandler( 'em_maps_tickets_edit', [ tbody, rowNo, true ] );
$( 'html, body' ).animate( { scrollTop: tbody.parent().offset().top - 30 } ); //sends user back to top of form
return false;
} );
$( document ).on( 'change', '.em-ticket-form select.ticket_type', function ( e ) {
//check if ticket is for all users or members, if members, show roles to limit the ticket to
var el = $( this );
let ticketForm = el.closest( '.em-ticket-form' );
if ( this.value === 'members' || ( this.value === '-1' && this.dataset.default === 'members' ) ) {
el.closest( '.em-ticket-form' ).find( '.ticket-roles' ).fadeIn();
} else {
el.closest( '.em-ticket-form' ).find( '.ticket-roles' ).hide();
}
if ( this.value === '-1' && this.dataset.default === 'members' ) {
// set all checkboxes with indeterminate prop to indeterminate
ticketForm[0].querySelectorAll( '.ticket-roles input[type="checkbox"][indeterminate]' ).forEach( el => {
el.indeterminate = true;
el.classList.remove( 'determinate' )
} );
ticketForm[0].querySelectorAll( '.ticket-roles input[type="checkbox"]:not([indeterminate])' ).forEach( el => { el.checked = false; } );
}else if ( this.value === 'members' ) {
// remove indeterminate prop from all checkboxes
ticketForm[0].querySelectorAll( '.ticket-roles input[type="checkbox"][indeterminate]' ).forEach( el => {
el.indeterminate = false;
el.readOnly = false;
el.checked = true;
el.classList.add( 'determinate' )
} );
}
});
$('.em-ticket-form select.ticket_type').trigger('change');
$( document ).on( 'change', '.em-ticket-form .ticket-roles input[type="checkbox"]', function ( e ) {
let ticketForm = this.closest( '.em-ticket-form' );
let select = ticketForm.querySelector( '.em-ticket-form select.ticket_type' )
if ( select.dataset.default === 'members' && select.value === '-1' ) {
select.value = 'members';
ticketForm.querySelectorAll( '.ticket-roles input[type="checkbox"][indeterminate]' ).forEach( el => {
el.indeterminate = false;
el.readOnly = false;
el.checked = true;
el.classList.add( 'determinate' )
} );
}
});
$( document ).on( 'click', '.em-ticket-form .ticket-options-advanced', function ( e ) {
//show or hide advanced tickets, hidden by default
e.preventDefault();
var el = $( this );
if ( el.hasClass( 'show' ) ) {
el.closest( '.em-ticket-form' ).find( '.em-ticket-form-advanced' ).fadeIn();
el.find( '.show,.show-advanced' ).hide();
el.find( '.hide,.hide-advanced' ).show();
} else {
el.closest( '.em-ticket-form' ).find( '.em-ticket-form-advanced' ).hide();
el.find( '.show,.show-advanced' ).show();
el.find( '.hide,.hide-advanced' ).hide();
}
el.toggleClass( 'show' );
} );
$( '.em-ticket-form' ).each( function () {
//check whether to show advanced options or not by default for each ticket
var show_advanced = false;
var el = $( this );
el.find( '.em-ticket-form-advanced input[type="text"]' ).each( function () {
if ( this.value != '' ) show_advanced = true;
} );
if ( el.find( '.em-ticket-form-advanced input[type="checkbox"]:checked' ).length > 0 ) {
show_advanced = true;
}
el.find( '.em-ticket-form-advanced option:selected' ).each( function () {
if ( this.value != '' ) show_advanced = true;
} );
if ( show_advanced ) el.find( '.ticket-options-advanced' ).trigger( 'click' );
} );
//Delete a ticket
$( document ).on( 'click', '.ticket-actions-delete', function ( e ) {
e.preventDefault();
var el = $( this );
var tbody = el.closest( 'tbody' );
if ( tbody.find( 'input.ticket_id' ).val() > 0 ) {
//only will happen if no bookings made, we set the ticket as deleted and enable the delete nonce
let warning = this.classList.contains( 'parent-ticket' ) ? EM.eventEditor.deleteTicketParentWarning : EM.eventEditor.deleteTicketWarning;
if ( confirm( warning ) ) {
tbody.find( 'input.delete[data-nonce]' ).prop('disabled', false);
tbody.closest( '.em-ticket' ).addClass( 'ticket-deleted' );
}
} else {
//not saved to db yet, so just remove
tbody.remove();
}
check_ticket_sortability();
return false;
} );
//Sort Tickets
$( '#em-tickets-form.em-tickets-sortable table' ).sortable( {
items: '> tbody',
placeholder: "em-ticket-sortable-placeholder",
handle: '.ticket-status',
helper: function ( event, el ) {
var helper = $( el ).clone().addClass( 'em-ticket-sortable-helper' );
var tds = helper.find( '.em-tickets-row td' ).length;
helper.children().remove();
helper.append( '
' );
return helper;
},
} );
var check_ticket_sortability = function () {
var em_tickets = $( '#em-tickets-form table tbody.em-ticket' );
if ( em_tickets.length == 1 ) {
em_tickets.find( '.ticket-status' ).addClass( 'single' );
$( '#em-tickets-form.em-tickets-sortable table' ).sortable( "option", "disabled", true );
} else {
em_tickets.find( '.ticket-status' ).removeClass( 'single' );
$( '#em-tickets-form.em-tickets-sortable table' ).sortable( "option", "disabled", false );
}
};
check_ticket_sortability();
}
});
// WP List Tables front-end stuff
const setupListTable = function( listTable ) {
// handle checks of multiple items using shift
const checkboxes = listTable.querySelectorAll( 'tbody .check-column input[type="checkbox"]' );
const listTableForm = listTable.querySelector('form.em-list-table-form');
let lastChecked;
//Pagination link clicks
listTable.querySelectorAll('.tablenav-pages a').forEach( el => {
el.addEventListener('click', function ( e ) {
e.preventDefault();
//get page no from url, change page, submit form
let match = el.href.match(/#[0-9]+/);
if ( match != null && match.length > 0 ) {
let pno = match[0].replace('#', '');
listTableForm.querySelector('input[name=pno]').val(pno);
} else {
// new way
let url = new URL(el.href);
if ( url.searchParams.has('paged') ) {
listTableForm.querySelectorAll('input[name=pno], input[name=paged]').forEach( el => el.value = url.searchParams.get('paged') );
} else {
listTableForm.querySelectorAll('input[name=pno], input[name=paged]').forEach( el => el.value = 1 );
}
}
listTableForm.requestSubmit();
return false;
});
});
// Pagination - Input page number
listTable.querySelectorAll('.tablenav-pages input[name=paged]').forEach( function ( input ){
input.addEventListener('change', function (e) {
e.preventDefault();
let last = listTableForm.querySelector('.tablenav-pages a.last-page');
if ( last ) {
// check val isn't more than last page
let url = new URL(last.href);
if ( url.searchParams.has('paged') ) {
let lastPage = parseInt(url.searchParams.get('paged'));
if ( parseInt(input.value) > lastPage ) {
input.value = lastPage;
}
}
} else {
// make sure it's less than current page, we're on last page already
let lastPage = listTableForm.querySelector('input[name=pno]');
if (lastPage && lastPage.value && parseInt(input.value) > parseInt(lastPage.value)) {
input.value = lastPage.value;
e.preventDefault();
return false;
}
}
listTableForm.querySelectorAll('input[name=pno]').forEach( el => el.value = input.value );
listTableForm.requestSubmit();
return false;
});
});
// handle checkboxes
listTable.addEventListener('click', function(e){
// handle selecting all checkboxes
if( e.target.matches('.manage-column.column-cb input') ){
listTable.querySelectorAll('.check-column input').forEach( function( checkbox ){
checkbox.checked = e.target.checked;
checkbox.closest('tr').classList.toggle('selected', e.target.checked);
// enable/disable bulk actions filter
listTable.querySelector('.tablenav .bulkactions-input').querySelectorAll('input,select,button').forEach( function(el){
e.target.checked ? el.removeAttribute('disabled') : el.setAttribute('disabled', true);
e.target.checked ? el.classList.remove('disabled') : el.classList.add('disabled', true);
});
});
} else if ( e.target.matches('tbody .check-column input[type="checkbox"]') ) {
// handle multiple checks
let inBetween = false;
if ( e.shiftKey ) {
checkboxes.forEach(checkbox => {
if ( checkbox === e.target || checkbox === lastChecked ) {
inBetween = !inBetween;
}
if ( inBetween || checkbox === lastChecked ) {
checkbox.checked = lastChecked.checked;
}
checkbox.closest('tr').classList.toggle('selected', checkbox.checked);
});
} else {
e.target.closest('tr').classList.toggle('selected', e.target.checked);
}
// enable/disable bulk actions filter
let somethingSelected = e.target.checked || listTable.querySelectorAll( 'tbody .check-column input[type="checkbox"]:checked' ).length > 0;
listTable.querySelector('.tablenav .bulkactions-input').querySelectorAll('input,select,button').forEach( function(el){
somethingSelected ? el.removeAttribute('disabled') : el.setAttribute('disabled', true);
somethingSelected ? el.classList.remove('disabled') : el.classList.add('disabled', true);
});
lastChecked = e.target;
} else if ( e.target.closest('tbody td.column-primary') ) {
// handle row expand/collapse
if ( e.target.matches('a[href],button:not(.toggle-row)') ) return true; // allow links to pass
e.preventDefault();
let rowExpandTrigger = e.target.closest('td.column-primary');
let row = rowExpandTrigger.closest('tr');
if( row.classList.contains('expanded') ) {
row.classList.remove('expanded');
row.classList.add('collapsed');
rowExpandTrigger.querySelector('button.toggle-row').classList.remove('expanded');
} else {
row.classList.add('expanded');
row.classList.remove('collapsed');
rowExpandTrigger.querySelector('button.toggle-row').classList.add('expanded');
}
}
});
// disable filter since no checkboxes initially selected
listTable.querySelectorAll('.tablenav .bulkactions-input').forEach( (el) => {
el.querySelectorAll('input,select,button').forEach(function (el) {
el.setAttribute('disabled', true);
el.classList.add('disabled', true);
})
});
// Sorting by headers
listTable.querySelector('thead').addEventListener('click', function( e ) {
// get th element
let th = e.target.tagName.toLowerCase() === 'th' ? e.target : e.target.closest('th');
if( th && (th.classList.contains('sorted') || th.classList.contains('sortable')) ) {
e.preventDefault();
// add args to form and submit it
let params = ( new URL( th.querySelector('a').href) ).searchParams;
if ( params.get('orderby') ) {
listTableForm.querySelector('input[name="orderby"]').value = params.get('orderby');
let order = params.get('order') ? params.get('order') : 'asc';
listTableForm.querySelector('input[name="order"]').value = order;
listTableForm.requestSubmit();
}
}
});
// show/hide filters trigger
let filterTrigger = listTable.querySelector('button.filters-trigger');
if( filterTrigger ) {
filterTrigger.addEventListener('click', function(e){
e.preventDefault();
if( filterTrigger.classList.contains('hidden') ) {
listTable.querySelectorAll('div.actions.filters').forEach( filter => filter.classList.remove('hidden') );
filterTrigger.classList.remove('hidden');
filterTrigger.setAttribute('aria-label', filterTrigger.dataset.labelHide);
if( '_tippy' in filterTrigger ){
filterTrigger._tippy.setContent( filterTrigger.dataset.labelHide );
}
} else {
listTable.querySelectorAll('div.actions.filters').forEach( filter => filter.classList.add('hidden') );
filterTrigger.classList.add('hidden');
filterTrigger.setAttribute('aria-label', filterTrigger.dataset.labelShow);
if( '_tippy' in filterTrigger ){
filterTrigger._tippy.setContent( filterTrigger.dataset.labelShow );
}
}
});
listTable.addEventListener('em_resize', function(){
if( listTable.classList.contains('size-small') ) {
filterTrigger.classList.remove('hidden'); // force hide click
filterTrigger.click();
}
});
}
// EXPAND/COLLAPSE - RESPONSIVE
// handle expand/collapse in responsive mode when clicking the expand/collapse (all)
let expandTrigger = listTable.querySelector('button.small-expand-trigger');
if( expandTrigger ) {
// detect click and add expand class to table, expanded class to trigger
expandTrigger.addEventListener('click', function(e){
e.preventDefault();
if( expandTrigger.classList.contains('expanded') ) {
listTable.querySelectorAll('tbody tr.expanded, tbody button.toggle-row.expanded').forEach( el => el.classList.remove('expanded') );
listTable.classList.remove('expanded');
expandTrigger.classList.remove('expanded');
} else {
listTable.querySelectorAll('tbody tr, tbody button.toggle-row').forEach( el => {
el.classList.add('expanded');
el.classList.remove('collapsed');
});
listTable.classList.add('expanded');
expandTrigger.classList.add('expanded');
}
});
}
// handle filters when pressing enter, submitting a search
listTable.querySelectorAll('.tablenav .actions input[type="text"]').forEach( function (input) {
input.addEventListener('keypress', function (e) {
let keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode === 13) {
e.preventDefault();
listTableForm.requestSubmit();
}
});
});
// handle size breakpoints
let breakpoints = {
'xsmall' : 465,
'small' : 640,
'medium' : 930,
'large' : false,
}
// submissions
EM_ResizeObserver( breakpoints, [ listTable ] );
//Widgets and filter submissions
listTableForm.addEventListener('submit', function (e) {
e.preventDefault();
//append loading spinner
listTable.classList.add('em-working');
let loadingDiv = document.createElement('div');
loadingDiv.id = 'em-loading';
listTable.append(loadingDiv);
listTable.querySelectorAll('.em-list-table-error-notice').forEach( el => el.remove() );
//ajax call
fetch( EM.ajaxurl, { method: 'POST', body: new FormData(listTableForm) } ).then( function( response ) {
if ( response.ok ) {
return response.text();
} else {
throw new Error('Network Response ' + response.status);
}
}).then( function( data ) {
if ( !data ) {
throw new Error('Empty string received');
}
if (!listTable.classList.contains('frontend')) {
// remove modals as they are supplied again on the backend
listTableForm.querySelectorAll('.em-list-table-trigger').forEach(function ( trigger ) {
let modal = document.querySelector(trigger.rel);
if( modal ) {
modal.remove();
}
});
}
// get new data as DOM object
let wrapper = document.createElement('div');
wrapper.innerHTML = data;
let newListTable = wrapper.firstElementChild;
// replace old table with new table
listTable.replaceWith( newListTable );
// fire hook - note that form and data should not be used! This is for backward compatibility with an old jQuery hook being fired. Expect future consequences if you use them, obtain everything from listTable or prevListTable!
document.dispatchEvent( new CustomEvent('em_list_table_filtered', { detail: { prevListTable: listTable, listTable: newListTable, form: newListTable.firstElementChild, data: data } }) );
}).catch( function( error ) {
let div = document.createElement('div');
div.innerHTML = '
There was an unexpected error retrieving table data with error ' + error.message + ', please try again or contact an administrator.
';
div.setAttribute('class', 'em-warning error em-list-table-error-notice');
listTable.querySelector('.table-wrap').before(div);
loadingDiv.remove();
listTable.classList.remove('em-working');
});
return false;
});
//Settings & Export Modal
/**
* Handle trigger of settings and export modals.
*/
listTable.querySelectorAll('.em-list-table-trigger').forEach( trigger => {
trigger.addEventListener('click', function (e) {
e.preventDefault();
let modal = document.querySelector( trigger.getAttribute('rel') );
openModal(modal);
});
});
/**
* Handle submission of settings forms, by copying over hidden input values such as cols and limit to main form.
*/
listTable.querySelectorAll('.em-list-table-settings form').forEach( form => {
form.addEventListener('submit', function (e) {
e.preventDefault();
//we know we'll deal with cols, so wipe hidden value from main
let modal = form.closest('.em-modal');
let match = listTableForm.querySelector("[name=cols]");
match.value = '';
let tableCols = form.querySelectorAll('.em-list-table-cols-selected .item');
tableCols.forEach( function (item_match) {
if (!item_match.classList.contains('hidden')) {
if (match.value !== '') {
match.value = match.value + ',' + item_match.getAttribute('data-value');
} else {
match.value = item_match.getAttribute('data-value');
}
}
});
// sync row count
let limit = form.querySelector('select[name="limit"]');
if( limit ) {
listTableForm.querySelector('[name="limit"]').value = limit.value;
}
// sync custom inputs
form.querySelectorAll('[data-setting]').forEach( function( input ) {
listTableForm.querySelectorAll('[name="'+input.name+'"]').forEach( el => el.remove() );
let persisted = input.cloneNode(true);
persisted.classList.add('hidden')
listTableForm.appendChild( persisted );
});
closeModal(modal);
// send events out
modal.dispatchEvent( new CustomEvent('submitted') );
listTable.dispatchEvent( new CustomEvent( 'em_list_table_settings_submitted', {
detail: {
listTableForm: listTableForm,
form: form,
modal: modal
},
bubbles: true
}) );
// submit main form
listTableForm.requestSubmit();
});
});
/**
* Handle submission of export forms, by copying over filters and hidden inputs with the data-persist attribute from main list table form.
*/
listTable.querySelectorAll('.em-list-table-export > form').forEach( function( exportForm ) {
exportForm.addEventListener('submit', function(e) {
var formFilters = this.querySelector('.em-list-table-filters');
if ( formFilters ) {
// get all filter inputs in main list table form and copy over so export inherits all filters to output right results
let filters = listTableForm.querySelectorAll('.em-list-table-filters [name]');
formFilters.innerHTML = ''; // Empty the filters, none to copy over
if( filters ) {
filters.forEach( function( filter ) {
formFilters.appendChild( filter.cloneNode(true) );
});
}
let peristentData = listTableForm.querySelectorAll('[data-persist]');
if( peristentData ) {
peristentData.forEach( function( filter ) {
formFilters.appendChild( filter.cloneNode(true) );
});
}
}
});
});
// sortables
listTable.querySelectorAll(".em-list-table-cols-sortable").forEach( function(sortable) {
Sortable.create( sortable );
});
// add trigger
document.dispatchEvent( new CustomEvent('em_list_table_setup', { detail: { listTable: listTable, listTableForm: listTableForm } }) );
// add extra listeners that we might want to block such as in bulk actions and row actions
/* ----------------- Row/Bulk Action Handlers ----------------- */
const actionMessages = JSON.parse( listTableForm.dataset.actionMessages );
let isBulkAction = false;
listTable.addEventListener('click', function( e ) {
if( e.target.matches('a[data-row_action]') ) {
e.preventDefault();
let el = e.target;
let tr = el.closest('tr');
if( !isBulkAction ) {
let confirmation = []
// check if we need to confirm something specific
if ( el.dataset.confirmation && el.dataset.confirmation in actionMessages ) {
confirmation.push( actionMessages[el.dataset.confirmation] );
}
// check context of action and warn then propagate if upstream
if ( el.dataset.row_action in actionMessages ) {
confirmation.push( actionMessages[el.dataset.row_action] );
}
if ( confirmation.length > 0 ) {
if ( !confirm( confirmation.join("\n\n") ) ) {
return false;
}
}
}
// close dropdown if applicable
let dropdown = el.closest('[data-tippy-root], .em-tooltip-ddm-content');
if ( dropdown ) {
if ( '_tippy' in dropdown ) {
dropdown._tippy.hide();
}
}
// handle upstream rows, add a loading class to them so they don't get double-tapped, no checks necessary here since we have clicked a single row item
if( el.dataset.upstream ) {
// block any same upstream_id row so it's loading already pending refresh
listTable.querySelectorAll('tr[data-id="' + tr.dataset.id + '"]').forEach( tr => tr.classList.add('loading') );
}
// prep and fetch/refresh
let formData = new FormData( listTableForm );
for( const [key, value] of Object.entries(el.dataset) ) {
formData.set(key, value);
}
formData.set('view', listTable.dataset.view);
formData.set('action', listTable.dataset.basename + '_row');
listTableRowAction( tr, formData );
return false; // stop propagation
}
});
// Action links (approve/reject etc.) - circumvent if a warning is required
listTable.addEventListener( 'click', function( e ) {
if( e.target.matches('a[data-row_action]') ) {
e.preventDefault();
}
});
listTable.querySelectorAll('button.em-list-table-bulk-action').forEach( function( button ) {
button.addEventListener('click', function (e) {
e.preventDefault(); // override default
let actionSelector = listTableForm.querySelector('select.bulk-action-selector');
let action = actionSelector.options[actionSelector.selectedIndex];
// check if we need to confirm
if ( action.dataset.confirm ) {
if ( !confirm( action.dataset.confirm ) ) {
isBulkAction = false; // just in case
return false;
}
}
isBulkAction = true;
// find all checked items and perform action on them if the action actually exists for that row (e.g. you can't re-approve an approved booking)
let rows = listTableForm.querySelectorAll('tbody .check-column input:checked');
rows.forEach( function ( checkbox ) {
let actionTrigger = checkbox.parentElement.querySelector('[data-row_action="' + action.value + '"]');
// check if sibling has the relevant action
if( actionTrigger ) {
let tr = checkbox.closest('tr');
if ( actionTrigger.dataset.upstream ) {
// check if not already in an upstream process, proceed if not
if ( !tr.classList.contains('loading') ) { // if loading, already in upstream from another row
// trigger the first booking id row in this table, it'll handle upstream stuff
actionTrigger.click();
}
} else {
// regular action, just click it
actionTrigger.click();
}
}
});
isBulkAction = false;
});
});
// add a listener to refresh related booking rows if upstream
listTable.addEventListener('em_list_table_row_action_complete', function(e){
if ( e.detail.upstream ) {
// find any rows other than the current one and trigger a refresh
let currentRow = e.detail.currentRow;
let formData = e.detail.formData;
if( formData.get('row_action') === 'delete' ) {
let feedback = currentRow.querySelector('.column-primary span.em-icon-trash.em-tooltip');
if ( feedback ) {
listTable.querySelectorAll('tr[data-id="' + formData.get('row_id') + '"]').forEach( function( tr ) {
// apply to all rows of same booking_id except the one we just updated
if ( tr !== currentRow ) {
let td = tr.querySelector('.column-primary');
td.prepend(feedback.cloneNode(true));
em_setup_tippy(td);
}
tr.classList.remove('faded-out');
tr.classList.remove('loading');
});
}
} else if( formData.get('row_action') !== 'refresh' ) {
let feedback = currentRow.querySelector('.column-primary span.em-icon.em-tooltip').getAttribute('aria-label');
formData.set('row_action', 'refresh'); // this is a special action that just refreshes the row
formData.set('feedback', feedback);
listTable.querySelectorAll('tr[data-id="' + formData.get('row_id') + '"]').forEach( function( tr ) {
// apply to all rows of same booking_id except the one we just updated
if( tr !== currentRow ) {
listTableRowAction(tr, formData);
// delete current booking_id and reset isUpstreamAction if we're done
delete isUpstreamAction[e.detail.booking_id];
if (Object.keys(isUpstreamAction).length) {
isUpstreamAction = false;
}
}
});
}
}
});
// setup rows with actions if there are any
listTable.querySelectorAll('td.column-actions a').forEach( (action) => {
action.classList.add('em-tooltip');
action.setAttribute('aria-label', action.innerText);
});
}
let listTableRowAction = function( tr, formData, upstream = false ){
let listTable = tr.closest('.em-list-table');
tr.classList.add('loading');
formData.set('row_id', tr.dataset.id );
fetch( EM.ajaxurl, { method: 'post', body : formData } ).then( function( response ) {
return response.text();
}).then( function( html ) {
tr.classList.add('faded-out');
if ( formData.get('row_action') === 'delete' ) {
// the text provided is the icon, nothing else
tr.querySelectorAll('th.check-column input[type="checkbox"], .em-list-table-actions').forEach( el => el.remove() );
let td = tr.querySelector('.column-primary');
let wrapper = document.createElement('div');
wrapper.innerHTML = html;
let icon = wrapper.firstElementChild;
em_setup_tippy(wrapper); // no actions to set up
td.prepend(icon);
} else {
tr.innerHTML = html
setupListTableExtras(tr);
}
tr.classList.remove('faded-out');
tr.classList.remove('loading');
listTable.dispatchEvent( new CustomEvent('em_list_table_row_action_complete', { detail: { currentRow: tr, formData: formData, upstream: upstream } } ) );
});
}
const setupListTableExtras = function( listTable ) {
// setup rows with actions if there are any
listTable.querySelectorAll('td.column-actions a').forEach( (action) => {
action.classList.add('em-tooltip');
action.setAttribute('aria-label', action.innerText);
});
// remove tooltips within tooltips in cell tooltips
listTable.querySelectorAll('td .em-list-table-col-tooltip .em-list-table-col-tooltip').forEach( (subtip) => {
subtip.querySelectorAll('.em-tooltip').forEach( el => el.remove() );
subtip.querySelectorAll('.em-tooltip-content').forEach( el => el.classList.remove('hidden') );
});
// set up tippy, selectize etc.
em_setup_tippy( listTable );
em_setup_selectize( listTable );
}
document.addEventListener('em_list_table_filtered', function(e){
setupListTable( e.detail.listTable );
// re-setup tippy, selectize etc.
setupListTableExtras( e.detail.listTable );
});
// init
document.addEventListener('DOMContentLoaded', function() {
// add back-compat stuff
document.querySelectorAll('.em_obj div.tablenav').forEach( function( tablenav ){
let em_obj = tablenav.closest('.em_obj');
em_obj.classList.add('em-list-table','legacy', 'frontend');
em_obj.querySelector('& > form').classList.add('em-list-table-form');
});
// find tables
document.querySelectorAll('.em-list-table').forEach( listTable => setupListTable(listTable) );
});
// add extra setup to bookings list table
document.addEventListener('em_list_table_setup' , function(e){
let listTable = e.detail.listTable;
let listTableForm = e.detail.listTableForm;
if( listTable.classList.contains('em-bookings-table') ) {
// handle submitting the settings modal form with booking-speficic extras
listTable.addEventListener('em_list_table_settings_submitted', function(e){
let form = e.detail.form;
let listTableForm = e.detail.listTableForm;
// get the views ddm and sync it to the table filter
let views_select = form.querySelector('select[name="view"]');
if ( views_select ) {
let view_radio = listTableForm.querySelector('[name="view"][value="' + views_select.value + '"]');
if( view_radio ) {
view_radio.checked = true; // this doesn't trigger an event as we don't want that
}
let view_option = listTableForm.querySelector('button.em-bookings-table-view-option[data-view]');
if ( view_option ) {
view_option.setAttribute('data-view', views_select.value);
view_option.innerText = views_select.options[views_select.selectedIndex].innerText;
}
}
});
// setup views dropdown to switch between different booking table views
let views_ddm_options = {
theme : 'light-border',
allowHTML : true,
interactive : true,
trigger : 'manual',
placement : 'bottom',
zIndex : 1000000,
touch: true,
};
let tooltip_vars = { theme : 'light-border', appendTo : 'parent', touch : false, };
// TODO unify this with the search view dropdown JS to remove redundant code
listTable.querySelectorAll('.em-bookings-table-views-trigger').forEach( function( trigger ){
tooltip_vars.content = trigger.parentElement.getAttribute('aria-label');
let views_tooltip = tippy(trigger.parentElement, tooltip_vars);
let views_content = trigger.parentElement.querySelector('.em-bookings-table-views-options');
let views_content_parent = views_content.parentElement;
let tippy_content = document.createElement('div');
views_ddm_options.content = tippy_content;
let views_ddm = tippy(trigger, views_ddm_options);
views_ddm.setProps({
onShow(instance){
views_tooltip.disable();
tippy_content.append(views_content);
},
onShown(instance){ // keyboard support
views_content.querySelector('input:checked').focus();
},
onHidden(instance){
views_tooltip.enable();
if( views_content.parentElement !== views_content_parent ) {
views_content_parent.append(views_content);
}
}
});
let tippy_listener = function(e){
if( e.type === 'keydown' && !(e.which === 13 || e.which === 40) ) return false;
e.preventDefault();
e.stopPropagation();
trigger._tippy.show();
views_tooltip.hide();
}
trigger.addEventListener('click', tippy_listener);
trigger.addEventListener('keydown', tippy_listener);
trigger.firstElementChild.addEventListener('focus', function(e){
views_ddm.hide();
views_tooltip.enable();
views_tooltip.show();
});
trigger.firstElementChild.addEventListener('blur', function(){
views_tooltip.hide();
});
// TODO Remove this dependence on jQuery. Copied it from the search.js file, but it seems that even a vanilla document.addEventListener('blur') isn't intercepting these blur/focus events.
let $ = jQuery;
$views = $(listTable).find('.em-bookings-table-views');
$views.on('focus blur', '.em-bookings-table-views-options input', function(){
if( document.activeElement === this ){
this.parentElement.classList.add('focused');
}else{
this.parentElement.classList.remove('focused');
}
});
$views.on('keydown click', '.em-bookings-table-views-options input', function( e ){
// get relevant vars
if( e.type === 'keydown' && e.which !== 13 ){
if ( [37, 38, 39, 40].indexOf(e.which) !== -1 ) {
if (e.which === 38) {
if (this.parentElement.previousElementSibling) {
this.parentElement.previousElementSibling.focus();
}
} else if (e.which === 40) {
if (this.parentElement.nextElementSibling) {
this.parentElement.nextElementSibling.focus();
}
}
return false;
} else if ( e.which === 9 ) {
// focus out
views_ddm.hide();
}
return true;
}
this.checked = true;
let input = $(this);
// mark label selected
input.closest('fieldset').find('label').removeClass('checked');
input.parent().addClass('checked');
// get other reference elements we need
let views_wrapper = $(this).closest('.em-bookings-table-views');
let view_type = this.value;
let trigger = views_wrapper.children('.em-bookings-table-views-trigger');
let trigger_option = trigger.children('.em-search-view-option');
// change view, if different
if( view_type !== trigger_option.attr('data-view') ){
trigger_option.attr('data-view', this.value).text(this.parentElement.innerText);
// remove cols value if it's just a switch in view, so we get default cols (if there is one)
listTableForm.querySelector('input[name="cols"][type="hidden"]').value = '';
// set the view type and trigger a form submit
listTableForm.requestSubmit();
}
views_ddm.hide();
});
});
}
});
// backcompat for em_bookings_filtered jQuery trigger
document.addEventListener('em_list_table_filtered', function( e ){
if( e.detail.listTable.classList.contains('em-bookings-table') && window.jQuery ) {
jQuery(document).triggerHandler('em_bookings_filtered', [jQuery(e.detail.data), e.detail.listTable, jQuery(e.detail.form)]); // backwards compatibility
}
})
function em_setup_datepicker( container ){
wrap = jQuery(container);
//apply datepickers - jQuery UI (backcompat)
let dateDivs = wrap.find('.em-date-single, .em-date-range');
if( dateDivs.length > 0 ){
//default picker vals
var datepicker_vals = {
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
firstDay : EM.firstDay,
yearRange:'c-100:c+15',
beforeShow : function( el, inst ){
em_setup_jquery_ui_wrapper();
inst.dpDiv.appendTo('#em-jquery-ui');
}
};
if( EM.dateFormat ) datepicker_vals.dateFormat = EM.dateFormat;
if( EM.yearRange ) datepicker_vals.yearRange = EM.yearRange;
jQuery(document).triggerHandler('em_datepicker', datepicker_vals);
//apply datepickers to elements
dateDivs.find('input.em-date-input-loc').each(function(i,dateInput){
//init the datepicker
var dateInput = jQuery(dateInput);
var dateValue = dateInput.nextAll('input.em-date-input').first();
var dateValue_value = dateValue.val();
dateInput.datepicker(datepicker_vals);
dateInput.datepicker('option', 'altField', dateValue);
//now set the value
if( dateValue_value ){
var this_date_formatted = jQuery.datepicker.formatDate( EM.dateFormat, jQuery.datepicker.parseDate('yy-mm-dd', dateValue_value) );
dateInput.val(this_date_formatted);
dateValue.val(dateValue_value);
}
//add logic for texts
dateInput.on('change', function(){
if( jQuery(this).val() == '' ){
jQuery(this).nextAll('.em-date-input').first().val('');
}
});
});
//deal with date ranges
dateDivs.filter('.em-date-range').find('input.em-date-input-loc[type="text"]').each(function(i,dateInput){
//finally, apply start/end logic to this field
dateInput = jQuery(dateInput);
if( dateInput.hasClass('em-date-start') ){
dateInput.datepicker('option','onSelect', function( selectedDate ) {
//get corresponding end date input, we expect ranges to be contained in .em-date-range with a start/end input element
var startDate = jQuery(this);
var endDate = startDate.parents('.em-date-range').find('.em-date-end').first();
var startValue = startDate.nextAll('input.em-date-input').first().val();
var endValue = endDate.nextAll('input.em-date-input').first().val();
startDate.trigger('em_datepicker_change');
if( startValue > endValue && endValue != '' ){
endDate.datepicker( "setDate" , selectedDate );
endDate.trigger('change').trigger('em_datepicker_change');
}
endDate.datepicker( "option", 'minDate', selectedDate );
});
}else if( dateInput.hasClass('em-date-end') ){
var startInput = dateInput.parents('.em-date-range').find('.em-date-start').first();
if( startInput.val() != '' ){
dateInput.datepicker('option', 'minDate', startInput.val());
}
}
});
}
// datpicker - new format
let datePickerDivs = wrap.find('.em-datepicker, .em-datepicker-range');
if( datePickerDivs.length > 0 ){
// wrappers and locale
let datepicker_wrapper = jQuery('#em-flatpickr');
if( datepicker_wrapper.length === 0 ){
datepicker_wrapper = jQuery('').appendTo('body');
}
// locale
if( 'locale' in EM.datepicker ){
flatpickr.localize(flatpickr.l10ns[EM.datepicker.locale]);
flatpickr.l10ns.default.firstDayOfWeek = EM.firstDay;
}
//default picker vals
let datepicker_onChanging;
let datepicker_options = {
appendTo : datepicker_wrapper[0],
dateFormat: "Y-m-d",
disableMoble : "true",
allowInput : true,
onChange : [function( selectedDates, dateStr, instance ){
if ( datepicker_onChanging !== selectedDates) {
let wrapper = jQuery(instance.input).closest('.em-datepicker');
let data_wrapper = wrapper.find('.em-datepicker-data');
let inputs = data_wrapper.find('input');
let dateFormat = function(d) {
let month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
if ( selectedDates.length === 0 ){
if ( instance.config.mode === 'single' && wrapper.hasClass('em-datepicker-until') ) {
let input = instance.input.classList.contains('em-date-input-start') ? inputs[0] : inputs[1];
input.setAttribute('value', '');
if ( inputs.filter(input => input.value !== '').length === 0 ) {
wrapper.removeClass('has-value');
}
} else {
wrapper.removeClass('has-value');
inputs.attr('value', '');
if( instance.config.mode === 'multiple' ) {
// empty pill selection
let datesEl = instance.input.closest('.em-datepicker').querySelector('.em-datepicker-dates');
if (datesEl) {
datesEl.querySelectorAll('.item:not(.clear-all)').forEach( el => el.remove() );
datesEl.classList.remove('has-value');
}
}
}
} else {
wrapper.addClass('has-value');
if ( instance.config.mode === 'range' && selectedDates[1] !== undefined ) {
// deal with end date
inputs[0].setAttribute('value', dateFormat(selectedDates[0]));
inputs[1].setAttribute('value', dateFormat(selectedDates[1]));
} else if ( instance.config.mode === 'single' && wrapper.hasClass('em-datepicker-until') ){
if( instance.input.classList.contains('em-date-input-start') ){
inputs[0].setAttribute('value', dateFormat(selectedDates[0]));
// set min-date of other datepicker
let fp;
if( wrapper.attr('data-until-id') ){
let fp_inputData = jQuery('#' + wrapper.attr('data-until-id') + ' .em-date-input-end');
fp = fp_inputData[0]._flatpickr;
}else {
fp = wrapper.find('.em-date-input-end')[0]._flatpickr;
}
if( fp.selectedDates[0] !== undefined && fp.selectedDates[0] < selectedDates[0] ){
fp.setDate(selectedDates[0], false);
inputs[1].setAttribute('value', dateFormat(fp.selectedDates[0]));
}
fp.set('minDate', selectedDates[0]);
}else{
inputs[1].setAttribute('value', dateFormat(selectedDates[0]));
}
} else if ( instance.config.mode === 'multiple' ){
inputs[0].setAttribute('value', dateStr);
// Sort the selected dates chronologically
selectedDates.sort(function(a, b) { return a - b; });
// Build pill selection for multiple dates
let datesEl = instance.input.closest('.em-datepicker').querySelector('.em-datepicker-dates');
datesEl.classList.add('has-value');
if ( datesEl ) {
// Remove existing date pills but preserve the clear-all button
datesEl.querySelectorAll('.item:not(.clear-all)').forEach(el => el.remove());
// Sort dates chronologically
selectedDates.sort((a, b) => a - b);
// Group sequential dates into ranges
let groups = [], currentGroup = [];
selectedDates.forEach((date, i) => {
if (currentGroup.length === 0) {
currentGroup.push(date);
} else {
let lastDate = currentGroup[currentGroup.length - 1];
let diffDays = (date - lastDate) / (1000 * 3600 * 24);
if (diffDays === 1) {
currentGroup.push(date);
} else {
groups.push(currentGroup);
currentGroup = [date];
}
}
if (i === selectedDates.length - 1) groups.push(currentGroup);
});
// Insert pills and maintain date values
groups.forEach(group => {
let div = document.createElement('div');
div.className = 'item';
let formattedDates = group.map(date => instance.formatDate(date, 'Y-m-d'));
div.dataset.date = formattedDates.join(',');
let startText = instance.formatDate(group[0], instance.config.altFormat);
let endText = instance.formatDate(group[group.length - 1], instance.config.altFormat);
div.innerHTML = `${group.length > 1 ? startText + ' - ' + endText : startText}×`;
datesEl.insertBefore(div, datesEl.querySelector('.clear-all'));
});
}
} else {
inputs[0].setAttribute('value', dateFormat(selectedDates[0]));
}
}
inputs.trigger('change');
let current_date = data_wrapper.attr('date-value');
data_wrapper.attr('data-value', inputs.toArray().map(input => input.value).filter(value => value !== '').join(','));
if( current_date === dateStr ) data_wrapper.trigger('change');
wrapper[0].dispatchEvent( new CustomEvent('datepicker-onChange', { detail: { selectedDates : selectedDates, dateStr: dateStr, instance: instance } }) );
}
datepicker_onChanging = null; // reset regardless, since it's to prevent onClose firing this twice
}],
onClose : function( selectedDates, dateStr, instance ){
// deal with single date choice and clicking out
if( instance.config.mode === 'range' && selectedDates[1] !== undefined ){
if(selectedDates.length === 1){
instance.setDate([selectedDates[0],selectedDates[0]], true); // wouldn't have been triggered with a single date selection
}
} else {
// trigger an onChange
datepicker_options.onChange[0](selectedDates, dateStr, instance);
datepicker_onChanging = selectedDates; // set flag to prevent onChange firing twice
}
},
locale : {},
};
if( EM.datepicker.format !== datepicker_options.dateFormat ){
datepicker_options.altFormat = EM.datepicker.format;
datepicker_options.altInput = true;
}
jQuery(document).triggerHandler('em_datepicker_options', datepicker_options);
//apply datepickers to elements
datePickerDivs.each( function(i,datePickerDiv) {
// hide fallback fields, show range or single
datePickerDiv = jQuery(datePickerDiv);
datePickerDiv.find('.em-datepicker-data').addClass('hidden');
let isRange = datePickerDiv.hasClass('em-datepicker-range');
let altOptions = {};
if( datePickerDiv.attr('data-datepicker') ){
altOptions = JSON.parse(datePickerDiv.attr('data-datepicker'));
if( typeof altOptions !== 'object' ){
altOptions = {};
}
}
let otherOptions = {};
if( datePickerDiv.find('script.datepicker-options').length > 0 ){
otherOptions = JSON.parse( datePickerDiv.find('script.datepicker-options').text() );
if( typeof altOptions !== 'object' ){
otherOptions = {};
}
}
let options = Object.assign({}, datepicker_options, altOptions, otherOptions); // clone, mainly shallow concern for 'mode'
options.mode = isRange ? 'range' : 'single';
if ( datePickerDiv.hasClass('em-datepicker-multiple') ) {
options.mode = 'multiple';
}
if( isRange && 'onClose' in options ){
options.onClose = [function( selectedDates, dateStr, instance ){
if(selectedDates.length === 1){ // deal with single date choice and clicking out
instance.setDate([selectedDates[0],selectedDates[0]], true);
}
}];
}
if( datePickerDiv.attr('data-separator') ) options.locale.rangeSeparator = datePickerDiv.attr('data-separator');
if( datePickerDiv.attr('data-format') ) options.altFormat = datePickerDiv.attr('data-format');
let FPs = datePickerDiv.find('.em-date-input');
//if ( FPs.hasClass(flatpickr-input) ) return; // already initialized
if ( FPs[0].tagName.toLowerCase() === 'input' ) {
FPs.attr('type', 'text');
} else {
options.wrap = true;
FPs.find('input[type="hidden"]').attr('type', 'text');
}
FPs.flatpickr(options);
});
em_setup_datepicker_dates( datePickerDivs );
// fire trigger
jQuery(document).triggerHandler('em_flatpickr_loaded', [wrap]);
container.dispatchEvent( new CustomEvent('em_datepicker_loaded', { bubbles: true, detail: { container: wrap, datepickers: datePickerDivs } } ) );
}
}
function em_setup_datepicker_dates( container ) {
let datePickerContainer = jQuery(container);
let datePickerDivs = datePickerContainer.first().hasClass('em-datepicker') ? datePickerContainer : datePickerContainer.find('.em-datepicker, .em-datepicker-range') ;
// add values to elements, done once all datepickers instantiated so we don't get errors with date range els in separate divs
datePickerDivs.each( function(i,datePickerDiv) {
datePickerDiv = jQuery(datePickerDiv);
let FPs = datePickerDiv.find('.em-date-input');
//if ( FPs.hasClass(flatpickr-input) ) return;
let inputs = datePickerDiv.find('.em-datepicker-data input');
inputs.attr('type', 'hidden'); // hide so not tabbable
if( datePickerDiv.hasClass('em-datepicker-until') ){
let start_fp = FPs.filter('.em-date-input-start')[0]._flatpickr;
let end_fp;
if( datePickerDiv.attr('data-until-id') ){
end_fp = jQuery('#' + datePickerDiv.attr('data-until-id') + ' .em-date-input-end')[0]._flatpickr;
}else{
end_fp = FPs.filter('.em-date-input-end')[0]._flatpickr;
if( inputs[1] && inputs[1].value ) {
end_fp.setDate(inputs[1].value, false, 'Y-m-d');
}
}
if( inputs[0] && inputs[0].value ){
start_fp.setDate(inputs[0].value, false, 'Y-m-d');
end_fp.set('minDate', inputs[0].value);
}
start_fp._inputData = inputs[0] ? [inputs[0]] : [];
end_fp._inputData = inputs[1] ? [inputs[1]] : [];
}else if( datePickerDiv.hasClass('em-datepicker-multiple') ){
// handle multiple pre-loaded dates
if( inputs[0] && inputs[0].value ){
let datesArray = inputs[0].value.split(',');
FPs[0]._flatpickr.setDate(datesArray, true, 'Y-m-d');
}
FPs[0]._flatpickr._inputData = [ inputs[0] ];
}else{
let dates = [];
FPs[0]._flatpickr._inputData = [];
inputs.each( function( i, input ){
if( input.value ){
dates.push(input.value);
FPs[0]._flatpickr._inputData.push(input);
}
});
FPs[0]._flatpickr.setDate(dates, false, 'Y-m-d');
}
});
}
/**
* Deregister the datepicker
* @param wrap
*/
function em_unsetup_datepicker( wrap ) {
wrap.querySelectorAll(".em-datepicker .em-date-input.flatpickr-input").forEach( function( el ){
if( '_flatpickr' in el ){
el._flatpickr.destroy();
}
});
}
/**
* Handle the remove button for each date selection pill
*/
document.addEventListener('click', function(e) {
if ( !e.target.closest('.em-datepicker-dates .item:not(.clear-all) .remove') ) return;
e.preventDefault();
const pill = e.target.closest('.item');
const datesContainer = pill.closest('.em-datepicker-dates');
const datepickerContainer = datesContainer.closest('.em-datepicker');
const dateInput = datepickerContainer.querySelector('.em-date-input');
// Remove pill
pill.remove();
// Rebuild dates array from remaining pills
const newDates = [];
datesContainer.querySelectorAll('.item:not(.clear-all)').forEach(item => {
const dates = item.dataset.date.split(',');
dates.forEach(date => newDates.push(date));
});
// Update Flatpickr instance
const fp = datepickerContainer.querySelector('.em-date-input')._flatpickr;
if (fp) fp.setDate(newDates, true, 'Y-m-d');
// Update hidden input
const altInput = datepickerContainer.querySelector('.em-datepicker-data input');
if (altInput) {
altInput.value = newDates.join(',');
altInput.dispatchEvent(new Event('change'));
}
});
/**
* Handle the Clear All button
*/
document.addEventListener('click', function(e) {
if ( !e.target.closest('.em-datepicker-dates .clear-all') ) return;
e.preventDefault();
const datesContainer = e.target.closest('.em-datepicker-dates');
const datepickerContainer = datesContainer.closest('.em-datepicker');
const fp = datepickerContainer.querySelector('.em-date-input')._flatpickr;
// Remove all pills
datesContainer.querySelectorAll('.item:not(.clear-all)').forEach( item => item.remove() );
// Clear Flatpickr instance
if (fp) fp.clear();
// Update hidden input
const altInput = datepickerContainer.querySelector('.em-datepicker-data input');
if (altInput) {
altInput.value = '';
altInput.dispatchEvent(new Event('change'));
}
});
function em_setup_timepicker( container ){
wrap = jQuery(container);
var timepicker_options = {
step:15
}
timepicker_options.timeFormat = EM.show24hours == 1 ? 'G:i':'g:i A';
jQuery(document).triggerHandler('em_timepicker_options', timepicker_options);
wrap.find(".em-time-input").em_timepicker(timepicker_options).each( function(i, el){
this.dataset.seconds = this.value ? jQuery(this).em_timepicker('getSecondsFromMidnight') : '';
});
/**
* A function that retargets an the change event to the .em-time-range enclosing div whilst maintinaing the originally triggered target.
* This is done because the em_timepicker short-circuits the bubbling.
*
* @param {Event} e - The original event to be retargeted.
*/
let retargetEvent = function(e) {
e.stopPropagation();
const customEvent = new CustomEvent('change', {
bubbles: true,
cancelable: true,
detail: { target: e.target }
});
// Override the target getter to return the original element
Object.defineProperty(customEvent, 'target', {
configurable: true,
get: () => e.target,
});
e.target.closest('.em-time-range').dispatchEvent( customEvent );
};
// Keep the duration between the two inputs.
wrap.find(".em-time-range input.em-time-start").each( function(i, el){
var time = jQuery(el);
time.data('oldTime', time.em_timepicker('getSecondsFromMidnight'));
}).on('change', function( e ) {
var start = jQuery(this);
var wrapper = start.closest('.em-time-range');
var end = wrapper.find('.em-time-end').first();
if ( end.val() ) { // Only update when second input has a value.
// Calculate duration.
var oldTime = start.data('oldTime');
var duration = (end.em_timepicker('getSecondsFromMidnight') - oldTime) * 1000;
var time = start.em_timepicker('getSecondsFromMidnight');
if( this.value && end.em_timepicker('getSecondsFromMidnight') >= oldTime ){
// Calculate and update the time in the second input.
end.em_timepicker('setTime', new Date(start.em_timepicker('getTime').getTime() + duration));
}
start.data('oldTime', time);
}
if ( start.val() || end.val() ) {
wrapper.find('.em-time-all-day').prop('checked', false).prop('indeterminate', false);
}
this.dataset.seconds = start.val() ? start.em_timepicker('getSecondsFromMidnight') : '';
retargetEvent(e);
});
// Validate.
container.querySelectorAll('.em-time-range').forEach( el => el.addEventListener('change', function (e) {
if ( e.target.matches('input.em-time-end') ) {
let end = jQuery(e.target);
e.target.dataset.seconds = end.val() ? end.em_timepicker('getSecondsFromMidnight') : '';
let start = end.prevAll('.em-time-start');
let wrapper = e.target.closest('.event-form-when, .em-time-range');
let start_date_element = wrapper.querySelector('.em-date-end');
let end_date_element = wrapper.querySelector('.em-date-start');
let start_date = start_date_element ? start_date_element.value : '';
let end_date = end_date_element ? end_date_element.value : '';
if ( start.val() ) {
let hasError = start.em_timepicker('getTime') > end.em_timepicker('getTime') && (!end_date || start_date === end_date);
e.target.classList.toggle('error', hasError);
}
if (end_date_element) {
wrapper.querySelectorAll('.em-time-all-day').forEach(function (checkbox) {
checkbox.checked = false;
checkbox.indeterminate = false;
});
}
} else if ( e.target.matches('.em-date-end') ) {
jQuery(e.target.closest('.event-form-when')).find('.em-time-end').trigger('change');
} else if ( e.target.matches('input.em-time-all-day') ) {
e.currentTarget.querySelectorAll('.em-time-input').forEach(function (input) {
input.readOnly = e.target.checked;
});
if ( e.target.checked ) {
// set 12am and 11:59pm for start/end times
e.currentTarget.querySelectorAll('.em-time-start').forEach( el => jQuery(el).em_timepicker('setTime', new Date('2000-01-01 00:00:00') ) );
e.currentTarget.querySelectorAll('.em-time-end').forEach( el => jQuery(el).em_timepicker('setTime', new Date('2000-01-01 23:59:59') ) );
}
}
}) );
// listen to and dispatch the event
wrap.find(".em-time-range input.em-time-end").on('change', retargetEvent );
}
function em_unsetup_timepicker( container ) {
jQuery(container).find('.em-time-range input.em-time-end, .em-time-range input.em-time-start').unbind(['click','focus','change']); //clear all timepickers - consequently, also other click/blur/change events, recreate the further down
}
let em_close_other_selectized = function(){
// find all other selectized items and close them
let control = this.classList.contains('selectize-control') ? this.closest('.em-selectize.selectize-control') : this;
document.querySelectorAll('.em-selectize.dropdown-active').forEach( function( el ){
if( el !== control && 'selectize' in el.previousElementSibling) {
el.previousElementSibling.selectize.close();
}
});
}
document.addEventListener('events_manager_js_loaded', function(){
EM_Selectize.define('multidropdown', function( options ) {
if( !this.$input.hasClass('multidropdown') ) return;
let s = this;
let s_setup = s.setup;
let s_refreshOptions = s.refreshOptions;
let s_open = s.open;
let s_close = s.close;
let placeholder;
let placeholder_text
let placeholder_default;
let placeholder_label;
let counter;
let isClosing = false;
this.changeFunction = function() {
let items = s.getValue();
let selected_text = this.$input.attr('data-selected-text') ? this.$input.attr('data-selected-text') : '%d Selected';
counter.children('span.selected-text').text(selected_text.replace('%d', items.length));
if( items.length > 0 ) {
counter.removeClass('hidden');
placeholder_text.text( placeholder_label );
s.$control_input.attr('placeholder', s.$input.attr('placeholder'));
} else {
counter.addClass('hidden');
placeholder_text.text( placeholder_default );
}
}
this.setup = function() {
s_setup.apply(s);
s.isDropdownClosingPlaceholder = false;
// add section to top of selection to show the dropdown text
placeholder = jQuery('').prependTo(s.$wrapper);
let clear_text = this.$input.attr('data-clear-text') ? this.$input.attr('data-clear-text') : 'Clear Selection';
counter = jQuery('X' + clear_text + '
').prependTo(placeholder);
placeholder_text = jQuery('').appendTo(placeholder);
placeholder_default = s.$input.attr('data-default') ? s.$input.attr('data-default') : s.$input.attr('placeholder');
placeholder_label = s.$input.attr('data-label') ? s.$input.attr('data-label') : s.$input.attr('placeholder');
placeholder_text.text( placeholder_default );
s.$dropdown.prepend(s.$control_input.parent());
s.on('dropdown_close', function() {
s.$wrapper.removeClass('dropdown-active');
});
s.on('dropdown_open', function() {
s.$wrapper.addClass('dropdown-active');
s.$control_input.val('');
});
s.on('change', this.changeFunction);
placeholder.on('focus blur click', function (e) {
// only if we're clicking on the placeholder
if( this.matches('.em-selectize-placeholder') ) {
if ( !s.isOpen && e.type !== 'blur' ){
s.open();
} else if ( s.isOpen && e.type !== 'focus' ) {
s.close();
}
}
}).on('focus blur click mousedown mouseup', function( e ){
if( this.matches('.em-selectize-placeholder') ) {
// stope selectize doing anything to our own open/close actions
e.stopPropagation();
e.preventDefault();
if( e.type === 'click' ) {
em_close_other_selectized.call( this.closest('.selectize-control') );
if ( s.isOpen && s.$control_input.val() && !this.matches('.placeholder-count') && !this.closest('.placeholder-count') ) {
isClosing = true;
s.close();
}
} else {
isClosing = false;
}
return false;
}
});
counter.on( 'click' , function( e ){
e.preventDefault();
e.stopPropagation();
s.clear();
if( s.isOpen ) s.refreshOptions();
});
this.changeFunction();
}
// prevent dropdown from closing when no options are found, because the search input shows within the dropdown in multidropdown
this.refreshOptions = function ( ...args ) {
s_refreshOptions.apply(s, args);
if ( !this.hasOptions && this.lastQuery ) {
// intervene on closing only if not in a closing process caused by our own listeners
if( isClosing === false ) {
this.$wrapper.addClass("dropdown-active");
s.isOpen = true;
}
this.$wrapper.addClass("no-options");
isClosing = false;
} else {
this.$wrapper.removeClass("no-options");
}
};
});
});
function em_setup_selectize( container_element ){
container = jQuery(container_element); // in case we were given a dom object
container.find('.em-selectize.selectize-control').on( 'click', em_close_other_selectized );
let optionRender = function (item, escape) {
let html = '