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

		@@ -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,10 +41,12 @@
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
		@@ -66,45 +68,56 @@
66	68	}
67	69	} );
68	70
69	71
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		- }
	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	+ };
107	120
108	121
109	122	})( jQuery );
110	123