| 1 |
// FixIn: 8.7.11.10. |
| 2 |
(function ( $ ){ |
| 3 |
|
| 4 |
$.fn.extend( { |
| 5 |
|
| 6 |
wpbc_timeselector: function (){ |
| 7 |
|
| 8 |
var times_options = []; |
| 9 |
|
| 10 |
this.each( function (){ |
| 11 |
|
| 12 |
var el = $( this ); |
| 13 |
|
| 14 |
// On new days click we are searching for old time items, and remove them from this booking form |
| 15 |
if ( el.parent().find( '.wpbc_times_selector' ).length ) { |
| 16 |
el.parent().find( '.wpbc_times_selector' ).remove(); |
| 17 |
} |
| 18 |
|
| 19 |
el.find( 'option' ).each( function ( ind ){ |
| 20 |
|
| 21 |
times_options.push( { |
| 22 |
title : jQuery( this ).text() |
| 23 |
, value : jQuery( this ).val() |
| 24 |
, disabled: jQuery( this ).is( ':disabled' ) |
| 25 |
, selected: jQuery( this ).is( ':selected' ) |
| 26 |
} ); |
| 27 |
|
| 28 |
} ); |
| 29 |
|
| 30 |
var times_options_element = $.fn.wpbc_timeselector.format( times_options ); |
| 31 |
|
| 32 |
el.after( times_options_element ); |
| 33 |
|
| 34 |
el.next('.wpbc_times_selector').find('div').not('.wpbc_time_picker_disabled').on( "click", function() { |
| 35 |
|
| 36 |
// Get data value of clicked DIV time-slot |
| 37 |
var selected_value = jQuery( this ).attr( 'data-value' ); |
| 38 |
|
| 39 |
// Remove previos selected class |
| 40 |
jQuery( this ).parent( '.wpbc_times_selector' ).find( '.wpbc_time_selected' ).removeClass( 'wpbc_time_selected' ); |
| 41 |
// Set time item with selected Class |
| 42 |
jQuery( this ).addClass('wpbc_time_selected'); |
| 43 |
|
| 44 |
el.find( 'option' ).prop( 'selected', false ); |
| 45 |
// Match the literal value without interpreting it as selector syntax. |
| 46 |
el.find( 'option' ).filter( function (){ |
| 47 |
return selected_value === jQuery( this ).val(); |
| 48 |
} ).prop( 'selected', true ); |
| 49 |
|
| 50 |
el.trigger( 'change' ); |
| 51 |
}); |
| 52 |
|
| 53 |
// Execute a function when the user presses a key (13 - Enter) on the keyboard. (FixIn: EAA) |
| 54 |
el.next( '.wpbc_times_selector' ).find( 'div' ).not( '.wpbc_time_picker_disabled' ).on( "keypress", function (event) { |
| 55 |
if ( 13 === event.which ) { |
| 56 |
event.preventDefault(); |
| 57 |
console.log( jQuery( this ) ); |
| 58 |
jQuery( this ).trigger( 'click' ); |
| 59 |
} |
| 60 |
} ); |
| 61 |
|
| 62 |
el.hide(); |
| 63 |
|
| 64 |
times_options = []; |
| 65 |
} ); |
| 66 |
|
| 67 |
return this; // Chain |
| 68 |
} |
| 69 |
} ); |
| 70 |
|
| 71 |
|
| 72 |
/** |
| 73 |
* Build the visual time-slot selector from native option data. |
| 74 |
* |
| 75 |
* Values and labels can originate in saved form configuration or modified |
| 76 |
* DOM state. Creating elements and assigning text/attributes separately |
| 77 |
* prevents either value from becoming executable markup. |
| 78 |
* |
| 79 |
* @param {Array<Object>} el_arr Time-slot option records. |
| 80 |
* @return {jQuery} Detached, safely populated time-slot selector. |
| 81 |
*/ |
| 82 |
$.fn.wpbc_timeselector.format = function ( el_arr ) { |
| 83 |
|
| 84 |
var times_selector = jQuery( document.createElement( 'div' ) ).addClass( 'wpbc_times_selector' ); |
| 85 |
var has_available_times = false; |
| 86 |
|
| 87 |
$.each( el_arr, function (index, el_item){ |
| 88 |
|
| 89 |
if ( !el_item.disabled ){ |
| 90 |
var time_option_value = ( 'undefined' === typeof el_item.value || null === el_item.value ) ? '' : el_item.value; |
| 91 |
var time_option_title = ( 'undefined' === typeof el_item.title || null === el_item.title ) ? '' : el_item.title; |
| 92 |
var time_option = jQuery( document.createElement( 'div' ) ) |
| 93 |
.attr( 'data-value', String( time_option_value ) ) |
| 94 |
.attr( 'tabindex', '0' ) |
| 95 |
.text( String( time_option_title ) ); |
| 96 |
|
| 97 |
if ( el_item.selected ){ |
| 98 |
time_option.addClass( 'wpbc_time_selected' ); |
| 99 |
} |
| 100 |
|
| 101 |
times_selector.append( time_option ); |
| 102 |
has_available_times = true; |
| 103 |
} else { |
| 104 |
// Uncomment row bellow to Show booked time slots as unavailable RED slots // FixIn: 9.9.0.2. |
| 105 |
// Add a disabled element through the same DOM construction path when this feature is enabled. |
| 106 |
} |
| 107 |
|
| 108 |
} ); |
| 109 |
|
| 110 |
if ( ! has_available_times ){ |
| 111 |
times_selector.append( |
| 112 |
jQuery( document.createElement( 'span' ) ) |
| 113 |
.addClass( 'wpbc_no_time_pickers' ) |
| 114 |
.text( 'No available times' ) |
| 115 |
); |
| 116 |
} |
| 117 |
|
| 118 |
return times_selector; |
| 119 |
}; |
| 120 |
|
| 121 |
|
| 122 |
})( jQuery ); |
| 123 |
|
| 124 |
|
| 125 |
/** |
| 126 |
* Initialize the visual time-slot selectors when the WPBC runtime is ready. |
| 127 |
* |
| 128 |
* The readiness check prevents a JavaScript error when a third-party optimizer |
| 129 |
* delays wpbc_all.js, which creates window._wpbc, beyond document ready. |
| 130 |
* |
| 131 |
* @return {boolean} True when initialization is complete or not required; |
| 132 |
* otherwise false when the WPBC runtime is not ready yet. |
| 133 |
*/ |
| 134 |
function wpbc_hook__init_timeselector(){ |
| 135 |
|
| 136 |
if ( |
| 137 |
( 'object' !== typeof window._wpbc ) |
| 138 |
|| ( 'function' !== typeof window._wpbc.get_other_param ) |
| 139 |
) { |
| 140 |
return false; |
| 141 |
} |
| 142 |
|
| 143 |
if ( true !== window._wpbc.get_other_param( 'is_enabled_booking_timeslot_picker' ) ) { |
| 144 |
return true; |
| 145 |
} |
| 146 |
|
| 147 |
// Load after page loaded |
| 148 |
jQuery( 'select[name^="rangetime"]' ).wpbc_timeselector(); |
| 149 |
jQuery( 'select[name^="starttime"]' ).wpbc_timeselector(); |
| 150 |
jQuery( 'select[name^="endtime"]' ).wpbc_timeselector(); |
| 151 |
jQuery( 'select[name^="durationtime"]' ).wpbc_timeselector(); |
| 152 |
|
| 153 |
// This hook loading after each day selection // FixIn: 8.7.11.9. |
| 154 |
jQuery( ".booking_form_div" ).on( 'wpbc_hook_timeslots_disabled', function ( event, bk_type, all_dates ){ |
| 155 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="rangetime"]' ).wpbc_timeselector(); |
| 156 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="starttime"]' ).wpbc_timeselector(); |
| 157 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="endtime"]' ).wpbc_timeselector(); |
| 158 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="durationtime"]' ).wpbc_timeselector(); |
| 159 |
} ); |
| 160 |
|
| 161 |
return true; |
| 162 |
} |
| 163 |
|
| 164 |
|
| 165 |
/** |
| 166 |
* Initialize the time selector now or after the WPBC core signals readiness. |
| 167 |
* |
| 168 |
* @return {void} |
| 169 |
*/ |
| 170 |
function wpbc_init_timeselector_when_wpbc_ready(){ |
| 171 |
|
| 172 |
if ( wpbc_hook__init_timeselector() ) { |
| 173 |
return; |
| 174 |
} |
| 175 |
|
| 176 |
var wpbc_timeselector_ready_handler = function (){ |
| 177 |
if ( wpbc_hook__init_timeselector() ) { |
| 178 |
document.removeEventListener( 'wpbc-ready', wpbc_timeselector_ready_handler ); |
| 179 |
} |
| 180 |
}; |
| 181 |
|
| 182 |
document.addEventListener( 'wpbc-ready', wpbc_timeselector_ready_handler ); |
| 183 |
} |
| 184 |
|
| 185 |
|
| 186 |
jQuery(document).ready(function(){ |
| 187 |
// setTimeout( function ( ) { // Need to have some delay for loading of all times in Garbage |
| 188 |
wpbc_init_timeselector_when_wpbc_ready(); |
| 189 |
// }, 1000 ); |
| 190 |
}); |
| 191 |
|
