WordPress.org
Get WordPress

Plugin Directory

Changeset 3423134


Ignore:
Timestamp:
12/18/2025 05:06:57 PM (4 months ago)
Author:
rainbowslider
Message:

Remove shorcode and ediotr mode css js load when select dropwdown

Location:
rainbow-slider/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • rainbow-slider/trunk/rainbow-slider.php

    r3422472 r3423134  
    44 * Plugin URI:        https://wordpress.org/plugins/rainbow-slider/
    55 * Description:       Convert Elementor Sections, Containers, and Grids into a responsive Slider effortlessly.
    6  * Version:           1.0.2
     6 * Version:           1.0.3
    77 * Requires at least: 5.8
    88 * Requires PHP:      7.2
    … …  
    1919if ( ! defined( 'ABSPATH' ) ) exit;
    2020
     21use Elementor\Plugin;
     22use Elementor\Core\Files\CSS\Post as Post_CSS;
     23
    2124/*-------------------------------------------------
    2225 1. Register CPT (rainbow_slider)
    … …  
    3235            'edit_item'     => 'Edit Slider',
    3336        ],
    34         'public'       => true,
    35         'show_in_rest' => true,
    36         'menu_icon'    => 'dashicons-images-alt2',
    37         'supports'     => [ 'title', 'editor' ],
    38     ] );
     37        'public'              => true,
     38        'show_ui'             => true,
     39        'show_in_menu'        => true,
     40        'rewrite'             => [ 'slug' => 'rainbow_slider', 'with_front' => false ],
     41        'has_archive'         => false,
     42        'exclude_from_search' => true,
     43        'menu_icon'           => 'dashicons-art',
     44        'supports'            => [ 'title', 'editor' ],
     45    ]);
    3946});
    4047
    4148/*-------------------------------------------------
    42  2. Admin Column: Shortcode
    43 --------------------------------------------------*/
    44 add_filter( 'manage_rainbow_slider_posts_columns', function( $columns ) {
    45     $date = $columns['date'];
    46     unset( $columns['date'] );
    47     $columns['shortcode'] = 'Shortcode';
    48     $columns['date'] = $date;
    49     return $columns;
    50 });
    51 
    52 add_action( 'manage_rainbow_slider_posts_custom_column', function( $column, $post_id ) {
    53     if ( 'shortcode' === $column ) {
    54         echo '<input type="text"
    55             value="[rainbow_slider id=\'' . esc_attr( $post_id ) . '\']"
    56             readonly
    57             style="width:100%;max-width:260px;padding:6px;background:#f0f0f1;border:1px solid #ddd;"
    58             onclick="this.select()">';
    59     }
    60 }, 10, 2 );
    61 
    62 /*-------------------------------------------------
    63  3. Elementor Support for CPT
     49 2. Elementor Support
    6450--------------------------------------------------*/
    6551add_action( 'init', function () {
    … …  
    7359
    7460/*-------------------------------------------------
    75  4. Enqueue Swiper & Assets
     61 3. Assets Enqueue
    7662--------------------------------------------------*/
    77 add_action( 'wp_enqueue_scripts', function () {
    78 
    79     // Swiper CSS (Local)
    80     wp_enqueue_style(
    81         'swiper',
    82         plugin_dir_url( __FILE__ ) . 'assets/swiper/swiper-bundle.min.css',
    83         [],
    84         '11.0.0'
    85     );
    86 
    87     // Custom CSS
     63function rainbow_slider_assets() {
     64    wp_enqueue_style( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/swiper/swiper-bundle.min.css', [], '11.0.0' );
     65   
    8866    wp_add_inline_style( 'swiper', "
    8967        .rainbow-slider{width:100%;position:relative;overflow:hidden;opacity:0;transition:opacity .3s ease;min-height:50px}
    9068        .rainbow-slider.rainbow-loaded{opacity:1}
    91         .rainbow-slider .swiper-wrapper{transition-property:transform,height;box-sizing:border-box}
    92         .rainbow-slider .swiper-slide{height:auto;width:100%;position:relative;display:block}
    93         .rainbow-slider .swiper-slide>.elementor-section,
    94         .rainbow-slider .swiper-slide>.elementor-top-section,
    95         .rainbow-slider .swiper-slide>.e-con,
    96         .rainbow-slider .swiper-slide>.e-parent,
    97         .rainbow-slider .swiper-slide>.e-container,
    98         .rainbow-slider .swiper-slide>.e-grid{width:100%!important;height:100%}
    99     " );
     69        .rainbow-slider .swiper-wrapper{display:flex;} /* Crucial Fix */
     70        .rainbow-slider .swiper-slide{height:auto;width:100%;flex-shrink:0;position:relative;display:block}
     71       
     72        .rainbow-slider .swiper-slide > .elementor-section,
     73        .rainbow-slider .swiper-slide > .e-con,
     74        .rainbow-slider .swiper-slide > .e-container { width: 100% !important; height: 100%; }
     75    ");
    10076
    101     // Swiper JS (Local)
    102     wp_enqueue_script(
    103         'swiper',
    104         plugin_dir_url( __FILE__ ) . 'assets/swiper/swiper-bundle.min.js',
    105         [ 'jquery' ],
    106         '11.0.0',
    107         true
    108     );
     77    wp_enqueue_script( 'swiper', plugin_dir_url( __FILE__ ) . 'assets/swiper/swiper-bundle.min.js', [ 'jquery' ], '11.0.0', true );
    10978
    110     // Initialization JS
     79    // JS Handler
    11180    $js_code = <<<'JS'
    112 (function($){
    113     var initRainbowSlider = function() {
    114         $('.rainbow-slider').each(function(){
    115             var slider = this;
    116             if(slider.classList.contains('rainbow-loaded')) return;
     81    window.initRainbowSlider = function( $scope ) {
     82        var $slider = $scope.find('.rainbow-slider');
     83        if ( ! $slider.length ) return;
     84       
     85        // Prevent double init
     86        if ( $slider.hasClass('swiper-initialized') ) return;
    11787
    118             var elementorInner = slider.querySelector('.elementor');
    119             if(!elementorInner){
    120                 slider.classList.add('rainbow-loaded');
    121                 return;
    122             }
     88        var elementorInner = $slider[0].querySelector('.elementor');
     89        if(!elementorInner) { $slider.addClass('rainbow-loaded'); return; }
    12390
    124             var originalClasses = elementorInner.className.split(' ');
    125             originalClasses.forEach(function(cls){
    126                 if(cls !== 'elementor'){
    127                     slider.classList.add(cls);
    128                 }
    129             });
     91        // Copy classes
     92        var originalClasses = elementorInner.className.split(' ');
     93        originalClasses.forEach(function(cls){ if(cls !== 'elementor') $slider.addClass(cls); });
    13094
    131             var sections = elementorInner.querySelectorAll(
    132                 ':scope > .elementor-section,' +
    133                 ':scope > .elementor-top-section,' +
    134                 ':scope > .e-con,' +
    135                 ':scope > .e-parent,' +
    136                 ':scope > .e-container'
    137             );
    138             if(!sections.length) return;
     95        // Structure
     96        var sections = elementorInner.querySelectorAll(':scope > .elementor-section, :scope > .elementor-top-section, :scope > .e-con, :scope > .e-parent, :scope > .e-container');
     97        if(!sections.length) return;
    13998
    140             var wrapper = document.createElement('div');
    141             wrapper.className = 'swiper-wrapper';
     99        var wrapper = document.createElement('div');
     100        wrapper.className = 'swiper-wrapper';
    142101
    143             sections.forEach(function(section){
    144                 var slide = document.createElement('div');
    145                 slide.className = 'swiper-slide';
    146                 slide.appendChild(section);
    147                 wrapper.appendChild(slide);
    148             });
     102        sections.forEach(function(section){
     103            var slide = document.createElement('div');
     104            slide.className = 'swiper-slide';
     105            slide.appendChild(section);
     106            wrapper.appendChild(slide);
     107        });
    149108
    150             slider.innerHTML = '';
    151             slider.classList.add('elementor');
    152             slider.appendChild(wrapper);
     109        $slider.html('').addClass('elementor').append(wrapper);
     110        $slider.append('<div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div>');
     111        $slider.addClass('rainbow-loaded');
    153112
    154             $(slider).append(
    155                 '<div class="swiper-pagination"></div>' +
    156                 '<div class="swiper-button-next"></div>' +
    157                 '<div class="swiper-button-prev"></div>'
    158             );
    159 
    160             slider.classList.add('rainbow-loaded');
    161 
    162             new Swiper(slider,{
    163                 slidesPerView:1,
    164                 loop:true,
    165                 autoHeight:true,
    166                 observer:true,
    167                 observeParents:true,
    168                 effect:'slide',
    169                 pagination:{el:slider.querySelector('.swiper-pagination'),clickable:true},
    170                 navigation:{
    171                     nextEl:slider.querySelector('.swiper-button-next'),
    172                     prevEl:slider.querySelector('.swiper-button-prev')
    173                 },
    174                 autoplay:{
    175                     delay:5000,
    176                     disableOnInteraction:false,
    177                     pauseOnMouseEnter:true
    178                 }
    179             });
    180 
    181             if(window.elementorFrontend){
    182                 try{ elementorFrontend.init(); }catch(e){}
    183             }
     113        // Init Swiper
     114        new Swiper($slider[0], {
     115            slidesPerView: 1,
     116            loop: true,
     117            autoHeight: true,
     118            observer: true,
     119            observeParents: true,
     120            pagination: { el: $slider.find('.swiper-pagination')[0], clickable: true },
     121            navigation: { nextEl: $slider.find('.swiper-button-next')[0], prevEl: $slider.find('.swiper-button-prev')[0] },
     122            autoplay: { delay: 5000, pauseOnMouseEnter: true }
    184123        });
    185124    };
    186125
    187     $(document).ready(initRainbowSlider);
    188 
    189     $(window).on('elementor/frontend/init',function(){
    190         elementorFrontend.hooks.addAction('frontend/element_ready/widget',function($scope){
    191             if($scope.find('.rainbow-slider').length){
    192                 setTimeout(initRainbowSlider,100);
    193             }
     126    jQuery(window).on('elementor/frontend/init', function () {
     127        elementorFrontend.hooks.addAction('frontend/element_ready/rainbow_slider_widget.default', function ($scope) {
     128            window.initRainbowSlider($scope);
    194129        });
    195130    });
    196 })(jQuery);
    197131JS;
     132    wp_add_inline_script( 'swiper', $js_code );
     133}
     134add_action( 'wp_enqueue_scripts', 'rainbow_slider_assets' );
     135add_action( 'elementor/editor/before_enqueue_scripts', 'rainbow_slider_assets' );
    198136
    199     wp_add_inline_script( 'swiper', $js_code );
    200 });
    201137
    202138/*-------------------------------------------------
    203  5. Shortcode
     139 4. RENDER FUNCTION (The CSS Fix)
    204140--------------------------------------------------*/
    205 function rainbow_slider_shortcode( $atts ) {
    206     $atts = shortcode_atts([ 'id' => 0 ], $atts );
    207     $post_id = intval( $atts['id'] );
    208 
     141function get_rainbow_slider_view( $post_id ) {
     142    $post_id = intval( $post_id );
    209143    if ( ! $post_id || ! class_exists( '\\Elementor\\Plugin' ) ) return '';
    210144
    211     $content = \Elementor\Plugin::instance()
    212         ->frontend
    213         ->get_builder_content_for_display( $post_id );
     145    // ১. Contenct Genarate
     146    $content = Plugin::instance()->frontend->get_builder_content_for_display( $post_id );
    214147
    215     return '<div class="swiper rainbow-slider" id="rainbow-slider-' . esc_attr( $post_id ) . '">' .
    216             $content .
    217            '</div>';
     148    // ২. Css Load on Editor Mode- when select drowpdown item it css same ot css from template
     149    if ( Plugin::instance()->editor->is_edit_mode() ) {
     150        $css_file = new Post_CSS( $post_id );
     151        $css_data = $css_file->get_content();
     152       
     153        if ( ! empty( $css_data ) ) {
     154            // Printing universal style tags so browsers don't miss them
     155            echo '<style id="rainbow-slider-css-' . $post_id . '">' . $css_data . '</style>';
     156        } else {
     157            // If the CSS file is missing, try regenerating it once.
     158            $css_file->enqueue();
     159        }
     160    }
     161
     162    $unique_id = 'rainbow-slider-' . $post_id . '-' . rand(1000,9999);
     163
     164    $html = '<div class="swiper rainbow-slider" id="' . esc_attr( $unique_id ) . '">' . $content . '</div>';
     165
     166    // ৩. Re-initialize JS when dropdown changes in editor
     167    if ( Plugin::instance()->editor->is_edit_mode() ) {
     168        $html .= "<script>
     169            jQuery(document).ready(function($){
     170                var scope = $('#" . esc_attr( $unique_id ) . "').closest('.elementor-widget');
     171                if(window.initRainbowSlider) {
     172                    window.initRainbowSlider(scope);
     173                }
     174            });
     175        </script>";
     176    }
     177
     178    return $html;
    218179}
    219 add_shortcode( 'rainbow_slider', 'rainbow_slider_shortcode' );
    220180
    221181/*-------------------------------------------------
    222  6. ELEMENTOR WIDGET INTEGRATION
     182 5. Widget Registration
    223183--------------------------------------------------*/
    224 
    225 // 6.1 Register Category "Rainbow Addons"
    226184add_action( 'elementor/elements/categories_registered', function( $elements_manager ) {
    227     $elements_manager->add_category(
    228         'rainbow_addons',
    229         [
    230             'title' => esc_html__( 'Rainbow Addons', 'rainbow-slider' ),
    231             'icon'  => 'fa fa-plug',
    232         ]
    233     );
     185    $elements_manager->add_category( 'rainbow_addons', [ 'title' => 'Rainbow Addons', 'icon' => 'fa fa-plug' ] );
    234186} );
    235187
    236 // 6.2 Load and Register Widget from External File
    237188add_action( 'elementor/widgets/register', function( $widgets_manager ) {
    238    
    239     // Check for Widget Base Class
    240     if ( ! class_exists( '\Elementor\Widget_Base' ) ) {
    241         return;
    242     }
    243 
    244     // Include the separate widget file
    245     // Make sure the folder name is 'widgets' and file is 'rainbow-slider-widget.php'
     189    if ( ! class_exists( '\Elementor\Widget_Base' ) ) return;
    246190    require_once( __DIR__ . '/widgets/rainbow-slider-widget.php' );
    247 
    248     // Register the class (defined in the included file)
    249191    $widgets_manager->register( new \Widget_Rainbow_Slider() );
    250 
    251192} );

  • rainbow-slider/trunk/readme.txt

    r3422497 r3423134  
    44Requires at least: 5.8
    55Tested up to: 6.9
    6 Stable tag: 1.0.2
     6Stable tag: 1.0.3
    77Requires PHP: 7.2
    88License: GPLv2 or later
    … …  
    1313== Description ==
    1414
    15 ⭐Rainbow Slider is a Good Slider for Your Wordpress Website use Any Theme :
    16 Rainbow Slider is a lightweight and reliable slider plugin that works smoothly with Elementor on any WordPress theme. It allows you to create beautiful, responsive sliders using Elementor sections and containers without affecting your existing design. The plugin supports modern layouts including flexbox and grid, while offering features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls to ensure a fast and engaging slider experience on all devices.
     15⭐<em>Rainbow Slider is a Good Slider for Your Wordpress Website use Any Theme :</em>
     16Rainbow Slider is a lightweight and reliable slider plugin that works smoothly with Elementor on any WordPress theme. <b>It doesn't matter if your website has a theme or not, it will work as long as it is beautiful.
     17If your website doesn't have elements. Then it will work very well. That is, it will work on any theme.</b> It allows you to create beautiful, responsive sliders using Elementor sections and containers without affecting your existing design. The plugin supports modern layouts including flexbox and grid, while offering features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls to ensure a fast and engaging slider experience on all devices.
    1718
    1819
    19 👉Rainbow Slider is Carousel :
     20👉<em>Rainbow Slider is Carousel :</em>
    2021Rainbow Slider is a lightweight carousel slider plugin built for Elementor. It lets you transform Elementor sections and containers into smooth, responsive carousel sliders without altering your original designs. The plugin supports Elementor sections, flexbox containers, and grid layouts while preserving full design integrity. With features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable carousel experience for Elementor-powered websites.
    2122
    2223
    23 👉Rainbow Slider is Elementor Slider :
     24👉<em>Rainbow Slider is Elementor Slider :</em>
    2425Rainbow Slider is a lightweight and flexible slider plugin designed exclusively for Elementor. It allows you to convert Elementor sections and containers into smooth, responsive sliders without modifying your original designs. The plugin fully supports Elementor sections, flexbox containers, and grid layouts while preserving complete design integrity. With features such as autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable slider experience for Elementor-powered websites.
    2526
    2627
    27 👉Rainbow Slider is Swiper Slider :
     28👉<em>Rainbow Slider is Swiper Slider :</em>
    2829Rainbow Slider is a lightweight Swiper-based slider plugin built for Elementor. It allows you to transform Elementor sections and containers into smooth, responsive Swiper sliders without changing your original designs. The plugin supports Elementor sections, flexbox containers, and grid layouts while keeping full design integrity. With features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable Swiper slider experience for Elementor-powered websites.
    2930
    3031
    31 👉Rainbow Slider is Image Slider :
     32👉<em>Rainbow Slider is Image Slider :</em>
    3233Rainbow Slider is a lightweight image slider plugin designed for Elementor. It allows you to create smooth, responsive image sliders using Elementor sections and containers without changing your original designs. The plugin supports modern layouts including flexbox and grid while maintaining full design integrity. With features such as autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable image slider experience for any Elementor-powered website.
    3334
    3435
    35 👉Rainbow Slider is Image Carousel :
     36👉<em>Rainbow Slider is Image Carousel :</em>
    3637Rainbow Slider is a lightweight image carousel plugin built for Elementor. It lets you turn Elementor sections and containers into smooth, responsive image carousels without changing your original designs. The plugin supports Elementor sections, flexbox containers, and grid layouts while preserving full design integrity. With features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable image carousel experience for Elementor-powered websites.
    3738
    3839
    39 👉Rainbow Slider is Gallery Carousel :
     40👉<em>Rainbow Slider is Gallery Carousel :</em>
    4041Rainbow Slider is a lightweight gallery carousel plugin designed for Elementor. It allows you to transform Elementor sections and containers into smooth, responsive gallery carousels without affecting your original designs. The plugin supports Elementor sections, flexbox containers, and grid layouts while maintaining full design integrity. With features such as autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider provides a fast, modern, and reliable gallery carousel experience for Elementor-powered websites.
    4142
    4243
    43 👉Rainbow Slider is Gallery Slider :
     44👉<em>Rainbow Slider is Gallery Slider :</em>
    4445Rainbow Slider is a lightweight gallery slider plugin built for Elementor. It enables you to convert Elementor sections and containers into smooth, responsive gallery sliders without changing your original designs. The plugin supports Elementor sections, flexbox containers, and grid layouts while preserving full design integrity. With features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable gallery slider experience for Elementor-powered websites.
    4546
    46 👉Rainbow Slider is Video Slider :
     47👉<em>Rainbow Slider is Video Slider :</em>
    4748Rainbow Slider is a lightweight and flexible video slider plugin built for Elementor. It allows you to create smooth, responsive video sliders using Elementor sections and containers without affecting your original designs. The plugin supports YouTube, Vimeo, and external video sources, as well as self-hosted videos, while maintaining full design integrity. With features like autoplay, infinite loop, navigation arrows, pagination, and touch-friendly controls, Rainbow Slider delivers a fast, modern, and reliable video slider experience for Elementor-powered websites.
    4849

  • rainbow-slider/trunk/widgets/rainbow-slider-widget.php

    r3422472 r3423134  
    1717
    1818    public function get_categories() {
    19         // Must match the category registered in the main file
    2019        return [ 'rainbow_addons' ];
    2120    }
    … …  
    2322    protected function register_controls() {
    2423
    25         // Get all posts from 'rainbow_slider' CPT
    2624        $args = [
    2725            'post_type'      => 'rainbow_slider',
    … …  
    6664
    6765        if ( ! empty( $slider_id ) && $slider_id != '0' ) {
    68             // Echo the shortcode based on the selected ID
    69             echo do_shortcode( '[rainbow_slider id="' . esc_attr( $slider_id ) . '"]' );
     66           
     67            // Check if the helper function exists before calling it
     68            if ( function_exists( 'get_rainbow_slider_view' ) ) {
     69                echo get_rainbow_slider_view( $slider_id );
     70            }
     71
    7072        } else {
    7173            if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
Note: See TracChangeset for help on using the changeset viewer.