![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Changeset 3521697
- Timestamp:
- 05/03/2026 06:38:15 PM (6 months ago)
- Location:
- sityn-enhancer-for-bricks-builder
- Files:
-
- 12 edited
- 1 copied
-
tags/1.2 (copied) (copied from sityn-enhancer-for-bricks-builder/trunk )
-
tags/1.2/assets/css/bem-generator.css (modified) (1 diff)
-
tags/1.2/assets/js/bem-generator.js (modified) (6 diffs)
-
tags/1.2/assets/js/css-autocomplete.js (modified) (2 diffs)
-
tags/1.2/includes/admin/class-settings-page.php (modified) (13 diffs)
-
tags/1.2/readme.txt (modified) (2 diffs)
-
tags/1.2/sityn-enhancer-for-bricks-builder.php (modified) (2 diffs)
-
trunk/assets/css/bem-generator.css (modified) (1 diff)
-
trunk/assets/js/bem-generator.js (modified) (6 diffs)
-
trunk/assets/js/css-autocomplete.js (modified) (2 diffs)
-
trunk/includes/admin/class-settings-page.php (modified) (13 diffs)
-
trunk/readme.txt (modified) (2 diffs)
-
trunk/sityn-enhancer-for-bricks-builder.php (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
sityn-enhancer-for-bricks-builder/tags/1.2/assets/css/bem-generator.css
r3517819 r3521697 627 627 } 628 628 629 /* ── Copy Styles Toggle (inside mode section) ──────────────────────── */ 630 631 .brxe-bem-copy-styles-row { 632 margin-top: 4px; 633 padding: 10px 12px; 634 background: var(--brxe-bg-elevated); 635 border: 1px solid var(--brxe-border-subtle); 636 border-radius: var(--brxe-radius-md); 637 animation: brxeCopyStylesSlideIn var(--brxe-transition-smooth) forwards; 638 } 639 640 @keyframes brxeCopyStylesSlideIn { 641 from { 642 opacity: 0; 643 transform: translateY(-4px); 644 } 645 to { 646 opacity: 1; 647 transform: translateY(0); 648 } 649 } 650 629 651 /* ── Focus-Visible Accessibility ────────────────────────────────────── */ 630 652 -
sityn-enhancer-for-bricks-builder/tags/1.2/assets/js/bem-generator.js
r3517819 r3521697 291 291 </select> 292 292 <span class="brxe-bem-select-arrow">▼</span> 293 </div> 294 <div class="brxe-bem-copy-styles-row" id="brxe-bem-copy-styles-row" style="display:none"> 295 <label class="brxe-bem-toggle-group"> 296 <div class="brxe-bem-switch"> 297 <input type="checkbox" id="brxe-bem-toggle-copy-styles" checked> 298 <span class="brxe-bem-slider"></span> 299 </div> 300 <span class="brxe-bem-toggle-text">Copy Styles to New Classes</span> 301 </label> 293 302 </div> 294 303 </div>`; … … 470 479 } 471 480 481 // ── Mode selector: show/hide Copy Styles toggle ── 482 483 const modeSelect = panel.querySelector('#brxe-bem-mode-select'); 484 const copyStylesRow = panel.querySelector('#brxe-bem-copy-styles-row'); 485 if (modeSelect && copyStylesRow) { 486 const updateCopyStylesVisibility = () => { 487 const mode = modeSelect.value; 488 if (mode === 'rename') { 489 copyStylesRow.style.display = 'none'; 490 } else { 491 copyStylesRow.style.display = ''; 492 } 493 }; 494 modeSelect.addEventListener('change', updateCopyStylesVisibility); 495 // Initialize on panel open. 496 updateCopyStylesVisibility(); 497 } 498 472 499 // ── Block input reactivity ── 473 500 … … 625 652 const mode = ctx.isReEntry && modeSelect ? modeSelect.value : 'fresh'; 626 653 654 const copyStylesToggle = panel.querySelector('#brxe-bem-toggle-copy-styles'); 655 const shouldCopyStyles = copyStylesToggle ? copyStylesToggle.checked : false; 656 627 657 const oldGCIdsToRemove = []; 628 658 … … 682 712 } 683 713 } else if (mode === 'create-remove' || mode === 'create-delete') { 714 // Grab old settings before removing. 715 let oldGCSettings = null; 716 if (shouldCopyStyles && oldGCId) { 717 const oldGC = state.globalClasses.find((g) => g.id === oldGCId); 718 if (oldGC && oldGC.settings) { 719 oldGCSettings = JSON.parse(JSON.stringify(oldGC.settings)); 720 } 721 } 722 684 723 if (oldGCId) { 685 724 updatedGlobalClasses = updatedGlobalClasses.filter( … … 695 734 ); 696 735 if (!globalClass) { 697 globalClass = { id: uid(), name: newClassName, settings: {} };736 globalClass = { id: uid(), name: newClassName, settings: oldGCSettings || {} }; 698 737 state.globalClasses.push(globalClass); 738 } else if (shouldCopyStyles && oldGCSettings) { 739 // Merge old styles into existing class (old styles as base, existing on top). 740 globalClass.settings = { ...oldGCSettings, ...globalClass.settings }; 699 741 } 700 742 … … 704 746 } 705 747 } else if (mode === 'create-keep') { 748 // Grab old settings for copy. 749 let oldGCSettings = null; 750 if (shouldCopyStyles && oldGCId) { 751 const oldGC = state.globalClasses.find((g) => g.id === oldGCId); 752 if (oldGC && oldGC.settings) { 753 oldGCSettings = JSON.parse(JSON.stringify(oldGC.settings)); 754 } 755 } 756 706 757 let globalClass = state.globalClasses.find( 707 758 (gc) => gc.name === newClassName 708 759 ); 709 760 if (!globalClass) { 710 globalClass = { id: uid(), name: newClassName, settings: {} };761 globalClass = { id: uid(), name: newClassName, settings: oldGCSettings || {} }; 711 762 state.globalClasses.push(globalClass); 763 } else if (shouldCopyStyles && oldGCSettings) { 764 globalClass.settings = { ...oldGCSettings, ...globalClass.settings }; 712 765 } 713 766 -
sityn-enhancer-for-bricks-builder/tags/1.2/assets/js/css-autocomplete.js
r3517819 r3521697 31 31 32 32 // Match bare --custom-property tokens that are NOT already inside var(). 33 // Negative lookbehind: not preceded by "var(" .34 const BARE_VAR_RE = /(?<!\bvar\() --[\w-]+/g;33 // Negative lookbehind: not preceded by "var(" and not preceded by a word character or hyphen (to avoid matching BEM classes like btn--primary). 34 const BARE_VAR_RE = /(?<!\bvar\()(?<![\w-])--[\w-]+/g; 35 35 36 36 // Detect arithmetic operators between values (excludes unary minus on numbers). … … 119 119 const raw = target.value; 120 120 if (!raw || raw.trim().length === 0) return; 121 122 // Skip inputs that are meant for typing class names (like the global classes input). 123 const targetClass = (target.className || '').toLowerCase(); 124 const targetPlaceholder = (target.placeholder || '').toLowerCase(); 125 if ( 126 targetClass.includes('class') || 127 targetPlaceholder.includes('class') || 128 target.closest('[class*="class-input"]') || 129 target.closest('[class*="classes-input"]') || 130 target.closest('[data-control="classes"]') 131 ) { 132 return; 133 } 121 134 122 135 // Quick check: does the value contain something we'd auto-complete? -
sityn-enhancer-for-bricks-builder/tags/1.2/includes/admin/class-settings-page.php
r3517819 r3521697 60 60 'sanitize_callback' => array( $this, 'sanitize_settings' ), 61 61 'default' => array( 62 'bem_generator' => true,63 'autocomplete_var' => true,64 'autocomplete_calc' => true,65 'copy_content' => true,66 'media_actions' => true,67 'submit_form_action' => true,68 'focus_element_action' => true,69 'disable_element_action' => true,70 'navigate_back_action' => true,71 'print_page_action' => true,72 'reload_page_action' => true,73 'navigate_forward_action' => true,74 'remove_element_action' => true,75 'password_visibility_action' => true,76 'scroll_triggers' => true,77 'resize_trigger' => true,78 'tab_active_trigger' => true,79 'dblclick_trigger' => true,80 'contextmenu_trigger' => true,81 'focus_within_trigger' => true,82 'theme_change_trigger' => true,83 'checkbox_triggers' => true,84 'paste_trigger' => true,85 'network_triggers' => true,86 'print_trigger' => true,87 'current_url_tag' => true,88 'url_parameter_tag' => true,89 'user_ip_tag' => true,90 'user_browser_tag' => true,91 'user_device_type_tag' => true,92 'user_os_tag' => true,93 'post_time_ago_tag' => true,94 'post_reading_time_tag' => true,95 'post_view_count_tag' => true,96 'user_visit_count_tag' => true,97 'user_session_duration_tag' => true,98 'wp_version_tag' => true,99 'image_alt_text_tag' => true,100 'image_caption_tag' => true,101 'media_file_size_tag' => true,102 'string_uppercase_tag' => true,103 'string_lowercase_tag' => true,104 'string_truncate_tag' => true,105 'random_number_tag' => true,106 'random_string_tag' => true,107 'condition_archive_type' => true,108 'condition_search_results' => true,109 'condition_authored_by_user' => true,110 'condition_author_has_cpt' => true,111 'condition_body_classes' => true,112 'condition_category_archive' => true,113 'condition_cpt_published_entry' => true,114 'condition_current_day' => true,115 'condition_current_month' => true,116 'condition_current_year' => true,62 'bem_generator' => false, 63 'autocomplete_var' => false, 64 'autocomplete_calc' => false, 65 'copy_content' => false, 66 'media_actions' => false, 67 'submit_form_action' => false, 68 'focus_element_action' => false, 69 'disable_element_action' => false, 70 'navigate_back_action' => false, 71 'print_page_action' => false, 72 'reload_page_action' => false, 73 'navigate_forward_action' => false, 74 'remove_element_action' => false, 75 'password_visibility_action' => false, 76 'scroll_triggers' => false, 77 'resize_trigger' => false, 78 'tab_active_trigger' => false, 79 'dblclick_trigger' => false, 80 'contextmenu_trigger' => false, 81 'focus_within_trigger' => false, 82 'theme_change_trigger' => false, 83 'checkbox_triggers' => false, 84 'paste_trigger' => false, 85 'network_triggers' => false, 86 'print_trigger' => false, 87 'current_url_tag' => false, 88 'url_parameter_tag' => false, 89 'user_ip_tag' => false, 90 'user_browser_tag' => false, 91 'user_device_type_tag' => false, 92 'user_os_tag' => false, 93 'post_time_ago_tag' => false, 94 'post_reading_time_tag' => false, 95 'post_view_count_tag' => false, 96 'user_visit_count_tag' => false, 97 'user_session_duration_tag' => false, 98 'wp_version_tag' => false, 99 'image_alt_text_tag' => false, 100 'image_caption_tag' => false, 101 'media_file_size_tag' => false, 102 'string_uppercase_tag' => false, 103 'string_lowercase_tag' => false, 104 'string_truncate_tag' => false, 105 'random_number_tag' => false, 106 'random_string_tag' => false, 107 'condition_archive_type' => false, 108 'condition_search_results' => false, 109 'condition_authored_by_user' => false, 110 'condition_author_has_cpt' => false, 111 'condition_body_classes' => false, 112 'condition_category_archive' => false, 113 'condition_cpt_published_entry' => false, 114 'condition_current_day' => false, 115 'condition_current_month' => false, 116 'condition_current_year' => false, 117 117 ), 118 118 ) … … 210 210 'key' => 'autocomplete_var', 211 211 'title' => __( 'Auto Complete var()', 'sityn-enhancer-for-bricks-builder' ), 212 'description' => __( 'Automatically wrap CSS custom properties (--name) in var() when pressing Enter or semicolon.', 'sityn-enhancer-for-bricks-builder' ),212 'description' => __( 'Automatically wrap CSS custom properties --name in var(--name) when pressing Enter or semicolon.', 'sityn-enhancer-for-bricks-builder' ), 213 213 'icon' => 'dashicons-editor-textcolor', 214 214 ), … … 608 608 609 609 /** 610 * Render the full-width banner HTML above the settings page. 611 * 612 * ── HOW TO EDIT ────────────────────────────────────────────────── 613 * Simply change the HTML below. This method outputs raw markup 614 * inside a `.brxe-banner` wrapper that spans the full width of the 615 * settings page, above the heading and feature toggles. 616 * ───────────────────────────────────────────────────────────────── 617 */ 618 private function render_banner_html(): void { 619 ?> 620 <div class="brxe-banner__inner"> 621 <div class="brxe-banner__content"> 622 <span class="dashicons dashicons-megaphone brxe-banner__icon"></span> 623 <div> 624 <strong><?php esc_html_e( 'Welcome to Sityn Enhancer for Bricks Builder!', 'sityn-enhancer-for-bricks-builder' ); ?></strong> 625 <p><?php esc_html_e( 'Supercharge your Bricks workflow with powerful CSS enhancements, custom interactions, dynamic tags, and more.', 'sityn-enhancer-for-bricks-builder' ); ?></p> 626 </div> 627 </div> 628 </div> 629 <?php 630 } 631 632 /** 633 * Render the sticky sidebar marketing HTML. 634 * 635 * ── HOW TO EDIT ────────────────────────────────────────────────── 636 * Change the HTML below. This method outputs raw markup inside 637 * `.brxe-sidebar-sticky` in the right-hand sidebar. Everything 638 * here stays visible while the user scrolls the feature toggles. 639 * The Save button is rendered separately after this block. 640 * ───────────────────────────────────────────────────────────────── 641 */ 642 private function render_sidebar_html(): void { 643 ?> 644 <div class="brxe-sidebar-widget"> 645 <h3 class="brxe-sidebar-widget__title"> 646 <span class="dashicons dashicons-star-filled"></span> 647 <?php esc_html_e( 'Enjoying the Plugin?', 'sityn-enhancer-for-bricks-builder' ); ?> 648 </h3> 649 <p class="brxe-sidebar-widget__text"><?php esc_html_e( 'If you find this plugin helpful, please consider leaving a 5-star review. Your support helps us keep improving!', 'sityn-enhancer-for-bricks-builder' ); ?></p> 650 <a href="https://wordpress.org/support/plugin/sityn-enhancer-for-bricks-builder/reviews/#new-post" target="_blank" rel="noopener" class="brxe-sidebar-widget__btn"> 651 <?php esc_html_e( '⭐ Leave a Review', 'sityn-enhancer-for-bricks-builder' ); ?> 652 </a> 653 </div> 654 655 <div class="brxe-sidebar-widget"> 656 <h3 class="brxe-sidebar-widget__title"> 657 <span class="dashicons dashicons-sos"></span> 658 <?php esc_html_e( 'Need Help?', 'sityn-enhancer-for-bricks-builder' ); ?> 659 </h3> 660 <p class="brxe-sidebar-widget__text"><?php esc_html_e( 'Check the documentation or open a support ticket if you run into any issues.', 'sityn-enhancer-for-bricks-builder' ); ?></p> 661 <a href="https://wordpress.org/support/plugin/sityn-enhancer-for-bricks-builder/" target="_blank" rel="noopener" class="brxe-sidebar-widget__btn brxe-sidebar-widget__btn--outline"> 662 <?php esc_html_e( 'Get Support', 'sityn-enhancer-for-bricks-builder' ); ?> 663 </a> 664 </div> 665 <?php 666 } 667 668 /** 610 669 * Render the settings page. 611 670 */ … … 618 677 ?> 619 678 <div class="wrap brxe-settings-wrap"> 679 680 <!-- ══ FULL-WIDTH BANNER (editable — see render_banner_html) ══ --> 681 <div class="brxe-banner"> 682 <?php $this->render_banner_html(); ?> 683 </div> 684 620 685 <div class="brxe-settings-header"> 621 686 <h1><?php esc_html_e( 'Sityn Enhancer for Bricks Builder', 'sityn-enhancer-for-bricks-builder' ); ?></h1> … … 626 691 <?php settings_fields( self::MENU_SLUG ); ?> 627 692 628 <!-- ── CSS Enhancements ──────────────────────────── --> 629 <div class="brxe-section"> 630 <div class="brxe-section__header"> 631 <span class="dashicons dashicons-admin-appearance brxe-section__icon"></span> 632 <h2 class="brxe-section__title"><?php esc_html_e( 'CSS Enhancements', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 633 </div> 634 <?php $this->render_feature_cards( $this->get_css_features(), $settings ); ?> 635 </div> 636 637 <!-- ── Interactions ───────────────────────────────── --> 638 <div class="brxe-section"> 639 <div class="brxe-section__header"> 640 <span class="dashicons dashicons-controls-play brxe-section__icon"></span> 641 <h2 class="brxe-section__title"><?php esc_html_e( 'Interactions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 642 </div> 643 644 <!-- Tabs --> 645 <div class="brxe-tabs"> 646 <button type="button" class="brxe-tabs__btn is-active" data-tab="triggers"> 647 <span class="dashicons dashicons-megaphone"></span> 648 <?php esc_html_e( 'Triggers', 'sityn-enhancer-for-bricks-builder' ); ?> 649 </button> 650 <button type="button" class="brxe-tabs__btn" data-tab="actions"> 651 <span class="dashicons dashicons-admin-settings"></span> 652 <?php esc_html_e( 'Actions', 'sityn-enhancer-for-bricks-builder' ); ?> 653 </button> 654 </div> 655 656 <!-- Tab panels --> 657 <div class="brxe-tab-panel is-active" data-panel="triggers"> 658 <?php $this->render_feature_cards( $this->get_trigger_features(), $settings ); ?> 659 </div> 660 <div class="brxe-tab-panel" data-panel="actions"> 661 <?php $this->render_feature_cards( $this->get_action_features(), $settings ); ?> 662 </div> 663 </div> 664 665 <!-- ── Dynamic Tags ───────────────────────────────── --> 666 <div class="brxe-section"> 667 <div class="brxe-section__header"> 668 <span class="dashicons dashicons-tag brxe-section__icon"></span> 669 <h2 class="brxe-section__title"><?php esc_html_e( 'Dynamic Tags', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 670 </div> 671 <?php $this->render_feature_cards( $this->get_dynamic_tag_features(), $settings ); ?> 672 </div> 673 674 <!-- ── Conditions ───────────────────────────────── --> 675 <div class="brxe-section"> 676 <div class="brxe-section__header"> 677 <span class="dashicons dashicons-filter brxe-section__icon"></span> 678 <h2 class="brxe-section__title"><?php esc_html_e( 'Conditions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 679 </div> 680 <?php $this->render_feature_cards( $this->get_condition_features(), $settings ); ?> 681 </div> 682 683 <?php submit_button( __( 'Save Settings', 'sityn-enhancer-for-bricks-builder' ) ); ?> 693 <div class="brxe-layout"> 694 695 <!-- ── LEFT COLUMN: scrollable features ── --> 696 <div class="brxe-layout__main"> 697 698 <!-- CSS Enhancements --> 699 <div class="brxe-section"> 700 <div class="brxe-section__header"> 701 <span class="dashicons dashicons-admin-appearance brxe-section__icon"></span> 702 <h2 class="brxe-section__title"><?php esc_html_e( 'CSS Enhancements', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 703 <div class="brxe-section__toggle-all"> 704 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 705 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 706 <input type="checkbox" class="brxe-toggle-all-btn"> 707 <span class="brxe-toggle__slider"></span> 708 </label> 709 </div> 710 </div> 711 <?php $this->render_feature_cards( $this->get_css_features(), $settings ); ?> 712 </div> 713 714 <!-- Interactions --> 715 <div class="brxe-section"> 716 <div class="brxe-section__header"> 717 <span class="dashicons dashicons-controls-play brxe-section__icon"></span> 718 <h2 class="brxe-section__title"><?php esc_html_e( 'Interactions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 719 <div class="brxe-section__toggle-all"> 720 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 721 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 722 <input type="checkbox" class="brxe-toggle-all-btn"> 723 <span class="brxe-toggle__slider"></span> 724 </label> 725 </div> 726 </div> 727 <div class="brxe-tabs"> 728 <button type="button" class="brxe-tabs__btn is-active" data-tab="triggers"> 729 <span class="dashicons dashicons-megaphone"></span> 730 <?php esc_html_e( 'Triggers', 'sityn-enhancer-for-bricks-builder' ); ?> 731 </button> 732 <button type="button" class="brxe-tabs__btn" data-tab="actions"> 733 <span class="dashicons dashicons-admin-settings"></span> 734 <?php esc_html_e( 'Actions', 'sityn-enhancer-for-bricks-builder' ); ?> 735 </button> 736 </div> 737 <div class="brxe-tab-panel is-active" data-panel="triggers"> 738 <?php $this->render_feature_cards( $this->get_trigger_features(), $settings ); ?> 739 </div> 740 <div class="brxe-tab-panel" data-panel="actions"> 741 <?php $this->render_feature_cards( $this->get_action_features(), $settings ); ?> 742 </div> 743 </div> 744 745 <!-- Dynamic Tags --> 746 <div class="brxe-section"> 747 <div class="brxe-section__header"> 748 <span class="dashicons dashicons-tag brxe-section__icon"></span> 749 <h2 class="brxe-section__title"><?php esc_html_e( 'Dynamic Tags', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 750 <div class="brxe-section__toggle-all"> 751 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 752 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 753 <input type="checkbox" class="brxe-toggle-all-btn"> 754 <span class="brxe-toggle__slider"></span> 755 </label> 756 </div> 757 </div> 758 <?php $this->render_feature_cards( $this->get_dynamic_tag_features(), $settings ); ?> 759 </div> 760 761 <!-- Conditions --> 762 <div class="brxe-section"> 763 <div class="brxe-section__header"> 764 <span class="dashicons dashicons-filter brxe-section__icon"></span> 765 <h2 class="brxe-section__title"><?php esc_html_e( 'Conditions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 766 <div class="brxe-section__toggle-all"> 767 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 768 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 769 <input type="checkbox" class="brxe-toggle-all-btn"> 770 <span class="brxe-toggle__slider"></span> 771 </label> 772 </div> 773 </div> 774 <?php $this->render_feature_cards( $this->get_condition_features(), $settings ); ?> 775 </div> 776 777 </div><!-- /.brxe-layout__main --> 778 779 <!-- ── RIGHT COLUMN: sticky sidebar ── --> 780 <aside class="brxe-layout__sidebar"> 781 <div class="brxe-sidebar-sticky"> 782 783 <!-- Editable marketing content — see render_sidebar_html() --> 784 <?php $this->render_sidebar_html(); ?> 785 786 <!-- Save button --> 787 <div class="brxe-sidebar-save"> 788 <?php submit_button( __( 'Save Settings', 'sityn-enhancer-for-bricks-builder' ), 'primary', 'submit', false ); ?> 789 </div> 790 791 </div> 792 </aside> 793 794 </div><!-- /.brxe-layout --> 684 795 </form> 685 796 </div> … … 692 803 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; 693 804 } 805 806 /* ── Full-Width Banner ─────────────────────────────── */ 807 .brxe-banner { 808 margin-bottom: 24px; 809 } 810 .brxe-banner__inner { 811 background: linear-gradient(135deg, #1d2327 0%, #2c3338 100%); 812 border-radius: 12px; 813 padding: 24px 28px; 814 color: #fff; 815 } 816 .brxe-banner__content { 817 display: flex; 818 align-items: center; 819 gap: 16px; 820 } 821 .brxe-banner__icon { 822 font-size: 28px; 823 color: #72aee6; 824 flex-shrink: 0; 825 } 826 .brxe-banner__content strong { 827 font-size: 16px; 828 display: block; 829 margin-bottom: 4px; 830 } 831 .brxe-banner__content p { 832 margin: 0; 833 font-size: 13px; 834 color: #bbc8d4; 835 line-height: 1.5; 836 } 837 838 /* ── Header ────────────────────────────────────────── */ 694 839 .brxe-settings-header { 695 margin-bottom: 30px;840 margin-bottom: 24px; 696 841 } 697 842 .brxe-settings-header h1 { … … 706 851 } 707 852 708 /* Section */ 853 /* ── Two-Column Layout ─────────────────────────────── */ 854 .brxe-layout { 855 display: grid; 856 grid-template-columns: 1fr 300px; 857 gap: 32px; 858 align-items: start; 859 } 860 .brxe-layout__main { 861 min-width: 0; 862 } 863 864 /* ── Sidebar ───────────────────────────────────────── */ 865 .brxe-layout__sidebar { 866 min-width: 0; 867 position: sticky; 868 top: calc(var(--wp-admin--admin-bar--height) * 2); 869 } 870 .brxe-sidebar-sticky { 871 position: sticky; 872 top: 40px; 873 display: flex; 874 flex-direction: column; 875 gap: 16px; 876 } 877 .brxe-sidebar-widget { 878 background: #fff; 879 border: 1px solid #dcdcde; 880 border-radius: 8px; 881 padding: 20px; 882 } 883 .brxe-sidebar-widget__title { 884 display: flex; 885 align-items: center; 886 gap: 8px; 887 font-size: 14px; 888 font-weight: 600; 889 margin: 0 0 8px; 890 } 891 .brxe-sidebar-widget__title .dashicons { 892 color: #dba617; 893 font-size: 18px; 894 width: 18px; 895 height: 18px; 896 } 897 .brxe-sidebar-widget__text { 898 font-size: 13px; 899 color: #646970; 900 line-height: 1.5; 901 margin: 0 0 14px; 902 } 903 .brxe-sidebar-widget__btn { 904 display: inline-block; 905 padding: 8px 18px; 906 font-size: 13px; 907 font-weight: 600; 908 text-decoration: none; 909 border-radius: 6px; 910 transition: all 0.2s; 911 background: #2271b1; 912 color: #fff; 913 border: 1px solid #2271b1; 914 cursor: pointer; 915 text-align: center; 916 width: 100%; 917 box-sizing: border-box; 918 } 919 .brxe-sidebar-widget__btn:hover { 920 background: #135e96; 921 border-color: #135e96; 922 color: #fff; 923 } 924 .brxe-sidebar-widget__btn--outline { 925 background: transparent; 926 color: #2271b1; 927 } 928 .brxe-sidebar-widget__btn--outline:hover { 929 background: #f0f6fc; 930 color: #135e96; 931 } 932 .brxe-sidebar-save { 933 background: #fff; 934 border: 1px solid #dcdcde; 935 border-radius: 8px; 936 padding: 16px 20px; 937 text-align: center; 938 } 939 .brxe-sidebar-save .button-primary { 940 width: 100%; 941 height: 40px; 942 font-size: 14px; 943 font-weight: 600; 944 } 945 946 /* ── Section ───────────────────────────────────────── */ 709 947 .brxe-section { 710 948 margin-bottom: 32px; … … 726 964 font-weight: 600; 727 965 margin: 0; 728 } 729 730 /* Tabs */ 966 padding-inline-end: 1rem; 967 } 968 .brxe-section__toggle-all { 969 display: flex; 970 align-items: center; 971 gap: 8px; 972 } 973 .brxe-section__toggle-label { 974 font-size: 13px; 975 color: #646970; 976 font-weight: 500; 977 } 978 979 /* ── Tabs ──────────────────────────────────────────── */ 731 980 .brxe-tabs { 732 981 display: flex; … … 763 1012 } 764 1013 765 /* Tab panels*/1014 /* ── Tab panels ────────────────────────────────────── */ 766 1015 .brxe-tab-panel { 767 1016 display: none; … … 771 1020 } 772 1021 773 /* Feature grid*/1022 /* ── Feature grid ──────────────────────────────────── */ 774 1023 .brxe-feature-grid { 775 1024 display: grid; 776 grid-template-columns: repeat(auto-fill, minmax(3 60px, 1fr));1025 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 777 1026 gap: 16px; 778 1027 } … … 811 1060 } 812 1061 813 /* Toggle switch*/1062 /* ── Toggle switch ─────────────────────────────────── */ 814 1063 .brxe-toggle { 815 1064 position: relative; … … 853 1102 } 854 1103 855 /* Submit button override */ 856 .brxe-settings-wrap .submit { 857 margin-top: 24px; 858 padding: 0; 1104 /* ── Responsive: stack on narrow screens ───────────── */ 1105 @media (max-width: 960px) { 1106 .brxe-layout { 1107 grid-template-columns: 1fr; 1108 } 1109 .brxe-sidebar-sticky { 1110 position: static; 1111 } 859 1112 } 860 1113 </style> … … 881 1134 }); 882 1135 }); 1136 1137 // Toggle All Logic 1138 function updateSectionToggleAll(section) { 1139 var allCheckboxes = section.querySelectorAll('.brxe-feature-card .brxe-toggle input[type="checkbox"]'); 1140 var allChecked = true; 1141 if (allCheckboxes.length === 0) { 1142 allChecked = false; 1143 } else { 1144 allCheckboxes.forEach(function(c) { 1145 if (!c.checked) { 1146 allChecked = false; 1147 } 1148 }); 1149 } 1150 var toggleAll = section.querySelector('.brxe-toggle-all-btn'); 1151 if (toggleAll) { 1152 toggleAll.checked = allChecked; 1153 } 1154 } 1155 1156 document.querySelectorAll('.brxe-toggle-all-btn').forEach(function(btn) { 1157 btn.addEventListener('change', function() { 1158 var isChecked = this.checked; 1159 var section = this.closest('.brxe-section'); 1160 var checkboxes = section.querySelectorAll('.brxe-feature-card .brxe-toggle input[type="checkbox"]'); 1161 checkboxes.forEach(function(cb) { 1162 if (cb.checked !== isChecked) { 1163 cb.checked = isChecked; 1164 var card = cb.closest('.brxe-feature-card'); 1165 if (isChecked) { 1166 card.classList.add('is-active'); 1167 } else { 1168 card.classList.remove('is-active'); 1169 } 1170 } 1171 }); 1172 }); 1173 }); 1174 1175 document.querySelectorAll('.brxe-feature-card .brxe-toggle input[type="checkbox"]').forEach(function(cb) { 1176 cb.addEventListener('change', function() { 1177 var card = this.closest('.brxe-feature-card'); 1178 if (this.checked) { 1179 card.classList.add('is-active'); 1180 } else { 1181 card.classList.remove('is-active'); 1182 } 1183 var section = this.closest('.brxe-section'); 1184 updateSectionToggleAll(section); 1185 }); 1186 }); 1187 1188 // Initialize Toggle All states on load 1189 document.querySelectorAll('.brxe-section').forEach(function(section) { 1190 updateSectionToggleAll(section); 1191 }); 883 1192 })(); 884 1193 </script> -
sityn-enhancer-for-bricks-builder/tags/1.2/readme.txt
r3517819 r3521697 5 5 Tested up to: 6.9 6 6 Requires PHP: 7.4 7 Stable tag: 1. 1.27 Stable tag: 1.2 8 8 License: GPL-2.0-or-later 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html … … 64 64 == Changelog == 65 65 66 = 1.2 = 67 * Added a toggle to copy styles for BEM classes. 68 * Added enable all and disable all toggles to the plugin admin page. 69 * Fixed Auto Complete var() incorrectly wrapping classes in var(). 70 66 71 = 1.1.2 = 67 72 * HOTFIX: Fixed a fatal error caused by mixed-case file paths when updating via FTP, specifically affecting the Conditions feature on case-sensitive Linux servers. -
sityn-enhancer-for-bricks-builder/tags/1.2/sityn-enhancer-for-bricks-builder.php
r3517819 r3521697 3 3 * Plugin Name: Sityn Enhancer for Bricks Builder 4 4 * Description: Essential workflow enhancements for Bricks Builder. Adds BEM class generation and smart CSS autocomplete. 5 * Version: 1. 1.25 * Version: 1.2 6 6 * Author: aerqzs 7 7 * Author URI: https://sityn.com … … 21 21 22 22 // ── Plugin constants ────────────────────────────────────────────── 23 define( 'SITYN_ENHANCER_VERSION', '1. 1.2' );23 define( 'SITYN_ENHANCER_VERSION', '1.2' ); 24 24 define( 'SITYN_ENHANCER_FILE', __FILE__ ); 25 25 define( 'SITYN_ENHANCER_DIR', plugin_dir_path( __FILE__ ) ); -
sityn-enhancer-for-bricks-builder/trunk/assets/css/bem-generator.css
r3517819 r3521697 627 627 } 628 628 629 /* ── Copy Styles Toggle (inside mode section) ──────────────────────── */ 630 631 .brxe-bem-copy-styles-row { 632 margin-top: 4px; 633 padding: 10px 12px; 634 background: var(--brxe-bg-elevated); 635 border: 1px solid var(--brxe-border-subtle); 636 border-radius: var(--brxe-radius-md); 637 animation: brxeCopyStylesSlideIn var(--brxe-transition-smooth) forwards; 638 } 639 640 @keyframes brxeCopyStylesSlideIn { 641 from { 642 opacity: 0; 643 transform: translateY(-4px); 644 } 645 to { 646 opacity: 1; 647 transform: translateY(0); 648 } 649 } 650 629 651 /* ── Focus-Visible Accessibility ────────────────────────────────────── */ 630 652 -
sityn-enhancer-for-bricks-builder/trunk/assets/js/bem-generator.js
r3517819 r3521697 291 291 </select> 292 292 <span class="brxe-bem-select-arrow">▼</span> 293 </div> 294 <div class="brxe-bem-copy-styles-row" id="brxe-bem-copy-styles-row" style="display:none"> 295 <label class="brxe-bem-toggle-group"> 296 <div class="brxe-bem-switch"> 297 <input type="checkbox" id="brxe-bem-toggle-copy-styles" checked> 298 <span class="brxe-bem-slider"></span> 299 </div> 300 <span class="brxe-bem-toggle-text">Copy Styles to New Classes</span> 301 </label> 293 302 </div> 294 303 </div>`; … … 470 479 } 471 480 481 // ── Mode selector: show/hide Copy Styles toggle ── 482 483 const modeSelect = panel.querySelector('#brxe-bem-mode-select'); 484 const copyStylesRow = panel.querySelector('#brxe-bem-copy-styles-row'); 485 if (modeSelect && copyStylesRow) { 486 const updateCopyStylesVisibility = () => { 487 const mode = modeSelect.value; 488 if (mode === 'rename') { 489 copyStylesRow.style.display = 'none'; 490 } else { 491 copyStylesRow.style.display = ''; 492 } 493 }; 494 modeSelect.addEventListener('change', updateCopyStylesVisibility); 495 // Initialize on panel open. 496 updateCopyStylesVisibility(); 497 } 498 472 499 // ── Block input reactivity ── 473 500 … … 625 652 const mode = ctx.isReEntry && modeSelect ? modeSelect.value : 'fresh'; 626 653 654 const copyStylesToggle = panel.querySelector('#brxe-bem-toggle-copy-styles'); 655 const shouldCopyStyles = copyStylesToggle ? copyStylesToggle.checked : false; 656 627 657 const oldGCIdsToRemove = []; 628 658 … … 682 712 } 683 713 } else if (mode === 'create-remove' || mode === 'create-delete') { 714 // Grab old settings before removing. 715 let oldGCSettings = null; 716 if (shouldCopyStyles && oldGCId) { 717 const oldGC = state.globalClasses.find((g) => g.id === oldGCId); 718 if (oldGC && oldGC.settings) { 719 oldGCSettings = JSON.parse(JSON.stringify(oldGC.settings)); 720 } 721 } 722 684 723 if (oldGCId) { 685 724 updatedGlobalClasses = updatedGlobalClasses.filter( … … 695 734 ); 696 735 if (!globalClass) { 697 globalClass = { id: uid(), name: newClassName, settings: {} };736 globalClass = { id: uid(), name: newClassName, settings: oldGCSettings || {} }; 698 737 state.globalClasses.push(globalClass); 738 } else if (shouldCopyStyles && oldGCSettings) { 739 // Merge old styles into existing class (old styles as base, existing on top). 740 globalClass.settings = { ...oldGCSettings, ...globalClass.settings }; 699 741 } 700 742 … … 704 746 } 705 747 } else if (mode === 'create-keep') { 748 // Grab old settings for copy. 749 let oldGCSettings = null; 750 if (shouldCopyStyles && oldGCId) { 751 const oldGC = state.globalClasses.find((g) => g.id === oldGCId); 752 if (oldGC && oldGC.settings) { 753 oldGCSettings = JSON.parse(JSON.stringify(oldGC.settings)); 754 } 755 } 756 706 757 let globalClass = state.globalClasses.find( 707 758 (gc) => gc.name === newClassName 708 759 ); 709 760 if (!globalClass) { 710 globalClass = { id: uid(), name: newClassName, settings: {} };761 globalClass = { id: uid(), name: newClassName, settings: oldGCSettings || {} }; 711 762 state.globalClasses.push(globalClass); 763 } else if (shouldCopyStyles && oldGCSettings) { 764 globalClass.settings = { ...oldGCSettings, ...globalClass.settings }; 712 765 } 713 766 -
sityn-enhancer-for-bricks-builder/trunk/assets/js/css-autocomplete.js
r3517819 r3521697 31 31 32 32 // Match bare --custom-property tokens that are NOT already inside var(). 33 // Negative lookbehind: not preceded by "var(" .34 const BARE_VAR_RE = /(?<!\bvar\() --[\w-]+/g;33 // Negative lookbehind: not preceded by "var(" and not preceded by a word character or hyphen (to avoid matching BEM classes like btn--primary). 34 const BARE_VAR_RE = /(?<!\bvar\()(?<![\w-])--[\w-]+/g; 35 35 36 36 // Detect arithmetic operators between values (excludes unary minus on numbers). … … 119 119 const raw = target.value; 120 120 if (!raw || raw.trim().length === 0) return; 121 122 // Skip inputs that are meant for typing class names (like the global classes input). 123 const targetClass = (target.className || '').toLowerCase(); 124 const targetPlaceholder = (target.placeholder || '').toLowerCase(); 125 if ( 126 targetClass.includes('class') || 127 targetPlaceholder.includes('class') || 128 target.closest('[class*="class-input"]') || 129 target.closest('[class*="classes-input"]') || 130 target.closest('[data-control="classes"]') 131 ) { 132 return; 133 } 121 134 122 135 // Quick check: does the value contain something we'd auto-complete? -
sityn-enhancer-for-bricks-builder/trunk/includes/admin/class-settings-page.php
r3517819 r3521697 60 60 'sanitize_callback' => array( $this, 'sanitize_settings' ), 61 61 'default' => array( 62 'bem_generator' => true,63 'autocomplete_var' => true,64 'autocomplete_calc' => true,65 'copy_content' => true,66 'media_actions' => true,67 'submit_form_action' => true,68 'focus_element_action' => true,69 'disable_element_action' => true,70 'navigate_back_action' => true,71 'print_page_action' => true,72 'reload_page_action' => true,73 'navigate_forward_action' => true,74 'remove_element_action' => true,75 'password_visibility_action' => true,76 'scroll_triggers' => true,77 'resize_trigger' => true,78 'tab_active_trigger' => true,79 'dblclick_trigger' => true,80 'contextmenu_trigger' => true,81 'focus_within_trigger' => true,82 'theme_change_trigger' => true,83 'checkbox_triggers' => true,84 'paste_trigger' => true,85 'network_triggers' => true,86 'print_trigger' => true,87 'current_url_tag' => true,88 'url_parameter_tag' => true,89 'user_ip_tag' => true,90 'user_browser_tag' => true,91 'user_device_type_tag' => true,92 'user_os_tag' => true,93 'post_time_ago_tag' => true,94 'post_reading_time_tag' => true,95 'post_view_count_tag' => true,96 'user_visit_count_tag' => true,97 'user_session_duration_tag' => true,98 'wp_version_tag' => true,99 'image_alt_text_tag' => true,100 'image_caption_tag' => true,101 'media_file_size_tag' => true,102 'string_uppercase_tag' => true,103 'string_lowercase_tag' => true,104 'string_truncate_tag' => true,105 'random_number_tag' => true,106 'random_string_tag' => true,107 'condition_archive_type' => true,108 'condition_search_results' => true,109 'condition_authored_by_user' => true,110 'condition_author_has_cpt' => true,111 'condition_body_classes' => true,112 'condition_category_archive' => true,113 'condition_cpt_published_entry' => true,114 'condition_current_day' => true,115 'condition_current_month' => true,116 'condition_current_year' => true,62 'bem_generator' => false, 63 'autocomplete_var' => false, 64 'autocomplete_calc' => false, 65 'copy_content' => false, 66 'media_actions' => false, 67 'submit_form_action' => false, 68 'focus_element_action' => false, 69 'disable_element_action' => false, 70 'navigate_back_action' => false, 71 'print_page_action' => false, 72 'reload_page_action' => false, 73 'navigate_forward_action' => false, 74 'remove_element_action' => false, 75 'password_visibility_action' => false, 76 'scroll_triggers' => false, 77 'resize_trigger' => false, 78 'tab_active_trigger' => false, 79 'dblclick_trigger' => false, 80 'contextmenu_trigger' => false, 81 'focus_within_trigger' => false, 82 'theme_change_trigger' => false, 83 'checkbox_triggers' => false, 84 'paste_trigger' => false, 85 'network_triggers' => false, 86 'print_trigger' => false, 87 'current_url_tag' => false, 88 'url_parameter_tag' => false, 89 'user_ip_tag' => false, 90 'user_browser_tag' => false, 91 'user_device_type_tag' => false, 92 'user_os_tag' => false, 93 'post_time_ago_tag' => false, 94 'post_reading_time_tag' => false, 95 'post_view_count_tag' => false, 96 'user_visit_count_tag' => false, 97 'user_session_duration_tag' => false, 98 'wp_version_tag' => false, 99 'image_alt_text_tag' => false, 100 'image_caption_tag' => false, 101 'media_file_size_tag' => false, 102 'string_uppercase_tag' => false, 103 'string_lowercase_tag' => false, 104 'string_truncate_tag' => false, 105 'random_number_tag' => false, 106 'random_string_tag' => false, 107 'condition_archive_type' => false, 108 'condition_search_results' => false, 109 'condition_authored_by_user' => false, 110 'condition_author_has_cpt' => false, 111 'condition_body_classes' => false, 112 'condition_category_archive' => false, 113 'condition_cpt_published_entry' => false, 114 'condition_current_day' => false, 115 'condition_current_month' => false, 116 'condition_current_year' => false, 117 117 ), 118 118 ) … … 210 210 'key' => 'autocomplete_var', 211 211 'title' => __( 'Auto Complete var()', 'sityn-enhancer-for-bricks-builder' ), 212 'description' => __( 'Automatically wrap CSS custom properties (--name) in var() when pressing Enter or semicolon.', 'sityn-enhancer-for-bricks-builder' ),212 'description' => __( 'Automatically wrap CSS custom properties --name in var(--name) when pressing Enter or semicolon.', 'sityn-enhancer-for-bricks-builder' ), 213 213 'icon' => 'dashicons-editor-textcolor', 214 214 ), … … 608 608 609 609 /** 610 * Render the full-width banner HTML above the settings page. 611 * 612 * ── HOW TO EDIT ────────────────────────────────────────────────── 613 * Simply change the HTML below. This method outputs raw markup 614 * inside a `.brxe-banner` wrapper that spans the full width of the 615 * settings page, above the heading and feature toggles. 616 * ───────────────────────────────────────────────────────────────── 617 */ 618 private function render_banner_html(): void { 619 ?> 620 <div class="brxe-banner__inner"> 621 <div class="brxe-banner__content"> 622 <span class="dashicons dashicons-megaphone brxe-banner__icon"></span> 623 <div> 624 <strong><?php esc_html_e( 'Welcome to Sityn Enhancer for Bricks Builder!', 'sityn-enhancer-for-bricks-builder' ); ?></strong> 625 <p><?php esc_html_e( 'Supercharge your Bricks workflow with powerful CSS enhancements, custom interactions, dynamic tags, and more.', 'sityn-enhancer-for-bricks-builder' ); ?></p> 626 </div> 627 </div> 628 </div> 629 <?php 630 } 631 632 /** 633 * Render the sticky sidebar marketing HTML. 634 * 635 * ── HOW TO EDIT ────────────────────────────────────────────────── 636 * Change the HTML below. This method outputs raw markup inside 637 * `.brxe-sidebar-sticky` in the right-hand sidebar. Everything 638 * here stays visible while the user scrolls the feature toggles. 639 * The Save button is rendered separately after this block. 640 * ───────────────────────────────────────────────────────────────── 641 */ 642 private function render_sidebar_html(): void { 643 ?> 644 <div class="brxe-sidebar-widget"> 645 <h3 class="brxe-sidebar-widget__title"> 646 <span class="dashicons dashicons-star-filled"></span> 647 <?php esc_html_e( 'Enjoying the Plugin?', 'sityn-enhancer-for-bricks-builder' ); ?> 648 </h3> 649 <p class="brxe-sidebar-widget__text"><?php esc_html_e( 'If you find this plugin helpful, please consider leaving a 5-star review. Your support helps us keep improving!', 'sityn-enhancer-for-bricks-builder' ); ?></p> 650 <a href="https://wordpress.org/support/plugin/sityn-enhancer-for-bricks-builder/reviews/#new-post" target="_blank" rel="noopener" class="brxe-sidebar-widget__btn"> 651 <?php esc_html_e( '⭐ Leave a Review', 'sityn-enhancer-for-bricks-builder' ); ?> 652 </a> 653 </div> 654 655 <div class="brxe-sidebar-widget"> 656 <h3 class="brxe-sidebar-widget__title"> 657 <span class="dashicons dashicons-sos"></span> 658 <?php esc_html_e( 'Need Help?', 'sityn-enhancer-for-bricks-builder' ); ?> 659 </h3> 660 <p class="brxe-sidebar-widget__text"><?php esc_html_e( 'Check the documentation or open a support ticket if you run into any issues.', 'sityn-enhancer-for-bricks-builder' ); ?></p> 661 <a href="https://wordpress.org/support/plugin/sityn-enhancer-for-bricks-builder/" target="_blank" rel="noopener" class="brxe-sidebar-widget__btn brxe-sidebar-widget__btn--outline"> 662 <?php esc_html_e( 'Get Support', 'sityn-enhancer-for-bricks-builder' ); ?> 663 </a> 664 </div> 665 <?php 666 } 667 668 /** 610 669 * Render the settings page. 611 670 */ … … 618 677 ?> 619 678 <div class="wrap brxe-settings-wrap"> 679 680 <!-- ══ FULL-WIDTH BANNER (editable — see render_banner_html) ══ --> 681 <div class="brxe-banner"> 682 <?php $this->render_banner_html(); ?> 683 </div> 684 620 685 <div class="brxe-settings-header"> 621 686 <h1><?php esc_html_e( 'Sityn Enhancer for Bricks Builder', 'sityn-enhancer-for-bricks-builder' ); ?></h1> … … 626 691 <?php settings_fields( self::MENU_SLUG ); ?> 627 692 628 <!-- ── CSS Enhancements ──────────────────────────── --> 629 <div class="brxe-section"> 630 <div class="brxe-section__header"> 631 <span class="dashicons dashicons-admin-appearance brxe-section__icon"></span> 632 <h2 class="brxe-section__title"><?php esc_html_e( 'CSS Enhancements', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 633 </div> 634 <?php $this->render_feature_cards( $this->get_css_features(), $settings ); ?> 635 </div> 636 637 <!-- ── Interactions ───────────────────────────────── --> 638 <div class="brxe-section"> 639 <div class="brxe-section__header"> 640 <span class="dashicons dashicons-controls-play brxe-section__icon"></span> 641 <h2 class="brxe-section__title"><?php esc_html_e( 'Interactions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 642 </div> 643 644 <!-- Tabs --> 645 <div class="brxe-tabs"> 646 <button type="button" class="brxe-tabs__btn is-active" data-tab="triggers"> 647 <span class="dashicons dashicons-megaphone"></span> 648 <?php esc_html_e( 'Triggers', 'sityn-enhancer-for-bricks-builder' ); ?> 649 </button> 650 <button type="button" class="brxe-tabs__btn" data-tab="actions"> 651 <span class="dashicons dashicons-admin-settings"></span> 652 <?php esc_html_e( 'Actions', 'sityn-enhancer-for-bricks-builder' ); ?> 653 </button> 654 </div> 655 656 <!-- Tab panels --> 657 <div class="brxe-tab-panel is-active" data-panel="triggers"> 658 <?php $this->render_feature_cards( $this->get_trigger_features(), $settings ); ?> 659 </div> 660 <div class="brxe-tab-panel" data-panel="actions"> 661 <?php $this->render_feature_cards( $this->get_action_features(), $settings ); ?> 662 </div> 663 </div> 664 665 <!-- ── Dynamic Tags ───────────────────────────────── --> 666 <div class="brxe-section"> 667 <div class="brxe-section__header"> 668 <span class="dashicons dashicons-tag brxe-section__icon"></span> 669 <h2 class="brxe-section__title"><?php esc_html_e( 'Dynamic Tags', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 670 </div> 671 <?php $this->render_feature_cards( $this->get_dynamic_tag_features(), $settings ); ?> 672 </div> 673 674 <!-- ── Conditions ───────────────────────────────── --> 675 <div class="brxe-section"> 676 <div class="brxe-section__header"> 677 <span class="dashicons dashicons-filter brxe-section__icon"></span> 678 <h2 class="brxe-section__title"><?php esc_html_e( 'Conditions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 679 </div> 680 <?php $this->render_feature_cards( $this->get_condition_features(), $settings ); ?> 681 </div> 682 683 <?php submit_button( __( 'Save Settings', 'sityn-enhancer-for-bricks-builder' ) ); ?> 693 <div class="brxe-layout"> 694 695 <!-- ── LEFT COLUMN: scrollable features ── --> 696 <div class="brxe-layout__main"> 697 698 <!-- CSS Enhancements --> 699 <div class="brxe-section"> 700 <div class="brxe-section__header"> 701 <span class="dashicons dashicons-admin-appearance brxe-section__icon"></span> 702 <h2 class="brxe-section__title"><?php esc_html_e( 'CSS Enhancements', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 703 <div class="brxe-section__toggle-all"> 704 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 705 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 706 <input type="checkbox" class="brxe-toggle-all-btn"> 707 <span class="brxe-toggle__slider"></span> 708 </label> 709 </div> 710 </div> 711 <?php $this->render_feature_cards( $this->get_css_features(), $settings ); ?> 712 </div> 713 714 <!-- Interactions --> 715 <div class="brxe-section"> 716 <div class="brxe-section__header"> 717 <span class="dashicons dashicons-controls-play brxe-section__icon"></span> 718 <h2 class="brxe-section__title"><?php esc_html_e( 'Interactions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 719 <div class="brxe-section__toggle-all"> 720 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 721 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 722 <input type="checkbox" class="brxe-toggle-all-btn"> 723 <span class="brxe-toggle__slider"></span> 724 </label> 725 </div> 726 </div> 727 <div class="brxe-tabs"> 728 <button type="button" class="brxe-tabs__btn is-active" data-tab="triggers"> 729 <span class="dashicons dashicons-megaphone"></span> 730 <?php esc_html_e( 'Triggers', 'sityn-enhancer-for-bricks-builder' ); ?> 731 </button> 732 <button type="button" class="brxe-tabs__btn" data-tab="actions"> 733 <span class="dashicons dashicons-admin-settings"></span> 734 <?php esc_html_e( 'Actions', 'sityn-enhancer-for-bricks-builder' ); ?> 735 </button> 736 </div> 737 <div class="brxe-tab-panel is-active" data-panel="triggers"> 738 <?php $this->render_feature_cards( $this->get_trigger_features(), $settings ); ?> 739 </div> 740 <div class="brxe-tab-panel" data-panel="actions"> 741 <?php $this->render_feature_cards( $this->get_action_features(), $settings ); ?> 742 </div> 743 </div> 744 745 <!-- Dynamic Tags --> 746 <div class="brxe-section"> 747 <div class="brxe-section__header"> 748 <span class="dashicons dashicons-tag brxe-section__icon"></span> 749 <h2 class="brxe-section__title"><?php esc_html_e( 'Dynamic Tags', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 750 <div class="brxe-section__toggle-all"> 751 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 752 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 753 <input type="checkbox" class="brxe-toggle-all-btn"> 754 <span class="brxe-toggle__slider"></span> 755 </label> 756 </div> 757 </div> 758 <?php $this->render_feature_cards( $this->get_dynamic_tag_features(), $settings ); ?> 759 </div> 760 761 <!-- Conditions --> 762 <div class="brxe-section"> 763 <div class="brxe-section__header"> 764 <span class="dashicons dashicons-filter brxe-section__icon"></span> 765 <h2 class="brxe-section__title"><?php esc_html_e( 'Conditions', 'sityn-enhancer-for-bricks-builder' ); ?></h2> 766 <div class="brxe-section__toggle-all"> 767 <span class="brxe-section__toggle-label"><?php esc_html_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?></span> 768 <label class="brxe-toggle" title="<?php esc_attr_e( 'Toggle All', 'sityn-enhancer-for-bricks-builder' ); ?>"> 769 <input type="checkbox" class="brxe-toggle-all-btn"> 770 <span class="brxe-toggle__slider"></span> 771 </label> 772 </div> 773 </div> 774 <?php $this->render_feature_cards( $this->get_condition_features(), $settings ); ?> 775 </div> 776 777 </div><!-- /.brxe-layout__main --> 778 779 <!-- ── RIGHT COLUMN: sticky sidebar ── --> 780 <aside class="brxe-layout__sidebar"> 781 <div class="brxe-sidebar-sticky"> 782 783 <!-- Editable marketing content — see render_sidebar_html() --> 784 <?php $this->render_sidebar_html(); ?> 785 786 <!-- Save button --> 787 <div class="brxe-sidebar-save"> 788 <?php submit_button( __( 'Save Settings', 'sityn-enhancer-for-bricks-builder' ), 'primary', 'submit', false ); ?> 789 </div> 790 791 </div> 792 </aside> 793 794 </div><!-- /.brxe-layout --> 684 795 </form> 685 796 </div> … … 692 803 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; 693 804 } 805 806 /* ── Full-Width Banner ─────────────────────────────── */ 807 .brxe-banner { 808 margin-bottom: 24px; 809 } 810 .brxe-banner__inner { 811 background: linear-gradient(135deg, #1d2327 0%, #2c3338 100%); 812 border-radius: 12px; 813 padding: 24px 28px; 814 color: #fff; 815 } 816 .brxe-banner__content { 817 display: flex; 818 align-items: center; 819 gap: 16px; 820 } 821 .brxe-banner__icon { 822 font-size: 28px; 823 color: #72aee6; 824 flex-shrink: 0; 825 } 826 .brxe-banner__content strong { 827 font-size: 16px; 828 display: block; 829 margin-bottom: 4px; 830 } 831 .brxe-banner__content p { 832 margin: 0; 833 font-size: 13px; 834 color: #bbc8d4; 835 line-height: 1.5; 836 } 837 838 /* ── Header ────────────────────────────────────────── */ 694 839 .brxe-settings-header { 695 margin-bottom: 30px;840 margin-bottom: 24px; 696 841 } 697 842 .brxe-settings-header h1 { … … 706 851 } 707 852 708 /* Section */ 853 /* ── Two-Column Layout ─────────────────────────────── */ 854 .brxe-layout { 855 display: grid; 856 grid-template-columns: 1fr 300px; 857 gap: 32px; 858 align-items: start; 859 } 860 .brxe-layout__main { 861 min-width: 0; 862 } 863 864 /* ── Sidebar ───────────────────────────────────────── */ 865 .brxe-layout__sidebar { 866 min-width: 0; 867 position: sticky; 868 top: calc(var(--wp-admin--admin-bar--height) * 2); 869 } 870 .brxe-sidebar-sticky { 871 position: sticky; 872 top: 40px; 873 display: flex; 874 flex-direction: column; 875 gap: 16px; 876 } 877 .brxe-sidebar-widget { 878 background: #fff; 879 border: 1px solid #dcdcde; 880 border-radius: 8px; 881 padding: 20px; 882 } 883 .brxe-sidebar-widget__title { 884 display: flex; 885 align-items: center; 886 gap: 8px; 887 font-size: 14px; 888 font-weight: 600; 889 margin: 0 0 8px; 890 } 891 .brxe-sidebar-widget__title .dashicons { 892 color: #dba617; 893 font-size: 18px; 894 width: 18px; 895 height: 18px; 896 } 897 .brxe-sidebar-widget__text { 898 font-size: 13px; 899 color: #646970; 900 line-height: 1.5; 901 margin: 0 0 14px; 902 } 903 .brxe-sidebar-widget__btn { 904 display: inline-block; 905 padding: 8px 18px; 906 font-size: 13px; 907 font-weight: 600; 908 text-decoration: none; 909 border-radius: 6px; 910 transition: all 0.2s; 911 background: #2271b1; 912 color: #fff; 913 border: 1px solid #2271b1; 914 cursor: pointer; 915 text-align: center; 916 width: 100%; 917 box-sizing: border-box; 918 } 919 .brxe-sidebar-widget__btn:hover { 920 background: #135e96; 921 border-color: #135e96; 922 color: #fff; 923 } 924 .brxe-sidebar-widget__btn--outline { 925 background: transparent; 926 color: #2271b1; 927 } 928 .brxe-sidebar-widget__btn--outline:hover { 929 background: #f0f6fc; 930 color: #135e96; 931 } 932 .brxe-sidebar-save { 933 background: #fff; 934 border: 1px solid #dcdcde; 935 border-radius: 8px; 936 padding: 16px 20px; 937 text-align: center; 938 } 939 .brxe-sidebar-save .button-primary { 940 width: 100%; 941 height: 40px; 942 font-size: 14px; 943 font-weight: 600; 944 } 945 946 /* ── Section ───────────────────────────────────────── */ 709 947 .brxe-section { 710 948 margin-bottom: 32px; … … 726 964 font-weight: 600; 727 965 margin: 0; 728 } 729 730 /* Tabs */ 966 padding-inline-end: 1rem; 967 } 968 .brxe-section__toggle-all { 969 display: flex; 970 align-items: center; 971 gap: 8px; 972 } 973 .brxe-section__toggle-label { 974 font-size: 13px; 975 color: #646970; 976 font-weight: 500; 977 } 978 979 /* ── Tabs ──────────────────────────────────────────── */ 731 980 .brxe-tabs { 732 981 display: flex; … … 763 1012 } 764 1013 765 /* Tab panels*/1014 /* ── Tab panels ────────────────────────────────────── */ 766 1015 .brxe-tab-panel { 767 1016 display: none; … … 771 1020 } 772 1021 773 /* Feature grid*/1022 /* ── Feature grid ──────────────────────────────────── */ 774 1023 .brxe-feature-grid { 775 1024 display: grid; 776 grid-template-columns: repeat(auto-fill, minmax(3 60px, 1fr));1025 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 777 1026 gap: 16px; 778 1027 } … … 811 1060 } 812 1061 813 /* Toggle switch*/1062 /* ── Toggle switch ─────────────────────────────────── */ 814 1063 .brxe-toggle { 815 1064 position: relative; … … 853 1102 } 854 1103 855 /* Submit button override */ 856 .brxe-settings-wrap .submit { 857 margin-top: 24px; 858 padding: 0; 1104 /* ── Responsive: stack on narrow screens ───────────── */ 1105 @media (max-width: 960px) { 1106 .brxe-layout { 1107 grid-template-columns: 1fr; 1108 } 1109 .brxe-sidebar-sticky { 1110 position: static; 1111 } 859 1112 } 860 1113 </style> … … 881 1134 }); 882 1135 }); 1136 1137 // Toggle All Logic 1138 function updateSectionToggleAll(section) { 1139 var allCheckboxes = section.querySelectorAll('.brxe-feature-card .brxe-toggle input[type="checkbox"]'); 1140 var allChecked = true; 1141 if (allCheckboxes.length === 0) { 1142 allChecked = false; 1143 } else { 1144 allCheckboxes.forEach(function(c) { 1145 if (!c.checked) { 1146 allChecked = false; 1147 } 1148 }); 1149 } 1150 var toggleAll = section.querySelector('.brxe-toggle-all-btn'); 1151 if (toggleAll) { 1152 toggleAll.checked = allChecked; 1153 } 1154 } 1155 1156 document.querySelectorAll('.brxe-toggle-all-btn').forEach(function(btn) { 1157 btn.addEventListener('change', function() { 1158 var isChecked = this.checked; 1159 var section = this.closest('.brxe-section'); 1160 var checkboxes = section.querySelectorAll('.brxe-feature-card .brxe-toggle input[type="checkbox"]'); 1161 checkboxes.forEach(function(cb) { 1162 if (cb.checked !== isChecked) { 1163 cb.checked = isChecked; 1164 var card = cb.closest('.brxe-feature-card'); 1165 if (isChecked) { 1166 card.classList.add('is-active'); 1167 } else { 1168 card.classList.remove('is-active'); 1169 } 1170 } 1171 }); 1172 }); 1173 }); 1174 1175 document.querySelectorAll('.brxe-feature-card .brxe-toggle input[type="checkbox"]').forEach(function(cb) { 1176 cb.addEventListener('change', function() { 1177 var card = this.closest('.brxe-feature-card'); 1178 if (this.checked) { 1179 card.classList.add('is-active'); 1180 } else { 1181 card.classList.remove('is-active'); 1182 } 1183 var section = this.closest('.brxe-section'); 1184 updateSectionToggleAll(section); 1185 }); 1186 }); 1187 1188 // Initialize Toggle All states on load 1189 document.querySelectorAll('.brxe-section').forEach(function(section) { 1190 updateSectionToggleAll(section); 1191 }); 883 1192 })(); 884 1193 </script> -
sityn-enhancer-for-bricks-builder/trunk/readme.txt
r3517819 r3521697 5 5 Tested up to: 6.9 6 6 Requires PHP: 7.4 7 Stable tag: 1. 1.27 Stable tag: 1.2 8 8 License: GPL-2.0-or-later 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html … … 64 64 == Changelog == 65 65 66 = 1.2 = 67 * Added a toggle to copy styles for BEM classes. 68 * Added enable all and disable all toggles to the plugin admin page. 69 * Fixed Auto Complete var() incorrectly wrapping classes in var(). 70 66 71 = 1.1.2 = 67 72 * HOTFIX: Fixed a fatal error caused by mixed-case file paths when updating via FTP, specifically affecting the Conditions feature on case-sensitive Linux servers. -
sityn-enhancer-for-bricks-builder/trunk/sityn-enhancer-for-bricks-builder.php
r3517819 r3521697 3 3 * Plugin Name: Sityn Enhancer for Bricks Builder 4 4 * Description: Essential workflow enhancements for Bricks Builder. Adds BEM class generation and smart CSS autocomplete. 5 * Version: 1. 1.25 * Version: 1.2 6 6 * Author: aerqzs 7 7 * Author URI: https://sityn.com … … 21 21 22 22 // ── Plugin constants ────────────────────────────────────────────── 23 define( 'SITYN_ENHANCER_VERSION', '1. 1.2' );23 define( 'SITYN_ENHANCER_VERSION', '1.2' ); 24 24 define( 'SITYN_ENHANCER_FILE', __FILE__ ); 25 25 define( 'SITYN_ENHANCER_DIR', plugin_dir_path( __FILE__ ) );
Note:
See TracChangeset
for help on using the changeset viewer.
