From 0645bdda14693ceb92da360b5f1c8d4374cf0668 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= Date: Fri, 22 Nov 2024 14:01:39 +0000 Subject: [PATCH] Fixed javascript issue.. --- resources/assets/js/mixins/global.js | 81 ++++--------------- .../assets/js/views/common/dashboards.js | 54 +++++++++++++ 2 files changed, 70 insertions(+), 65 deletions(-) diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js index e08dd27aa..350ecd5f6 100644 --- a/resources/assets/js/mixins/global.js +++ b/resources/assets/js/mixins/global.js @@ -198,13 +198,13 @@ export default { 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; @@ -213,15 +213,15 @@ export default { } 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
@@ -229,11 +229,11 @@ export default { 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, @@ -251,62 +251,13 @@ export default { 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 - - const slider = document.getElementById('dashboard-slider'); - const scrollLeft = document.getElementById('dashboard-left'); - const scrollRight = document.getElementById('dashboard-right'); - - scrollLeft.addEventListener('click', () => scrollToItem('left')); - scrollRight.addEventListener('click', () => scrollToItem('right')); - - function scrollToItem(direction) { - const visibleItems = Array.from(slider.children); - const sliderRect = slider.getBoundingClientRect(); - - const currentIndex = visibleItems.findIndex(item => { - const itemRect = item.getBoundingClientRect(); - return itemRect.left >= sliderRect.left && itemRect.right <= sliderRect.right; - }); - - const nextIndex = direction === 'right' ? currentIndex + 1 : currentIndex - 1; - if (nextIndex >= 0 && nextIndex < visibleItems.length) { - const nextItem = visibleItems[nextIndex]; - slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' }); - } - } - - function updateSlider() { - const sliderWidth = slider.clientWidth; - const windowWidth = window.innerWidth; - - if (sliderWidth <= 850) { - slider.parentElement.classList.remove('w-9/12', 'w-8/12'); - scrollLeft.classList.add('hidden'); - scrollRight.classList.add('hidden'); - } else { - if (windowWidth < 1396) { - slider.parentElement.classList.remove('w-9/12'); - slider.parentElement.classList.add('w-8/12'); - } else { - slider.parentElement.classList.remove('w-8/12'); - slider.parentElement.classList.add('w-9/12'); - } - scrollLeft.classList.remove('hidden'); - scrollRight.classList.remove('hidden'); - } - } - - updateSlider(); - window.addEventListener('resize', updateSlider); - - // Dashboard slider }, methods: { @@ -1050,7 +1001,7 @@ export default { onSubmitViaSendEmail(event) { event['sendtransaction'] = true; - + this.onSubmit(event); }, @@ -1132,7 +1083,7 @@ export default { // Parent vue instance methods merge with child vue instance methods if (this.$root.$options.methods) { let parent_methods = this.$root.$options.methods; - + for (let method_key in parent_methods) { if (this.$options.methods[method_key] === undefined) { this[method_key] = parent_methods[method_key]; @@ -1143,7 +1094,7 @@ export default { // Parent vue instance data merge with child vue instance data if (this.$root._data) { let parent_data = this.$root._data; - + for (let data_key in parent_data) { if (this[data_key] === undefined) { this[data_key] = parent_data[data_key]; @@ -1312,7 +1263,7 @@ export default { // Parent vue instance methods merge with child vue instance methods if (this.$root.$options.methods) { let parent_methods = this.$root.$options.methods; - + for (let method_key in parent_methods) { if (this.$options.methods[method_key] === undefined) { this[method_key] = parent_methods[method_key]; @@ -1384,7 +1335,7 @@ export default { // Parent vue instance methods merge with child vue instance methods if (this.$root.$options.methods) { let parent_methods = this.$root.$options.methods; - + for (let method_key in parent_methods) { if (this.$options.methods[method_key] === undefined) { this[method_key] = parent_methods[method_key]; @@ -1545,7 +1496,7 @@ export default { // Parent vue instance methods merge with child vue instance methods if (this.$root.$options.methods) { let parent_methods = this.$root.$options.methods; - + for (let method_key in parent_methods) { if (this.$options.methods[method_key] === undefined) { this[method_key] = parent_methods[method_key]; @@ -1632,7 +1583,7 @@ export default { return; } }, this); - } + } this.$notify({ verticalAlign: 'bottom', diff --git a/resources/assets/js/views/common/dashboards.js b/resources/assets/js/views/common/dashboards.js index 79090060a..944109395 100644 --- a/resources/assets/js/views/common/dashboards.js +++ b/resources/assets/js/views/common/dashboards.js @@ -67,6 +67,60 @@ const dashboard = new Vue({ } this.getWidgets(); + + // dashboard slider starting + const slider = document.getElementById('dashboard-slider'); + const scrollLeft = document.getElementById('dashboard-left'); + const scrollRight = document.getElementById('dashboard-right'); + + scrollLeft.addEventListener('click', () => scrollToItem('left')); + scrollRight.addEventListener('click', () => scrollToItem('right')); + + function scrollToItem(direction) { + const visibleItems = Array.from(slider.children); + const sliderRect = slider.getBoundingClientRect(); + + const currentIndex = visibleItems.findIndex(item => { + const itemRect = item.getBoundingClientRect(); + + return itemRect.left >= sliderRect.left && itemRect.right <= sliderRect.right; + }); + + const nextIndex = direction === 'right' ? currentIndex + 1 : currentIndex - 1; + + if (nextIndex >= 0 && nextIndex < visibleItems.length) { + const nextItem = visibleItems[nextIndex]; + + slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' }); + } + } + + function updateSlider() { + const sliderWidth = slider.clientWidth; + const windowWidth = window.innerWidth; + + if (sliderWidth <= 850) { + slider.parentElement.classList.remove('w-9/12', 'w-8/12'); + scrollLeft.classList.add('hidden'); + scrollRight.classList.add('hidden'); + } else { + if (windowWidth < 1396) { + slider.parentElement.classList.remove('w-9/12'); + slider.parentElement.classList.add('w-8/12'); + } else { + slider.parentElement.classList.remove('w-8/12'); + slider.parentElement.classList.add('w-9/12'); + } + + scrollLeft.classList.remove('hidden'); + scrollRight.classList.remove('hidden'); + } + } + + updateSlider(); + + window.addEventListener('resize', updateSlider); + // dashboard slider ending }, methods:{