refactoring
This commit is contained in:
parent
a7dd5d0325
commit
0587392d14
35
resources/assets/js/mixins/global.js
vendored
35
resources/assets/js/mixins/global.js
vendored
@ -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
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user