@materializecss/materialize 2.0.1-alpha → 2.0.3-alpha

package/src/modal.ts

@@ -1,6 +1,65 @@
-import { Component } from "./component";
 import anim from "animejs";
-import { M } from "./global";
+
+import { Utils } from "./utils";
+import { Component, BaseOptions, InitElements, MElement } from "./component";
+
+export interface ModalOptions extends BaseOptions {
+  /**
+   * Opacity of the modal overlay.
+   * @default 0.5
+   */
+  opacity: number;
+  /**
+   * Transition in duration in milliseconds.
+   * @default 250
+   */
+  inDuration: number;
+  /**
+   * Transition out duration in milliseconds.
+   * @default 250
+   */
+  outDuration: number;
+  /**
+   * Prevent page from scrolling while modal is open.
+   * @default true
+   */
+  preventScrolling: boolean;
+  /**
+   * Callback function called before modal is opened.
+   * @default null
+   */
+  onOpenStart: (this: Modal, el: HTMLElement) => void;
+  /**
+   * Callback function called after modal is opened.
+   * @default null
+   */
+  onOpenEnd: (this: Modal, el: HTMLElement) => void;
+  /**
+   * Callback function called before modal is closed.
+   * @default null
+   */
+  onCloseStart: (el: HTMLElement) => void;
+  /**
+   * Callback function called after modal is closed.
+   * @default null
+   */
+  onCloseEnd: (el: HTMLElement) => void;
+  /**
+   * Allow modal to be dismissed by keyboard or overlay click.
+   * @default true
+   */
+  dismissible: boolean;
+  /**
+   * Starting top offset.
+   * @default '4%'
+   */
+  startingTop: string;
+  /**
+   * Ending top offset.
+   * @default '10%'
+   */
+  endingTop: string;
+}
 
 const _defaults = {
   opacity: 0.5,
@@ -16,241 +75,267 @@ const _defaults = {
   endingTop: '10%'
 };
 
-  export class Modal extends Component {
-    el: HTMLElement;
-    static _modalsOpen: number;
-    static _count: number;
-    isOpen: boolean;
-    id: string;
-    private _openingTrigger: any;
-    private _overlay: HTMLElement;
-    private _nthModalOpened: number;
-    private _handleOverlayClickBound: any;
-    private _handleModalCloseClickBound: any;
-    private _handleKeydownBound: any;
-    private _handleFocusBound: any;
+export class Modal extends Component<ModalOptions> {
 
-    constructor(el, options) {
-      super(Modal, el, options);
-      (this.el as any).M_Modal = this;
-      this.options = {...Modal.defaults, ...options};
-      this.isOpen = false;
-      this.id = this.el.id;
-      this._openingTrigger = undefined;
-      this._overlay = document.createElement('div');
-      this._overlay.classList.add('modal-overlay');
-      this.el.tabIndex = 0;
-      this._nthModalOpened = 0;
-      Modal._count++;
-      this._setupEventHandlers();
-    }
+  static _modalsOpen: number;
+  static _count: number;
+  
+  /**
+   * ID of the modal element.
+   */
+  id: string;
+  /**
+   * If the modal is open.
+   */
+  isOpen: boolean;
+  
+  private _openingTrigger: any;
+  private _overlay: HTMLElement;
+  private _nthModalOpened: number;
 
-    static get defaults() {
-      return _defaults;
-    }
+  constructor(el: HTMLElement, options: Partial<ModalOptions>) {
+    super(el, options, Modal);
+    (this.el as any).M_Modal = this;
 
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
+    this.options = {
+      ...Modal.defaults,
+      ...options
+    };
+    
+    this.isOpen = false;
+    this.id = this.el.id;
+    this._openingTrigger = undefined;
+    this._overlay = document.createElement('div');
+    this._overlay.classList.add('modal-overlay');
+    this.el.tabIndex = 0;
+    this._nthModalOpened = 0;
+    Modal._count++;
+    this._setupEventHandlers();
+  }
 
-    static getInstance(el) {
-      const domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Modal;
-    }
+  static get defaults() {
+    return _defaults;
+  }
 
-    destroy() {
-      Modal._count--;
-      this._removeEventHandlers();
-      this.el.removeAttribute('style');
-      this._overlay.remove();
-      (this.el as any).M_Modal = undefined;
-    }
+  /**
+   * Initializes instance of Modal.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
+  /**
+   * Initializes instances of Modal.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
+  /**
+   * Initializes instances of Modal.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<ModalOptions> = {}): Modal | Modal[] {
+    return super.init(els, options, Modal);
+  }
 
-    _setupEventHandlers() {
-      this._handleOverlayClickBound = this._handleOverlayClick.bind(this);
-      this._handleModalCloseClickBound = this._handleModalCloseClick.bind(this);
-      if (Modal._count === 1) {
-        document.body.addEventListener('click', this._handleTriggerClick);
-      }
-      this._overlay.addEventListener('click', this._handleOverlayClickBound);
-      this.el.addEventListener('click', this._handleModalCloseClickBound);
-    }
+  static getInstance(el: HTMLElement): Modal {
+    return (el as any).M_Modal;
+  }
 
-    _removeEventHandlers() {
-      if (Modal._count === 0) {
-        document.body.removeEventListener('click', this._handleTriggerClick);
-      }
-      this._overlay.removeEventListener('click', this._handleOverlayClickBound);
-      this.el.removeEventListener('click', this._handleModalCloseClickBound);
-    }
+  destroy() {
+    Modal._count--;
+    this._removeEventHandlers();
+    this.el.removeAttribute('style');
+    this._overlay.remove();
+    (this.el as any).M_Modal = undefined;
+  }
 
-    _handleTriggerClick(e) {
-      const trigger = e.target.closest('.modal-trigger');
-      if (!trigger) return;
-      const modalId = M.getIdFromTrigger(trigger);
-      const modalInstance = (document.getElementById(modalId) as any).M_Modal;
-      if (modalInstance) modalInstance.open(trigger);
-      e.preventDefault();
+  _setupEventHandlers() {
+    if (Modal._count === 1) {
+      document.body.addEventListener('click', this._handleTriggerClick);
     }
+    this._overlay.addEventListener('click', this._handleOverlayClick);
+    this.el.addEventListener('click', this._handleModalCloseClick);
+  }
 
-    _handleOverlayClick() {
-      if (this.options.dismissible) this.close();
+  _removeEventHandlers() {
+    if (Modal._count === 0) {
+      document.body.removeEventListener('click', this._handleTriggerClick);
     }
+    this._overlay.removeEventListener('click', this._handleOverlayClick);
+    this.el.removeEventListener('click', this._handleModalCloseClick);
+  }
 
-    _handleModalCloseClick(e) {
-      const closeTrigger = e.target.closest('.modal-close');
-      if (closeTrigger) this.close();
-    }
+  _handleTriggerClick = (e: MouseEvent) => {
+    const trigger = (e.target as HTMLElement).closest('.modal-trigger');
+    if (!trigger) return;
+    const modalId = Utils.getIdFromTrigger(trigger as HTMLElement);
+    const modalInstance = (document.getElementById(modalId) as any).M_Modal;
+    if (modalInstance) modalInstance.open(trigger);
+    e.preventDefault();
+  }
 
-    _handleKeydown(e) {
-      // ESC key
-      if (e.keyCode === 27 && this.options.dismissible) this.close();
-    }
+  _handleOverlayClick = () => {
+    if (this.options.dismissible) this.close();
+  }
 
-    _handleFocus(e) {
-      // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
-      if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) {
-        this.el.focus();
-      }
+  _handleModalCloseClick = (e: MouseEvent) => {
+    const closeTrigger = (e.target as HTMLElement).closest('.modal-close');
+    if (closeTrigger) this.close();
+  }
+
+  _handleKeydown = (e: KeyboardEvent) => {
+    if (Utils.keys.ESC.includes(e.key) && this.options.dismissible) this.close();
+  }
+
+  _handleFocus = (e: FocusEvent) => {
+    // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
+    if (!this.el.contains(e.target as HTMLElement) && this._nthModalOpened === Modal._modalsOpen) {
+      this.el.focus();
     }
+  }
 
-    _animateIn() {
-      // Set initial styles  
-      this.el.style.display = 'block';
-      this.el.style.opacity = '0';
-      this._overlay.style.display = 'block';
-      this._overlay.style.opacity = '0';
-      // Animate overlay
-      anim({
-        targets: this._overlay,
-        opacity: this.options.opacity,
-        duration: this.options.inDuration,
-        easing: 'easeOutQuad'
-      });
-      // Define modal animation options
-      const enterAnimOptions = {
-        targets: this.el,
-        duration: this.options.inDuration,
-        easing: 'easeOutCubic',
-        // Handle modal onOpenEnd callback
-        complete: () => {
-          if (typeof this.options.onOpenEnd === 'function') {
-            this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
-          }
+  _animateIn() {
+    // Set initial styles
+    this.el.style.display = 'block';
+    this.el.style.opacity = '0';
+    this._overlay.style.display = 'block';
+    this._overlay.style.opacity = '0';
+    // Animate overlay
+    anim({
+      targets: this._overlay,
+      opacity: this.options.opacity,
+      duration: this.options.inDuration,
+      easing: 'easeOutQuad'
+    });
+    // Define modal animation options
+    const enterAnimOptions = {
+      targets: this.el,
+      duration: this.options.inDuration,
+      easing: 'easeOutCubic',
+      // Handle modal onOpenEnd callback
+      complete: () => {
+        if (typeof this.options.onOpenEnd === 'function') {
+          this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
         }
-      };
-      // Bottom sheet animation
-      if (this.el.classList.contains('bottom-sheet')) {
-        enterAnimOptions['bottom'] = 0;
-        enterAnimOptions['opacity'] = 1;
-      }
-      // Normal modal animation
-      else {
-        enterAnimOptions['top'] = [this.options.startingTop, this.options.endingTop];
-        enterAnimOptions['opacity'] = 1;
-        enterAnimOptions['scaleX'] = [0.8, 1];
-        enterAnimOptions['scaleY'] = [0.8, 1];
       }
-      anim(enterAnimOptions);
+    };
+    // Bottom sheet animation
+    if (this.el.classList.contains('bottom-sheet')) {
+      enterAnimOptions['bottom'] = 0;
+      enterAnimOptions['opacity'] = 1;
+    }
+    // Normal modal animation
+    else {
+      enterAnimOptions['top'] = [this.options.startingTop, this.options.endingTop];
+      enterAnimOptions['opacity'] = 1;
+      enterAnimOptions['scaleX'] = [0.8, 1];
+      enterAnimOptions['scaleY'] = [0.8, 1];
     }
+    anim(enterAnimOptions);
+  }
 
-    _animateOut() {
-      // Animate overlay
-      anim({
-        targets: this._overlay,
-        opacity: 0,
-        duration: this.options.outDuration,
-        easing: 'easeOutQuart'
-      });
-      // Define modal animation options
-      const exitAnimOptions = {
-        targets: this.el,
-        duration: this.options.outDuration,
-        easing: 'easeOutCubic',
-        // Handle modal ready callback
-        complete: () => {
-          this.el.style.display = 'none';
-          this._overlay.remove();
-          // Call onCloseEnd callback
-          if (typeof this.options.onCloseEnd === 'function') {
-            this.options.onCloseEnd.call(this, this.el);
-          }
+  _animateOut() {
+    // Animate overlay
+    anim({
+      targets: this._overlay,
+      opacity: 0,
+      duration: this.options.outDuration,
+      easing: 'easeOutQuart'
+    });
+    // Define modal animation options
+    const exitAnimOptions = {
+      targets: this.el,
+      duration: this.options.outDuration,
+      easing: 'easeOutCubic',
+      // Handle modal ready callback
+      complete: () => {
+        this.el.style.display = 'none';
+        this._overlay.remove();
+        // Call onCloseEnd callback
+        if (typeof this.options.onCloseEnd === 'function') {
+          this.options.onCloseEnd.call(this, this.el);
         }
-      };
-      // Bottom sheet animation
-      if (this.el.classList.contains('bottom-sheet')) {
-        exitAnimOptions['bottom'] = '-100%';
-        exitAnimOptions['opacity'] = 0;
-      }
-      // Normal modal animation
-      else {
-        exitAnimOptions['top'] = [this.options.endingTop, this.options.startingTop];
-        exitAnimOptions['opacity'] = 0;
-        exitAnimOptions['scaleX'] = 0.8;
-        exitAnimOptions['scaleY'] = 0.8;
       }
-      anim(exitAnimOptions);
+    };
+    // Bottom sheet animation
+    if (this.el.classList.contains('bottom-sheet')) {
+      exitAnimOptions['bottom'] = '-100%';
+      exitAnimOptions['opacity'] = 0;
     }
-
-    open(trigger: HTMLElement|undefined): Modal {
-      if (this.isOpen) return;
-      this.isOpen = true;
-      Modal._modalsOpen++;
-      this._nthModalOpened = Modal._modalsOpen;
-      // Set Z-Index based on number of currently open modals
-      this._overlay.style.zIndex = (1000 + Modal._modalsOpen * 2).toString();
-      this.el.style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
-      // Set opening trigger, undefined indicates modal was opened by javascript
-      this._openingTrigger = !!trigger ? trigger : undefined;
-      // onOpenStart callback
-      if (typeof this.options.onOpenStart === 'function') {
-        this.options.onOpenStart.call(this, this.el, this._openingTrigger);
-      }
-      if (this.options.preventScrolling) {
-        document.body.style.overflow = 'hidden';
-      }
-      this.el.classList.add('open');
-      this.el.insertAdjacentElement('afterend', this._overlay);
-      if (this.options.dismissible) {
-        this._handleKeydownBound = this._handleKeydown.bind(this);
-        this._handleFocusBound = this._handleFocus.bind(this);
-        document.addEventListener('keydown', this._handleKeydownBound);
-        document.addEventListener('focus', this._handleFocusBound, true);
-      }
-      anim.remove(this.el);
-      anim.remove(this._overlay);
-      this._animateIn();
-      // Focus modal
-      this.el.focus();
-      return this;
+    // Normal modal animation
+    else {
+      exitAnimOptions['top'] = [this.options.endingTop, this.options.startingTop];
+      exitAnimOptions['opacity'] = 0;
+      exitAnimOptions['scaleX'] = 0.8;
+      exitAnimOptions['scaleY'] = 0.8;
     }
+    anim(exitAnimOptions);
+  }
 
-    close() {
-      if (!this.isOpen) return;
-      this.isOpen = false;
-      Modal._modalsOpen--;
-      this._nthModalOpened = 0;
-      // Call onCloseStart callback
-      if (typeof this.options.onCloseStart === 'function') {
-        this.options.onCloseStart.call(this, this.el);
-      }
-      this.el.classList.remove('open');
-      // Enable body scrolling only if there are no more modals open.
-      if (Modal._modalsOpen === 0) {
-        document.body.style.overflow = '';
-      }
-      if (this.options.dismissible) {
-        document.removeEventListener('keydown', this._handleKeydownBound);
-        document.removeEventListener('focus', this._handleFocusBound, true);
-      }
-      anim.remove(this.el);
-      anim.remove(this._overlay);
-      this._animateOut();
-      return this;
+  /**
+   * Open modal.
+   */
+  open = (trigger?: HTMLElement): Modal => {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    Modal._modalsOpen++;
+    this._nthModalOpened = Modal._modalsOpen;
+    // Set Z-Index based on number of currently open modals
+    this._overlay.style.zIndex = (1000 + Modal._modalsOpen * 2).toString();
+    this.el.style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
+    // Set opening trigger, undefined indicates modal was opened by javascript
+    this._openingTrigger = !!trigger ? trigger : undefined;
+    // onOpenStart callback
+    if (typeof this.options.onOpenStart === 'function') {
+      this.options.onOpenStart.call(this, this.el, this._openingTrigger);
+    }
+    if (this.options.preventScrolling) {
+      document.body.style.overflow = 'hidden';
     }
+    this.el.classList.add('open');
+    this.el.insertAdjacentElement('afterend', this._overlay);
+    if (this.options.dismissible) {
+      document.addEventListener('keydown', this._handleKeydown);
+      document.addEventListener('focus', this._handleFocus, true);
+    }
+    anim.remove(this.el);
+    anim.remove(this._overlay);
+    this._animateIn();
+    // Focus modal
+    this.el.focus();
+    return this;
+  }
 
-    static{
-      Modal._modalsOpen = 0;
-      Modal._count = 0;
+  /**
+   * Close modal.
+   */
+  close = () => {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    Modal._modalsOpen--;
+    this._nthModalOpened = 0;
+    // Call onCloseStart callback
+    if (typeof this.options.onCloseStart === 'function') {
+      this.options.onCloseStart.call(this, this.el);
+    }
+    this.el.classList.remove('open');
+    // Enable body scrolling only if there are no more modals open.
+    if (Modal._modalsOpen === 0) {
+      document.body.style.overflow = '';
     }
+    if (this.options.dismissible) {
+      document.removeEventListener('keydown', this._handleKeydown);
+      document.removeEventListener('focus', this._handleFocus, true);
+    }
+    anim.remove(this.el);
+    anim.remove(this._overlay);
+    this._animateOut();
+    return this;
+  }
+
+  static{
+    Modal._modalsOpen = 0;
+    Modal._count = 0;
   }
+}