WordPress.org
Get WordPress

Plugin Directory

Changeset 3396885


Ignore:
Timestamp:
11/17/2025 05:00:00 AM (5 months ago)
Author:
pistonui
Message:

Quick Fix

Location:
pistonui
Files:
65 added
6 edited

Legend:

Unmodified
Added
Removed

  • pistonui/tags/1.2.2/pistonui.php

    r3396877 r3396885  
    33Plugin Name: PistonUI
    44Description: High-performance custom widgets for Elementor.
    5 Version: 1.2.2
     5Version: 1.2.3
    66Author: Lasindu Nadishan
    77Author URI: https://pistonui.com/lasindu
    … …  
    1919
    2020// Define plugin constants
    21 define( 'PISTONUI_VERSION', '1.2.2' );
     21define( 'PISTONUI_VERSION', '1.2.3' );
    2222define( 'PISTONUI_PATH', plugin_dir_path( __FILE__ ) );
    2323define( 'PISTONUI_URL', plugin_dir_url( __FILE__ ) );

  • pistonui/tags/1.2.2/readme.txt

    r3396877 r3396885  
    55Tested up to: 6.8
    66Requires PHP: 7.4
    7 Stable tag: 1.2.2
     7Stable tag: 1.2.3
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    125125
    126126== Changelog ==
     127= 1.2.3 =
     128- Fix: Scroll Reveal Cards widget - Critical JavaScript scoping issue that caused layout breaking on live sites
     129- Fix: JavaScript now properly scoped to widget instance using unique widget ID to prevent conflicts
     130- Fix: Replaced inline script tag with wp_add_inline_script for better WordPress compatibility
     131- Fix: Changed from ES6 arrow functions to ES5 for broader browser compatibility
     132
    127133= 1.2.2 =
    128134- Fix: Scroll Reveal Cards widget - Corrected HTML structure for button anchor tag to ensure proper validation

  • pistonui/tags/1.2.2/widgets/scroll-reveal-cards.php

    r3396877 r3396885  
    744744        $layout_direction = !empty($settings['layout_direction']) ? $settings['layout_direction'] : 'left-right';
    745745        $layout_class = $layout_direction === 'right-left' ? 'layout-reversed' : 'layout-normal';
     746        $widget_id = $this->get_id();
    746747        ?>
    747         <div class="scroll-reveal-wrapper <?php echo esc_attr($layout_class); ?>">
     748        <div class="scroll-reveal-wrapper <?php echo esc_attr($layout_class); ?>" data-widget-id="<?php echo esc_attr($widget_id); ?>">
    748749            <div class="scroll-reveal-container">
    749750                <!-- LEFT CONTENT -->
    … …  
    805806        </div>
    806807
    807         <script>
    808         (function() {
    809             const cards = document.querySelectorAll('.scroll-reveal-card');
     808        <?php
     809        // Properly scoped JavaScript for this widget instance
     810        $widget_id_json = wp_json_encode($widget_id);
     811       
     812        $inline_js = "(function() {
     813            var widgetId = {$widget_id_json};
     814            var wrapper = document.querySelector('.scroll-reveal-wrapper[data-widget-id=\"' + widgetId + '\"]');
     815           
     816            if (!wrapper) return;
     817           
     818            var cards = wrapper.querySelectorAll('.scroll-reveal-card');
    810819           
    811820            if (!cards.length) return;
    812821
    813822            // Simple fade-in on initial load
    814             cards.forEach((card, index) => {
     823            cards.forEach(function(card, index) {
    815824                card.style.opacity = '1';
    816825            });
    817826
    818827            // Add scale effect when cards overlap
    819             let ticking = false;
    820             window.addEventListener('scroll', () => {
     828            var ticking = false;
     829            window.addEventListener('scroll', function() {
    821830                if (!ticking) {
    822                     window.requestAnimationFrame(() => {
    823                         cards.forEach((card, index) => {
    824                             const rect = card.getBoundingClientRect();
    825                             const isStuck = rect.top <= 100;
     831                    window.requestAnimationFrame(function() {
     832                        cards.forEach(function(card, index) {
     833                            var rect = card.getBoundingClientRect();
     834                            var isStuck = rect.top <= 100;
    826835                           
    827836                            if (isStuck && index < cards.length - 1) {
    828                                 const nextCard = cards[index + 1];
    829                                 const nextRect = nextCard.getBoundingClientRect();
     837                                var nextCard = cards[index + 1];
     838                                var nextRect = nextCard.getBoundingClientRect();
    830839                               
    831840                                // Calculate overlap
    832                                 const overlap = Math.max(0, 100 - nextRect.top + rect.height);
    833                                 const maxOverlap = rect.height;
    834                                 const progress = Math.min(overlap / maxOverlap, 1);
     841                                var overlap = Math.max(0, 100 - nextRect.top + rect.height);
     842                                var maxOverlap = rect.height;
     843                                var progress = Math.min(overlap / maxOverlap, 1);
    835844                               
    836845                                // Scale down current card as next card covers it
    837                                 const scale = 1 - (progress * 0.05);
    838                                 const opacity = 1 - (progress * 0.3);
     846                                var scale = 1 - (progress * 0.05);
    839847                               
    840                                 card.style.transform = `scale(${scale})`;
    841                                 card.style.filter = `brightness(${1 - progress * 0.2})`;
     848                                card.style.transform = 'scale(' + scale + ')';
     849                                card.style.filter = 'brightness(' + (1 - progress * 0.2) + ')';
    842850                            } else if (!isStuck) {
    843851                                card.style.transform = 'scale(1)';
    … …  
    850858                }
    851859            });
    852         })();
    853         </script>
     860        })();";
     861       
     862        wp_enqueue_script('pistonui-script');
     863        wp_add_inline_script('pistonui-script', $inline_js, 'after');
     864        ?>
    854865        <?php
    855866    }

  • pistonui/trunk/pistonui.php

    r3396877 r3396885  
    33Plugin Name: PistonUI
    44Description: High-performance custom widgets for Elementor.
    5 Version: 1.2.2
     5Version: 1.2.3
    66Author: Lasindu Nadishan
    77Author URI: https://pistonui.com/lasindu
    … …  
    1919
    2020// Define plugin constants
    21 define( 'PISTONUI_VERSION', '1.2.2' );
     21define( 'PISTONUI_VERSION', '1.2.3' );
    2222define( 'PISTONUI_PATH', plugin_dir_path( __FILE__ ) );
    2323define( 'PISTONUI_URL', plugin_dir_url( __FILE__ ) );

  • pistonui/trunk/readme.txt

    r3396877 r3396885  
    55Tested up to: 6.8
    66Requires PHP: 7.4
    7 Stable tag: 1.2.2
     7Stable tag: 1.2.3
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    125125
    126126== Changelog ==
     127= 1.2.3 =
     128- Fix: Scroll Reveal Cards widget - Critical JavaScript scoping issue that caused layout breaking on live sites
     129- Fix: JavaScript now properly scoped to widget instance using unique widget ID to prevent conflicts
     130- Fix: Replaced inline script tag with wp_add_inline_script for better WordPress compatibility
     131- Fix: Changed from ES6 arrow functions to ES5 for broader browser compatibility
     132
    127133= 1.2.2 =
    128134- Fix: Scroll Reveal Cards widget - Corrected HTML structure for button anchor tag to ensure proper validation

  • pistonui/trunk/widgets/scroll-reveal-cards.php

    r3396877 r3396885  
    744744        $layout_direction = !empty($settings['layout_direction']) ? $settings['layout_direction'] : 'left-right';
    745745        $layout_class = $layout_direction === 'right-left' ? 'layout-reversed' : 'layout-normal';
     746        $widget_id = $this->get_id();
    746747        ?>
    747         <div class="scroll-reveal-wrapper <?php echo esc_attr($layout_class); ?>">
     748        <div class="scroll-reveal-wrapper <?php echo esc_attr($layout_class); ?>" data-widget-id="<?php echo esc_attr($widget_id); ?>">
    748749            <div class="scroll-reveal-container">
    749750                <!-- LEFT CONTENT -->
    … …  
    805806        </div>
    806807
    807         <script>
    808         (function() {
    809             const cards = document.querySelectorAll('.scroll-reveal-card');
     808        <?php
     809        // Properly scoped JavaScript for this widget instance
     810        $widget_id_json = wp_json_encode($widget_id);
     811       
     812        $inline_js = "(function() {
     813            var widgetId = {$widget_id_json};
     814            var wrapper = document.querySelector('.scroll-reveal-wrapper[data-widget-id=\"' + widgetId + '\"]');
     815           
     816            if (!wrapper) return;
     817           
     818            var cards = wrapper.querySelectorAll('.scroll-reveal-card');
    810819           
    811820            if (!cards.length) return;
    812821
    813822            // Simple fade-in on initial load
    814             cards.forEach((card, index) => {
     823            cards.forEach(function(card, index) {
    815824                card.style.opacity = '1';
    816825            });
    817826
    818827            // Add scale effect when cards overlap
    819             let ticking = false;
    820             window.addEventListener('scroll', () => {
     828            var ticking = false;
     829            window.addEventListener('scroll', function() {
    821830                if (!ticking) {
    822                     window.requestAnimationFrame(() => {
    823                         cards.forEach((card, index) => {
    824                             const rect = card.getBoundingClientRect();
    825                             const isStuck = rect.top <= 100;
     831                    window.requestAnimationFrame(function() {
     832                        cards.forEach(function(card, index) {
     833                            var rect = card.getBoundingClientRect();
     834                            var isStuck = rect.top <= 100;
    826835                           
    827836                            if (isStuck && index < cards.length - 1) {
    828                                 const nextCard = cards[index + 1];
    829                                 const nextRect = nextCard.getBoundingClientRect();
     837                                var nextCard = cards[index + 1];
     838                                var nextRect = nextCard.getBoundingClientRect();
    830839                               
    831840                                // Calculate overlap
    832                                 const overlap = Math.max(0, 100 - nextRect.top + rect.height);
    833                                 const maxOverlap = rect.height;
    834                                 const progress = Math.min(overlap / maxOverlap, 1);
     841                                var overlap = Math.max(0, 100 - nextRect.top + rect.height);
     842                                var maxOverlap = rect.height;
     843                                var progress = Math.min(overlap / maxOverlap, 1);
    835844                               
    836845                                // Scale down current card as next card covers it
    837                                 const scale = 1 - (progress * 0.05);
    838                                 const opacity = 1 - (progress * 0.3);
     846                                var scale = 1 - (progress * 0.05);
    839847                               
    840                                 card.style.transform = `scale(${scale})`;
    841                                 card.style.filter = `brightness(${1 - progress * 0.2})`;
     848                                card.style.transform = 'scale(' + scale + ')';
     849                                card.style.filter = 'brightness(' + (1 - progress * 0.2) + ')';
    842850                            } else if (!isStuck) {
    843851                                card.style.transform = 'scale(1)';
    … …  
    850858                }
    851859            });
    852         })();
    853         </script>
     860        })();";
     861       
     862        wp_enqueue_script('pistonui-script');
     863        wp_add_inline_script('pistonui-script', $inline_js, 'after');
     864        ?>
    854865        <?php
    855866    }
Note: See TracChangeset for help on using the changeset viewer.