diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js index cbeed6dd8..73af5a1be 100644 --- a/resources/assets/js/mixins/global.js +++ b/resources/assets/js/mixins/global.js @@ -38,6 +38,8 @@ import GLightbox from 'glightbox'; Swiper.use([Navigation, Pagination]); +var BreakException = {}; + export default { components: { AkauntingDropzoneFileUpload, @@ -159,6 +161,78 @@ export default { prevEl: ".swiper-button-prev", }, }); + + //swiper slider for long tabs items + for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) { + 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; + + 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'); + + let html = ` +
+ ${item.querySelector('[data-tabs-swiper]').innerHTML} +
+ +
+ chevron_right +
+
+ chevron_left +
+ `; + + item.querySelector('[data-tabs-swiper]').innerHTML = html; + slides_view = Number(item.getAttribute('data-swiper')) != 0 ? Number(item.getAttribute('data-swiper')) : slides_view; + item.setAttribute('data-swiper', slides_view); + + new Swiper(item.querySelector('.swiper-tabs-container'), { + loop: true, + slidesPerView: slides_view, + 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: { diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php index 4aa9aceee..87d043913 100644 --- a/resources/views/components/contacts/show/content.blade.php +++ b/resources/views/components/contacts/show/content.blade.php @@ -160,7 +160,7 @@ id="transactions" name="{{ trans_choice('general.transactions', 2) }}" /> - + @stack('transactions_nav_end') diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php index 6e317a89a..aaa39d25f 100644 --- a/resources/views/components/tabs/index.blade.php +++ b/resources/views/components/tabs/index.blade.php @@ -1,8 +1,16 @@ @props(['active']) -
-
-