@schukai/monster 3.73.9 → 3.75.0

package/source/components/layout/slider.mjs

@@ -0,0 +1,649 @@
+/**
+ * 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_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement, getSlottedElements } from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { SliderStyleSheet } from "./stylesheet/slider.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+
+import { getWindow } from "../../dom/util.mjs";
+
+export { Slider };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sliderElementSymbol = Symbol("sliderElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const prevElementSymbol = Symbol("prevElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const nextElementSymbol = Symbol("nextElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const configSymbol = Symbol("config");
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from";
+
+/**
+ * A Slider
+ *
+ * @fragments /fragments/components/form/slider/
+ *
+ * @example /examples/components/form/slider-simple
+ *
+ * @since 3.74.0
+ * @copyright schukai GmbH
+ * @summary A beautiful Slider that can make your life easier and also looks good.
+ */
+class Slider extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/slider@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Layout.Slider
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		this[configSymbol] = {
+			currentIndex: 0,
+
+			isDragging: false,
+			draggingPos: 0,
+			startPos: 0,
+			autoPlayInterval: null,
+		};
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initStructure.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} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {boolean} features.carousel=true Carousel feature
+	 * @property {boolean} features.autoPlay=true Auto play feature
+	 * @property {boolean} features.thumbnails=true Thumbnails feature
+	 * @property {boolean} features.drag=true Drag feature
+	 * @property {Object} autoPlay Auto play configuration
+	 * @property {number} autoPlay.delay=1500 Delay between slides
+	 * @property {number} autoPlay.startDelay=1000 Start delay
+	 * @property {string} autoPlay.direction="next" Direction of the auto play
+	 * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
+	 * @property {boolean} autoPlay.touchPause=true Pause on touch
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			classes: {},
+			disabled: false,
+
+			features: {
+				carousel: true,
+				autoPlay: true,
+				thumbnails: true,
+				drag: true,
+			},
+
+			autoPlay: {
+				delay: 1500,
+				startDelay: 1000,
+				direction: "next",
+				mouseOverPause: true,
+				touchPause: true,
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-slider";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [SliderStyleSheet];
+	}
+
+	/**
+	 * moves the slider to the given index
+	 *
+	 * @param index
+	 * @returns {void}
+	 */
+	moveTo(index) {
+		return moveTo.call(this, index);
+	}
+
+	/**
+	 * shows the previous slide
+	 *
+	 * @return {void}
+	 */
+	previous() {
+		return prev.call(this);
+	}
+
+	/**
+	 * shows the next slide
+	 *
+	 * @return {void}
+	 */
+	next() {
+		return next.call(this);
+	}
+
+	/**
+	 * stops the auto play
+	 *
+	 * @return {void}
+	 */
+	stopAutoPlay() {
+		if (this[configSymbol].autoPlayInterval) {
+			clearInterval(this[configSymbol].autoPlayInterval);
+		}
+	}
+
+	/**
+	 * starts the auto play
+	 *
+	 * @return {void}
+	 */
+	startAutoPlay() {
+		initAutoPlay.call(this);
+	}
+}
+
+/**
+ * @private
+ * @param name
+ */
+function initNavigation(name) {
+	const element = this.shadowRoot.querySelector("." + name + "");
+	const elementHeight = element.offsetHeight;
+	element.style.top = `calc(50% - ${elementHeight / 2}px)`;
+}
+
+/**
+ * @private
+ */
+function initStructure() {
+	initNavigation.call(this, "next");
+	initNavigation.call(this, "prev");
+
+	if (this.getOption("features.thumbnails")) {
+		initThumbnails.call(this);
+	}
+
+	if (this.getOption("features.carousel")) {
+		initCarousel.call(this);
+	}
+
+	if (this.getOption("features.autoPlay")) {
+		initAutoPlay.call(this);
+	}
+}
+
+/**
+ * @private
+ */
+function initThumbnails() {
+	const self = this;
+	const thumbnails = this.shadowRoot.querySelector(
+		"[data-monster-role='thumbnails']",
+	);
+	const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+
+	slides.forEach((slide, index) => {
+		const thumbnail = document.createElement("div");
+		thumbnail.classList.add("thumbnail");
+		thumbnail.addEventListener("click", () => {
+			if (self.getOption("features.carousel")) {
+				this.moveTo(index + 1);
+			} else {
+				this.moveTo(index);
+			}
+		});
+
+		thumbnails.appendChild(thumbnail);
+	});
+
+	this.addEventListener("monster-slider-moved", (e) => {
+		const index = e.detail.index;
+		const thumbnail = thumbnails.children[index];
+
+		if (!thumbnail) {
+			return;
+		}
+
+		Array.from(thumbnails.children).forEach((thumb) => {
+			thumb.classList.remove("current");
+		});
+
+		thumbnail.classList.add("current");
+	});
+}
+
+/**
+ * @private
+ */
+function initAutoPlay() {
+	const self = this;
+	const autoPlay = this.getOption("autoPlay");
+	const delay = autoPlay.delay;
+	const startDelay = autoPlay.startDelay;
+	const direction = autoPlay.direction;
+
+	function start() {
+		if (self[configSymbol].autoPlayInterval) {
+			clearInterval(self[configSymbol].autoPlayInterval);
+		}
+
+		self[configSymbol].autoPlayInterval = setInterval(() => {
+			if (direction === "next") {
+				if (self.next() === -1) {
+					if (self.getOption("features.carousel")) {
+						clearInterval(self[configSymbol].autoPlayInterval);
+					}
+				}
+			} else {
+				if (self.previous() === -1) {
+					if (self.getOption("features.carousel")) {
+						clearInterval(self[configSymbol].autoPlayInterval);
+					}
+				}
+			}
+		}, delay);
+	}
+
+	setTimeout(() => {
+		start();
+	}, startDelay);
+
+	if (autoPlay.mouseOverPause) {
+		this.addEventListener("mouseover", () => {
+			clearInterval(this[configSymbol].autoPlayInterval);
+		});
+
+		this.addEventListener("mouseout", () => {
+			if (this[configSymbol].isDragging) {
+				return;
+			}
+			start();
+		});
+	}
+
+	if (autoPlay.touchPause) {
+		this.addEventListener("touchstart", () => {
+			clearInterval(this[configSymbol].autoPlayInterval);
+		});
+
+		this.addEventListener("touchend", () => {
+			start();
+		});
+	}
+}
+
+/**
+ * @private
+ */
+function initCarousel() {
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+	if (this.getOption("features.carousel") && totalSlides > 2) {
+		const firstElement = slides[0].cloneNode(true);
+		firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
+
+		const lastElement = slides[totalSlides - 1].cloneNode(true);
+		lastElement.setAttribute(ATTRIBUTE_CLON_FROM, totalSlides);
+		slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
+
+		slides[0].insertAdjacentElement("beforebegin", lastElement);
+
+		moveTo.call(this, 1);
+	}
+}
+
+/**
+ * @private
+ * @returns {{slides: unknown[], totalSlides: number}}
+ */
+function getSlidesAndTotal() {
+	const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+	const totalSlides = slides.length;
+	return { slides, totalSlides };
+}
+
+/**
+ * @private
+ * @returns {number}
+ */
+function next() {
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+	const nextIndex = this[configSymbol].currentIndex + 1;
+
+	if (nextIndex >= totalSlides) {
+		return -1;
+	}
+
+	queueMicrotask(() => {
+		getWindow().requestAnimationFrame(() => {
+			getWindow().requestAnimationFrame(() => {
+				moveTo.call(this, nextIndex);
+			});
+		});
+	});
+
+	return 0;
+}
+
+/**
+ * @private
+ * @returns {number}
+ */
+function prev() {
+	const prevIndex = this[configSymbol].currentIndex - 1;
+
+	if (prevIndex < 0) {
+		return -1;
+	}
+
+	moveTo.call(this, prevIndex);
+	return 0;
+}
+
+/**
+ * @private
+ * @param slides
+ * @param index
+ */
+function setMoveProperties(slides, index) {
+	this[configSymbol].currentIndex = index;
+
+	slides.forEach((slide) => {
+		slide.classList.remove("current");
+	});
+
+	let offset = -(index * 100);
+	if (offset !== 0) {
+		offset += "%";
+	}
+
+	this[sliderElementSymbol].style.transform =
+		`translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+	slides[index].classList.add("current");
+}
+
+/**
+ * @private
+ * @param index
+ * @fires monster-slider-moved
+ */
+function moveTo(index) {
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+
+	if (index < 0) {
+		index = totalSlides - 1;
+	} else if (index >= totalSlides) {
+		index = 0;
+	}
+
+	const slider = this[sliderElementSymbol];
+
+	setMoveProperties.call(this, slides, index);
+
+	const style = getComputedStyle(this[sliderElementSymbol]);
+	const duration = style.transitionDuration;
+	const durationMilis = parseFloat(duration) * 1000;
+
+	let slideIndex = index;
+	let eventFired = false;
+
+	if (this.getOption("features.carousel")) {
+		slideIndex = index - 1;
+
+		if (slides[index].hasAttribute(ATTRIBUTE_CLON_FROM)) {
+			const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLON_FROM));
+
+			getWindow().requestAnimationFrame(() => {
+				getWindow().requestAnimationFrame(() => {
+					setTimeout(() => {
+						slider.style.transitionProperty = "none";
+
+						setMoveProperties.call(this, slides, from);
+						slideIndex = from - 1;
+
+						getWindow().requestAnimationFrame(() => {
+							getWindow().requestAnimationFrame(() => {
+								slider.style.transitionProperty = "";
+
+								fireCustomEvent(this, "monster-slider-moved", {
+									index: slideIndex,
+								});
+
+								eventFired = true;
+							});
+						});
+					}, durationMilis);
+				});
+			});
+		}
+	}
+
+	if (!eventFired) {
+		fireCustomEvent(this, "monster-slider-moved", {
+			index: slideIndex,
+		});
+	}
+}
+
+/**
+ * @private
+ * @return {initEventHandler}
+ */
+function initEventHandler() {
+	const self = this;
+
+	const nextElements = this[nextElementSymbol];
+
+	if (nextElements) {
+		nextElements.addEventListener("click", () => {
+			self.next();
+		});
+	}
+
+	const prevElements = this[prevElementSymbol];
+
+	if (prevElements) {
+		prevElements.addEventListener("click", () => {
+			self.previous();
+		});
+	}
+
+	if (this.getOption("features.drag")) {
+		this[sliderElementSymbol].addEventListener("mousedown", (e) =>
+			startDragging.call(this, e, "mouse"),
+		);
+
+		this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+			startDragging.call(this, e, "touch"),
+		);
+	}
+
+	return this;
+}
+
+/**
+ * @private
+ * @param e
+ * @param type
+ */
+function startDragging(e, type) {
+	this[configSymbol].isDragging = true;
+	this[configSymbol].startPos = getPositionX(e, type);
+	this[sliderElementSymbol].classList.add("grabbing");
+	this[sliderElementSymbol].style.transitionProperty = "none";
+
+	const callbackMousemove = (x) => {
+		dragging.call(this, x, type);
+	};
+
+	const callbackMouseUp = () => {
+		const endEvent = type === "mouse" ? "mouseup" : "touchend";
+		const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
+
+		document.body.removeEventListener(endEvent, callbackMouseUp);
+		document.body.removeEventListener(moveEvent, callbackMousemove);
+
+		this[configSymbol].isDragging = false;
+		this[configSymbol].startPos = 0;
+		this[sliderElementSymbol].classList.remove("grabbing");
+		this[sliderElementSymbol].style.transitionProperty = "";
+
+		const lastPos = this[configSymbol].draggingPos;
+		const widthOfSlider = this[sliderElementSymbol].offsetWidth;
+		this[configSymbol].draggingPos = 0;
+
+		let newIndex = this[configSymbol].currentIndex;
+
+		const x = lastPos / widthOfSlider;
+		if (x > 0.5) {
+			newIndex--;
+		} else if (x < -0.5) {
+			newIndex++;
+		}
+
+		this.moveTo(newIndex);
+	};
+
+	document.body.addEventListener("mouseup", callbackMouseUp);
+	document.body.addEventListener("mousemove", callbackMousemove);
+}
+
+/**
+ * @private
+ * @param e
+ * @param type
+ * @returns {*|number|number}
+ */
+function getPositionX(e, type) {
+	return type === "mouse" ? e.pageX : e.touches[0].clientX;
+}
+
+/**
+ * @private
+ * @param e
+ * @param type
+ */
+function dragging(e, type) {
+	if (!this[configSymbol].isDragging) return;
+	this[configSymbol].draggingPos =
+		getPositionX(e, type) - this[configSymbol].startPos;
+	const { slides, totalSlides } = getSlidesAndTotal.call(this);
+	setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
+
+	this[sliderElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="slider"]`,
+	);
+
+	this[prevElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="prev"]`,
+	);
+
+	this[nextElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="next"]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <div class="prev" data-monster-role="prev" part="prev">
+                <slot name="prev"></slot>
+            </div>
+            <div data-monster-role="slider">
+                <slot></slot>
+            </div>
+            <div data-monster-role="thumbnails"></div>
+            <div class="next" data-monster-role="next" part="next">
+                <slot name="next"></slot>
+            </div>
+        </div>`;
+}
+
+registerCustomElement(Slider);