kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/dialog/materialbox.ts

@@ -0,0 +1,446 @@
+import { Utils } from '../../src/utils';
+import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
+
+export interface MaterialboxOptions extends BaseOptions {
+  /**
+   * Transition in duration in milliseconds.
+   * @default 275
+   */
+  inDuration: number;
+  /**
+   * Transition out duration in milliseconds.
+   * @default 200
+   */
+  outDuration: number;
+  /**
+   * Callback function called before materialbox is opened.
+   * @default null
+   */
+  onOpenStart: (el: Element) => void;
+  /**
+   * Callback function called after materialbox is opened.
+   * @default null
+   */
+  onOpenEnd: (el: Element) => void;
+  /**
+   * Callback function called before materialbox is closed.
+   * @default null
+   */
+  onCloseStart: (el: Element) => void;
+  /**
+   * Callback function called after materialbox is closed.
+   * @default null
+   */
+  onCloseEnd: (el: Element) => void;
+}
+
+const _defaults: MaterialboxOptions = {
+  inDuration: 275,
+  outDuration: 200,
+  onOpenStart: null,
+  onOpenEnd: null,
+  onCloseStart: null,
+  onCloseEnd: null
+};
+
+export class Materialbox extends Component<MaterialboxOptions> {
+  /** If the materialbox overlay is showing. */
+  overlayActive: boolean;
+  /** If the materialbox is no longer being animated. */
+  doneAnimating: boolean;
+  /** Caption, if specified. */
+  caption: string;
+  /** Original width of image. */
+  originalWidth: number;
+  /** Original height of image. */
+  originalHeight: number;
+  private originInlineStyles: string;
+  private placeholder: HTMLElement;
+  private _changedAncestorList: HTMLElement[];
+  private newHeight: number;
+  private newWidth: number;
+  private windowWidth: number;
+  private windowHeight: number;
+  private attrWidth: string;
+  private attrHeight: string;
+  private _overlay: HTMLElement;
+  private _photoCaption: HTMLElement;
+
+  constructor(el: HTMLElement, options: Partial<MaterialboxOptions>) {
+    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(): MaterialboxOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of MaterialBox.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<MaterialboxOptions>): Materialbox;
+  /**
+   * Initializes instances of MaterialBox.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<MaterialboxOptions>): Materialbox[];
+  /**
+   * Initializes instances of MaterialBox.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<MaterialboxOptions> = {}
+  ): Materialbox | Materialbox[] {
+    return super.init(els, options, Materialbox);
+  }
+
+  static getInstance(el: HTMLElement): Materialbox {
+    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');
+  }
+
+  private _setupEventHandlers() {
+    this.el.addEventListener('click', this._handleMaterialboxClick);
+    this.el.addEventListener('keypress', this._handleMaterialboxKeypress);
+  }
+
+  private _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleMaterialboxClick);
+    this.el.removeEventListener('keypress', this._handleMaterialboxKeypress);
+  }
+
+  private _handleMaterialboxClick = () => {
+    this._handleMaterialboxToggle();
+  };
+
+  private _handleMaterialboxKeypress = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this._handleMaterialboxToggle();
+    }
+  };
+
+  private _handleMaterialboxToggle = () => {
+    // If already modal, return to original
+    if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) this.close();
+    else this.open();
+  };
+
+  private _handleWindowScroll = () => {
+    if (this.overlayActive) this.close();
+  };
+
+  private _handleWindowResize = () => {
+    if (this.overlayActive) this.close();
+  };
+
+  private _handleWindowEscape = (e: KeyboardEvent) => {
+    if (Utils.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) this.close();
+  };
+
+  private _makeAncestorsOverflowVisible() {
+    this._changedAncestorList = [];
+    let ancestor = this.placeholder.parentNode;
+    while (ancestor !== null && ancestor !== document) {
+      const curr = <HTMLElement>ancestor;
+      if (curr.style.overflow !== 'visible') {
+        curr.style.overflow = 'visible';
+        this._changedAncestorList.push(curr);
+      }
+      ancestor = ancestor.parentNode;
+    }
+  }
+
+  private _offset(el: HTMLElement) {
+    const box = el.getBoundingClientRect();
+    const docElem = document.documentElement;
+    return {
+      top: box.top + window.scrollY - docElem.clientTop,
+      left: box.left + window.scrollX - docElem.clientLeft
+    };
+  }
+  private _updateVars(): void {
+    this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
+    this.caption = this.el.getAttribute('data-caption') || '';
+  }
+
+  // Image
+  private _animateImageIn(): void {
+    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);
+      }
+    });
+    */
+  }
+  private _animateImageOut(): void {
+    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
+  private _addCaption(): void {
+    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);
+  }
+  private _removeCaption(): void {
+    const duration = this.options.outDuration;
+    this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+    this._photoCaption.style.opacity = '0';
+    setTimeout(() => {
+      this._photoCaption.remove();
+    }, duration);
+  }
+
+  // Overlay
+  private _addOverlay(): void {
+    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);
+  }
+  private _removeOverlay(): void {
+    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/materialboxSpec.js

@@ -0,0 +1,37 @@
+describe('Materialbox:', () => {
+  const fixture = `<div id="transformTest" style="transform: translate3d(1px,1px,1px)">
+  <img
+    class="materialboxed"
+    width="650"
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
+</div>`;
+
+  beforeEach(() => XloadHtml(fixture));
+  afterEach(() => XunloadFixtures());
+
+  describe('Materialbox opens correctly with transformed ancestor', () => {
+    it('Opens a correctly placed overlay when clicked', (done) => {
+      const transformMaterialbox = document.querySelector('#transformTest');
+      M.Materialbox.init(document.querySelector('.materialboxed'), {
+        inDuration: 0,
+        outDuration: 0
+      });
+      // Mouse click
+      click(transformMaterialbox.querySelector('.materialboxed'));
+      setTimeout(() => {
+        // Check overlay is attached
+        const overlay = transformMaterialbox.querySelector('#materialbox-overlay');
+        const overlayRect = overlay.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        expect(overlay).toExist('because it is generated on init');
+        expect(overlay).toBeVisible('because materialbox was clicked');
+        expect(overlayRect.top).toEqual(0);
+        expect(overlayRect.left).toEqual(0);
+        expect(overlayRect.width).toEqual(windowWidth);
+        expect(overlayRect.height).toEqual(windowHeight);
+        done();
+      }, 10);
+    });
+  });
+});

package/components/dialog/modal.ts

@@ -0,0 +1,111 @@
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+// Obsolete for versions > 2.1.1
+
+interface ModalOptions extends BaseOptions {
+  opacity: number;
+  inDuration: number;
+  outDuration: number;
+  preventScrolling: boolean;
+  onOpenStart: (this: Modal, el: HTMLElement) => void;
+  onOpenEnd: (this: Modal, el: HTMLElement) => void;
+  onCloseStart: (el: HTMLElement) => void;
+  onCloseEnd: (el: HTMLElement) => void;
+  dismissible: boolean;
+  startingTop: string;
+  endingTop: string;
+}
+
+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<ModalOptions> {
+  constructor(el: HTMLElement, options: Partial<ModalOptions>) {
+    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(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
+  static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<ModalOptions> = {}
+  ): Modal | Modal[] {
+    return super.init(els, options, Modal);
+  }
+
+  static getInstance(el: HTMLElement): Modal {
+    return el['M_Modal'];
+  }
+
+  destroy() {}
+  _setupEventHandlers() {}
+  _removeEventHandlers() {}
+  _handleTriggerClick() {}
+  _handleOverlayClick() {}
+  _handleModalCloseClick() {}
+  _handleKeydown() {}
+  _handleFocus() {}
+  open() {
+    return this;
+  }
+  close() {
+    return this;
+  }
+
+  // Experimental!
+
+  static #createHtml(config: ModalCreateConfig) {
+    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: ModalCreateConfig) {
+    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 {}
+}
+
+interface ModalCreateConfig {
+  id: string;
+  header: string | HTMLElement;
+  content: string | HTMLElement;
+  footer: string | HTMLElement;
+}
+
+export { Modal, ModalOptions };

package/components/dialog/modalSpec.js

@@ -0,0 +1,83 @@
+describe('Modal:', () => {
+  const fixture = `<a class="btn tonal trigger waves-effect waves-light" href="#" onclick="modal1.showModal(); return false;">Modal</a>
+<button class="btn btn-floating fixed-action-btn" onclick="modal1.showModal()"><i class="material-icons">menu</i></button>
+
+<dialog id="modal1" class="modal">
+  <div class="modal-header">
+    <h4>Modal Header</h4>
+  </div>
+  <div class="modal-content">
+    <p>A bunch of text</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#" onclick="modal1.close(); return false;" class="waves-effect waves-green btn-flat">Agree</a>
+  </div>
+</dialog>
+`;
+
+  beforeEach(() => XloadHtml(fixture));
+  afterEach(() => XunloadFixtures());
+
+  describe('Modals', () => {
+    it('Should open and close correctly', (done) => {
+      const modal1 = document.querySelector('.modal');
+      const trigger = document.querySelector('.trigger');
+      expect(modal1).toBeHidden('Modal should be hidden');
+      click(trigger);
+      setTimeout(() => {
+        expect(modal1).toBeVisible('Modal should be shown');
+        done();
+      }, 10);
+    });
+
+    it('Should open and close correctly with children elements in trigger', (done) => {
+      const modal1 = document.querySelector('.modal');
+      const triggerIcon1 = document.querySelector('button i');
+      expect(modal1).toBeHidden('Modal should be hidden');
+      click(triggerIcon1);
+      setTimeout(() => {
+        expect(modal1).toBeVisible('Modal should be shown');
+        done();
+      }, 10);
+    });
+
+    // it('Should have a dismissible option', (done) => {
+    //   // M.Modal.init(modal1, {
+    //   //   dismissible: false,
+    //   //   inDuration: 0,
+    //   //   outDuration: 0
+    //   // });
+    //   click(trigger1);
+    //   setTimeout(() => {
+    //     expect(modal1).toBeVisible('Modal should be shown');
+    //     let overlay = M.Modal.getInstance(modal1)._overlay;
+    //     let overlayInDOM = document.contains(overlay);
+    //     expect(overlayInDOM).toEqual(true, 'Overlay should be attached on open');
+    //     click(overlay);
+    //     setTimeout(() => {
+    //       expect(modal1).toBeVisible('Modal should be shown');
+    //       let overlayInDOM = document.contains(overlay);
+    //       expect(overlayInDOM).toEqual(true, 'modal should not be dismissable');
+    //       done();
+    //     }, 10);
+    //   }, 10);
+    // });
+
+    it('Should have callbacks', (done) => {
+      let hasBeenClosed = false;
+      const modal = document.querySelector('.modal');
+      const trigger1 = document.querySelector('.trigger');
+
+      modal.addEventListener('close', () => {
+        hasBeenClosed = true;
+      });
+      click(trigger1);
+      expect(hasBeenClosed).toEqual(false, 'callback not yet fired');
+      click(document.querySelector('.modal-footer a'));
+      setTimeout(() => {
+        expect(hasBeenClosed).toEqual(true, 'callback fired');
+        done();
+      }, 200);
+    });
+  });
+});

package/components/dialog/readme.md

@@ -0,0 +1,5 @@
+# Dialog
+
+*THIS SECTION IS FOR DEMONSTRATION ONLY*
+
+Also called Modal.

package/components/divider/readme.md

@@ -0,0 +1,15 @@
+# Divider
+
+*THIS SECTION IS FOR DEMONSTRATION ONLY*
+
+Usage:
+
+```html
+<div class="divider"></div>
+```
+
+## Vertical Divider
+
+```html
+<div class="divider-vertical"></div>
+```