← All changes | includes/page-form-builder/form-settings/_src/settings.js +188 -4 11.4 → 11.8.4 View file →

		@@ -11,9 +11,11 @@
11	11	*
12	12	* Optional:
13	13	* - re-apply after Builder STRUCTURE_LOADED (timing hook only)
14	14	*/
15		- const api = (w.WPBC_BFB_FormSettings = w.WPBC_BFB_FormSettings || {});
	15	+ const api = (w.WPBC_BFB_FormSettings = w.WPBC_BFB_FormSettings || {});
	16	+ let pending_time_picker_skin_button = null;
	17	+ let previous_time_picker_skin_url = '';
16	18
17	19	// Last received settings pack (from AJAX).
18	20	let last_settings_pack = null;
19	21
		@@ -22,8 +24,10 @@
22	24	let retry_count = 0;
23	25	const retry_max = 20;
24	26	const fallback_form_style_option_keys = [
25	27	'booking_form_style',
	28	+ 'booking_form_accent_enabled',
	29	+ 'booking_form_accent_color',
26	30	'booking_form_custom_background_color',
27	31	'booking_form_custom_border_color',
28	32	'booking_form_custom_border_width',
29	33	'booking_form_custom_border_radius',
		@@ -44,8 +48,10 @@
44	48	'booking_form_custom_secondary_button_border_color',
45	49	'booking_form_custom_secondary_button_hover_background_color',
46	50	'booking_form_custom_secondary_button_hover_text_color',
47	51	'booking_form_custom_secondary_button_hover_border_color',
	52	+ 'booking_form_custom_button_border_width',
	53	+ 'booking_form_custom_button_border_radius',
48	54	'booking_form_theme',
49	55	'booking_form_container_style',
50	56	'booking_form_background_color',
51	57	'booking_form_border_color',
		@@ -146,13 +152,17 @@
146	152	}
147	153	}
148	154
149	155	function get_default_custom_appearance_settings() {
150		- const localized = w.wpbc_bfb_settings_vars && w.wpbc_bfb_settings_vars.custom_form_style_defaults
	156	+ const localized_custom_style = w.wpbc_bfb_settings_vars && w.wpbc_bfb_settings_vars.custom_form_style_defaults
151	157	? w.wpbc_bfb_settings_vars.custom_form_style_defaults
152	158	: {};
	159	+ const localized_form_accent = w.wpbc_bfb_settings_vars && w.wpbc_bfb_settings_vars.form_accent_defaults
	160	+ ? w.wpbc_bfb_settings_vars.form_accent_defaults
	161	+ : {};
153	162
154	163	return Object.assign( {
	164	+ booking_form_accent_enabled: 'Off',
155	165	booking_form_custom_background_color : '#ffffff',
156	166	booking_form_custom_border_color : '#cccccc',
157	167	booking_form_custom_border_width : '1px',
158	168	booking_form_custom_border_radius : '2px',
		@@ -172,10 +182,12 @@
172	182	booking_form_custom_secondary_button_text_color: '#444444',
173	183	booking_form_custom_secondary_button_border_color: '#eeeeee',
174	184	booking_form_custom_secondary_button_hover_background_color: '#fdfdfd',
175	185	booking_form_custom_secondary_button_hover_text_color: '#444444',
176		- booking_form_custom_secondary_button_hover_border_color: '#4d91cd'
177		- }, localized );
	186	+ booking_form_custom_secondary_button_hover_border_color: '#4d91cd',
	187	+ booking_form_custom_button_border_width : '1px',
	188	+ booking_form_custom_button_border_radius : '3px'
	189	+ }, localized_custom_style, localized_form_accent );
178	190	}
179	191
180	192	function get_form_style_option_keys() {
181	193	const localized = w.wpbc_bfb_settings_vars && Array.isArray( w.wpbc_bfb_settings_vars.form_style_option_keys )
		@@ -547,8 +559,180 @@
547	559	}
548	560
549	561	e.preventDefault();
550	562	api.reset_custom_appearance();
	563	+ }, false );
	564	+
	565	+ /**
	566	+ * Switch the global time-picker skin to the form-aware Automatic skin.
	567	+ *
	568	+ * The option is saved through the existing nonce-protected option saver.
	569	+ * Legacy skins are changed only by this explicit user action.
	570	+ *
	571	+ * @param {HTMLButtonElement} button Accent action button.
	572	+ * @returns {boolean} Whether an AJAX option save was started.
	573	+ */
	574	+ function switch_time_picker_to_automatic(button) {
	575	+ const automatic_skin = '/css/time_picker_skins/form_style.css';
	576	+ const current_skin = button ? String( button.getAttribute( 'data-wpbc-time-picker-skin-current' ) || '' ) : '';
	577	+ const automatic_url = button ? String( button.getAttribute( 'data-wpbc-time-picker-skin-url' ) || '' ) : '';
	578	+
	579	+ if ( ! button || current_skin.slice( -automatic_skin.length ) === automatic_skin ) {
	580	+ return false;
	581	+ }
	582	+ if ( typeof w.wpbc_save_option_from_element !== 'function' ) {
	583	+ return false;
	584	+ }
	585	+
	586	+ const time_api = w.WPBC_BFB_Core && w.WPBC_BFB_Core.Time ? w.WPBC_BFB_Core.Time : null;
	587	+ if ( automatic_url ) {
	588	+ previous_time_picker_skin_url = d.getElementById( 'wpbc-time_picker-skin-css' )
	589	+ ? String( d.getElementById( 'wpbc-time_picker-skin-css' ).getAttribute( 'href' ) || '' )
	590	+ : '';
	591	+ if ( time_api && typeof time_api.apply_picker_skin_url === 'function' ) {
	592	+ time_api.apply_picker_skin_url( automatic_url );
	593	+ } else if ( typeof w.wpbc__css__change_skin === 'function' && d.getElementById( 'wpbc-time_picker-skin-css' ) ) {
	594	+ w.wpbc__css__change_skin( automatic_url, 'wpbc-time_picker-skin-css' );
	595	+ }
	596	+ }
	597	+
	598	+ pending_time_picker_skin_button = button;
	599	+ button.setAttribute( 'data-wpbc-u-save-value', automatic_skin );
	600	+ w.wpbc_save_option_from_element( button );
	601	+
	602	+ return true;
	603	+ }
	604	+
	605	+ /**
	606	+ * Mark the Automatic skin as current after the option saver confirms it.
	607	+ *
	608	+ * @returns {void}
	609	+ */
	610	+ w.wpbc_bfb_time_picker_skin_saved = function () {
	611	+ if ( pending_time_picker_skin_button ) {
	612	+ pending_time_picker_skin_button.setAttribute( 'data-wpbc-time-picker-skin-current', '/css/time_picker_skins/form_style.css' );
	613	+ }
	614	+ if ( w.WPBC_BFB_Core && w.WPBC_BFB_Core.Time && typeof w.WPBC_BFB_Core.Time.ui_set_picker_skin_value === 'function' ) {
	615	+ w.WPBC_BFB_Core.Time.ui_set_picker_skin_value( '/css/time_picker_skins/form_style.css' );
	616	+ }
	617	+ pending_time_picker_skin_button = null;
	618	+ previous_time_picker_skin_url = '';
	619	+ };
	620	+
	621	+ if ( w.jQuery ) {
	622	+ w.jQuery( d ).on( 'wpbc:option:afterSave.wpbcBfbTimePickerSkin', function (event, response) {
	623	+ if ( ! pending_time_picker_skin_button || ( response && response.success ) ) {
	624	+ return;
	625	+ }
	626	+ const previous_skin = String( pending_time_picker_skin_button.getAttribute( 'data-wpbc-time-picker-skin-current' ) || '' );
	627	+
	628	+ const time_api = w.WPBC_BFB_Core && w.WPBC_BFB_Core.Time ? w.WPBC_BFB_Core.Time : null;
	629	+ if ( previous_time_picker_skin_url && time_api && typeof time_api.apply_picker_skin_url === 'function' ) {
	630	+ time_api.apply_picker_skin_url( previous_time_picker_skin_url );
	631	+ } else if ( previous_time_picker_skin_url && typeof w.wpbc__css__change_skin === 'function' ) {
	632	+ w.wpbc__css__change_skin( previous_time_picker_skin_url, 'wpbc-time_picker-skin-css' );
	633	+ }
	634	+ if ( w.WPBC_BFB_Core && w.WPBC_BFB_Core.Time && typeof w.WPBC_BFB_Core.Time.ui_set_picker_skin_value === 'function' ) {
	635	+ w.WPBC_BFB_Core.Time.ui_set_picker_skin_value( previous_skin );
	636	+ }
	637	+ pending_time_picker_skin_button = null;
	638	+ previous_time_picker_skin_url = '';
	639	+ } );
	640	+ }
	641	+
	642	+ /**
	643	+ * Ask accent-capable field packs to copy the current accent into their
	644	+ * existing editable color properties. Field packs update the counters.
	645	+ *
	646	+ * @param {HTMLButtonElement} button Action button.
	647	+ * @returns {void}
	648	+ */
	649	+ api.apply_accent_to_components = function (button) {
	650	+ const toggle = d.getElementById( 'booking_form_accent_enabled' );
	651	+ const color_control = d.getElementById( 'booking_form_accent_color' );
	652	+ const status = d.querySelector( '[data-wpbc-bfb-accent-components-status="1"]' );
	653	+ const i18n = w.wpbc_bfb_settings_vars && w.wpbc_bfb_settings_vars.i18n ? w.wpbc_bfb_settings_vars.i18n : {};
	654	+ const default_appearance = get_default_custom_appearance_settings();
	655	+ const accent_color = color_control && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test( String( color_control.value || '' ).trim() )
	656	+ ? String( color_control.value ).trim()
	657	+ : String( default_appearance.booking_form_accent_color || '' ).trim();
	658	+
	659	+ if ( ! toggle || ! toggle.checked ) {
	660	+ if ( status ) {
	661	+ status.textContent = i18n.accent_enable_first || 'Enable Custom accent color first.';
	662	+ }
	663	+ return;
	664	+ }
	665	+
	666	+ if ( button ) {
	667	+ button.disabled = true;
	668	+ }
	669	+
	670	+ const apply_to_builder = function (builder) {
	671	+ const detail = {
	672	+ accent_color: accent_color,
	673	+ builder : builder || w.wpbc_bfb || null,
	674	+ matched : 0,
	675	+ updated : 0
	676	+ };
	677	+
	678	+ try {
	679	+ d.dispatchEvent( new CustomEvent( 'wpbc:bfb:apply-accent-to-components', {
	680	+ bubbles: true,
	681	+ detail : detail
	682	+ } ) );
	683	+ } catch ( _e ) {}
	684	+
	685	+ const time_picker_save_started = switch_time_picker_to_automatic( button );
	686	+
	687	+ if ( status ) {
	688	+ if ( detail.updated > 0 ) {
	689	+ status.textContent = ( 1 === detail.updated )
	690	+ ? ( i18n.accent_applied_one || 'Accent applied to one form element. Save Form to keep the change.' )
	691	+ : String( i18n.accent_applied_many || 'Accent applied to %d form elements. Save Form to keep the changes.' ).replace( '%d', String( detail.updated ) );
	692	+ } else if ( detail.matched > 0 ) {
	693	+ status.textContent = i18n.accent_already_applied || 'All supported form elements already have the current accent color.';
	694	+ } else {
	695	+ status.textContent = i18n.accent_no_elements || 'No accent-capable form elements were found.';
	696	+ }
	697	+ if ( time_picker_save_started ) {
	698	+ status.textContent += ' ' + ( i18n.accent_time_picker_automatic || 'Time slots now use Automatic — Match Booking Form.' );
	699	+ }
	700	+ }
	701	+
	702	+ if ( detail.updated > 0 ) {
	703	+ try {
	704	+ d.dispatchEvent( new CustomEvent( 'wpbc:bfb:structure:change', {
	705	+ bubbles: true,
	706	+ detail : { source: 'apply-accent-to-components', updated: detail.updated }
	707	+ } ) );
	708	+ } catch ( _e2 ) {}
	709	+ }
	710	+
	711	+ if ( detail.builder && typeof detail.builder._announce === 'function' ) {
	712	+ detail.builder._announce( status ? status.textContent : ( i18n.accent_applied_announcement || 'Form accent applied.' ) );
	713	+ }
	714	+ if ( button && ! time_picker_save_started ) {
	715	+ button.disabled = false;
	716	+ }
	717	+ };
	718	+
	719	+ if ( w.wpbc_bfb_api && w.wpbc_bfb_api.ready && typeof w.wpbc_bfb_api.ready.then === 'function' ) {
	720	+ w.wpbc_bfb_api.ready.then( apply_to_builder );
	721	+ return;
	722	+ }
	723	+
	724	+ apply_to_builder( w.wpbc_bfb || null );
	725	+ };
	726	+
	727	+ d.addEventListener( 'click', function (e) {
	728	+ const btn = e && e.target && e.target.closest ? e.target.closest( '[data-wpbc-bfb-apply-accent-components="1"]' ) : null;
	729	+ if ( ! btn ) {
	730	+ return;
	731	+ }
	732	+
	733	+ e.preventDefault();
	734	+ api.apply_accent_to_components( btn );
551	735	}, false );
552	736
553	737	function schedule_apply_retry() {
554	738	if (raf_id) return;