blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(Dashboard News): fixes carousel animations when skipping news

Browse Source
This commit is contained in:
SimonGschnell
2025-01-23 13:20:57 +01:00
parent e7df262cc5
commit 9b348aed11
1 changed files with 42 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/DashboardWidget/News.js
+42 -84
View File
@@ -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*/ `
<div ref="container" class="widgets-news h-100" :class="sizeClass" :style="getNewsWidgetStyle">
@@ -215,20 +175,18 @@ export default {
</div>
<div :class="'col-'+(width == 2? 6 : 8) + ' h-100'" style="padding-left: 0px; padding-right: 0px;" ref="htmlContent">
<div class="container h-100" style="padding: 0px;" ref="carocontainer">
<div id="carouselExample" style="height: 100%;" ref="carousel" class="carousel slide fhc-carousel" data-bs-ride="carousel"
data-bs-interval="false">
<div class="carousel-inner" ref="carouselInner" style="height: 100%; max-width: 100%;">
<div v-for="(news, index) in newsList" class="carousel-item" :class="getDynClassCarouselItem(news, index)" style="overflow-y: auto; height: 100%;" :id="'card-'+news.news_id" v-html="news.content_obj.content">
<div id="FhcCarouselContainer" style="height: 100%;" ref="carousel" class="carousel slide fhc-carousel" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner" ref="carouselInner" style="height: 100%; max-width: 100%;">
<div ref="carouselItems" v-for="(news, index) in newsList" class="carousel-item " style="overflow-y: auto; height: 100%;" :id="'card-'+news.news_id" v-html="news.content_obj.content">
</div>
</div>
<button @click="setPrev" @focus="$event.target.blur()" style="z-index: 100; color: black; overflow: hidden; margin-left: 10px; width:35px;" data-bs-target="#carouselExample" class="carousel-control-prev" type="button">
<button @click="setPrev" @focus="$event.target.blur()" style="z-index: 100; color: black; overflow: hidden; margin-left: 10px; width:35px;" data-bs-target="#FhcCarouselContainer" class="carousel-control-prev" type="button">
<div class="border rounded-circle" style="padding-left: 0.4rem; padding-right: 0.4rem; background-color:rgba(138,138,138,0.4)">
<i class="fa fa-chevron-left"></i>
</div>
</button>
<button @click="setNext" @focus="$event.target.blur()" style="z-index: 100; color: black; overflow: hidden; margin-right: 10px; width:35px;" data-bs-target="#carouselExample" class="carousel-control-next" type="button">
<button @click="setNext" @focus="$event.target.blur()" style="z-index: 100; color: black; overflow: hidden; margin-right: 10px; width:35px;" data-bs-target="#FhcCarouselContainer" class="carousel-control-next" type="button">
<div class="border rounded-circle" style="padding-left: 0.4rem; padding-right: 0.4rem; background-color:rgba(138,138,138,0.4)">
<i class="fa fa-chevron-right"></i>
</div>