kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/carousel/carousel.js

@@ -0,0 +1,574 @@
+import { Utils } from '../../src/utils';
+import { Component } from '../../src/component';
+const _defaults = {
+    duration: 200, // ms
+    dist: -100, // zoom scale TODO: make this more intuitive as an option
+    shift: 0, // spacing for center image
+    padding: 0, // Padding between non center items
+    numVisible: 5, // Number of visible items in carousel
+    fullWidth: false, // Change to full width styles
+    indicators: false, // Toggle indicators
+    noWrap: false, // Don't wrap around and cycle through items.
+    onCycleTo: null // Callback for when a new slide is cycled to.
+};
+export class Carousel extends Component {
+    hasMultipleSlides;
+    showIndicators;
+    noWrap;
+    /** If the carousel is being clicked or tapped. */
+    pressed;
+    /** If the carousel is currently being dragged. */
+    dragged;
+    offset;
+    target;
+    images;
+    itemWidth;
+    itemHeight;
+    dim;
+    _indicators;
+    count;
+    xform;
+    verticalDragged;
+    reference;
+    referenceY;
+    velocity;
+    frame;
+    timestamp;
+    ticker;
+    amplitude;
+    /** The index of the center carousel item. */
+    center = 0;
+    imageHeight;
+    scrollingTimeout;
+    oneTimeCallback;
+    constructor(el, options) {
+        super(el, options, Carousel);
+        this.el['M_Carousel'] = this;
+        this.options = {
+            ...Carousel.defaults,
+            ...options
+        };
+        // Setup
+        this.hasMultipleSlides = this.el.querySelectorAll('.carousel-item').length > 1;
+        this.showIndicators = this.options.indicators && this.hasMultipleSlides;
+        this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
+        this.pressed = false;
+        this.dragged = false;
+        this.offset = this.target = 0;
+        this.images = [];
+        this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+        this.itemHeight = this.el.querySelector('.carousel-item').clientHeight;
+        this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
+        // Full Width carousel setup
+        if (this.options.fullWidth) {
+            this.options.dist = 0;
+            this._setCarouselHeight();
+            // Offset fixed items when indicators.
+            if (this.showIndicators) {
+                this.el.querySelector('.carousel-fixed-item')?.classList.add('with-indicators');
+            }
+        }
+        // Iterate through slides
+        this._indicators = document.createElement('ul');
+        this._indicators.classList.add('indicators');
+        this.el.querySelectorAll('.carousel-item').forEach((item, i) => {
+            this.images.push(item);
+            if (this.showIndicators) {
+                const indicator = document.createElement('li');
+                indicator.classList.add('indicator-item');
+                indicator.tabIndex = 0;
+                if (i === 0) {
+                    indicator.classList.add('active');
+                }
+                this._indicators.appendChild(indicator);
+            }
+        });
+        if (this.showIndicators)
+            this.el.appendChild(this._indicators);
+        this.count = this.images.length;
+        // Cap numVisible at count
+        this.options.numVisible = Math.min(this.count, this.options.numVisible);
+        // Setup cross browser string
+        this.xform = 'transform';
+        ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
+            const e = prefix + 'Transform';
+            if (typeof document.body.style[e] !== 'undefined') {
+                this.xform = e;
+                return false;
+            }
+            return true;
+        });
+        this._setupEventHandlers();
+        this._scroll(this.offset);
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Carousel.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Carousel);
+    }
+    static getInstance(el) {
+        return el['M_Carousel'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Carousel'] = undefined;
+    }
+    _setupEventHandlers() {
+        if (typeof window.ontouchstart !== 'undefined') {
+            this.el.addEventListener('touchstart', this._handleCarouselTap);
+            this.el.addEventListener('touchmove', this._handleCarouselDrag);
+            this.el.addEventListener('touchend', this._handleCarouselRelease);
+        }
+        this.el.addEventListener('mousedown', this._handleCarouselTap);
+        this.el.addEventListener('mousemove', this._handleCarouselDrag);
+        this.el.addEventListener('mouseup', this._handleCarouselRelease);
+        this.el.addEventListener('mouseleave', this._handleCarouselRelease);
+        this.el.addEventListener('click', this._handleCarouselClick);
+        if (this.showIndicators && this._indicators) {
+            this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                el.addEventListener('click', this._handleIndicatorClick);
+                el.addEventListener('keypress', this._handleIndicatorKeyPress);
+            });
+        }
+        // Resize
+        window.addEventListener('resize', this._handleThrottledResize);
+    }
+    _removeEventHandlers() {
+        if (typeof window.ontouchstart !== 'undefined') {
+            this.el.removeEventListener('touchstart', this._handleCarouselTap);
+            this.el.removeEventListener('touchmove', this._handleCarouselDrag);
+            this.el.removeEventListener('touchend', this._handleCarouselRelease);
+        }
+        this.el.removeEventListener('mousedown', this._handleCarouselTap);
+        this.el.removeEventListener('mousemove', this._handleCarouselDrag);
+        this.el.removeEventListener('mouseup', this._handleCarouselRelease);
+        this.el.removeEventListener('mouseleave', this._handleCarouselRelease);
+        this.el.removeEventListener('click', this._handleCarouselClick);
+        if (this.showIndicators && this._indicators) {
+            this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
+                el.removeEventListener('click', this._handleIndicatorClick);
+            });
+        }
+        window.removeEventListener('resize', this._handleThrottledResize);
+    }
+    _handleThrottledResize = () => Utils.throttle(this._handleResize, 200, null).bind(this);
+    _handleCarouselTap = (e) => {
+        // Fixes firefox draggable image bug
+        if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
+            e.preventDefault();
+        }
+        this.pressed = true;
+        this.dragged = false;
+        this.verticalDragged = false;
+        this.reference = this._xpos(e);
+        this.referenceY = this._ypos(e);
+        this.velocity = this.amplitude = 0;
+        this.frame = this.offset;
+        this.timestamp = Date.now();
+        clearInterval(this.ticker);
+        this.ticker = setInterval(this._track, 100);
+    };
+    _handleCarouselDrag = (e) => {
+        let x, y, delta, deltaY;
+        if (this.pressed) {
+            x = this._xpos(e);
+            y = this._ypos(e);
+            delta = this.reference - x;
+            deltaY = Math.abs(this.referenceY - y);
+            if (deltaY < 30 && !this.verticalDragged) {
+                // If vertical scrolling don't allow dragging.
+                if (delta > 2 || delta < -2) {
+                    this.dragged = true;
+                    this.reference = x;
+                    this._scroll(this.offset + delta);
+                }
+            }
+            else if (this.dragged) {
+                // If dragging don't allow vertical scroll.
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+            else {
+                // Vertical scrolling.
+                this.verticalDragged = true;
+            }
+        }
+        if (this.dragged) {
+            // If dragging don't allow vertical scroll.
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+    };
+    _handleCarouselRelease = (e) => {
+        if (this.pressed) {
+            this.pressed = false;
+        }
+        else {
+            return;
+        }
+        clearInterval(this.ticker);
+        this.target = this.offset;
+        if (this.velocity > 10 || this.velocity < -10) {
+            this.amplitude = 0.9 * this.velocity;
+            this.target = this.offset + this.amplitude;
+        }
+        this.target = Math.round(this.target / this.dim) * this.dim;
+        // No wrap of items.
+        if (this.noWrap) {
+            if (this.target >= this.dim * (this.count - 1)) {
+                this.target = this.dim * (this.count - 1);
+            }
+            else if (this.target < 0) {
+                this.target = 0;
+            }
+        }
+        this.amplitude = this.target - this.offset;
+        this.timestamp = Date.now();
+        requestAnimationFrame(this._autoScroll);
+        if (this.dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        return false;
+    };
+    _handleCarouselClick = (e) => {
+        // Disable clicks if carousel was dragged.
+        if (this.dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+        else if (!this.options.fullWidth) {
+            const clickedElem = e.target.closest('.carousel-item');
+            if (!clickedElem)
+                return;
+            const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
+            const diff = this._wrap(this.center) - clickedIndex;
+            // Disable clicks if carousel was shifted by click
+            if (diff !== 0) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            // fixes https://github.com/materializecss/materialize/issues/180
+            if (clickedIndex < 0) {
+                // relative X position > center of carousel = clicked at the right part of the carousel
+                if (e.clientX - e.target.getBoundingClientRect().left >
+                    this.el.clientWidth / 2) {
+                    this.next();
+                }
+                else {
+                    this.prev();
+                }
+            }
+            else {
+                this._cycleTo(clickedIndex);
+            }
+        }
+    };
+    _handleIndicatorClick = (e) => {
+        e.stopPropagation();
+        this._handleIndicatorInteraction(e);
+    };
+    _handleIndicatorKeyPress = (e) => {
+        e.stopPropagation();
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleIndicatorInteraction(e);
+        }
+    };
+    _handleIndicatorInteraction = (e) => {
+        const indicator = e.target.closest('.indicator-item');
+        if (indicator) {
+            const index = [...indicator.parentNode.children].indexOf(indicator);
+            this._cycleTo(index);
+        }
+    };
+    _handleResize = () => {
+        if (this.options.fullWidth) {
+            this.itemWidth = this.el.querySelector('.carousel-item').clientWidth;
+            this.imageHeight = this.el.querySelector('.carousel-item.active').clientHeight;
+            this.dim = this.itemWidth * 2 + this.options.padding;
+            this.offset = this.center * 2 * this.itemWidth;
+            this.target = this.offset;
+            this._setCarouselHeight(true);
+        }
+        else {
+            this._scroll();
+        }
+    };
+    _setCarouselHeight(imageOnly = false) {
+        const firstSlide = this.el.querySelector('.carousel-item.active')
+            ? this.el.querySelector('.carousel-item.active')
+            : this.el.querySelector('.carousel-item');
+        const firstImage = firstSlide.querySelector('img');
+        if (firstImage) {
+            if (firstImage.complete) {
+                // If image won't trigger the load event
+                const imageHeight = firstImage.clientHeight;
+                if (imageHeight > 0) {
+                    this.el.style.height = imageHeight + 'px';
+                }
+                else {
+                    // If image still has no height, use the natural dimensions to calculate
+                    const naturalWidth = firstImage.naturalWidth;
+                    const naturalHeight = firstImage.naturalHeight;
+                    const adjustedHeight = (this.el.clientWidth / naturalWidth) * naturalHeight;
+                    this.el.style.height = adjustedHeight + 'px';
+                }
+            }
+            else {
+                // Get height when image is loaded normally
+                firstImage.addEventListener('load', () => {
+                    this.el.style.height = firstImage.offsetHeight + 'px';
+                });
+            }
+        }
+        else if (!imageOnly) {
+            const slideHeight = firstSlide.clientHeight;
+            this.el.style.height = slideHeight + 'px';
+        }
+    }
+    _xpos(e) {
+        // touch event
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientX;
+        }
+        // mouse event
+        return e.clientX;
+    }
+    _ypos(e) {
+        // touch event
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientY;
+        }
+        // mouse event
+        return e.clientY;
+    }
+    _wrap(x) {
+        return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + (x % this.count)) : x;
+    }
+    _track = () => {
+        const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = (1000 * delta) / (1 + elapsed);
+        // now = Date.now();
+        // elapsed = now - this.timestamp;
+        this.timestamp = now;
+        // delta = this.offset - this.frame;
+        this.frame = this.offset;
+        // v = (1000 * delta) / (1 + elapsed);
+        this.velocity = 0.8 * v + 0.2 * this.velocity;
+    };
+    _autoScroll = () => {
+        let elapsed, delta;
+        if (this.amplitude) {
+            elapsed = Date.now() - this.timestamp;
+            delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+            if (delta > 2 || delta < -2) {
+                this._scroll(this.target - delta);
+                requestAnimationFrame(this._autoScroll);
+            }
+            else {
+                this._scroll(this.target);
+            }
+        }
+    };
+    _scroll(x = 0) {
+        // Track scrolling state
+        if (!this.el.classList.contains('scrolling')) {
+            this.el.classList.add('scrolling');
+        }
+        if (this.scrollingTimeout != null) {
+            clearTimeout(this.scrollingTimeout);
+        }
+        this.scrollingTimeout = setTimeout(() => {
+            this.el.classList.remove('scrolling');
+        }, this.options.duration);
+        // Save last center before updating the center for onCycleTo callback
+        const lastCenter = this.center;
+        // Start actual scroll
+        this.offset = typeof x === 'number' ? x : this.offset;
+        this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+        const half = this.count >> 1, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = (-dir * delta * 2) / this.dim;
+        let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+        const numVisibleOffset = 1 / this.options.numVisible;
+        // delta = this.offset - this.center * this.dim;
+        // dir = delta < 0 ? 1 : -1;
+        // tween = (-dir * delta * 2) / this.dim;
+        // half = this.count >> 1;
+        if (this.options.fullWidth) {
+            alignment = 'translateX(0)';
+            centerTweenedOpacity = 1;
+        }
+        else {
+            alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
+            alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
+            centerTweenedOpacity = 1 - numVisibleOffset * tween;
+        }
+        // Set indicator active
+        if (this.showIndicators) {
+            const diff = this.center % this.count;
+            const activeIndicator = this._indicators.querySelector('.indicator-item.active');
+            const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(activeIndicator);
+            if (activeIndicatorIndex !== diff) {
+                activeIndicator.classList.remove('active');
+                const pos = diff < 0 ? this.count + diff : diff;
+                this._indicators.querySelectorAll('.indicator-item')[pos].classList.add('active');
+            }
+        }
+        // center
+        // Don't show wrapped items.
+        if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+            el = this.images[this._wrap(this.center)];
+            // Add active class to center item.
+            if (!el.classList.contains('active')) {
+                this.el.querySelector('.carousel-item').classList.remove('active');
+                el.classList.add('active');
+            }
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween * i}px) translateZ(${this.options.dist * tween}px)`;
+            this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+        }
+        for (i = 1; i <= half; ++i) {
+            // right side
+            if (this.options.fullWidth) {
+                zTranslation = this.options.dist;
+                tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+            }
+            else {
+                zTranslation = this.options.dist * (i * 2 + tween * dir);
+                tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
+            }
+            // Don't show wrapped items.
+            if (!this.noWrap || this.center + i < this.count) {
+                el = this.images[this._wrap(this.center + i)];
+                const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+            }
+            // left side
+            if (this.options.fullWidth) {
+                zTranslation = this.options.dist;
+                tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+            }
+            else {
+                zTranslation = this.options.dist * (i * 2 - tween * dir);
+                tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
+            }
+            // Don't show wrapped items.
+            if (!this.noWrap || this.center - i >= 0) {
+                el = this.images[this._wrap(this.center - i)];
+                const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+            }
+        }
+        // center
+        // Don't show wrapped items.
+        if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+            el = this.images[this._wrap(this.center)];
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
+            this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+        }
+        // onCycleTo callback
+        const _currItem = this.el.querySelectorAll('.carousel-item')[this._wrap(this.center)];
+        if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
+            this.options.onCycleTo.call(this, _currItem, this.dragged);
+        }
+        // One time callback
+        if (typeof this.oneTimeCallback === 'function') {
+            this.oneTimeCallback.call(this, _currItem, this.dragged);
+            this.oneTimeCallback = null;
+        }
+    }
+    _updateItemStyle(el, opacity, zIndex, transform) {
+        el.style[this.xform] = transform;
+        el.style.zIndex = zIndex.toString();
+        el.style.opacity = opacity.toString();
+        el.style.visibility = 'visible';
+    }
+    _cycleTo(n, callback = null) {
+        let diff = (this.center % this.count) - n;
+        // Account for wraparound.
+        if (!this.noWrap) {
+            if (diff < 0) {
+                if (Math.abs(diff + this.count) < Math.abs(diff)) {
+                    diff += this.count;
+                }
+            }
+            else if (diff > 0) {
+                if (Math.abs(diff - this.count) < diff) {
+                    diff -= this.count;
+                }
+            }
+        }
+        this.target = this.dim * Math.round(this.offset / this.dim);
+        // Next
+        if (diff < 0) {
+            this.target += this.dim * Math.abs(diff);
+        } // Prev
+        else if (diff > 0) {
+            this.target -= this.dim * diff;
+        }
+        // Set one time callback
+        if (typeof callback === 'function') {
+            this.oneTimeCallback = callback;
+        }
+        // Scroll
+        if (this.offset !== this.target) {
+            this.amplitude = this.target - this.offset;
+            this.timestamp = Date.now();
+            requestAnimationFrame(this._autoScroll);
+        }
+    }
+    /**
+     * Move carousel to next slide or go forward a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    next(n = 1) {
+        if (n === undefined || isNaN(n)) {
+            n = 1;
+        }
+        let index = this.center + n;
+        if (index >= this.count || index < 0) {
+            if (this.noWrap)
+                return;
+            index = this._wrap(index);
+        }
+        this._cycleTo(index);
+    }
+    /**
+     * Move carousel to previous slide or go back a given amount of slides.
+     * @param n How many times the carousel slides.
+     */
+    prev(n = 1) {
+        if (n === undefined || isNaN(n)) {
+            n = 1;
+        }
+        let index = this.center - n;
+        if (index >= this.count || index < 0) {
+            if (this.noWrap)
+                return;
+            index = this._wrap(index);
+        }
+        this._cycleTo(index);
+    }
+    /**
+     * Move carousel to nth slide.
+     * @param n Index of slide.
+     * @param callback "onCycleTo" optional callback.
+     */
+    set(n, callback) {
+        if (n === undefined || isNaN(n)) {
+            n = 0;
+        }
+        if (n > this.count || n < 0) {
+            if (this.noWrap)
+                return;
+            n = this._wrap(n);
+        }
+        this._cycleTo(n, callback);
+    }
+}