kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/dialog/materialbox.js

@@ -0,0 +1,377 @@
+import { Utils } from '../../src/utils';
+import { Component } from '../../src/component';
+const _defaults = {
+    inDuration: 275,
+    outDuration: 200,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null
+};
+export class Materialbox extends Component {
+    /** If the materialbox overlay is showing. */
+    overlayActive;
+    /** If the materialbox is no longer being animated. */
+    doneAnimating;
+    /** Caption, if specified. */
+    caption;
+    /** Original width of image. */
+    originalWidth;
+    /** Original height of image. */
+    originalHeight;
+    originInlineStyles;
+    placeholder;
+    _changedAncestorList;
+    newHeight;
+    newWidth;
+    windowWidth;
+    windowHeight;
+    attrWidth;
+    attrHeight;
+    _overlay;
+    _photoCaption;
+    constructor(el, options) {
+        super(el, options, Materialbox);
+        this.el['M_Materialbox'] = this;
+        this.options = {
+            ...Materialbox.defaults,
+            ...options
+        };
+        this.overlayActive = false;
+        this.doneAnimating = true;
+        this.placeholder = document.createElement('div');
+        this.placeholder.classList.add('material-placeholder');
+        this.originalWidth = 0;
+        this.originalHeight = 0;
+        this.originInlineStyles = this.el.getAttribute('style');
+        this.caption = this.el.getAttribute('data-caption') || '';
+        this.el.tabIndex = 0;
+        // Wrap
+        this.el.before(this.placeholder);
+        this.placeholder.append(this.el);
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of MaterialBox.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Materialbox);
+    }
+    static getInstance(el) {
+        return el['M_Materialbox'];
+    }
+    destroy() {
+        this._removeEventHandlers();
+        this.el['M_Materialbox'] = undefined;
+        // Unwrap image
+        //this.placeholder.after(this.el).remove();
+        this.placeholder.remove();
+        this.el.removeAttribute('style');
+    }
+    _setupEventHandlers() {
+        this.el.addEventListener('click', this._handleMaterialboxClick);
+        this.el.addEventListener('keypress', this._handleMaterialboxKeypress);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleMaterialboxClick);
+        this.el.removeEventListener('keypress', this._handleMaterialboxKeypress);
+    }
+    _handleMaterialboxClick = () => {
+        this._handleMaterialboxToggle();
+    };
+    _handleMaterialboxKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleMaterialboxToggle();
+        }
+    };
+    _handleMaterialboxToggle = () => {
+        // If already modal, return to original
+        if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
+            this.close();
+        else
+            this.open();
+    };
+    _handleWindowScroll = () => {
+        if (this.overlayActive)
+            this.close();
+    };
+    _handleWindowResize = () => {
+        if (this.overlayActive)
+            this.close();
+    };
+    _handleWindowEscape = (e) => {
+        if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive)
+            this.close();
+    };
+    _makeAncestorsOverflowVisible() {
+        this._changedAncestorList = [];
+        let ancestor = this.placeholder.parentNode;
+        while (ancestor !== null && ancestor !== document) {
+            const curr = ancestor;
+            if (curr.style.overflow !== 'visible') {
+                curr.style.overflow = 'visible';
+                this._changedAncestorList.push(curr);
+            }
+            ancestor = ancestor.parentNode;
+        }
+    }
+    _offset(el) {
+        const box = el.getBoundingClientRect();
+        const docElem = document.documentElement;
+        return {
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
+        };
+    }
+    _updateVars() {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+        this.caption = this.el.getAttribute('data-caption') || '';
+    }
+    // Image
+    _animateImageIn() {
+        this.el.style.maxHeight = this.newHeight.toString() + 'px';
+        this.el.style.maxWidth = this.newWidth.toString() + 'px';
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.height = this.originalHeight + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        setTimeout(() => {
+            // easeOutQuad
+            this.el.style.transition = `height ${duration}ms ease,
+        width ${duration}ms ease,
+        left ${duration}ms ease,
+        top ${duration}ms ease
+      `;
+            // to
+            this.el.style.height = this.newHeight + 'px';
+            this.el.style.width = this.newWidth + 'px';
+            this.el.style.left =
+                Utils.getDocumentScrollLeft() +
+                    this.windowWidth / 2 -
+                    this._offset(this.placeholder).left -
+                    this.newWidth / 2 +
+                    'px';
+            this.el.style.top =
+                Utils.getDocumentScrollTop() +
+                    this.windowHeight / 2 -
+                    this._offset(this.placeholder).top -
+                    this.newHeight / 2 +
+                    'px';
+        }, 1);
+        setTimeout(() => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+        /*
+        anim({
+          targets: this.el, // image
+          height: [this.originalHeight, this.newHeight],
+          width: [this.originalWidth, this.newWidth],
+          left:
+            Utils.getDocumentScrollLeft() +
+            this.windowWidth / 2 -
+            this._offset(this.placeholder).left -
+            this.newWidth / 2,
+          top:
+            Utils.getDocumentScrollTop() +
+            this.windowHeight / 2 -
+            this._offset(this.placeholder).top -
+            this.newHeight / 2,
+    
+          duration: this.options.inDuration,
+          easing: 'easeOutQuad',
+          complete: () => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el);
+          }
+        });
+        */
+    }
+    _animateImageOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this.el.style.transition = `height ${duration}ms ease,
+      width ${duration}ms ease,
+      left ${duration}ms ease,
+      top ${duration}ms ease
+    `;
+        // to
+        this.el.style.height = this.originalWidth + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        this.el.style.left = '0';
+        this.el.style.top = '0';
+        setTimeout(() => {
+            this.placeholder.style.height = '';
+            this.placeholder.style.width = '';
+            this.placeholder.style.position = '';
+            this.placeholder.style.top = '';
+            this.placeholder.style.left = '';
+            // Revert to width or height attribute
+            if (this.attrWidth)
+                this.el.setAttribute('width', this.attrWidth.toString());
+            if (this.attrHeight)
+                this.el.setAttribute('height', this.attrHeight.toString());
+            this.el.removeAttribute('style');
+            if (this.originInlineStyles)
+                this.el.setAttribute('style', this.originInlineStyles);
+            // Remove class
+            this.el.classList.remove('active');
+            this.doneAnimating = true;
+            // Remove overflow overrides on ancestors
+            this._changedAncestorList.forEach((anchestor) => (anchestor.style.overflow = ''));
+            // onCloseEnd callback
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    // Caption
+    _addCaption() {
+        this._photoCaption = document.createElement('div');
+        this._photoCaption.classList.add('materialbox-caption');
+        this._photoCaption.innerText = this.caption;
+        document.body.append(this._photoCaption);
+        this._photoCaption.style.display = 'inline';
+        // Animate
+        this._photoCaption.style.transition = 'none';
+        this._photoCaption.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+            this._photoCaption.style.opacity = '1';
+        }, 1);
+    }
+    _removeCaption() {
+        const duration = this.options.outDuration;
+        this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+        this._photoCaption.style.opacity = '0';
+        setTimeout(() => {
+            this._photoCaption.remove();
+        }, duration);
+    }
+    // Overlay
+    _addOverlay() {
+        this._overlay = document.createElement('div');
+        this._overlay.id = 'materialbox-overlay';
+        this._overlay.addEventListener('click', () => {
+            if (this.doneAnimating)
+                this.close();
+        }, { once: true });
+        // Put before in origin image to preserve z-index layering.
+        this.el.before(this._overlay);
+        // Set dimensions if needed
+        const overlayOffset = this._overlay.getBoundingClientRect();
+        this._overlay.style.width = this.windowWidth + 'px';
+        this._overlay.style.height = this.windowHeight + 'px';
+        this._overlay.style.left = -1 * overlayOffset.left + 'px';
+        this._overlay.style.top = -1 * overlayOffset.top + 'px';
+        // Animate
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            this._overlay.style.opacity = '1';
+        }, 1);
+    }
+    _removeOverlay() {
+        const duration = this.options.outDuration;
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this.overlayActive = false;
+            this._overlay.remove();
+        }, duration);
+    }
+    /**
+     * Open materialbox.
+     */
+    open = () => {
+        this._updateVars();
+        this.originalWidth = this.el.getBoundingClientRect().width;
+        this.originalHeight = this.el.getBoundingClientRect().height;
+        // Set states
+        this.doneAnimating = false;
+        this.el.classList.add('active');
+        this.overlayActive = true;
+        // onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function')
+            this.options.onOpenStart.call(this, this.el);
+        // Set positioning for placeholder
+        this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px';
+        this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px';
+        this.placeholder.style.position = 'relative';
+        this.placeholder.style.top = '0';
+        this.placeholder.style.left = '0';
+        this._makeAncestorsOverflowVisible();
+        // Set css on origin
+        this.el.style.position = 'absolute';
+        this.el.style.zIndex = '1000';
+        this.el.style.willChange = 'left, top, width, height';
+        // Change from width or height attribute to css
+        this.attrWidth = this.el.getAttribute('width');
+        this.attrHeight = this.el.getAttribute('height');
+        if (this.attrWidth) {
+            this.el.style.width = this.attrWidth + 'px';
+            this.el.removeAttribute('width');
+        }
+        if (this.attrHeight) {
+            this.el.style.width = this.attrHeight + 'px';
+            this.el.removeAttribute('height');
+        }
+        this._addOverlay();
+        // Add and animate caption if it exists
+        if (this.caption !== '')
+            this._addCaption();
+        // Resize Image
+        const widthPercent = this.originalWidth / this.windowWidth;
+        const heightPercent = this.originalHeight / this.windowHeight;
+        this.newWidth = 0;
+        this.newHeight = 0;
+        if (widthPercent > heightPercent) {
+            // Width first
+            const ratio = this.originalHeight / this.originalWidth;
+            this.newWidth = this.windowWidth * 0.9;
+            this.newHeight = this.windowWidth * 0.9 * ratio;
+        }
+        else {
+            // Height first
+            const ratio = this.originalWidth / this.originalHeight;
+            this.newWidth = this.windowHeight * 0.9 * ratio;
+            this.newHeight = this.windowHeight * 0.9;
+        }
+        this._animateImageIn();
+        // Handle Exit triggers
+        window.addEventListener('scroll', this._handleWindowScroll);
+        window.addEventListener('resize', this._handleWindowResize);
+        window.addEventListener('keyup', this._handleWindowEscape);
+    };
+    /**
+     * Close materialbox.
+     */
+    close = () => {
+        this._updateVars();
+        this.doneAnimating = false;
+        // onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function')
+            this.options.onCloseStart.call(this, this.el);
+        //anim.remove(this.el);
+        //anim.remove(this._overlay);
+        //if (this.caption !== '') anim.remove(this._photoCaption);
+        // disable exit handlers
+        window.removeEventListener('scroll', this._handleWindowScroll);
+        window.removeEventListener('resize', this._handleWindowResize);
+        window.removeEventListener('keyup', this._handleWindowEscape);
+        this._removeOverlay();
+        this._animateImageOut();
+        if (this.caption !== '')
+            this._removeCaption();
+    };
+}

package/components/dialog/modal.js

@@ -0,0 +1,72 @@
+import { Component } from '../../src/component';
+const _defaults = {
+    opacity: 0.5,
+    inDuration: 250,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true,
+    dismissible: true,
+    startingTop: '4%',
+    endingTop: '10%'
+};
+class Modal extends Component {
+    constructor(el, options) {
+        super(el, options, Modal);
+        this.el['M_Modal'] = this;
+        this.options = {
+            ...Modal.defaults,
+            ...options
+        };
+        this.el.tabIndex = 0;
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Modal);
+    }
+    static getInstance(el) {
+        return el['M_Modal'];
+    }
+    destroy() { }
+    _setupEventHandlers() { }
+    _removeEventHandlers() { }
+    _handleTriggerClick() { }
+    _handleOverlayClick() { }
+    _handleModalCloseClick() { }
+    _handleKeydown() { }
+    _handleFocus() { }
+    open() {
+        return this;
+    }
+    close() {
+        return this;
+    }
+    // Experimental!
+    static #createHtml(config) {
+        return `<dialog id="modal1" class="modal">
+      ${config.header ? '<div class="modal-header">' + config.header + '</div>' : ''}
+      <div class="modal-content">
+        ${config.content}
+      </div>
+      ${config.header ? '<div class="modal-footer">' + config.footer + '</div>' : ''}
+    </dialog>`;
+    }
+    static #createHtmlElement(config) {
+        const dialog = document.createElement('dialog');
+        dialog.id = config.id;
+        return dialog;
+    }
+    static create(config) {
+        const isServer = false;
+        if (isServer)
+            return this.#createHtml(config);
+        return this.#createHtmlElement(config);
+    }
+    static { }
+}
+export { Modal };