@schukai/monster 3.73.8 → 3.74.0

package/source/components/layout/slider.mjs

@@ -0,0 +1,668 @@
+/**
+ * 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 {addAttributeToken} from "../../dom/attributes.mjs";
+import {
+    ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_PREFIX,
+    ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
+import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
+import {
+    assembleMethodSymbol,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {isFunction} from "../../types/is.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,
+            //  currentTranslate: 0,
+            //  prevTranslate: 0,
+            //
+            // startPositions: null,
+            // currentPositions: null,
+
+            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 {Object} labels Label definitions
+     * @property {Object} actions Callbacks
+     * @property {string} actions.click="throw Error" Callback when clicked
+     * @property {Object} features Features
+     * @property {Object} classes CSS classes
+     * @property {boolean} disabled=false Disabled state
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            labels: {},
+            classes: {},
+            disabled: false,
+
+            features: {
+                carousel: false,
+                autoPlay: true,
+                thumbnails: true,
+            },
+
+            autoPlay: {
+                delay: 1500,
+                startDelay: 1000,
+                direction: "next",
+                mouseOverPause: true,
+                touchPause: true,
+                drag: true,
+            },
+
+            actions: {
+                click: () => {
+                    throw new Error("the click action is not defined");
+                },
+            }
+        });
+    }
+
+    /**
+     * @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();
+        });
+    }
+
+    this[sliderElementSymbol].addEventListener('mousedown', (e) => startDragging.call(this, e, 'mouse'));
+    this[sliderElementSymbol].addEventListener('touchstart', (e) => startDragging.call(this, e, 'touch'));
+    // this[sliderElementSymbol].addEventListener('touchend', () => stopDragging.call(this, 'touch'));
+    // this[sliderElementSymbol].addEventListener('touchmove', (e) => dragging.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);