PluginProbe
Booking Calendar / 11.9
Booking Calendar v11.9
11.9 11.8.4 11.8.3 11.8.2 11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 All 205 releases
← All changes | includes/page-form-builder/preview/_src/bfb-preview.js +172 -7 10.15.6 → 11.9 View file →
@@ -1,4 +1,4 @@
1 1 // ---------------------------------------------------------------------------------------------------------------------
2 2 // == File /includes/page-form-builder/preview/_out/bfb-preview.js
3 3 // == BFB Preview Client — sends current structure via AJAX and loads preview URL into iframe
4 4 // ---------------------------------------------------------------------------------------------------------------------
@@ -116,9 +116,9 @@
116 116 *
117 117 * @param {string} form_name
118 118 * @returns {{options:Object, css_vars:Object}}
119 119 */
120 - get_current_form_settings(form_name) {
120 + get_current_form_settings(form_name) {
121 121
122 122 var form_settings = {
123 123 options : {},
124 124 css_vars: {}
@@ -140,12 +140,174 @@
140 140 if ( !form_settings.css_vars || typeof form_settings.css_vars !== 'object' ) {
141 141 form_settings.css_vars = {};
142 142 }
143 143
144 - return form_settings;
144 + return form_settings;
145 + }
146 +
147 + /**
148 + * Read a Form Style control directly from DOM.
149 + *
150 + * @param {string} key
151 + * @returns {string|null}
152 + */
153 + read_form_style_control_value(key) {
154 + var control = null;
155 + var checked = null;
156 +
157 + if ( key === 'booking_form_style' ) {
158 + checked = d.querySelector( 'input[type="radio"][name="booking_form_style"]:checked' );
159 + return checked ? String( checked.value || '' ) : null;
160 + }
161 +
162 + control = d.querySelector( '[data-wpbc-bfb-fs-key="' + key + '"]' );
163 + if ( ! control ) {
164 + control = d.getElementById( key );
165 + }
166 + if ( ! control ) {
167 + return null;
168 + }
169 +
170 + if ( control.matches && control.matches( 'input[type="radio"]' ) ) {
171 + checked = d.querySelector( 'input[type="radio"][name="' + control.name + '"]:checked' );
172 + return checked ? String( checked.value || '' ) : null;
173 + }
174 + if ( control.matches && control.matches( 'input[type="checkbox"]' ) ) {
175 + return control.checked ? 'On' : 'Off';
176 + }
177 +
178 + if ( typeof control.value !== 'undefined' ) {
179 + return String( control.value == null ? '' : control.value );
180 + }
181 +
182 + return null;
183 + }
184 +
185 + /**
186 + * Build the current global Form Style override for preview only.
187 + *
188 + * @returns {Object}
189 + */
190 + get_current_form_style_settings() {
191 + var style_keys = [
192 + 'booking_form_style',
193 + 'booking_form_accent_enabled',
194 + 'booking_form_accent_color',
195 + 'booking_form_custom_background_color',
196 + 'booking_form_custom_border_color',
197 + 'booking_form_custom_border_width',
198 + 'booking_form_custom_border_radius',
199 + 'booking_form_custom_padding_vertical',
200 + 'booking_form_custom_padding_horizontal',
201 + 'booking_form_custom_text_color',
202 + 'booking_form_custom_field_background_color',
203 + 'booking_form_custom_field_text_color',
204 + 'booking_form_custom_field_border_color',
205 + 'booking_form_custom_button_background_color',
206 + 'booking_form_custom_button_text_color',
207 + 'booking_form_custom_button_border_color',
208 + 'booking_form_custom_button_hover_background_color',
209 + 'booking_form_custom_button_hover_text_color',
210 + 'booking_form_custom_button_hover_border_color',
211 + 'booking_form_custom_secondary_button_background_color',
212 + 'booking_form_custom_secondary_button_text_color',
213 + 'booking_form_custom_secondary_button_border_color',
214 + 'booking_form_custom_secondary_button_hover_background_color',
215 + 'booking_form_custom_secondary_button_hover_text_color',
216 + 'booking_form_custom_secondary_button_hover_border_color'
217 + ];
218 + var out = {};
219 + var collected = {};
220 + var self = this;
221 + var localized = w.wpbc_bfb_settings_vars && w.wpbc_bfb_settings_vars.global_form_style
222 + ? w.wpbc_bfb_settings_vars.global_form_style
223 + : {};
224 +
225 + if ( w.WPBC_BFB_FormSettings && typeof w.WPBC_BFB_FormSettings.collect === 'function' ) {
226 + collected = w.WPBC_BFB_FormSettings.collect( 'global' ) || {};
227 + }
228 +
229 + style_keys.forEach( function (key) {
230 + var dom_value = self.read_form_style_control_value( key );
231 + if ( null !== dom_value ) {
232 + out[key] = dom_value;
233 + } else if ( Object.prototype.hasOwnProperty.call( collected, key ) ) {
234 + out[key] = collected[key];
235 + } else if ( Object.prototype.hasOwnProperty.call( localized, key ) ) {
236 + out[key] = localized[key];
237 + }
238 + } );
239 +
240 + return out;
241 + }
242 +
243 + /**
244 + * Get the currently selected calendar skin URL from the Builder page.
245 + *
246 + * @returns {string}
247 + */
248 + get_selected_calendar_skin_url() {
249 + var select_el = d.querySelector( '.js-wpbc-bfb-calendar-skin' );
250 + if ( select_el && select_el.options ) {
251 + var selected_option = select_el.options[ select_el.selectedIndex ];
252 + if ( selected_option ) {
253 + var selected_url = selected_option.getAttribute( 'data-wpbc-calendar-skin-url' );
254 + if ( selected_url ) {
255 + return String( selected_url );
256 + }
257 + }
258 + }
259 +
260 + var stylesheet = d.getElementById( 'wpbc-calendar-skin-css' );
261 + if ( stylesheet && stylesheet.href ) {
262 + return String( stylesheet.href );
263 + }
264 +
265 + return '';
145 266 }
146 267
268 + /**
269 + * Apply the unsaved Builder calendar skin inside the loaded Preview iframe.
270 + *
271 + * @param {string} skin_url
272 + * @param {Function} done
273 + * @param {number} tries
274 + */
275 + apply_calendar_skin_to_iframe(skin_url, done, tries) {
276 + var self = this;
277 + var attempt_num = Number( tries || 0 );
147 278
279 + if ( ! skin_url || ! this.iframe || ! this.iframe.contentWindow ) {
280 + if ( typeof done === 'function' ) {
281 + done();
282 + }
283 + return;
284 + }
285 +
286 + try {
287 + if ( typeof this.iframe.contentWindow.wpbc__calendar__change_skin === 'function' ) {
288 + this.iframe.contentWindow.wpbc__calendar__change_skin( skin_url );
289 + if ( typeof done === 'function' ) {
290 + done();
291 + }
292 + return;
293 + }
294 + } catch ( e ) {
295 + dev.error( 'wpbc_bfb_preview_client.apply_calendar_skin_to_iframe', e );
296 + }
297 +
298 + if ( attempt_num >= 20 ) {
299 + if ( typeof done === 'function' ) {
300 + done();
301 + }
302 + return;
303 + }
304 +
305 + w.setTimeout( function () {
306 + self.apply_calendar_skin_to_iframe( skin_url, done, attempt_num + 1 );
307 + }, 100 );
308 + }
309 +
148 310 /**
149 311 * Send snapshot to server and update iframe src with returned preview URL.
150 312 *
151 313 * @param {{source_button?:HTMLElement}} [opts]
@@ -178,10 +340,11 @@
178 340
179 341 var payload = new w.FormData();
180 342 var cfg = w.WPBC_BFB_Ajax || {};
181 343
182 - // Build settings payload (same as real saving).
183 - var form_settings = this.get_current_form_settings( cfg.form_name || 'standard' );
344 + // Build settings payload (same as real saving).
345 + var form_settings = this.get_current_form_settings( cfg.form_name || 'standard' );
346 + var preview_form_style = this.get_current_form_style_settings();
184 347
185 348 payload.append( 'action', 'WPBC_AJX_BFB_SAVE_FORM_CONFIG' );
186 349 payload.append( 'nonce', ( cfg.nonce_save || this.nonce || '' ) );
187 350
@@ -195,10 +358,11 @@
195 358 payload.append( 'engine_version', ( cfg.engine_version || '1.0' ) );
196 359
197 360 payload.append( 'structure', JSON.stringify( structure ) );
198 361
199 - // Send real settings (options + compiled css_vars).
200 - payload.append( 'settings', JSON.stringify( form_settings ) );
362 + // Send real settings (options + compiled css_vars).
363 + payload.append( 'settings', JSON.stringify( form_settings ) );
364 + payload.append( 'preview_form_style', JSON.stringify( preview_form_style ) );
201 365
202 366 // ----------------------------------------------------------------------------
203 367 // Choose where advanced_form + content_form are taken from (auto|builder|advanced)
204 368 // ----------------------------------------------------------------------------
@@ -295,8 +459,9 @@
295 459 ajax_url = w.ajaxurl;
296 460 }
297 461
298 462 var self = this;
463 + var preview_calendar_skin_url = this.get_selected_calendar_skin_url();
299 464
300 465 function end_busy_now() {
301 466 self._end_busy( $source_btn );
302 467 }
@@ -329,9 +494,9 @@
329 494
330 495 // Wait until iframe has really loaded the preview URL.
331 496 var on_load = function () {
332 497 self.iframe.removeEventListener( 'load', on_load );
333 - end_busy_now();
498 + self.apply_calendar_skin_to_iframe( preview_calendar_skin_url, end_busy_now );
334 499 };
335 500
336 501 self.iframe.addEventListener( 'load', on_load );
337 502 self.iframe.setAttribute( 'src', data.data.preview_url );