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

Merge branch 'long-tabs' of https://github.com/brkcvn/akaunting into long-tabs

Browse Source
This commit is contained in:
Burak Civan 2022-11-07 15:05:16 +03:00
commit d9029d546c
4 changed files with 69 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -159,6 +159,65 @@ export default {
prevEl: ".swiper-button-prev",
},
});
//swiper slider for long tabs items
for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
if (item.getAttribute('data-is-slider') == true) {
if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 3) {
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');
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');
let html = `
<div class="swiper-tabs-container">
${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>
<div class="swiper-button-prev bg-purple text-white flex items-center justify-center left-0">
<span class="material-icons">chevron_left</span>
</div>
`;
item.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,
});
} else {
item.removeAttribute('data-swiper');
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');
});
}
}
}
//swiper slider for long tabs items
},
methods: {

45
resources/assets/js/views/common/contacts.js vendored
View File

@ -37,51 +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) {
document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
item.classList.add('swiper-slide');
});
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;
}
// console.log(swiper.activeIndex);
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",
},
});
}
//swiper slider for long tabs items
},
methods:{

25
resources/views/components/contacts/show/content.blade.php
View File

@ -134,7 +134,7 @@
@if (! $hideBottomRight)
<x-show.content.right>
<x-tabs id="" slides="3" active="documents">
<x-tabs active="documents">
<x-slot name="navs">
@stack('documents_nav_start')
@ -150,28 +150,7 @@
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="first"
>
First
</x-tabs.nav>
<x-tabs.nav
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>

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

@ -1,16 +1,20 @@
@props(['active', 'id'])
@props(['active'])
@php
if (! empty($attributes['slides'])) {
$slides = $attributes['slides'];
} else {
$slides = '3';
}
if (empty($attributes['slides'])) {
$slides = '2';
if (! empty($attributes['is_slider'])) {
$is_slider = true;
} else {
$is_slider = false;
}
@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>
<ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
{!! $navs !!}