refactoring
This commit is contained in:
parent
df989f9162
commit
8fe7cf57ef
51
resources/assets/js/mixins/global.js
vendored
51
resources/assets/js/mixins/global.js
vendored
@ -159,6 +159,57 @@ export default {
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
//swiper slider for long tabs items
|
||||
for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
|
||||
item.id = index;
|
||||
|
||||
if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
|
||||
let initial_slide = 0;
|
||||
let hash_split = window.location.hash.split('#')[1];
|
||||
|
||||
document.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
|
||||
item.classList.add('swiper-slide');
|
||||
|
||||
if (item.getAttribute('data-tabs') == hash_split) {
|
||||
initial_slide = index;
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
|
||||
document.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
|
||||
|
||||
let html = `
|
||||
<div class="swiper-tabs-container">
|
||||
${document.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>
|
||||
<div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
|
||||
<span class="material-icons">chevron_left</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.querySelector('[data-tabs-swiper]').innerHTML = html;
|
||||
|
||||
new Swiper(".swiper-tabs-container", {
|
||||
loop: false,
|
||||
slidesPerView: Number(item.getAttribute('data-swiper')),
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
initialSlide: initial_slide,
|
||||
});
|
||||
}
|
||||
}
|
||||
//swiper slider for long tabs items
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
51
resources/assets/js/views/common/contacts.js
vendored
51
resources/assets/js/views/common/contacts.js
vendored
@ -37,57 +37,6 @@ const app = new Vue({
|
||||
|
||||
mounted() {
|
||||
this.form.create_user = false;
|
||||
|
||||
//swiper slider for long tabs items
|
||||
for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
|
||||
item.id = index;
|
||||
|
||||
if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
|
||||
let initial_slide = 0;
|
||||
let hash_split = window.location.hash.split('#')[1];
|
||||
|
||||
document.querySelectorAll('[data-tabs-slide]').forEach((item, index) => {
|
||||
item.classList.add('swiper-slide');
|
||||
|
||||
if (item.getAttribute('data-tabs') == hash_split) {
|
||||
initial_slide = index;
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
|
||||
document.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
|
||||
|
||||
let html = `
|
||||
<div class="swiper-tabs-container">
|
||||
${document.querySelector('[data-tabs-swiper]').innerHTML}
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-next top-3 right-0">
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</div>
|
||||
<div class="swiper-button-prev top-3 left-0">
|
||||
<span class="material-icons">chevron_left</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.querySelector('[data-tabs-swiper]').innerHTML = html;
|
||||
|
||||
let swiper = new Swiper(".swiper-tabs-container", {
|
||||
loop: false,
|
||||
slidesPerView: Number(item.getAttribute('data-swiper')),
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
initialSlide: initial_slide,
|
||||
});
|
||||
}
|
||||
}
|
||||
//swiper slider for long tabs items
|
||||
},
|
||||
|
||||
methods:{
|
||||
|
@ -134,7 +134,7 @@
|
||||
|
||||
@if (! $hideBottomRight)
|
||||
<x-show.content.right>
|
||||
<x-tabs slides="2" active="documents">
|
||||
<x-tabs active="documents">
|
||||
<x-slot name="navs">
|
||||
@stack('documents_nav_start')
|
||||
|
||||
@ -150,18 +150,6 @@
|
||||
id="transactions"
|
||||
name="{{ trans_choice('general.transactions', 2) }}"
|
||||
/>
|
||||
<x-tabs.nav
|
||||
id="first"
|
||||
>
|
||||
First
|
||||
</x-tabs.nav>
|
||||
|
||||
<x-tabs.nav
|
||||
id="second"
|
||||
>
|
||||
Second
|
||||
</x-tabs.nav>
|
||||
|
||||
@stack('transactions_nav_end')
|
||||
</x-slot>
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
@props(['active', 'id'])
|
||||
@props(['active'])
|
||||
|
||||
@php
|
||||
if (! empty($attributes['slides'])) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user