mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-25 16:44:28 +00:00
update newsWidget template & css, fixed carousel css transition;
This commit is contained in:
Johann Hoffmann
@@ -66,26 +66,50 @@ export default {
|
||||
const prevIndex = thisIndex ? thisIndex - 1 : this.allNewsList.length - 1
|
||||
this.setSelected(this.allNewsList[prevIndex], 'prev')
|
||||
},
|
||||
getMenuItemClass(news) {
|
||||
let classString = ''
|
||||
if(this.selected && this.selected.news_id === news.news_id) {
|
||||
classString += 'selected'
|
||||
}
|
||||
return classString
|
||||
},
|
||||
getDynClassCarouselItem(news, index) {
|
||||
// sets classes prev/active/next for bootstrap carousel
|
||||
let classString = ''
|
||||
|
||||
// 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'
|
||||
}
|
||||
}
|
||||
|
||||
return classString;
|
||||
},
|
||||
setSelected(news, direction = "next") {
|
||||
if (this.selected && news && this.selected === news) return
|
||||
|
||||
const oldCard = document.getElementById('card-'+this.selected.news_id)
|
||||
|
||||
if(this.selected){
|
||||
const otherDirection = direction === "next" ? "prev" : "next"
|
||||
// TODO: to show animation of non neighbour item through menu reapply css classes
|
||||
if(direction === 'next') {
|
||||
// set nextCard .carousel-item-next.carousel-item-start
|
||||
oldCard.classList.add('carousel-item-start')
|
||||
|
||||
const oldCard = document.getElementById('card-'+this.selected.news_id)
|
||||
oldCard.classList.remove('active')
|
||||
oldCard.classList.add('carousel-item-'+otherDirection)
|
||||
} else {
|
||||
// set prevCard .carousel-item-prev.carousel-item-end
|
||||
oldCard.classList.add('carousel-item-end')
|
||||
}
|
||||
|
||||
const newCard = document.getElementById('card-'+news.news_id)
|
||||
newCard.classList.add('carousel-item-'+direction)
|
||||
void newCard.offsetWidth;
|
||||
newCard.classList.add('active')
|
||||
|
||||
newCard.addEventListener('transitionend', () => {
|
||||
newCard.classList.remove('carousel-item-'+direction);
|
||||
}, { once: true });
|
||||
|
||||
this.selected = news
|
||||
|
||||
},
|
||||
@@ -120,42 +144,39 @@ export default {
|
||||
<span class="small text-muted">{{ formatDateTime(news.insertamum) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="width > 1 && height === 1" class="h-100" :class="'row row-cols-' + width">
|
||||
<div class="h-100" v-for="news in newsList" :key="news.id">
|
||||
<div class="news-content h-100" :style="'--news-widget-height: '+height" ref="htmlContent" v-html="news.content_obj.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row h-100">
|
||||
<div :class="'col-'+(width == 2? 6 : 4) + ' h-100'" style="overflow: auto; padding-right: 0px; margin: 0px;">
|
||||
<!-- TODO: mobile responsiveness of this part-->
|
||||
<div :class="'col-'+(width == 2? 6 : 4) + ' h-100 g-0'" style="overflow: auto;">
|
||||
<template v-for="news in newsList" :key="'menu-'+news.news_id">
|
||||
|
||||
<div class="row fhc-news-menu-item" @click="setSelected(news)">
|
||||
<div class="row fhc-news-menu-item" @click="setSelected(news)" :class="getMenuItemClass(news)" style="margin-right: 0px; margin-left: 0px;">
|
||||
<div class="col-8 fhc-news-menu-item-betreff" style="overflow-y: hidden;"><p>{{news.content_obj.betreff ?? ''}}</p></div>
|
||||
<span class="fhc-news-menu-item-date"
|
||||
<span class="fhc-news-menu-item-date fw-bold"
|
||||
>{{ news.datum ?? ''}}</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
<div :class="'col-'+(width == 2? 6 : 8) + ' h-100'" ref="htmlContent" style="padding: 0px; margin: 0px;">
|
||||
<div class="container" style="padding: 0px; height: 100%;" ref="carocontainer">
|
||||
<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="carouselExampleControls" style="height: 100%;" class="carousel slide fhc-carousel" data-bs-ride="carousel"
|
||||
<div id="carouselExample" style="height: 100%;" class="carousel slide fhc-carousel" data-bs-ride="carousel"
|
||||
data-bs-interval="false"
|
||||
ref="carocontrols">
|
||||
<div class="carousel-indicators">
|
||||
<button v-for="(news, index) in newsList" :id="'indicator-'+news_news_id" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="index"></button>
|
||||
<button v-for="(news, index) in newsList" :id="'indicator-'+news_news_id" type="button" data-bs-target="#carouselExample" data-bs-slide-to="index"></button>
|
||||
</div>
|
||||
|
||||
<div class="carousel-inner" style="height: 100%;">
|
||||
<div v-for="news in newsList" class="carousel-item" :class="(this.selected.news_id === news.news_id ? 'active' : '')" :id="'card-'+news.news_id" style="height: 100%; overflow-y: auto; margin: 0px;" v-html="news.content_obj.content">
|
||||
<div class="carousel-inner" 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>
|
||||
</div>
|
||||
<button @click="setPrev" style="z-index: 9999; color: black; opacity: 1;" class="carousel-control-prev" type="button">
|
||||
<!-- TODO: prev/next button styling && placement-->
|
||||
<button @click="setPrev" style="z-index: 9999; color: black; opacity: 1;" data-bs-target="#carouselExample" class="carousel-control-prev" type="button">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
</button>
|
||||
<button @click="setNext" style="z-index: 9999; color: black; opacity: 1;" class="carousel-control-next" type="button">
|
||||
<button @click="setNext" style="z-index: 9999; color: black; opacity: 1;" data-bs-target="#carouselExample" class="carousel-control-next" type="button">
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user