← All changes | js/wpbc_time-selector.js +129 -62 10.1.3 → 11.8.4 View file →

		@@ -1,5 +1,5 @@
1		-//FixIn: 8.7.11.10
	1	+// FixIn: 8.7.11.10.
2	2	(function ( $ ){
3	3
4	4	$.fn.extend( {
5	5
		@@ -26,12 +26,12 @@
26	26	} );
27	27
28	28	} );
29	29
30		- var times_options_html = $.fn.wpbc_timeselector.format( times_options );
	30	+ var times_options_element = $.fn.wpbc_timeselector.format( times_options );
	31	+
	32	+ el.after( times_options_element );
31	33
32		- el.after( times_options_html );
33		-
34	34	el.next('.wpbc_times_selector').find('div').not('.wpbc_time_picker_disabled').on( "click", function() {
35	35
36	36	// Get data value of clicked DIV time-slot
37	37	var selected_value = jQuery( this ).attr( 'data-value' );
		@@ -41,14 +41,25 @@
41	41	// Set time item with selected Class
42	42	jQuery( this ).addClass('wpbc_time_selected');
43	43
44	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 );
	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 );
47	49
48	50	el.trigger( 'change' );
49	51	});
50	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	+
51	62	el.hide();
52	63
53	64	times_options = [];
54	65	} );
		@@ -57,67 +68,123 @@
57	68	}
58	69	} );
59	70
60	71
61		- // Get HTML structure of times selection
62		- $.fn.wpbc_timeselector.format = function ( el_arr ) {
	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	+ };
63	120
64		- var select_div = '';
65		- var css_class='';
66	121
67		- $.each( el_arr, function (index, el_item){
68		-
69		- if ( !el_item.disabled ){
70		-
71		- if (el_item.selected){
72		- css_class = 'wpbc_time_selected';
73		- } else {
74		- css_class = '';
75		- }
76		-
77		- select_div += '<div '
78		- + ' data-value="' + el_item.value + '" '
79		- + ' class="' + css_class + '" '
80		- + '>'
81		- + el_item.title
82		- + '</div>'
83		- } else {
84		- // Uncomment row bellow to Show booked time slots as unavailable RED slots //FixIn: 9.9.0.2
85		- // select_div += '<div class="wpbc_time_picker_disabled">' + el_item.title + '</div>';
86		- }
87		-
88		- } );
89		-
90		- if ( '' == select_div ){
91		- select_div = '<span class="wpbc_no_time_pickers">'
92		- + 'No available times'
93		- + '</span>'
94		- }
95		- return '<div class="wpbc_times_selector">' + select_div + '</div>';
96		- }
97		-
98		-
99	122	})( jQuery );
100	123
101	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	+ }
102	146
103		-jQuery(document).ready(function(){
	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();
104	152
105		-// setTimeout( function ( ) { // Need to have some delay for loading of all times in Garbage
106		-
107		- // Load after page loaded
108		- jQuery( 'select[name^="rangetime"]' ).wpbc_timeselector();
109		- jQuery( 'select[name^="starttime"]' ).wpbc_timeselector();
110		- jQuery( 'select[name^="endtime"]' ).wpbc_timeselector();
111		- jQuery( 'select[name^="durationtime"]' ).wpbc_timeselector();
112		-
113		- // This hook loading after each day selection //FixIn: 8.7.11.9
114		- jQuery( ".booking_form_div" ).on( 'wpbc_hook_timeslots_disabled', function ( event, bk_type, all_dates ){
115		- jQuery( '#booking_form_div' + bk_type + ' select[name^="rangetime"]' ).wpbc_timeselector();
116		- jQuery( '#booking_form_div' + bk_type + ' select[name^="starttime"]' ).wpbc_timeselector();
117		- jQuery( '#booking_form_div' + bk_type + ' select[name^="endtime"]' ).wpbc_timeselector();
118		- jQuery( '#booking_form_div' + bk_type + ' select[name^="durationtime"]' ).wpbc_timeselector();
119		- } );
120		-
121		-// }, 1000 );
122		-
123		-});
	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	+});