← All changes
|
includes/page-form-builder/field-packs/section/section-wptpl.php
+242
-4
11.5
→
11.9
View file →
| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | /** |
| 3 | 3 | * WPBC BFB Pack: Section (WP-template–driven) — with reusable “Style” Inspector (per-column) |
| 4 | 4 | * |
| @@ -154,9 +154,9 @@ | ||
| 154 | 154 | <div class="actions wpbc_ajx_toolbar wpbc_no_borders"> |
| 155 | 155 | <div class="ui_container ui_container_small"> |
| 156 | 156 | <div class="ui_group"> |
| 157 | 157 | <div class="ui_element"> |
| 158 | - <button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button" data-action="deselect" aria-label="<?php echo esc_attr__( 'Deselect', 'booking' ); ?>"><i class="menu_icon icon-1x wpbc_icn_remove_done"></i></button> | |
| 158 | + <button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button" data-action="deselect" aria-label="<?php echo esc_attr__( 'Deselect', 'booking' ); ?>"><i class="menu_icon icon-1x wpbc_icn_rotate_270 wpbc_icn_near_me_disabled"></i></button> | |
| 159 | 159 | <button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button" data-action="scrollto" aria-label="<?php echo esc_attr__( 'Scroll to section', 'booking' ); ?>"><i class="menu_icon icon-1x wpbc_icn_ads_click filter_center_focus"></i></button> |
| 160 | 160 | </div> |
| 161 | 161 | <div class="ui_element"> |
| 162 | 162 | <button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button" data-action="move-up" aria-label="<?php echo esc_attr__( 'Move up', 'booking' ); ?>"><i class="menu_icon icon-1x wpbc_icn_arrow_upward"></i></button> |
| @@ -487,17 +487,255 @@ | ||
| 487 | 487 | </div> |
| 488 | 488 | </div> |
| 489 | 489 | </div> |
| 490 | 490 | |
| 491 | - </div> | |
| 491 | + <# | |
| 492 | + var __box_spacing_groups = [ | |
| 493 | + { key: 'padding', label: '<?php echo esc_js( __( 'Column Padding', 'booking' ) ); ?>' }, | |
| 494 | + { key: 'margin', label: '<?php echo esc_js( __( 'Column Margin', 'booking' ) ); ?>' } | |
| 495 | + ]; | |
| 496 | + var __box_spacing_sides = [ | |
| 497 | + { key: 'top', label: '<?php echo esc_js( __( 'Top', 'booking' ) ); ?>' }, | |
| 498 | + { key: 'right', label: '<?php echo esc_js( __( 'Right', 'booking' ) ); ?>' }, | |
| 499 | + { key: 'bottom', label: '<?php echo esc_js( __( 'Bottom', 'booking' ) ); ?>' }, | |
| 500 | + { key: 'left', label: '<?php echo esc_js( __( 'Left', 'booking' ) ); ?>' } | |
| 501 | + ]; | |
| 502 | + | |
| 503 | + for ( var __box_group_index = 0; __box_group_index < __box_spacing_groups.length; __box_group_index++ ) { | |
| 504 | + var __box_group = __box_spacing_groups[ __box_group_index ]; | |
| 505 | + var __box_state_key = k + '_' + __box_group.key; | |
| 506 | + var __box_active_side = ( data.control_tabs && data.control_tabs[ __box_state_key ] ) || 'top'; | |
| 507 | + #> | |
| 508 | + <div class="wpbc_bfb__column_control_group" data-column-control-tabs="{{ __box_group.key }}" data-column-control-tab-active="{{ __box_active_side }}" data-col-idx="{{ i }}"> | |
| 509 | + <div class="wpbc_bfb__column_control_heading_row"> | |
| 510 | + <h3 class="wpbc_bfb__column_control_heading">{{ __box_group.label }}</h3> | |
| 511 | + <button | |
| 512 | + type="button" | |
| 513 | + class="wpbc_bfb__column_help tooltip_left wpbc-bi-question-circle" | |
| 514 | + title="<?php echo esc_attr__( 'Set padding inside the column or margin outside the column independently for each side.', 'booking' ); ?>" | |
| 515 | + aria-label="<?php echo esc_attr__( 'Column spacing help', 'booking' ); ?>" | |
| 516 | + ></button> | |
| 517 | + </div> | |
| 518 | + <div class="wpbc_bfb__column_control_tablist" role="tablist" aria-label="{{ __box_group.label }}"> | |
| 519 | + <# for ( var __box_tab_index = 0; __box_tab_index < __box_spacing_sides.length; __box_tab_index++ ) { | |
| 520 | + var __box_tab_side = __box_spacing_sides[ __box_tab_index ]; | |
| 521 | + var __box_tab_style_key = __box_group.key + '_' + __box_tab_side.key; | |
| 522 | + var __box_tab_default = ( 'margin' === __box_group.key && ( 'top' === __box_tab_side.key || 'bottom' === __box_tab_side.key ) ) ? '0.7em' : '0px'; | |
| 523 | + var __box_tab_value = String( s[ __box_tab_style_key ] || __box_tab_default ); | |
| 524 | + var __box_tab_changed = __box_tab_default !== __box_tab_value; | |
| 525 | + var __box_tab_active = __box_active_side === __box_tab_side.key; | |
| 526 | + #> | |
| 527 | + <button type="button" | |
| 528 | + id="bfb_col_{{ k }}_{{ __box_group.key }}_tab_{{ __box_tab_side.key }}" | |
| 529 | + class="wpbc_bfb__column_control_tab <# if ( __box_tab_changed ) { #>is-changed<# } #>" | |
| 530 | + data-column-control-tab-key="{{ __box_tab_side.key }}" | |
| 531 | + data-column-control-tab-style-keys="{{ __box_tab_style_key }}" | |
| 532 | + data-col-idx="{{ i }}" | |
| 533 | + role="tab" | |
| 534 | + aria-selected="<# if ( __box_tab_active ) { #>true<# } else { #>false<# } #>" | |
| 535 | + aria-controls="bfb_col_{{ k }}_{{ __box_group.key }}_panel_{{ __box_tab_side.key }}" | |
| 536 | + tabindex="<# if ( __box_tab_active ) { #>0<# } else { #>-1<# } #>" | |
| 537 | + > | |
| 538 | + <span>{{ __box_tab_side.label }}</span> | |
| 539 | + <span class="wpbc_bfb__column_control_tab_marker" data-column-control-tab-marker aria-hidden="true" <# if ( ! __box_tab_changed ) { #>hidden<# } #>></span> | |
| 540 | + <span class="wpbc_sr_only" data-column-control-tab-changed-text <# if ( ! __box_tab_changed ) { #>hidden<# } #>><?php echo esc_html__( 'Changed', 'booking' ); ?></span> | |
| 541 | + </button> | |
| 542 | + <# } #> | |
| 543 | + </div> | |
| 544 | + <# for ( var __box_panel_index = 0; __box_panel_index < __box_spacing_sides.length; __box_panel_index++ ) { | |
| 545 | + var __box_side = __box_spacing_sides[ __box_panel_index ]; | |
| 546 | + var __box_control_key = __box_group.key + '_' + __box_side.key; | |
| 547 | + var __box_control_label = __box_group.label + ' ' + __box_side.label; | |
| 548 | + var __box_control_default = ( 'margin' === __box_group.key && ( 'top' === __box_side.key || 'bottom' === __box_side.key ) ) ? '0.7em' : '0px'; | |
| 549 | + var __box_value = String( s[ __box_control_key ] || __box_control_default ); | |
| 550 | + var __box_match = __box_value.match( /^(\d+(?:\.\d+)?)(px|rem|em|%)?$/ ); | |
| 551 | + var __box_number = __box_match ? __box_match[1] : '0'; | |
| 552 | + var __box_unit = ( __box_match && __box_match[2] ) ? __box_match[2] : 'px'; | |
| 553 | + var __box_panel_active = __box_active_side === __box_side.key; | |
| 554 | + #> | |
| 555 | + <div class="wpbc_bfb__column_control_panel" | |
| 556 | + id="bfb_col_{{ k }}_{{ __box_group.key }}_panel_{{ __box_side.key }}" | |
| 557 | + data-column-control-tab-panel="{{ __box_side.key }}" | |
| 558 | + role="tabpanel" | |
| 559 | + aria-labelledby="bfb_col_{{ k }}_{{ __box_group.key }}_tab_{{ __box_side.key }}" | |
| 560 | + <# if ( ! __box_panel_active ) { #>hidden<# } #> | |
| 561 | + > | |
| 562 | + <div class="wpbc_len_group" data-len-group="{{ __box_control_key }}"> | |
| 563 | + <div class="wpbc_inline_inputs"> | |
| 564 | + <input | |
| 565 | + id="bfb_col_{{ k }}_{{ __box_control_key }}" | |
| 566 | + type="number" min="0" step="any" class="inspector__input" | |
| 567 | + data-style-key="{{ __box_control_key }}" data-style-part="value" data-len-value | |
| 568 | + data-col-idx="{{ i }}" value="{{ __box_number }}" | |
| 569 | + aria-label="{{ __box_control_label }}" | |
| 570 | + > | |
| 571 | + <select class="inspector__input" | |
| 572 | + data-style-key="{{ __box_control_key }}" data-style-part="unit" data-len-unit | |
| 573 | + data-col-idx="{{ i }}" aria-label="{{ __box_control_label }}" | |
| 574 | + > | |
| 575 | + <option value="px" <# if ( __box_unit === 'px' ) { #>selected<# } #>>px</option> | |
| 576 | + <option value="rem" <# if ( __box_unit === 'rem' ) { #>selected<# } #>>rem</option> | |
| 577 | + <option value="em" <# if ( __box_unit === 'em' ) { #>selected<# } #>>em</option> | |
| 578 | + <option value="%" <# if ( __box_unit === '%' ) { #>selected<# } #>>%</option> | |
| 579 | + </select> | |
| 580 | + </div> | |
| 581 | + <input type="range" class="inspector__input" | |
| 582 | + data-style-key="{{ __box_control_key }}" data-style-part="value" data-len-range | |
| 583 | + data-col-idx="{{ i }}" aria-label="{{ __box_control_label }}" | |
| 584 | + min="0" max="128" step="1" value="{{ __box_number }}" | |
| 585 | + > | |
| 586 | + </div> | |
| 587 | + <button | |
| 588 | + type="button" | |
| 589 | + class="wpbc_bfb__column_reset_link" | |
| 590 | + data-action="colstyles-reset-keys" | |
| 591 | + data-style-keys="{{ __box_control_key }}" | |
| 592 | + data-col-idx="{{ i }}" | |
| 593 | + > | |
| 594 | + <?php echo esc_html__( 'Reset', 'booking' ); ?> | |
| 595 | + </button> | |
| 596 | + </div> | |
| 597 | + <# } #> | |
| 598 | + </div> | |
| 599 | + <# } #> | |
| 600 | + <div class="inspector__row wpbc_bfb__column_control_section_heading"> | |
| 601 | + <h2><?php echo esc_js( __( 'Column Size & Overflow', 'booking' ) ); ?></h2> | |
| 602 | + <button | |
| 603 | + type="button" | |
| 604 | + class="wpbc_bfb__column_help tooltip_left wpbc-bi-question-circle" | |
| 605 | + title="<?php echo esc_attr__( 'Leave a maximum empty for no limit. Width Overflow controls horizontal excess; Height Overflow controls vertical excess. Auto adds a thin scrollbar when needed, while Hidden clips excess content. Visible does not add a scrollbar on that axis. If the other axis uses Auto or Hidden, mixed-axis excess is clipped because browsers cannot combine visible overflow with a perpendicular scroll container.', 'booking' ); ?>" | |
| 606 | + aria-label="<?php echo esc_attr__( 'Column size and overflow help', 'booking' ); ?>" | |
| 607 | + ></button> | |
| 608 | + </div> | |
| 609 | + <# | |
| 610 | + var __maximum_controls = [ | |
| 611 | + { | |
| 612 | + tab_key: 'width', | |
| 613 | + tab_label: '<?php echo esc_js( __( 'Width', 'booking' ) ); ?>', | |
| 614 | + key: 'max_width', | |
| 615 | + label: '<?php echo esc_js( __( 'Maximum Width', 'booking' ) ); ?>', | |
| 616 | + overflow_key: 'overflow_x', | |
| 617 | + overflow_label: '<?php echo esc_js( __( 'Width Overflow', 'booking' ) ); ?>' | |
| 618 | + }, | |
| 619 | + { | |
| 620 | + tab_key: 'height', | |
| 621 | + tab_label: '<?php echo esc_js( __( 'Height', 'booking' ) ); ?>', | |
| 622 | + key: 'max_height', | |
| 623 | + label: '<?php echo esc_js( __( 'Maximum Height', 'booking' ) ); ?>', | |
| 624 | + overflow_key: 'overflow_y', | |
| 625 | + overflow_label: '<?php echo esc_js( __( 'Height Overflow', 'booking' ) ); ?>' | |
| 626 | + } | |
| 627 | + ]; | |
| 628 | + var __size_state_key = k + '_size'; | |
| 629 | + var __size_active_tab = ( data.control_tabs && data.control_tabs[ __size_state_key ] ) || 'width'; | |
| 630 | + #> | |
| 631 | + <div class="wpbc_bfb__column_control_group" data-column-control-tabs="size" data-column-control-tab-active="{{ __size_active_tab }}" data-col-idx="{{ i }}"> | |
| 632 | + <div class="wpbc_bfb__column_control_tablist" role="tablist" aria-label="<?php echo esc_attr__( 'Column Size & Overflow', 'booking' ); ?>"> | |
| 633 | + <# for ( var __maximum_tab_index = 0; __maximum_tab_index < __maximum_controls.length; __maximum_tab_index++ ) { | |
| 634 | + var __maximum_tab_control = __maximum_controls[ __maximum_tab_index ]; | |
| 635 | + var __maximum_tab_changed = String( s[ __maximum_tab_control.key ] || 'none' ) !== 'none' || String( s[ __maximum_tab_control.overflow_key ] || 'visible' ) !== 'visible'; | |
| 636 | + var __maximum_tab_active = __size_active_tab === __maximum_tab_control.tab_key; | |
| 637 | + #> | |
| 638 | + <button type="button" | |
| 639 | + id="bfb_col_{{ k }}_size_tab_{{ __maximum_tab_control.tab_key }}" | |
| 640 | + class="wpbc_bfb__column_control_tab <# if ( __maximum_tab_changed ) { #>is-changed<# } #>" | |
| 641 | + data-column-control-tab-key="{{ __maximum_tab_control.tab_key }}" | |
| 642 | + data-column-control-tab-style-keys="{{ __maximum_tab_control.key }} {{ __maximum_tab_control.overflow_key }}" | |
| 643 | + data-col-idx="{{ i }}" | |
| 644 | + role="tab" | |
| 645 | + aria-selected="<# if ( __maximum_tab_active ) { #>true<# } else { #>false<# } #>" | |
| 646 | + aria-controls="bfb_col_{{ k }}_size_panel_{{ __maximum_tab_control.tab_key }}" | |
| 647 | + tabindex="<# if ( __maximum_tab_active ) { #>0<# } else { #>-1<# } #>" | |
| 648 | + > | |
| 649 | + <span>{{ __maximum_tab_control.tab_label }}</span> | |
| 650 | + <span class="wpbc_bfb__column_control_tab_marker" data-column-control-tab-marker aria-hidden="true" <# if ( ! __maximum_tab_changed ) { #>hidden<# } #>></span> | |
| 651 | + <span class="wpbc_sr_only" data-column-control-tab-changed-text <# if ( ! __maximum_tab_changed ) { #>hidden<# } #>><?php echo esc_html__( 'Changed', 'booking' ); ?></span> | |
| 652 | + </button> | |
| 653 | + <# } #> | |
| 654 | + </div> | |
| 655 | + <# | |
| 656 | + for ( var __maximum_index = 0; __maximum_index < __maximum_controls.length; __maximum_index++ ) { | |
| 657 | + var __maximum_control = __maximum_controls[ __maximum_index ]; | |
| 658 | + var __maximum_value = String( s[ __maximum_control.key ] || 'none' ); | |
| 659 | + var __maximum_match = __maximum_value.match( /^(\d+(?:\.\d+)?)(px|rem|em|%|vh|vw)?$/ ); | |
| 660 | + var __maximum_number = __maximum_match ? __maximum_match[1] : ''; | |
| 661 | + var __maximum_unit = ( __maximum_match && __maximum_match[2] ) ? __maximum_match[2] : 'px'; | |
| 662 | + var __maximum_panel_active = __size_active_tab === __maximum_control.tab_key; | |
| 663 | + #> | |
| 664 | + <div class="wpbc_bfb__column_control_panel" | |
| 665 | + id="bfb_col_{{ k }}_size_panel_{{ __maximum_control.tab_key }}" | |
| 666 | + data-column-control-tab-panel="{{ __maximum_control.tab_key }}" | |
| 667 | + role="tabpanel" | |
| 668 | + aria-labelledby="bfb_col_{{ k }}_size_tab_{{ __maximum_control.tab_key }}" | |
| 669 | + <# if ( ! __maximum_panel_active ) { #>hidden<# } #> | |
| 670 | + > | |
| 671 | + <div class="inspector__row"> | |
| 672 | + <label class="inspector__label inspector__w_100" for="bfb_col_{{ k }}_{{ __maximum_control.key }}">{{ __maximum_control.label }}</label> | |
| 673 | + <div class="wpbc_len_group inspector__w_100" data-len-group="{{ __maximum_control.key }}" data-len-allow-empty> | |
| 674 | + <div class="wpbc_inline_inputs"> | |
| 675 | + <input | |
| 676 | + id="bfb_col_{{ k }}_{{ __maximum_control.key }}" | |
| 677 | + type="number" min="0" step="any" class="inspector__input" | |
| 678 | + data-style-key="{{ __maximum_control.key }}" data-style-part="value" data-len-value | |
| 679 | + data-col-idx="{{ i }}" value="{{ __maximum_number }}" | |
| 680 | + placeholder="<?php echo esc_attr__( 'No limit', 'booking' ); ?>" | |
| 681 | + aria-label="{{ __maximum_control.label }}" | |
| 682 | + > | |
| 683 | + <select class="inspector__input" | |
| 684 | + data-style-key="{{ __maximum_control.key }}" data-style-part="unit" data-len-unit | |
| 685 | + data-col-idx="{{ i }}" aria-label="{{ __maximum_control.label }}" | |
| 686 | + > | |
| 687 | + <option value="px" <# if ( __maximum_unit === 'px' ) { #>selected<# } #>>px</option> | |
| 688 | + <option value="rem" <# if ( __maximum_unit === 'rem' ) { #>selected<# } #>>rem</option> | |
| 689 | + <option value="em" <# if ( __maximum_unit === 'em' ) { #>selected<# } #>>em</option> | |
| 690 | + <option value="%" <# if ( __maximum_unit === '%' ) { #>selected<# } #>>%</option> | |
| 691 | + <option value="vh" <# if ( __maximum_unit === 'vh' ) { #>selected<# } #>>vh</option> | |
| 692 | + <option value="vw" <# if ( __maximum_unit === 'vw' ) { #>selected<# } #>>vw</option> | |
| 693 | + </select> | |
| 694 | + </div> | |
| 695 | + <input type="range" class="inspector__input" | |
| 696 | + data-style-key="{{ __maximum_control.key }}" data-style-part="value" data-len-range | |
| 697 | + data-col-idx="{{ i }}" aria-label="{{ __maximum_control.label }}" | |
| 698 | + min="0" max="1600" step="1" value="{{ __maximum_number || '0' }}" | |
| 699 | + > | |
| 700 | + </div> | |
| 701 | + </div> | |
| 702 | + <div class="inspector__row"> | |
| 703 | + <label class="inspector__label inspector__w_40" for="bfb_col_{{ k }}_{{ __maximum_control.overflow_key }}">{{ __maximum_control.overflow_label }}</label> | |
| 704 | + <select | |
| 705 | + id="bfb_col_{{ k }}_{{ __maximum_control.overflow_key }}" | |
| 706 | + class="inspector__input inspector__w_55" | |
| 707 | + data-style-key="{{ __maximum_control.overflow_key }}" | |
| 708 | + data-col-idx="{{ i }}" | |
| 709 | + > | |
| 710 | + <option value="visible" <# if ( s[ __maximum_control.overflow_key ] === 'visible' ) { #>selected<# } #>><?php echo esc_html__( 'Visible (default)', 'booking' ); ?></option> | |
| 711 | + <option value="auto" <# if ( s[ __maximum_control.overflow_key ] === 'auto' ) { #>selected<# } #>><?php echo esc_html__( 'Auto', 'booking' ); ?></option> | |
| 712 | + <option value="hidden" <# if ( s[ __maximum_control.overflow_key ] === 'hidden' ) { #>selected<# } #>><?php echo esc_html__( 'Hidden', 'booking' ); ?></option> | |
| 713 | + </select> | |
| 714 | + </div> | |
| 715 | + <div class="wpbc_bfb__column_panel_reset"> | |
| 716 | + <button | |
| 717 | + type="button" | |
| 718 | + class="wpbc_bfb__column_reset_link" | |
| 719 | + data-action="colstyles-reset-keys" | |
| 720 | + data-style-keys="{{ __maximum_control.key }} {{ __maximum_control.overflow_key }}" | |
| 721 | + data-col-idx="{{ i }}" | |
| 722 | + > | |
| 723 | + <?php echo esc_html__( 'Reset', 'booking' ); ?> | |
| 724 | + </button> | |
| 725 | + </div> | |
| 726 | + </div> | |
| 727 | + <# } #> | |
| 728 | + </div> | |
| 729 | + </div> | |
| 492 | 730 | <# } #> |
| 493 | 731 | |
| 494 | 732 | <# if ( active ) { #> |
| 495 | 733 | <div class="wpbc_tab__panel group__fields"> |
| 496 | - <div class="inspector__row"> | |
| 734 | + <div class="inspector__row wpbc_bfb__column_reset_all"> | |
| 497 | 735 | <div class="inspector__control"> |
| 498 | 736 | <button type="button" class="button button-secondary wpbc_ui_button" data-action="colstyles-reset"> |
| 499 | - <?php echo esc_html__( 'Reset', 'booking' ); ?> | |
| 737 | + <?php echo esc_html__( 'Reset All Column Styles', 'booking' ); ?> | |
| 500 | 738 | </button> |
| 501 | 739 | </div> |
| 502 | 740 | </div> |
| 503 | 741 | </div> |