shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slides function refactoring

Browse Source
This commit is contained in:
Burak Civan 2022-11-07 15:20:16 +03:00
parent d9029d546c
commit 71157d44f2
2 changed files with 44 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/assets/js/mixins/global.js vendored
View File

@ -162,8 +162,7 @@ export default {
//swiper slider for long tabs items //swiper slider for long tabs items
for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) { for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
if (item.getAttribute('data-is-slider') == true) { if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) {
if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 3) {
let initial_slide = 0; let initial_slide = 0;
let hash_split = window.location.hash.split('#')[1]; let hash_split = window.location.hash.split('#')[1];
@ -183,26 +182,26 @@ export default {
${item.querySelector('[data-tabs-swiper]').innerHTML} ${item.querySelector('[data-tabs-swiper]').innerHTML}
</div> </div>
<div class="swiper-button-next bg-purple text-white flex items-center justify-center right-0"> <div class="swiper-button-next bg-transparent text-white flex items-center justify-center right-0">
<span class="material-icons">chevron_right</span> <span class="material-icons text-purple text-4xl">chevron_right</span>
</div> </div>
<div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0"> <div class="swiper-button-prev bg-transparent text-white flex items-center justify-center left-0">
<span class="material-icons">chevron_left</span> <span class="material-icons text-purple text-4xl">chevron_left</span>
</div> </div>
`; `;
item.querySelector('[data-tabs-swiper]').innerHTML = html; item.querySelector('[data-tabs-swiper]').innerHTML = html;
new Swiper(".swiper-tabs-container", { new Swiper('.swiper-tabs-container', {
loop: false, loop: false,
slidesPerView: Number(item.getAttribute('data-swiper')), slidesPerView: Number(item.getAttribute('data-swiper')),
pagination: { pagination: {
el: ".swiper-pagination", el: '.swiper-pagination',
clickable: true clickable: true
}, },
navigation: { navigation: {
nextEl: ".swiper-button-next", nextEl: '.swiper-button-next',
prevEl: ".swiper-button-prev", prevEl: '.swiper-button-prev',
}, },
initialSlide: initial_slide, initialSlide: initial_slide,
}); });
@ -216,7 +215,6 @@ export default {
}); });
} }
} }
}
//swiper slider for long tabs items //swiper slider for long tabs items
}, },

2
resources/views/components/tabs/index.blade.php
View File

@ -16,7 +16,7 @@
<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-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> <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 overflow-x-scroll lg:overflow-visible']) : $attributes }}> <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'inline-flex overflow-x-scroll lg:overflow-visible']) : $attributes }}>
{!! $navs !!} {!! $navs !!}
</ul> </ul>
</div> </div>