From b0c60c82e2ff7201a5ca802ae2b67ee8f7c0ffe3 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Fri, 4 Nov 2022 14:23:53 +0300
Subject: [PATCH] refactoring

---
 resources/assets/js/mixins/global.js          | 104 +++++++++---------
 .../views/components/tabs/index.blade.php     |   8 +-
 2 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index c736c090c..30cc4c5bb 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -162,57 +162,59 @@ export default {
 
         //swiper slider for long tabs items
         for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
-            if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
-                let initial_slide = 0;
-                let hash_split = window.location.hash.split('#')[1];
-
-                item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
-                    item.classList.add('swiper-slide');
-
-                    if (item.getAttribute('data-tabs') == hash_split) {
-                        initial_slide = index;
-                    }
-                });
-
-                item.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
-                item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
-
-                let html = `
-                    <div class="swiper-tabs-container">
-                        ${item.querySelector('[data-tabs-swiper]').innerHTML}
-                    </div>
-
-                    <div class="swiper-button-next bg-purple text-white flex items-center justify-center right-0">
-                        <span class="material-icons">chevron_right</span>
-                    </div>
-                    <div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
-                        <span class="material-icons">chevron_left</span>
-                    </div>
-                    `; 
-
-                item.querySelector('[data-tabs-swiper]').innerHTML = html; 
-
-                new Swiper(".swiper-tabs-container", {
-                    loop: false,
-                    slidesPerView: Number(item.getAttribute('data-swiper')),
-                    pagination: {
-                        el: ".swiper-pagination",
-                        clickable: true
-                    },
-                    navigation: {
-                        nextEl: ".swiper-button-next",
-                        prevEl: ".swiper-button-prev",
-                    },
-                    initialSlide: initial_slide,
-                });
-            } else {
-                item.removeAttribute('data-swiper');
-                item.querySelector('[data-tabs-swiper]').removeAttribute('data-tabs-swiper');
-                item.querySelector('[data-tabs-swiper-wrapper]').removeAttribute('data-tabs-swiper-wrapper');
-
-                item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
-                    slide.removeAttribute('data-tabs-slide');
-                });
+            if (item.getAttribute('data-is-slider') == true) {
+                if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 3) {
+                    let initial_slide = 0;
+                    let hash_split = window.location.hash.split('#')[1];
+    
+                    item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
+                        item.classList.add('swiper-slide');
+    
+                        if (item.getAttribute('data-tabs') == hash_split) {
+                            initial_slide = index;
+                        }
+                    });
+    
+                    item.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
+                    item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
+    
+                    let html = `
+                        <div class="swiper-tabs-container">
+                            ${item.querySelector('[data-tabs-swiper]').innerHTML}
+                        </div>
+    
+                        <div class="swiper-button-next bg-purple text-white flex items-center justify-center right-0">
+                            <span class="material-icons">chevron_right</span>
+                        </div>
+                        <div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
+                            <span class="material-icons">chevron_left</span>
+                        </div>
+                        `; 
+    
+                    item.querySelector('[data-tabs-swiper]').innerHTML = html; 
+    
+                    new Swiper(".swiper-tabs-container", {
+                        loop: false,
+                        slidesPerView: Number(item.getAttribute('data-swiper')),
+                        pagination: {
+                            el: ".swiper-pagination",
+                            clickable: true
+                        },
+                        navigation: {
+                            nextEl: ".swiper-button-next",
+                            prevEl: ".swiper-button-prev",
+                        },
+                        initialSlide: initial_slide,
+                    });
+                } else {
+                    item.removeAttribute('data-swiper');
+                    item.querySelector('[data-tabs-swiper]').removeAttribute('data-tabs-swiper');
+                    item.querySelector('[data-tabs-swiper-wrapper]').removeAttribute('data-tabs-swiper-wrapper');
+    
+                    item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
+                        slide.removeAttribute('data-tabs-slide');
+                    });
+                }
             }
         }
         //swiper slider for long tabs items
diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index a2366ccdc..3693b3ba4 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -6,9 +6,15 @@
     } else {
         $slides = '3';
     }
+
+    if (! empty($attributes['is_slider'])) {
+        $is_slider = true;
+    } else {
+        $is_slider = false;
+    }
 @endphp
 
-<div data-swiper="{{ $slides }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
+<div data-swiper="{{ $slides }}" data-is-slider="{{ $is_slider }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
     <div data-tabs-swiper>
         <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
             {!! $navs !!}