@schukai/monster 3.112.4 → 3.114.0

package/source/components/layout/slider.mjs

@@ -73,6 +73,8 @@ const configSymbol = Symbol("config");
  * @since 3.74.0
  * @copyright schukai GmbH
  * @summary A beautiful Slider that can make your life easier and also looks good.
+ * @fires monster-slider-resized
+ * @fires monster-slider-moved
  */
 class Slider extends CustomElement {
 	/**
@@ -97,12 +99,20 @@ class Slider extends CustomElement {
 			draggingPos: 0,
 			startPos: 0,
 			autoPlayInterval: null,
+
+			eventHandler: {
+				mouseOverPause: null,
+				mouseout: null,
+				touchstart: null,
+				touchend: null,
+			},
 		};
 
 		// set --monster-slides-width
 		const slides = this.shadowRoot.querySelector(
 			`[${ATTRIBUTE_ROLE}="slider"]`,
 		);
+
 		const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
 		slides.style.setProperty(
 			"--monster-slides-width",
@@ -283,6 +293,11 @@ function initThumbnails() {
 		"[data-monster-role='thumbnails']",
 	);
 
+	// remove all thumbnails
+	while (thumbnails.firstChild) {
+		thumbnails.removeChild(thumbnails.firstChild);
+	}
+
 	const { originSlides } = getSlidesAndTotal.call(this);
 
 	originSlides.forEach((x, index) => {
@@ -354,26 +369,57 @@ function initAutoPlay() {
 	}, startDelay);
 
 	if (autoPlay.mouseOverPause) {
-		this.addEventListener("mouseover", () => {
-			clearInterval(this[configSymbol].autoPlayInterval);
-		});
+		if (this[configSymbol].eventHandler.mouseOverPause === null) {
+			this[configSymbol].eventHandler.mouseOverPause = () => {
+				clearInterval(this[configSymbol].autoPlayInterval);
+			};
+
+			this.addEventListener(
+				"mouseover",
+				this[configSymbol].eventHandler.mouseOverPause,
+			);
+		}
 
-		this.addEventListener("mouseout", () => {
-			if (this[configSymbol].isDragging) {
-				return;
-			}
-			start();
-		});
+		if (this[configSymbol].eventHandler.mouseout === null) {
+			this[configSymbol].eventHandler.mouseout = () => {
+				if (this[configSymbol].isDragging) {
+					return;
+				}
+				start();
+			};
+
+			this.addEventListener(
+				"mouseout",
+				this[configSymbol].eventHandler.mouseout,
+			);
+		}
 	}
 
 	if (autoPlay.touchPause) {
-		this.addEventListener("touchstart", () => {
-			clearInterval(this[configSymbol].autoPlayInterval);
-		});
+		if (this[configSymbol].eventHandler.touchstart === null) {
+			this[configSymbol].eventHandler.touchstart = () => {
+				clearInterval(this[configSymbol].autoPlayInterval);
+			};
+
+			this.addEventListener(
+				"touchstart",
+				this[configSymbol].eventHandler.touchstart,
+			);
+		}
 
-		this.addEventListener("touchend", () => {
-			start();
-		});
+		if (this[configSymbol].eventHandler.touchend === null) {
+			this[configSymbol].eventHandler.touchend = () => {
+				if (this[configSymbol].isDragging) {
+					return;
+				}
+				start();
+			};
+
+			this.addEventListener(
+				"touchend",
+				this[configSymbol].eventHandler.touchend,
+			);
+		}
 	}
 }
 
@@ -602,6 +648,7 @@ function moveTo(index, animation) {
 /**
  * @private
  * @return {initEventHandler}
+ * @fires monster-slider-resized
  */
 function initEventHandler() {
 	const self = this;
@@ -632,6 +679,40 @@ function initEventHandler() {
 		);
 	}
 
+	const initialSize = {
+		width: this[sliderElementSymbol]?.offsetWidth || 0,
+		height: this[sliderElementSymbol]?.offsetHeight || 0,
+	};
+
+	const resizeObserver = new ResizeObserver((entries) => {
+		for (let entry of entries) {
+			const { width, height } = entry.contentRect;
+			if (width !== initialSize.width || height !== initialSize.height) {
+				self.stopAutoPlay();
+
+				if (this.getOption("features.thumbnails")) {
+					initThumbnails.call(this);
+				}
+
+				const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+				this[sliderElementSymbol].style.setProperty(
+					"--monster-slides-width",
+					`${100 / slidesVisible}%`,
+				);
+
+				moveTo.call(self, 0, false);
+				self.startAutoPlay();
+
+				fireCustomEvent(self, "monster-slider-resized", {
+					width: width,
+					height: height,
+				});
+			}
+		}
+	});
+
+	resizeObserver.observe(this[sliderElementSymbol]);
+
 	return this;
 }