Merge pull request #2727 from brkcvn/long-tabs

Swiper slider added into the tabs.

resources/assets/js/mixins/global.js

@@ -38,6 +38,8 @@ import GLightbox from 'glightbox';
 
 Swiper.use([Navigation, Pagination]);
 
+var BreakException = {};
+
 export default {
     components: {
         AkauntingDropzoneFileUpload,
@@ -159,6 +161,78 @@ export default {
                 prevEl: ".swiper-button-prev",
             },
         });
+
+        //swiper slider for long tabs items
+        for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
+            if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) {
+                let initial_slide = 0;
+                let hash_split = window.location.hash.split('#')[1];
+                let loop = 0;
+                let slides_view;
+
+                try {
+                    item.querySelectorAll('[data-tabs-slide]').forEach((slide, index, arr) => {
+                        loop += slide.clientWidth;
+    
+                        slide.classList.add('swiper-slide');
+        
+                        if (slide.getAttribute('data-tabs') == hash_split) {
+                            initial_slide = index;
+                        }
+    
+                        if (loop > item.clientWidth) {
+                            slides_view = index;
+                            throw BreakException;
+                        }
+                    });
+                } catch (e) {
+                    if (e !== BreakException) throw e;
+                }
+                
+                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-body text-white flex items-center justify-center right-0">
+                        <span class="material-icons text-purple text-4xl">chevron_right</span>
+                    </div>
+                    <div class="swiper-button-prev bg-body text-white flex items-center justify-center left-0">
+                        <span class="material-icons text-purple text-4xl">chevron_left</span>
+                    </div>
+                    `; 
+    
+                item.querySelector('[data-tabs-swiper]').innerHTML = html;
+                slides_view = Number(item.getAttribute('data-swiper')) != 0 ? Number(item.getAttribute('data-swiper'))  : slides_view;
+                item.setAttribute('data-swiper', slides_view);
+                                
+                new Swiper(item.querySelector('.swiper-tabs-container'), {
+                    loop: true,
+                    slidesPerView: slides_view,
+                    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
     },
 
     methods: {

resources/views/components/contacts/show/content.blade.php

@@ -160,7 +160,7 @@
                         id="transactions"
                         name="{{ trans_choice('general.transactions', 2) }}"
                     />
-
+                    
                     @stack('transactions_nav_end')
                 </x-slot>
 

resources/views/components/tabs/index.blade.php

@@ -1,8 +1,16 @@
 @props(['active'])
 
-<div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
+@php
-    <div>
+    if (! empty($attributes['slides'])) {
-        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
+        $slides = $attributes['slides'];
+    } else {
+        $slides = null;
+    }
+@endphp
+
+<div data-swiper="{{ $slides }}" 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' => 'inline-flex']) : $attributes }}>
             {!! $navs !!}
         </ul>
     </div>

resources/views/components/tabs/nav-link.blade.php

@@ -5,6 +5,7 @@
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
+    data-tabs-slide
     x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
     {{ $attributes }}
 >

resources/views/components/tabs/nav.blade.php

@@ -5,6 +5,7 @@
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
+    data-tabs-slide
     x-on:click="active = '{{ $id }}'"
     x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
     {{ $attributes }}