| 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_html = $.fn.wpbc_timeselector.format( times_options ); |
| 31 |
|
| 32 |
el.after( times_options_html ); |
| 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 |
// Find option in selectbox with this value |
| 46 |
el.find( 'option[value="' + selected_value + '"]' ).prop( 'selected', true ); |
| 47 |
|
| 48 |
el.trigger( 'change' ); |
| 49 |
}); |
| 50 |
|
| 51 |
// Execute a function when the user presses a key (13 - Enter) on the keyboard. (FixIn: EAA) |
| 52 |
el.next( '.wpbc_times_selector' ).find( 'div' ).not( '.wpbc_time_picker_disabled' ).on( "keypress", function (event) { |
| 53 |
if ( 13 === event.which ) { |
| 54 |
event.preventDefault(); |
| 55 |
console.log( jQuery( this ) ); |
| 56 |
jQuery( this ).trigger( 'click' ); |
| 57 |
} |
| 58 |
} ); |
| 59 |
|
| 60 |
el.hide(); |
| 61 |
|
| 62 |
times_options = []; |
| 63 |
} ); |
| 64 |
|
| 65 |
return this; // Chain |
| 66 |
} |
| 67 |
} ); |
| 68 |
|
| 69 |
|
| 70 |
// Get HTML structure of times selection |
| 71 |
$.fn.wpbc_timeselector.format = function ( el_arr ) { |
| 72 |
|
| 73 |
var select_div = ''; |
| 74 |
var css_class=''; |
| 75 |
|
| 76 |
$.each( el_arr, function (index, el_item){ |
| 77 |
|
| 78 |
if ( !el_item.disabled ){ |
| 79 |
|
| 80 |
if (el_item.selected){ |
| 81 |
css_class = 'wpbc_time_selected'; |
| 82 |
} else { |
| 83 |
css_class = ''; |
| 84 |
} |
| 85 |
|
| 86 |
select_div += '<div ' |
| 87 |
+ ' data-value="' + el_item.value + '" ' |
| 88 |
+ ' class="' + css_class + '" ' |
| 89 |
+ ' tabindex="0" ' |
| 90 |
+ '>' |
| 91 |
+ el_item.title |
| 92 |
+ '</div>' |
| 93 |
} else { |
| 94 |
// Uncomment row bellow to Show booked time slots as unavailable RED slots // FixIn: 9.9.0.2. |
| 95 |
// select_div += '<div class="wpbc_time_picker_disabled">' + el_item.title + '</div>'; |
| 96 |
} |
| 97 |
|
| 98 |
} ); |
| 99 |
|
| 100 |
if ( '' == select_div ){ |
| 101 |
select_div = '<span class="wpbc_no_time_pickers">' |
| 102 |
+ 'No available times' |
| 103 |
+ '</span>' |
| 104 |
} |
| 105 |
return '<div class="wpbc_times_selector">' + select_div + '</div>'; |
| 106 |
} |
| 107 |
|
| 108 |
|
| 109 |
})( jQuery ); |
| 110 |
|
| 111 |
|
| 112 |
/** |
| 113 |
* Init time selector |
| 114 |
*/ |
| 115 |
function wpbc_hook__init_timeselector(){ |
| 116 |
|
| 117 |
if ( true !== _wpbc.get_other_param( 'is_enabled_booking_timeslot_picker' ) ) { |
| 118 |
return false; |
| 119 |
} |
| 120 |
|
| 121 |
// Load after page loaded |
| 122 |
jQuery( 'select[name^="rangetime"]' ).wpbc_timeselector(); |
| 123 |
jQuery( 'select[name^="starttime"]' ).wpbc_timeselector(); |
| 124 |
jQuery( 'select[name^="endtime"]' ).wpbc_timeselector(); |
| 125 |
jQuery( 'select[name^="durationtime"]' ).wpbc_timeselector(); |
| 126 |
|
| 127 |
// This hook loading after each day selection // FixIn: 8.7.11.9. |
| 128 |
jQuery( ".booking_form_div" ).on( 'wpbc_hook_timeslots_disabled', function ( event, bk_type, all_dates ){ |
| 129 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="rangetime"]' ).wpbc_timeselector(); |
| 130 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="starttime"]' ).wpbc_timeselector(); |
| 131 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="endtime"]' ).wpbc_timeselector(); |
| 132 |
jQuery( '#booking_form_div' + bk_type + ' select[name^="durationtime"]' ).wpbc_timeselector(); |
| 133 |
} ); |
| 134 |
} |
| 135 |
|
| 136 |
jQuery(document).ready(function(){ |
| 137 |
// setTimeout( function ( ) { // Need to have some delay for loading of all times in Garbage |
| 138 |
wpbc_hook__init_timeselector(); |
| 139 |
// }, 1000 ); |
| 140 |
}); |
