← All changes
|
includes/page-form-builder/_src/bfb-time-utils.js
+128
-16
11.2
→
11.8.4
View file →
| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * WPBC BFB Core: Time Utilities |
| 3 | 3 | * |
| 4 | 4 | * One place for all time parsing/formatting/masking helpers + small UI helpers used by time-based packs. |
| @@ -307,14 +307,21 @@ | ||
| 307 | 307 | * Set toggle + hide/show placeholder row within a single Inspector panel. |
| 308 | 308 | * @param {HTMLElement} panel |
| 309 | 309 | * @param {boolean} enabled |
| 310 | 310 | */ |
| 311 | - Time.ui_set_picker_toggle_for_panel = function (panel, enabled) { | |
| 312 | - if (!panel) return; | |
| 313 | - var chk = panel.querySelector('.js-toggle-timeslot-picker'); | |
| 314 | - if (chk) chk.checked = !!enabled; | |
| 315 | - | |
| 316 | - var phRow = panel.querySelector('.js-placeholder-row'); | |
| 311 | + Time.ui_set_picker_toggle_for_panel = function (panel, enabled) { | |
| 312 | + if (!panel) return; | |
| 313 | + var chk = panel.querySelector('.js-toggle-timeslot-picker'); | |
| 314 | + if (chk) chk.checked = !!enabled; | |
| 315 | + | |
| 316 | + var skin_row = panel.querySelector('.js-time-picker-skin-row'); | |
| 317 | + if (skin_row) { | |
| 318 | + skin_row.hidden = !enabled; | |
| 319 | + skin_row.style.display = enabled ? '' : 'none'; | |
| 320 | + skin_row.setAttribute( 'aria-hidden', enabled ? 'false' : 'true' ); | |
| 321 | + } | |
| 322 | + | |
| 323 | + var phRow = panel.querySelector('.js-placeholder-row'); | |
| 317 | 324 | if (phRow) { |
| 318 | 325 | if (enabled) { phRow.style.display = 'none'; phRow.hidden = true; } |
| 319 | 326 | else { phRow.style.display = ''; phRow.hidden = false; } |
| 320 | 327 | } |
| @@ -323,14 +330,103 @@ | ||
| 323 | 330 | /** |
| 324 | 331 | * Apply picker flag to all open Time inspectors. |
| 325 | 332 | * @param {boolean} enabled |
| 326 | 333 | */ |
| 327 | - Time.ui_apply_picker_enabled_to_all = function (enabled) { | |
| 334 | + Time.ui_apply_picker_enabled_to_all = function (enabled) { | |
| 328 | 335 | d.querySelectorAll( '.wpbc_bfb__inspector_timepicker' ).forEach( function (panel) { |
| 329 | 336 | // Set toggle + hide/show placeholder row within a single Inspector panel. |
| 330 | 337 | Time.ui_set_picker_toggle_for_panel( panel, enabled ); |
| 331 | 338 | } ); |
| 332 | - }; | |
| 339 | + }; | |
| 340 | + | |
| 341 | + /** | |
| 342 | + * Apply a time-picker skin URL directly to the Builder document. | |
| 343 | + * | |
| 344 | + * Updating the existing link avoids a no-styles interval. If another | |
| 345 | + * integration omitted the link, create it so Inspector changes still | |
| 346 | + * produce an immediate Canvas preview. | |
| 347 | + * | |
| 348 | + * @param {string} skin_url Public time-picker skin URL. | |
| 349 | + * @return {boolean} Whether a stylesheet URL was applied. | |
| 350 | + */ | |
| 351 | + Time.apply_picker_skin_url = function (skin_url) { | |
| 352 | + if ( ! skin_url ) return false; | |
| 353 | + | |
| 354 | + var stylesheet = d.getElementById( 'wpbc-time_picker-skin-css' ); | |
| 355 | + if ( ! stylesheet ) { | |
| 356 | + stylesheet = d.createElement( 'link' ); | |
| 357 | + stylesheet.id = 'wpbc-time_picker-skin-css'; | |
| 358 | + stylesheet.rel = 'stylesheet'; | |
| 359 | + stylesheet.type = 'text/css'; | |
| 360 | + stylesheet.media = 'screen'; | |
| 361 | + ( d.head || d.getElementsByTagName( 'head' )[0] ).appendChild( stylesheet ); | |
| 362 | + } | |
| 363 | + | |
| 364 | + stylesheet.setAttribute( 'href', String( skin_url ) ); | |
| 365 | + if ( Time.read_picker_enabled() ) { | |
| 366 | + Time.set_picker_enabled( true ); | |
| 367 | + Time.schedule_init_timeselector(); | |
| 368 | + } | |
| 369 | + | |
| 370 | + return true; | |
| 371 | + }; | |
| 372 | + | |
| 373 | + /** | |
| 374 | + * Apply a selected time-picker skin to the Builder preview stylesheet. | |
| 375 | + * | |
| 376 | + * @param {HTMLSelectElement} select_control Skin selectbox. | |
| 377 | + * @return {void} | |
| 378 | + */ | |
| 379 | + Time.apply_picker_skin_from_select = function (select_control) { | |
| 380 | + if ( ! select_control ) return; | |
| 381 | + var selected_option = select_control.options && select_control.selectedIndex >= 0 | |
| 382 | + ? select_control.options[ select_control.selectedIndex ] | |
| 383 | + : null; | |
| 384 | + var skin_url = selected_option ? String( selected_option.getAttribute( 'data-wpbc-time-picker-skin-url' ) || '' ) : ''; | |
| 385 | + | |
| 386 | + Time.apply_picker_skin_url( skin_url ); | |
| 387 | + | |
| 388 | + // The style row is available only while the global picker is enabled. | |
| 389 | + // Reconcile the runtime flag as well, so an older Builder session can | |
| 390 | + // immediately construct its Canvas choices without a page reload. | |
| 391 | + var panel = select_control.closest ? select_control.closest( '.wpbc_bfb__inspector_timepicker' ) : null; | |
| 392 | + var picker_toggle = panel ? panel.querySelector( '.js-toggle-timeslot-picker' ) : null; | |
| 393 | + if ( picker_toggle && picker_toggle.checked ) { | |
| 394 | + Time.set_picker_enabled( true ); | |
| 395 | + Time.schedule_init_timeselector(); | |
| 396 | + } | |
| 397 | + }; | |
| 398 | + | |
| 399 | + /** | |
| 400 | + * Synchronize all open time-field skin controls to a saved global value. | |
| 401 | + * | |
| 402 | + * @param {string} skin_value Relative time-picker skin path. | |
| 403 | + * @return {void} | |
| 404 | + */ | |
| 405 | + Time.ui_set_picker_skin_value = function (skin_value) { | |
| 406 | + d.querySelectorAll( '.js-wpbc-bfb-time-picker-skin' ).forEach( function (select_control) { | |
| 407 | + select_control.value = String( skin_value || '' ); | |
| 408 | + } ); | |
| 409 | + }; | |
| 410 | + | |
| 411 | + /** | |
| 412 | + * Synchronize other controls after a global time-picker skin is saved. | |
| 413 | + * | |
| 414 | + * @return {void} | |
| 415 | + */ | |
| 416 | + Time.on_picker_skin_saved = function () { | |
| 417 | + var select_control = d.querySelector( '.js-wpbc-bfb-time-picker-skin' ); | |
| 418 | + var skin_value = select_control ? String( select_control.value || '' ) : ''; | |
| 419 | + var accent_button = d.querySelector( '[data-wpbc-bfb-apply-accent-components="1"]' ); | |
| 420 | + | |
| 421 | + Time.ui_set_picker_skin_value( skin_value ); | |
| 422 | + if ( accent_button ) { | |
| 423 | + accent_button.setAttribute( 'data-wpbc-time-picker-skin-current', skin_value ); | |
| 424 | + } | |
| 425 | + }; | |
| 426 | + | |
| 427 | + // The generic protected option saver resolves successful callbacks by global function name. | |
| 428 | + w.wpbc_bfb_time_picker_skin_control_saved = Time.on_picker_skin_saved; | |
| 333 | 429 | |
| 334 | 430 | // ----------------------------------------------------------------------------------------------------------------- |
| 335 | 431 | // Debounced init for external time selector (canvas preview) |
| 336 | 432 | // ----------------------------------------------------------------------------------------------------------------- |
| @@ -487,17 +583,33 @@ | ||
| 487 | 583 | try { mo.observe(d.body, { childList: true, subtree: true }); } catch(e){} |
| 488 | 584 | }; |
| 489 | 585 | } catch (e) {} |
| 490 | 586 | |
| 491 | - // 3) Checkbox handler (delegated) | |
| 492 | - d.addEventListener('change', function (ev) { | |
| 493 | - var t = ev.target; | |
| 494 | - if (!t || !t.classList || !t.classList.contains('js-toggle-timeslot-picker')) return; | |
| 587 | + // 3) Checkbox handler (delegated). | |
| 588 | + // Skin changes use jQuery below because the previous/next selectbox | |
| 589 | + // controls dispatch jQuery's synthetic `change` event. | |
| 590 | + d.addEventListener('change', function (ev) { | |
| 591 | + var t = ev.target; | |
| 592 | + if (!t || !t.classList) return; | |
| 593 | + | |
| 594 | + if (t.classList.contains('js-wpbc-bfb-time-picker-skin')) { | |
| 595 | + if ( ! w.jQuery ) Time.apply_picker_skin_from_select(t); | |
| 596 | + return; | |
| 597 | + } | |
| 598 | + if (!t.classList.contains('js-toggle-timeslot-picker')) return; | |
| 495 | 599 | |
| 496 | - var enabled = !!t.checked; | |
| 497 | - Time.set_global_timeslot_picker( enabled, { source: 'inspector' } ); | |
| 498 | - }); | |
| 499 | - }; | |
| 600 | + var enabled = !!t.checked; | |
| 601 | + Time.set_global_timeslot_picker( enabled, { source: 'inspector' } ); | |
| 602 | + }); | |
| 603 | + | |
| 604 | + if ( w.jQuery ) { | |
| 605 | + w.jQuery( d ) | |
| 606 | + .off( 'change.wpbcBfbTimePickerSkin', '.js-wpbc-bfb-time-picker-skin' ) | |
| 607 | + .on( 'change.wpbcBfbTimePickerSkin', '.js-wpbc-bfb-time-picker-skin', function () { | |
| 608 | + Time.apply_picker_skin_from_select( this ); | |
| 609 | + } ); | |
| 610 | + } | |
| 611 | + }; | |
| 500 | 612 | |
| 501 | 613 | // Auto-bind on script load. |
| 502 | 614 | try { Time.ensure_global_timepicker_toggle_binder(); } catch (e) {} |
| 503 | 615 | |