Merge pull request #2727 from brkcvn/long-tabs
Swiper slider added into the tabs.
This commit is contained in:
Cüneyt Şentürk
GitHub
commit
270dfb42bd
74
resources/assets/js/mixins/global.js
vendored
74
resources/assets/js/mixins/global.js
vendored
@ -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: {
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
id="transactions"
|
||||
name="{{ trans_choice('general.transactions', 2) }}"
|
||||
/>
|
||||
|
||||
|
||||
@stack('transactions_nav_end')
|
||||
</x-slot>
|
||||
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
@props(['active'])
|
||||
|
||||
<div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
|
||||
<div>
|
||||
<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 }}>
|
||||
@php
|
||||
if (! empty($attributes['slides'])) {
|
||||
$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>
|
||||
|
||||
@ -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 }}
|
||||
>
|
||||
|
||||
@ -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 }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user