tab-1.php
164 lines
| 1 | <?php |
| 2 | if (!defined('ABSPATH')) { |
| 3 | exit; // Exit if accessed directly. |
| 4 | } |
| 5 | ?> |
| 6 | <div class="wrapper tab_shortcode spel-tabs"> |
| 7 | <div class="sticky_tab_item tabs_sliders<?php echo esc_attr($navigation_arrow_class . $sticky_tab_class); ?>"> |
| 8 | <span class="scroller-btn left" id="scroll_left_btn"><i class="arrow_carrot-left"></i></span> |
| 9 | <ul class="nav nav-tabs ezd-d-flex slide_nav_tabs spel-tab-menu<?php echo esc_attr($tab_auto_class); ?>" <?php echo esc_attr($data_auto_play); ?>> |
| 10 | <?php |
| 11 | $i = 0.2; |
| 12 | foreach ( $tabs as $index => $item ) : |
| 13 | $tab_count = $index + 1; |
| 14 | $tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index); |
| 15 | $active = $tab_count == 1 ? 'active' : ''; |
| 16 | $this->add_render_attribute($tab_title_setting_key, [ |
| 17 | 'class' => [ 'nav-link tab-item-title', $active ], |
| 18 | 'data-rel' => 'tab-content-' . $id_int . $tab_count, |
| 19 | ]); |
| 20 | ?> |
| 21 | <li class="nav-item wow fadeInUp" data-wow-delay="<?php echo esc_attr($i); ?>s"> |
| 22 | <button <?php echo $this->get_render_attribute_string($tab_title_setting_key); ?>> |
| 23 | <?php |
| 24 | if ( $is_auto_play == 'yes' ) { ?> |
| 25 | <div class="tab_progress"> |
| 26 | <div class="progress-bar"></div> |
| 27 | </div> |
| 28 | <?php |
| 29 | } |
| 30 | if ( $is_auto_numb == 'yes' ) { ?> |
| 31 | <span class="numb"><?php echo esc_html($tab_count) ?></span> |
| 32 | <?php |
| 33 | } |
| 34 | if ( !empty($item['icon']['value']) ) { |
| 35 | \Elementor\Icons_Manager::render_icon($item['icon']); |
| 36 | } |
| 37 | if ( !empty($item['tab_title']) ) { |
| 38 | echo esc_html($item[ 'tab_title' ]); |
| 39 | } |
| 40 | ?> |
| 41 | </button> |
| 42 | </li> |
| 43 | <?php |
| 44 | $i = $i + 0.2; |
| 45 | endforeach; |
| 46 | ?> |
| 47 | </ul> |
| 48 | <span class="scroller-btn right" id="scroll_right_btn"><i class="arrow_carrot-right"></i></span> |
| 49 | </div> |
| 50 | |
| 51 | <?php |
| 52 | if ( !empty($tabs) ) { ?> |
| 53 | <div class="tab-content"> |
| 54 | <?php |
| 55 | foreach ( $tabs as $index => $item ) { |
| 56 | $tab_count = $index + 1; |
| 57 | $active = $tab_count == 1 ? 'show active' : ''; |
| 58 | $tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index); |
| 59 | $this->add_render_attribute($tab_content_setting_key, [ |
| 60 | 'class' => [ 'tab-pane p-0 tab_style tab-box', 'fade', $active ], |
| 61 | 'id' => 'tab-content-' . $id_int . $tab_count, |
| 62 | ]); |
| 63 | ?> |
| 64 | <div <?php echo $this->get_render_attribute_string($tab_content_setting_key); ?>> |
| 65 | <?php |
| 66 | if ('content' == $item[ 'tabs_content_type' ]) { |
| 67 | echo do_shortcode($item[ 'tab_content' ]); |
| 68 | } elseif ('template' == $item[ 'tabs_content_type' ]) { |
| 69 | if (!empty($item[ 'primary_templates' ])) { |
| 70 | echo \Elementor\Plugin::$instance->frontend->get_builder_content($item[ 'primary_templates' ], true); |
| 71 | } |
| 72 | } |
| 73 | ?> |
| 74 | </div> |
| 75 | <?php |
| 76 | } |
| 77 | |
| 78 | if ($is_navigation_arrow == 'yes') { ?> |
| 79 | <button class="btn btn-info tab_arrow_btn previous"><i class="arrow_carrot-left"></i></button> |
| 80 | <button class="btn btn-info tab_arrow_btn next"><i class="arrow_carrot-right"></i></button> |
| 81 | <?php |
| 82 | } |
| 83 | ?> |
| 84 | </div> |
| 85 | <?php |
| 86 | } |
| 87 | ?> |
| 88 | </div> |
| 89 | |
| 90 | <?php |
| 91 | if ( $is_auto_play == 'yes' ) { |
| 92 | ?> |
| 93 | <script> |
| 94 | (function ($) { |
| 95 | 'use strict'; |
| 96 | |
| 97 | $(document).ready(function () { |
| 98 | const intervalDuration = 5000; // Set the interval duration in milliseconds |
| 99 | let currentIndex = 0; // Start with the first tab |
| 100 | const tabBtns = $(".spel-tab-menu li button"); |
| 101 | const progressBars = $(".spel-tab-menu .progress-bar"); |
| 102 | let autoplayInterval; |
| 103 | |
| 104 | // Function to reset and start the progress bar animation |
| 105 | function startProgressBar(index) { |
| 106 | progressBars.width(0); // Reset all progress bars |
| 107 | progressBars.eq(index).css("transition-duration", `${intervalDuration}ms`).width("100%"); // Animate the current progress bar |
| 108 | } |
| 109 | |
| 110 | // Function to switch tabs |
| 111 | function changeTab(index) { |
| 112 | tabBtns.removeClass("active"); // Remove active class from all tabs |
| 113 | progressBars.width(0); // Reset all progress bars |
| 114 | tabBtns.eq(index).addClass("active"); // Activate the current tab |
| 115 | |
| 116 | const target = tabBtns.eq(index).attr("data-rel"); |
| 117 | $("#" + target) |
| 118 | .addClass("active show") |
| 119 | .siblings(".tab-box") |
| 120 | .removeClass("active show"); |
| 121 | |
| 122 | startProgressBar(index); // Start progress bar for the current tab |
| 123 | } |
| 124 | |
| 125 | // Auto-cycle tabs with progress bar |
| 126 | function autoCycleTabs() { |
| 127 | currentIndex = (currentIndex + 1) % tabBtns.length; |
| 128 | changeTab(currentIndex); |
| 129 | } |
| 130 | |
| 131 | // Pause autoplay on hover |
| 132 | tabBtns.on("mouseenter", function () { |
| 133 | clearInterval(autoplayInterval); |
| 134 | progressBars.stop(); // Stop the progress bar animation |
| 135 | }); |
| 136 | |
| 137 | // Resume autoplay on mouse leave |
| 138 | tabBtns.on("mouseleave", function () { |
| 139 | autoplayInterval = setInterval(autoCycleTabs, intervalDuration); |
| 140 | const activeIndex = tabBtns.index(tabBtns.filter(".active")); |
| 141 | startProgressBar(activeIndex); // Restart progress bar animation for the active tab |
| 142 | }); |
| 143 | |
| 144 | // Initialize autoplay |
| 145 | if (tabBtns.length > 0) { |
| 146 | changeTab(currentIndex); // Start with the first tab |
| 147 | autoplayInterval = setInterval(autoCycleTabs, intervalDuration); // Start autoplay |
| 148 | } |
| 149 | |
| 150 | // Optional: Pause autoplay when user interacts with the tab content (e.g., scroll) |
| 151 | $(".tab-content").on("mouseenter", function () { |
| 152 | clearInterval(autoplayInterval); |
| 153 | progressBars.stop(); |
| 154 | }).on("mouseleave", function () { |
| 155 | autoplayInterval = setInterval(autoCycleTabs, intervalDuration); |
| 156 | const activeIndex = tabBtns.index(tabBtns.filter(".active")); |
| 157 | startProgressBar(activeIndex); |
| 158 | }); |
| 159 | }); |
| 160 | })(jQuery); |
| 161 | </script> |
| 162 | <?php |
| 163 | } |
| 164 | ?> |