@schukai/monster 3.112.3 → 3.113.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 
 
+## [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
+
+- optimize the day control [#298](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/298)
+
+
+
 ## [3.112.3] - 2025-03-11
 
 ### 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.3"}
+{"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/popper.mjs

@@ -140,7 +140,7 @@ class Popper extends CustomElement {
 	/**
 	 * This method is called by the `connectedCallback` method on the first call.
 	 *
-	 * @return {Void}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

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"]`,
 	);
+
 }
 
 /**

package/source/components/time/day.mjs

@@ -0,0 +1,423 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { DayStyleSheet } from "./stylesheet/day.mjs";
+import { isString } from "../../types/is.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { Processing } from "../../util/processing.mjs";
+
+export { Day };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayElementSymbol = Symbol("dayElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayMonthElementSymbol = Symbol("dayMonthElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayDayElementSymbol = Symbol("dayDayElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayWeekdayElementSymbol = Symbol("dayWeekdayElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayLabelElementSymbol = Symbol("dayLabelElement");
+
+/**
+ * A Day Control
+ *
+ * @fragments /fragments/components/time/day/
+ *
+ * @example /examples/components/time/day-simple
+ * @example /examples/components/time/day-simple-small
+ *
+ * @since 3.113.0
+ * @copyright schukai GmbH
+ * @summary A day control that displays the day, month, weekday and a label.
+ */
+class Day extends CustomElement {
+	/**
+	 *
+	 */
+	constructor() {
+		super();
+		initOptionObserver.call(this);
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/time/day@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Time.Day
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		updateDate.call(this);
+		return this;
+	}
+
+	/**
+	 * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {string} date The date of the day
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			date: null,
+
+			day: null,
+			month: null,
+			weekday: null,
+			label: null,
+
+			disabled: false,
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-day";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [DayStyleSheet];
+	}
+
+	/**
+	 * @return {string[]}
+	 * @since 1.15.0
+	 */
+	static get observedAttributes() {
+		return ["data-monster-option-date"];
+	}
+}
+
+/**
+ * @private
+ */
+function initOptionObserver() {
+	const self = this;
+
+	let lastDate = this.getOption("date");
+
+	self.attachObserver(
+		new Observer(function () {
+			new Processing(() => {
+				if (lastDate !== self.getOption("date")) {
+					lastDate = self.getOption("date");
+					updateDate.call(self);
+				}
+			}).run();
+		}),
+	);
+}
+
+/**
+ * @private
+ */
+function updateDate() {
+	const labels = getLabels.call(this);
+
+	let date = this.getOption("date");
+
+	let day = null;
+	let label = null;
+
+	if (date === null) {
+		date = new Date();
+	} else if (isString(date)) {
+		date = new Date(date);
+	}
+
+	if (!(date instanceof Date)) {
+		return;
+	}
+
+	day = date.getDate();
+
+	const locale = getLocaleOfDocument();
+
+	this.setOption("day", day);
+	this.setOption(
+		"month",
+		new Intl.DateTimeFormat(locale.toString(), {
+			month: "short",
+		}).format(date),
+	);
+
+	this.setOption(
+		"weekday",
+		new Intl.DateTimeFormat(locale.toString(), {
+			weekday: "long",
+		}).format(date),
+	);
+
+	if (date.toDateString() === new Date().toDateString()) {
+		label = labels.today;
+	} else if (
+		date.toDateString() ===
+		new Date(new Date().setDate(new Date().getDate() - 1)).toDateString()
+	) {
+		label = labels.yesterday;
+	} else if (
+		date.toDateString() ===
+		new Date(new Date().setDate(new Date().getDate() + 1)).toDateString()
+	) {
+		label = labels.tomorrow;
+	}
+
+	this.setOption("label", label);
+}
+
+function getLabels() {
+	switch (getLocaleOfDocument().language) {
+		case "de": // German
+			return {
+				today: "Heute",
+				tomorrow: "Morgen",
+				yesterday: "Gestern",
+			};
+
+		case "es": // Spanish
+			return {
+				today: "Hoy",
+				tomorrow: "Mañana",
+				yesterday: "Ayer",
+			};
+
+		case "zh": // Mandarin
+			return {
+				today: "今天",
+				tomorrow: "明天",
+				yesterday: "昨天",
+			};
+
+		case "hi": // Hindi
+			return {
+				today: "आज",
+				tomorrow: "कल",
+				yesterday: "बीता कल",
+			};
+
+		case "bn": // Bengali
+			return {
+				today: "আজ",
+				tomorrow: "আগামীকাল",
+				yesterday: "গতকাল",
+			};
+
+		case "pt": // Portuguese
+			return {
+				today: "Hoje",
+				tomorrow: "Amanhã",
+				yesterday: "Ontem",
+			};
+
+		case "ru": // Russian
+			return {
+				today: "Сегодня",
+				tomorrow: "Завтра",
+				yesterday: "Вчера",
+			};
+
+		case "ja": // Japanese
+			return {
+				today: "今日",
+				tomorrow: "明日",
+				yesterday: "昨日",
+			};
+
+		case "pa": // Western Punjabi
+			return {
+				today: "ਅਜ",
+				tomorrow: "ਕਲ",
+				yesterday: "ਬੀਤੇ ਕਲ",
+			};
+
+		case "mr": // Marathi
+			return {
+				today: "आज",
+				tomorrow: "उद्या",
+				yesterday: "काल",
+			};
+
+		case "fr": // French
+			return {
+				today: "Aujourd'hui",
+				tomorrow: "Demain",
+				yesterday: "Hier",
+			};
+
+		case "it": // Italian
+			return {
+				today: "Oggi",
+				tomorrow: "Domani",
+				yesterday: "Ieri",
+			};
+
+		case "nl": // Dutch
+			return {
+				today: "Vandaag",
+				tomorrow: "Morgen",
+				yesterday: "Gisteren",
+			};
+
+		case "sv": // Swedish
+			return {
+				today: "Idag",
+				tomorrow: "Imorgon",
+				yesterday: "Igår",
+			};
+
+		case "pl": // Polish
+			return {
+				today: "Dziś",
+				tomorrow: "Jutro",
+				yesterday: "Wczoraj",
+			};
+
+		case "da": // Danish
+			return {
+				today: "I dag",
+				tomorrow: "I morgen",
+				yesterday: "I går",
+			};
+
+		case "fi": // Finnish
+			return {
+				today: "Tänään",
+				tomorrow: "Huomenna",
+				yesterday: "Eilen",
+			};
+
+		case "no": // Norwegian
+			return {
+				today: "I dag",
+				tomorrow: "I morgen",
+				yesterday: "I går",
+			};
+
+		case "cs": // Czech
+			return {
+				today: "Dnes",
+				tomorrow: "Zítra",
+				yesterday: "Včera",
+			};
+
+		default:
+			return {
+				today: "Today",
+				tomorrow: "Tomorrow",
+				yesterday: "Yesterday",
+			};
+	}
+}
+
+/**
+ * @private
+ * @param format
+ * @returns {*[]}
+ */
+function getWeekdays(format = "long") {
+	const locale = getLocaleOfDocument();
+
+	const weekdays = [];
+	for (let i = 1; i < 8; i++) {
+		const date = new Date(1970, 0, 4 + i); // 4. Jan. 1970 = Sonntag
+		weekdays.push(
+			new Intl.DateTimeFormat(locale, { weekday: format }).format(date),
+		);
+	}
+
+	return weekdays;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[dayElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
+	this[dayMonthElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="month"]`,
+	);
+	this[dayDayElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="day"]`,
+	);
+	this[dayWeekdayElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="weekday"]`,
+	);
+	this[dayLabelElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="label"]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <div class="month" data-monster-role="month" part="month" data-monster-replace="path:month"></div>
+            <div data-monster-role="day" part="day" data-monster-replace="path:day">12</div>
+            <div style="width: 100%; height: 0;" part="divider"></div>
+            <div data-monster-role="weekday" part="weekday" data-monster-replace="path:weekday">Wed</div>
+            <div data-monster-role="label" part="label" data-monster-replace="path:label">Tomorrow</div>
+        </div>`;
+}
+
+registerCustomElement(Day);