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]);
var BreakException = {};
export default {
components: {
AkauntingDropzoneFileUpload,
@ -165,15 +167,28 @@ export default {
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;
item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
item.classList.add('swiper-slide');
if (item.getAttribute('data-tabs') == hash_split) {
initial_slide = index;
}
});
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');
@ -190,11 +205,11 @@ export default {
</div>
`;
item.querySelector('[data-tabs-swiper]').innerHTML = html;
item.querySelector('[data-tabs-swiper]').innerHTML = html;
new Swiper('.swiper-tabs-container', {
loop: false,
slidesPerView: Number(item.getAttribute('data-swiper')),
slidesPerView: Number(item.getAttribute('data-swiper')) != 0 ? Number(item.getAttribute('data-swiper')) : slides_view,
pagination: {
el: '.swiper-pagination',
clickable: true

View File

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