refactoring

This commit is contained in:
Burak Civan 2022-11-09 15:10:38 +03:00
parent a7dd5d0325
commit 0587392d14
2 changed files with 28 additions and 19 deletions

View File

@ -38,6 +38,8 @@ import GLightbox from 'glightbox';
Swiper.use([Navigation, Pagination]); Swiper.use([Navigation, Pagination]);
var BreakException = {};
export default { export default {
components: { components: {
AkauntingDropzoneFileUpload, AkauntingDropzoneFileUpload,
@ -165,15 +167,28 @@ export default {
if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) { if (item.clientWidth < item.querySelector('[data-tabs-swiper-wrapper]').clientWidth) {
let initial_slide = 0; let initial_slide = 0;
let hash_split = window.location.hash.split('#')[1]; 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;
item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => { slide.classList.add('swiper-slide');
item.classList.add('swiper-slide');
if (slide.getAttribute('data-tabs') == hash_split) {
if (item.getAttribute('data-tabs') == hash_split) { initial_slide = index;
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]').classList.add('swiper', 'swiper-links');
item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper'); item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
@ -190,11 +205,11 @@ export default {
</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')) != 0 ? Number(item.getAttribute('data-swiper')) : slides_view,
pagination: { pagination: {
el: '.swiper-pagination', el: '.swiper-pagination',
clickable: true clickable: true

View File

@ -4,19 +4,13 @@
if (! empty($attributes['slides'])) { if (! empty($attributes['slides'])) {
$slides = $attributes['slides']; $slides = $attributes['slides'];
} else { } else {
$slides = '3'; $slides = null;
}
if (! empty($attributes['is_slider'])) {
$is_slider = true;
} else {
$is_slider = false;
} }
@endphp @endphp
<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 }}" 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' => 'inline-flex 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']) : $attributes }}>
{!! $navs !!} {!! $navs !!}
</ul> </ul>
</div> </div>