kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/snackbar/toasts.js

@@ -0,0 +1,244 @@
+const _defaults = {
+    text: '',
+    displayLength: 4000,
+    inDuration: 300,
+    outDuration: 375,
+    classes: '',
+    completeCallback: null,
+    activationPercent: 0.8
+};
+export class Toast {
+    /** The toast element. */
+    el;
+    /**
+     * The remaining amount of time in ms that the toast
+     * will stay before dismissal.
+     */
+    timeRemaining;
+    /**
+     * Describes the current pan state of the Toast.
+     */
+    panning;
+    options;
+    message;
+    counterInterval;
+    wasSwiped;
+    startingXPos;
+    xPos;
+    time;
+    deltaX;
+    velocityX;
+    static _toasts;
+    static _container;
+    static _draggedToast;
+    constructor(options) {
+        this.options = {
+            ...Toast.defaults,
+            ...options
+        };
+        this.message = this.options.text;
+        this.panning = false;
+        this.timeRemaining = this.options.displayLength;
+        if (!Toast._container) {
+            Toast._createContainer();
+        }
+        // Create new toast
+        Toast._toasts.push(this);
+        const toastElement = this._createToast();
+        toastElement['M_Toast'] = this;
+        this.el = toastElement;
+        this._animateIn();
+        this._setTimer();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static getInstance(el) {
+        return el['M_Toast'];
+    }
+    static _createContainer() {
+        const container = document.createElement('div');
+        container.setAttribute('id', 'toast-container');
+        // Add event handler
+        container.addEventListener('touchstart', Toast._onDragStart);
+        container.addEventListener('touchmove', Toast._onDragMove);
+        container.addEventListener('touchend', Toast._onDragEnd);
+        container.addEventListener('mousedown', Toast._onDragStart);
+        document.addEventListener('mousemove', Toast._onDragMove);
+        document.addEventListener('mouseup', Toast._onDragEnd);
+        document.body.appendChild(container);
+        Toast._container = container;
+    }
+    static _removeContainer() {
+        document.removeEventListener('mousemove', Toast._onDragMove);
+        document.removeEventListener('mouseup', Toast._onDragEnd);
+        if (Toast._container) {
+            Toast._container.remove();
+            Toast._container = null;
+        }
+    }
+    static _onDragStart(e) {
+        if (e.target && e.target.closest('.toast')) {
+            const toastElem = e.target.closest('.toast');
+            const toast = toastElem['M_Toast'];
+            toast.panning = true;
+            Toast._draggedToast = toast;
+            toast.el.classList.add('panning');
+            toast.el.style.transition = '';
+            toast.startingXPos = Toast._xPos(e);
+            toast.time = Date.now();
+            toast.xPos = Toast._xPos(e);
+        }
+    }
+    static _onDragMove(e) {
+        if (!!Toast._draggedToast) {
+            e.preventDefault();
+            const toast = Toast._draggedToast;
+            toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
+            toast.xPos = Toast._xPos(e);
+            toast.velocityX = toast.deltaX / (Date.now() - toast.time);
+            toast.time = Date.now();
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+            toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
+        }
+    }
+    static _onDragEnd() {
+        if (!!Toast._draggedToast) {
+            const toast = Toast._draggedToast;
+            toast.panning = false;
+            toast.el.classList.remove('panning');
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+            // Remove toast
+            if (shouldBeDismissed) {
+                toast.wasSwiped = true;
+                toast.dismiss();
+                // Animate toast back to original position
+            }
+            else {
+                toast.el.style.transition = 'transform .2s, opacity .2s';
+                toast.el.style.transform = '';
+                toast.el.style.opacity = '';
+            }
+            Toast._draggedToast = null;
+        }
+    }
+    static _xPos(e) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return e.targetTouches[0].clientX;
+        }
+        // mouse event
+        return e.clientX;
+    }
+    /**
+     * dismiss all toasts.
+     */
+    static dismissAll() {
+        for (const toastIndex in Toast._toasts) {
+            Toast._toasts[toastIndex].dismiss();
+        }
+    }
+    _createToast() {
+        let toast = this.options.toastId
+            ? document.getElementById(this.options.toastId)
+            : document.createElement('div');
+        if (toast instanceof HTMLTemplateElement) {
+            const node = toast.content.cloneNode(true);
+            toast = node.firstElementChild;
+        }
+        toast.classList.add('toast');
+        toast.setAttribute('role', 'alert');
+        toast.setAttribute('aria-live', 'assertive');
+        toast.setAttribute('aria-atomic', 'true');
+        // Add custom classes onto toast
+        if (this.options.classes.length > 0) {
+            toast.classList.add(...this.options.classes.split(' '));
+        }
+        if (this.message)
+            toast.innerText = this.message;
+        if (Toast._container) {
+            Toast._container.appendChild(toast);
+        }
+        return toast;
+    }
+    _animateIn() {
+        // Animate toast in
+        this.el.style.display = '';
+        this.el.style.opacity = '0';
+        // easeOutCubic
+        this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+        setTimeout(() => {
+            this.el.style.top = '0';
+            this.el.style.opacity = '1';
+        }, 1);
+    }
+    /**
+     * Create setInterval which automatically removes toast when timeRemaining >= 0
+     * has been reached.
+     */
+    _setTimer() {
+        if (this.timeRemaining !== Infinity) {
+            this.counterInterval = setInterval(() => {
+                // If toast is not being dragged, decrease its time remaining
+                if (!this.panning) {
+                    this.timeRemaining -= 20;
+                }
+                // Animate toast out
+                if (this.timeRemaining <= 0) {
+                    this.dismiss();
+                }
+            }, 20);
+        }
+    }
+    /**
+     * Dismiss toast with animation.
+     */
+    dismiss() {
+        clearInterval(this.counterInterval);
+        const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+        if (this.wasSwiped) {
+            this.el.style.transition = 'transform .05s, opacity .05s';
+            this.el.style.transform = `translateX(${activationDistance}px)`;
+            this.el.style.opacity = '0';
+        }
+        // easeOutExpo
+        this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+        setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.el.style.marginTop = '-40px';
+        }, 1);
+        setTimeout(() => {
+            // Call the optional callback
+            if (typeof this.options.completeCallback === 'function') {
+                this.options.completeCallback();
+            }
+            // Remove toast from DOM
+            if (this.el.id != this.options.toastId) {
+                this.el.remove();
+                const toastIndex = Toast._toasts.indexOf(this);
+                // indexOf returns -1 if this toast is no longer tracked (e.g. the
+                // static state was already reset elsewhere); splice(-1, 1) would
+                // otherwise silently remove an unrelated, still-active toast.
+                if (toastIndex !== -1) {
+                    Toast._toasts.splice(toastIndex, 1);
+                }
+                if (Toast._toasts.length === 0) {
+                    Toast._removeContainer();
+                }
+            }
+        }, this.options.outDuration);
+    }
+    static {
+        Toast._toasts = [];
+        Toast._container = null;
+        Toast._draggedToast = null;
+    }
+}

package/components/tabs/tabs.js

@@ -0,0 +1,289 @@
+import { Carousel } from '../carousel/carousel';
+import { Component } from '../../src/component';
+const _defaults = {
+    duration: 300,
+    onShow: null,
+    swipeable: false,
+    responsiveThreshold: Infinity // breakpoint for swipeable
+};
+export class Tabs extends Component {
+    _tabLinks;
+    _index;
+    _indicator;
+    _tabWidth;
+    _tabsWidth;
+    _tabsCarousel;
+    _activeTabLink;
+    _content;
+    constructor(el, options) {
+        super(el, options, Tabs);
+        this.el['M_Tabs'] = this;
+        this.options = {
+            ...Tabs.defaults,
+            ...options
+        };
+        this._tabLinks = this.el.querySelectorAll('li.tab > a');
+        this._index = 0;
+        this._setupActiveTabLink();
+        if (this.options.swipeable) {
+            this._setupSwipeableTabs();
+        }
+        else {
+            this._setupNormalTabs();
+        }
+        // Setup tabs indicator after content to ensure accurate widths
+        this._setTabsAndTabWidth();
+        this._createIndicator();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Tabs.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Tabs);
+    }
+    static getInstance(el) {
+        return el['M_Tabs'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this._indicator.parentNode.removeChild(this._indicator);
+        if (this.options.swipeable) {
+            this._teardownSwipeableTabs();
+        }
+        else {
+            this._teardownNormalTabs();
+        }
+        this.el['M_Tabs'] = undefined;
+    }
+    /**
+     * The index of tab that is currently shown.
+     */
+    get index() {
+        return this._index;
+    }
+    _setupEventHandlers() {
+        window.addEventListener('resize', this._handleWindowResize);
+        this.el.addEventListener('click', this._handleTabClick);
+        // map vertical scrolling to horizontal scrolling because no scrollbar is shown on desktop
+        this.el.addEventListener('wheel', (event) => {
+            if (event.deltaY !== 0) {
+                event.preventDefault();
+                this.el.scrollLeft += event.deltaY * 1;
+            }
+        });
+    }
+    _removeEventHandlers() {
+        window.removeEventListener('resize', this._handleWindowResize);
+        this.el.removeEventListener('click', this._handleTabClick);
+    }
+    _handleWindowResize = () => {
+        this._setTabsAndTabWidth();
+        if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
+            this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+            this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+        }
+    };
+    _handleTabClick = (e) => {
+        let tabLink = e.target;
+        if (!tabLink)
+            return;
+        let tab = tabLink.parentElement;
+        while (tab && !tab.classList.contains('tab')) {
+            tabLink = tabLink.parentElement;
+            tab = tab.parentElement;
+        }
+        // Handle click on tab link only
+        if (!tabLink || !tab.classList.contains('tab'))
+            return;
+        // is disabled?
+        if (tab.classList.contains('disabled')) {
+            e.preventDefault();
+            return;
+        }
+        // Act as regular link if target attribute is specified.
+        if (tabLink.hasAttribute('target'))
+            return;
+        // Make the old tab inactive.
+        this._activeTabLink.classList.remove('active');
+        const _oldContent = this._content;
+        // Update the variables with the new link and content
+        this._activeTabLink = tabLink;
+        if (tabLink.hash)
+            this._content = document.querySelector(tabLink.hash);
+        this._tabLinks = this.el.querySelectorAll('li.tab > a');
+        // Make the tab active
+        this._activeTabLink.classList.add('active');
+        const prevIndex = this._index;
+        this._index = Math.max(Array.from(this._tabLinks).indexOf(tabLink), 0);
+        // Swap content
+        if (this.options.swipeable) {
+            if (this._tabsCarousel) {
+                this._tabsCarousel.set(this._index, () => {
+                    if (typeof this.options.onShow === 'function')
+                        this.options.onShow.call(this, this._content);
+                });
+            }
+        }
+        else {
+            if (this._content) {
+                this._content.style.display = 'block';
+                this._content.classList.add('active');
+                if (typeof this.options.onShow === 'function')
+                    this.options.onShow.call(this, this._content);
+                if (_oldContent && _oldContent !== this._content) {
+                    _oldContent.style.display = 'none';
+                    _oldContent.classList.remove('active');
+                }
+            }
+        }
+        // Update widths after content is swapped (scrollbar bugfix)
+        this._setTabsAndTabWidth();
+        this._animateIndicator(prevIndex);
+        e.preventDefault();
+    };
+    _createIndicator() {
+        const indicator = document.createElement('li');
+        indicator.classList.add('indicator');
+        this.el.appendChild(indicator);
+        this._indicator = indicator;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+    }
+    _setupActiveTabLink() {
+        // If the location.hash matches one of the links, use that as the active tab.
+        this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash);
+        // If no match is found, use the first link or any with class 'active' as the initial active tab.
+        if (!this._activeTabLink) {
+            let activeTabLink = this.el.querySelector('li.tab a.active');
+            if (!activeTabLink) {
+                activeTabLink = this.el.querySelector('li.tab a');
+            }
+            this._activeTabLink = activeTabLink;
+        }
+        Array.from(this._tabLinks).forEach((a) => a.classList.remove('active'));
+        this._activeTabLink.classList.add('active');
+        this._index = Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink), 0);
+        if (this._activeTabLink && this._activeTabLink.hash) {
+            this._content = document.querySelector(this._activeTabLink.hash);
+            if (this._content)
+                this._content.classList.add('active');
+        }
+    }
+    _setupSwipeableTabs() {
+        // Change swipeable according to responsive threshold
+        if (window.innerWidth > this.options.responsiveThreshold)
+            this.options.swipeable = false;
+        const tabsContent = [];
+        this._tabLinks.forEach((a) => {
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                currContent.classList.add('carousel-item');
+                tabsContent.push(currContent);
+            }
+        });
+        // Create Carousel-Wrapper around Tab-Contents
+        const tabsWrapper = document.createElement('div');
+        tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
+        // Wrap around
+        tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
+        tabsContent.forEach((tabContent) => {
+            tabsWrapper.appendChild(tabContent);
+            tabContent.style.display = '';
+        });
+        // Keep active tab index to set initial carousel slide
+        const tab = this._activeTabLink.parentElement;
+        const activeTabIndex = Array.from(tab.parentNode.children).indexOf(tab);
+        this._tabsCarousel = Carousel.init(tabsWrapper, {
+            fullWidth: true,
+            noWrap: true,
+            onCycleTo: (item) => {
+                const prevIndex = this._index;
+                this._index = Array.from(item.parentNode.children).indexOf(item);
+                this._activeTabLink.classList.remove('active');
+                this._activeTabLink = Array.from(this._tabLinks)[this._index];
+                this._activeTabLink.classList.add('active');
+                this._animateIndicator(prevIndex);
+                if (typeof this.options.onShow === 'function')
+                    this.options.onShow.call(this, this._content);
+            }
+        });
+        // Set initial carousel slide to active tab
+        this._tabsCarousel.set(activeTabIndex);
+    }
+    _teardownSwipeableTabs() {
+        const tabsWrapper = this._tabsCarousel.el;
+        this._tabsCarousel.destroy();
+        // Unwrap
+        tabsWrapper.append(tabsWrapper.parentElement);
+        tabsWrapper.remove();
+    }
+    _setupNormalTabs() {
+        // Hide Tabs Content
+        Array.from(this._tabLinks).forEach((a) => {
+            if (a === this._activeTabLink)
+                return;
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                if (currContent)
+                    currContent.style.display = 'none';
+            }
+        });
+    }
+    _teardownNormalTabs() {
+        // show Tabs Content
+        this._tabLinks.forEach((a) => {
+            if (a.hash) {
+                const currContent = document.querySelector(a.hash);
+                if (currContent)
+                    currContent.style.display = '';
+            }
+        });
+    }
+    _setTabsAndTabWidth() {
+        this._tabsWidth = this.el.getBoundingClientRect().width;
+        this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
+    }
+    _calcRightPos(el) {
+        return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
+    }
+    _calcLeftPos(el) {
+        return Math.floor(el.offsetLeft);
+    }
+    /**
+     * Recalculate tab indicator position. This is useful when
+     * the indicator position is not correct.
+     */
+    updateTabIndicator() {
+        this._setTabsAndTabWidth();
+        this._animateIndicator(this._index);
+    }
+    _animateIndicator(prevIndex) {
+        let leftDelay = 0, rightDelay = 0;
+        const isMovingLeftOrStaying = this._index - prevIndex >= 0;
+        if (isMovingLeftOrStaying)
+            leftDelay = 90;
+        else
+            rightDelay = 90;
+        // in v1: easeOutQuad
+        this._indicator.style.transition = `
+      left ${this.options.duration}ms ease-out ${leftDelay}ms,
+      right ${this.options.duration}ms ease-out ${rightDelay}ms`;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
+    }
+    /**
+     * Show tab content that corresponds to the tab with the id.
+     * @param tabId The id of the tab that you want to switch to.
+     */
+    select(tabId) {
+        const tab = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === '#' + tabId);
+        if (tab)
+            tab.click();
+    }
+}