@schukai/monster 3.112.4 → 3.113.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 
 
+## [3.113.0] - 2025-03-20
+
+### Add Features
+
+- new resizeobserver for slider [#301](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/301)
+- [#301](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/301) Dateien für issue angelegt
+- [#301](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/301) breakpoints monster-slider
+### Changes
+
+- update project
+
+
+
 ## [3.112.4] - 2025-03-12
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.112.4"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.113.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,21 @@ 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 +294,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 +370,49 @@ function initAutoPlay() {
 	}, startDelay);
 
 	if (autoPlay.mouseOverPause) {
-		this.addEventListener("mouseover", () => {
-			clearInterval(this[configSymbol].autoPlayInterval);
-		});
 
-		this.addEventListener("mouseout", () => {
-			if (this[configSymbol].isDragging) {
-				return;
+		if(this[configSymbol].eventHandler.mouseOverPause===null) {
+			this[configSymbol].eventHandler.mouseOverPause =  () => {
+				clearInterval(this[configSymbol].autoPlayInterval);
 			}
-			start();
-		});
+
+			this.addEventListener("mouseover",this[configSymbol].eventHandler.mouseOverPause);
+		}
+
+		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("touchend", () => {
-			start();
-		});
+			this.addEventListener("touchstart",this[configSymbol].eventHandler.touchstart);
+		}
+
+		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 +641,7 @@ function moveTo(index, animation) {
 /**
  * @private
  * @return {initEventHandler}
+ * @fires monster-slider-resized
  */
 function initEventHandler() {
 	const self = this;
@@ -632,6 +672,44 @@ 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;
 }
 
@@ -729,6 +807,7 @@ function initControlReferences() {
 	this[thumbnailElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}="thumbnails"]`,
 	);
+
 }
 
 /**