From df989f9162bdb4a2650706009a9a273a8c0359d2 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Thu, 3 Nov 2022 18:31:17 +0300 Subject: [PATCH 1/7] development --- resources/assets/js/views/common/contacts.js | 38 +++++++++++-------- .../contacts/show/content.blade.php | 12 +----- 2 files changed, 23 insertions(+), 27 deletions(-) diff --git a/resources/assets/js/views/common/contacts.js b/resources/assets/js/views/common/contacts.js index 5f0a6904c..facef4529 100644 --- a/resources/assets/js/views/common/contacts.js +++ b/resources/assets/js/views/common/contacts.js @@ -43,8 +43,15 @@ const app = new Vue({ item.id = index; if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) { - document.querySelectorAll('[data-tabs-slide]').forEach((item) => { + 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'); @@ -64,22 +71,21 @@ const app = new Vue({ `; 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, + }); } - - // 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 }, diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php index 7140fae54..87a9b7263 100644 --- a/resources/views/components/contacts/show/content.blade.php +++ b/resources/views/components/contacts/show/content.blade.php @@ -134,7 +134,7 @@ @if (! $hideBottomRight) - + @stack('documents_nav_start') @@ -156,16 +156,6 @@ First - - - First - - From 8fe7cf57efa9d416b8f4d030d466a6c5e5dc18bf Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Thu, 3 Nov 2022 18:41:39 +0300 Subject: [PATCH 2/7] refactoring --- resources/assets/js/mixins/global.js | 51 +++++++++++++++++++ resources/assets/js/views/common/contacts.js | 51 ------------------- .../contacts/show/content.blade.php | 14 +---- .../views/components/tabs/index.blade.php | 2 +- 4 files changed, 53 insertions(+), 65 deletions(-) diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js index cbeed6dd8..b63088e39 100644 --- a/resources/assets/js/mixins/global.js +++ b/resources/assets/js/mixins/global.js @@ -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 = ` +
+ ${document.querySelector('[data-tabs-swiper]').innerHTML} +
+ +
+ chevron_right +
+
+ chevron_left +
+ `; + + 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: { diff --git a/resources/assets/js/views/common/contacts.js b/resources/assets/js/views/common/contacts.js index facef4529..ff1f53b25 100644 --- a/resources/assets/js/views/common/contacts.js +++ b/resources/assets/js/views/common/contacts.js @@ -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 = ` -
- ${document.querySelector('[data-tabs-swiper]').innerHTML} -
- -
- chevron_right -
-
- chevron_left -
- `; - - 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:{ diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php index 87a9b7263..58cde4114 100644 --- a/resources/views/components/contacts/show/content.blade.php +++ b/resources/views/components/contacts/show/content.blade.php @@ -134,7 +134,7 @@ @if (! $hideBottomRight) - + @stack('documents_nav_start') @@ -150,18 +150,6 @@ id="transactions" name="{{ trans_choice('general.transactions', 2) }}" /> - - First - - - - Second - - @stack('transactions_nav_end') diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php index e4c8a73d6..d1e8a311b 100644 --- a/resources/views/components/tabs/index.blade.php +++ b/resources/views/components/tabs/index.blade.php @@ -1,4 +1,4 @@ -@props(['active', 'id']) +@props(['active']) @php if (! empty($attributes['slides'])) { From 5711f4196d8593f7b50f63fddf597aabb4256068 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Thu, 3 Nov 2022 18:42:56 +0300 Subject: [PATCH 3/7] spacing added --- resources/views/components/contacts/show/content.blade.php | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php index 58cde4114..37ff29962 100644 --- a/resources/views/components/contacts/show/content.blade.php +++ b/resources/views/components/contacts/show/content.blade.php @@ -150,6 +150,7 @@ id="transactions" name="{{ trans_choice('general.transactions', 2) }}" /> + @stack('transactions_nav_end') From 98cd655ea7953456d9a8f927b11cc5d120111cf5 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Fri, 4 Nov 2022 09:23:31 +0300 Subject: [PATCH 4/7] multiple control --- resources/assets/js/mixins/global.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js index b63088e39..b97ca1c9c 100644 --- a/resources/assets/js/mixins/global.js +++ b/resources/assets/js/mixins/global.js @@ -162,13 +162,11 @@ export default { //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) { + if (item.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.querySelectorAll('[data-tabs-slide]').forEach((item, index) => { item.classList.add('swiper-slide'); if (item.getAttribute('data-tabs') == hash_split) { @@ -176,12 +174,12 @@ export default { } }); - document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links'); - document.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 = `
- ${document.querySelector('[data-tabs-swiper]').innerHTML} + ${item.querySelector('[data-tabs-swiper]').innerHTML}
@@ -192,7 +190,7 @@ export default {
`; - document.querySelector('[data-tabs-swiper]').innerHTML = html; + item.querySelector('[data-tabs-swiper]').innerHTML = html; new Swiper(".swiper-tabs-container", { loop: false, From d31e85c44d5dce49f33291da3b77e65e76b44250 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Fri, 4 Nov 2022 13:04:40 +0300 Subject: [PATCH 5/7] js function edited --- resources/assets/js/mixins/global.js | 8 ++++++++ resources/views/components/tabs/index.blade.php | 4 +--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js index b97ca1c9c..c736c090c 100644 --- a/resources/assets/js/mixins/global.js +++ b/resources/assets/js/mixins/global.js @@ -205,6 +205,14 @@ export default { }, 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 diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php index d1e8a311b..57a034335 100644 --- a/resources/views/components/tabs/index.blade.php +++ b/resources/views/components/tabs/index.blade.php @@ -3,9 +3,7 @@ @php if (! empty($attributes['slides'])) { $slides = $attributes['slides']; - } - - if (empty($attributes['slides'])) { + } else { $slides = '2'; } @endphp From 83d20521ebb466f10909f81af513c4433504520b Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Fri, 4 Nov 2022 13:09:53 +0300 Subject: [PATCH 6/7] refactoring --- resources/views/components/tabs/index.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php index 57a034335..a2366ccdc 100644 --- a/resources/views/components/tabs/index.blade.php +++ b/resources/views/components/tabs/index.blade.php @@ -4,7 +4,7 @@ if (! empty($attributes['slides'])) { $slides = $attributes['slides']; } else { - $slides = '2'; + $slides = '3'; } @endphp From b0c60c82e2ff7201a5ca802ae2b67ee8f7c0ffe3 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Fri, 4 Nov 2022 14:23:53 +0300 Subject: [PATCH 7/7] refactoring --- resources/assets/js/mixins/global.js | 104 +++++++++--------- .../views/components/tabs/index.blade.php | 8 +- 2 files changed, 60 insertions(+), 52 deletions(-) diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js index c736c090c..30cc4c5bb 100644 --- a/resources/assets/js/mixins/global.js +++ b/resources/assets/js/mixins/global.js @@ -162,57 +162,59 @@ export default { //swiper slider for long tabs items for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) { - if (item.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) { - 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 = ` -
- ${item.querySelector('[data-tabs-swiper]').innerHTML} -
- -
- chevron_right -
-
- chevron_left -
- `; - - 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'); - }); + 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 = ` +
+ ${item.querySelector('[data-tabs-swiper]').innerHTML} +
+ +
+ chevron_right +
+
+ chevron_left +
+ `; + + 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 diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php index a2366ccdc..3693b3ba4 100644 --- a/resources/views/components/tabs/index.blade.php +++ b/resources/views/components/tabs/index.blade.php @@ -6,9 +6,15 @@ } else { $slides = '3'; } + + if (! empty($attributes['is_slider'])) { + $is_slider = true; + } else { + $is_slider = false; + } @endphp -
+
    has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}> {!! $navs !!}