From d349a64ca8f1a9c82e132416e3f7b2c02ecc2827 Mon Sep 17 00:00:00 2001
From: Johann Hoffmann <ma0646@technikum-wien.at>
Date: Wed, 5 Mar 2025 14:23:35 +0100
Subject: [PATCH] fix news widget carousel (re)initialization after resize

---
 public/js/components/DashboardWidget/News.js | 45 ++++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js
index 85bdca64a..b7bd2f367 100644
--- a/public/js/components/DashboardWidget/News.js
+++ b/public/js/components/DashboardWidget/News.js
@@ -14,6 +14,8 @@ export default {
 		selected: null,
 		size:0,
 	}),
+	props: ['width', 'height']
+	,
 	mixins: [AbstractWidget],
 	computed: {
 		sizeClass() {
@@ -102,6 +104,31 @@ export default {
 			this.singleNews = singleNews;
 			this.$refs.newsModal.show();
 		},
+		initCarouselInstance() {
+			Vue.nextTick(()=> {
+				if(this.$refs.carousel) { // carousel ref might not exist in every widget width/height
+					this.carouselInstance = new bootstrap.Carousel(this.$refs.carousel, {
+						wrap: false, // keep this off even though it actually wraps
+						interval: false
+					});
+				}
+			})
+		},
+		initActiveItem() {
+			Vue.nextTick(()=> {
+				if (Array.isArray(this.$refs.carouselItems) && this.$refs.carouselItems.length >0) {
+					this.$refs.carouselItems[0].classList.add("active")
+				}
+			})
+		}
+	},
+	watch: {
+		width(newVal, oldVal) {
+			if(oldVal == 1 && newVal > 1) { // carousel instance will have been disposed
+				this.initCarouselInstance()
+				this.initActiveItem()
+			}
+		}
 	},
 	created() {
 		this.$emit("setConfig", false);
@@ -111,12 +138,9 @@ export default {
 			.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")
-					}
-				})
-				})
+				this.initActiveItem()
+				
+			})
 			.catch((err) => {
 				console.error("ERROR: ", err);
 			});
@@ -139,15 +163,8 @@ export default {
 			}
 			}).observe(this.$refs.container);
 		}
-		Vue.nextTick(()=> {
-			if(this.$refs.carousel) { // carousel ref might not exist in every widget width/height
-				this.carouselInstance = new bootstrap.Carousel(this.$refs.carousel, {
-					wrap: false, // keep this off even though it actually wraps
-					interval: false
-				});
-			}
-		})
 		
+		this.initCarouselInstance()
 	},
 	template: /*html*/ `
 <div ref="container" class="widgets-news h-100" :class="sizeClass" :style="getNewsWidgetStyle">