From 9b348aed118b46110f75df3ecc3cb4613c23c02e Mon Sep 17 00:00:00 2001 From: SimonGschnell Date: Thu, 23 Jan 2025 13:20:57 +0100 Subject: [PATCH] fix(Dashboard News): fixes carousel animations when skipping news --- public/js/components/DashboardWidget/News.js | 126 +++++++------------ 1 file changed, 42 insertions(+), 84 deletions(-) diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js index 0bd09ba69..d7a259556 100644 --- a/public/js/components/DashboardWidget/News.js +++ b/public/js/components/DashboardWidget/News.js @@ -50,13 +50,13 @@ export default { const thisIndex = this.allNewsList.findIndex(n=>n.news_id == this.selected.news_id) const nextIndex = thisIndex == (this.allNewsList.length - 1) ? 0 : thisIndex + 1 - this.setSelected(this.allNewsList[nextIndex], 'next') + this.setSelected(this.allNewsList[nextIndex]) }, setPrev() { const thisIndex = this.allNewsList.findIndex(n=>n.news_id == this.selected.news_id) const prevIndex = thisIndex ? thisIndex - 1 : this.allNewsList.length - 1 - this.setSelected(this.allNewsList[prevIndex], 'prev') + this.setSelected(this.allNewsList[prevIndex]) }, getMenuItemClass(news) { let classString = '' @@ -65,68 +65,23 @@ export default { } return classString }, - getDynClassCarouselItem(news, index) { - // sets classes prev/active/next for bootstrap carousel - let classString = '' + async setSelected(news) { + let clickedElement = document.getElementById('card-'+news.news_id); + let clickedElementIndex = this.allNewsList.indexOf(news); + let oldElementIndex = this.allNewsList.indexOf(this.selected); - // return active class to news === selected OR very first news - if((this.selected.news_id === news.news_id) || (this.selected === null && index === 0)) { - classString = 'active'; - } else { // set prev/next class for news - const selectedIndex = this.newsList.indexOf(this.selected) - const ownIndex = this.newsList.indexOf(news) - const isPrev = (ownIndex + 1) === selectedIndex || (ownIndex === this.newsList.length - 1 && selectedIndex === 0) - if(isPrev) { - classString += ' carousel-item-prev' - } - const isNext = (ownIndex - 1) === selectedIndex || (ownIndex === 0 && selectedIndex === this.newsList.length - 1) - if(isNext) { - classString += ' carousel-item-next' - } + //if the clicked element is already active, do nothing + if(clickedElementIndex === oldElementIndex) return; + //add prev/next class to the clicked element + if(clickedElementIndex > oldElementIndex){ + clickedElement.classList.add('carousel-item-next'); + }else{ + clickedElement.classList.add('carousel-item-prev'); } - - return classString; - }, - setSelected(news, direction) { - if (this.selected && news && this.selected === news) return - - this.carouselItems.forEach(item => { - // remove all classes from every card to secure valid active/prev/next state - // that can never have funny side effects with bootstrap event handling - item.classList.remove('carousel-item-next') - item.classList.remove('carousel-item-prev') - item.classList.remove('carousel-item-start') - item.classList.remove('carousel-item-end') - item.classList.remove('active') - }) - - const oldCard = document.getElementById('card-'+this.selected.news_id) - const indexActive = this.allNewsList.indexOf(this.selected) - const indexSelected = this.allNewsList.indexOf(news) - - const order = indexSelected > indexActive ? 'next' : 'prev'; - if(direction === 'next' || order === 'next') { - // set nextCard .carousel-item-next.carousel-item-start - oldCard.classList.add('carousel-item-start') - - } else { - // set prevCard .carousel-item-prev.carousel-item-end - oldCard.classList.add('carousel-item-end') - } - - const prevIndex = indexSelected > 0 ? indexSelected - 1 : 0 - const nextIndex = indexSelected === this.allNewsList.length - 1 ? 0 : indexSelected + 1 - const prev = this.allNewsList[prevIndex] - const next = this.allNewsList[nextIndex] - const n = document.getElementById('card-'+next.news_id) - const p = document.getElementById('card-'+prev.news_id) - - n.classList.add('carousel-item-next') - p.classList.add('carousel-item-prev') - - this.carouselInstance.to(this.allNewsList.indexOf(news)) - this.selected = news + // move to clicked element + await Vue.nextTick(() => { this.carouselInstance.to(clickedElementIndex); }) + this.selected = news; }, contentURI: function (content_id) { return ( @@ -149,42 +104,47 @@ export default { }, }, created() { + this.$emit("setConfig", false); this.$fhcApi.factory.cms .news(MAX_LOADED_NEWS) .then(res => res.data) .then((news) => { this.allNewsList = Array.from(Object.values(news)); this.selected = this.allNewsList.length ? this.allNewsList[0] : null - }) + Vue.nextTick(()=>{ + if (Array.isArray(this.$refs.carouselItems) && this.$refs.carouselItems.length >0) { + this.$refs.carouselItems[0].classList.add("active") + } + }) + }) .catch((err) => { - console.error("ERROR: ", err.response.data); + console.error("ERROR: ", err); }); - - this.$emit("setConfig", false); + + + }, mounted() { - this.carouselInstance = new bootstrap.Carousel(this.$refs.carousel, { - wrap: false, // keep this off even though it actually wraps - interval: false - }); - if (this.$refs.container) { new ResizeObserver(entries => { - console.log(entries,"this are the entries") for (const entry of entries) { let w = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width; // TODO(chris): rework sizing if (w > 600) this.size = 3; else if (w > 350) - this.size = 2; - else if (w > 250) - this.size = 1; - else - this.size = 0; - } + this.size = 2; + else if (w > 250) + this.size = 1; + else + this.size = 0; + } }).observe(this.$refs.container); } + this.carouselInstance = new bootstrap.Carousel(this.$refs.carousel, { + wrap: false, // keep this off even though it actually wraps + interval: false + }); }, template: /*html*/ `
@@ -215,20 +175,18 @@ export default {
-