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

refactoring

Browse Source
This commit is contained in:
Burak Civan 2022-11-04 14:23:53 +03:00
parent 83d20521eb
commit b0c60c82e2
2 changed files with 60 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,57 +162,59 @@ 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.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) { if (item.getAttribute('data-is-slider') == true) {
let initial_slide = 0; if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 3) {
let hash_split = window.location.hash.split('#')[1]; let initial_slide = 0;
let hash_split = window.location.hash.split('#')[1];
item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
item.classList.add('swiper-slide'); item.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
item.classList.add('swiper-slide');
if (item.getAttribute('data-tabs') == hash_split) {
initial_slide = index; if (item.getAttribute('data-tabs') == hash_split) {
} initial_slide = index;
}); }
});
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]').classList.add('swiper', 'swiper-links');
item.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
let html = `
<div class="swiper-tabs-container"> let html = `
${item.querySelector('[data-tabs-swiper]').innerHTML} <div class="swiper-tabs-container">
</div> ${item.querySelector('[data-tabs-swiper]').innerHTML}
</div>
<div class="swiper-button-next bg-purple text-white flex items-center justify-center right-0">
<span class="material-icons">chevron_right</span> <div class="swiper-button-next bg-purple text-white flex items-center justify-center right-0">
</div> <span class="material-icons">chevron_right</span>
<div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0"> </div>
<span class="material-icons">chevron_left</span> <div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
</div> <span class="material-icons">chevron_left</span>
`; </div>
`;
item.querySelector('[data-tabs-swiper]').innerHTML = html;
item.querySelector('[data-tabs-swiper]').innerHTML = html;
new Swiper(".swiper-tabs-container", {
loop: false, new Swiper(".swiper-tabs-container", {
slidesPerView: Number(item.getAttribute('data-swiper')), loop: false,
pagination: { slidesPerView: Number(item.getAttribute('data-swiper')),
el: ".swiper-pagination", pagination: {
clickable: true el: ".swiper-pagination",
}, clickable: true
navigation: { },
nextEl: ".swiper-button-next", navigation: {
prevEl: ".swiper-button-prev", nextEl: ".swiper-button-next",
}, prevEl: ".swiper-button-prev",
initialSlide: initial_slide, },
}); initialSlide: initial_slide,
} else { });
item.removeAttribute('data-swiper'); } else {
item.querySelector('[data-tabs-swiper]').removeAttribute('data-tabs-swiper'); item.removeAttribute('data-swiper');
item.querySelector('[data-tabs-swiper-wrapper]').removeAttribute('data-tabs-swiper-wrapper'); 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'); item.querySelectorAll('[data-tabs-slide]').forEach((slide) => {
}); slide.removeAttribute('data-tabs-slide');
});
}
} }
} }
//swiper slider for long tabs items //swiper slider for long tabs items

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

@ -6,9 +6,15 @@
} else { } else {
$slides = '3'; $slides = '3';
} }
if (! empty($attributes['is_slider'])) {
$is_slider = true;
} else {
$is_slider = false;
}
@endphp @endphp
<div data-swiper="{{ $slides }}" 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']) : $attributes }}> <ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
{!! $navs !!} {!! $navs !!}