← All changes | js/wpbc_time-selector.js +42 -55 11.8.4 → 11.8.3 View file →

		@@ -26,12 +26,12 @@
26	26	} );
27	27
28	28	} );
29	29
30		- var times_options_element = $.fn.wpbc_timeselector.format( times_options );
31		-
32		- el.after( times_options_element );
	30	+ var times_options_html = $.fn.wpbc_timeselector.format( times_options );
33	31
	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,12 +41,10 @@
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		- // 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 );
	45	+ // Find option in selectbox with this value
	46	+ el.find( 'option[value="' + selected_value + '"]' ).prop( 'selected', true );
49	47
50	48	el.trigger( 'change' );
51	49	});
52	50
		@@ -68,56 +66,45 @@
68	66	}
69	67	} );
70	68
71	69
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		- };
	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	+ }
120	107
121	108
122	109	})( jQuery );
123	110