@materializecss/materialize 1.1.0-alpha → 1.2.0

package/js/modal.js

@@ -1,382 +1,382 @@
-(function($, anim) {
-  'use strict';
-
-  let _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
-   *
-   */
-  class Modal extends Component {
-    /**
-     * Construct Modal instance and set up overlay
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
-    constructor(el, options) {
-      super(Modal, el, options);
-
-      this.el.M_Modal = this;
-
-      /**
-       * Options for the modal
-       * @member Modal#options
-       * @prop {Number} [opacity=0.5] - Opacity of the modal overlay
-       * @prop {Number} [inDuration=250] - Length in ms of enter transition
-       * @prop {Number} [outDuration=250] - Length in ms of exit transition
-       * @prop {Function} onOpenStart - Callback function called before modal is opened
-       * @prop {Function} onOpenEnd - Callback function called after modal is opened
-       * @prop {Function} onCloseStart - Callback function called before modal is closed
-       * @prop {Function} onCloseEnd - Callback function called after modal is closed
-       * @prop {Boolean} [dismissible=true] - Allow modal to be dismissed by keyboard or overlay click
-       * @prop {String} [startingTop='4%'] - startingTop
-       * @prop {String} [endingTop='10%'] - endingTop
-       */
-      this.options = $.extend({}, Modal.defaults, options);
-
-      /**
-       * Describes open/close state of modal
-       * @type {Boolean}
-       */
-      this.isOpen = false;
-
-      this.id = this.$el.attr('id');
-      this._openingTrigger = undefined;
-      this.$overlay = $('<div class="modal-overlay"></div>');
-      this.el.tabIndex = 0;
-      this._nthModalOpened = 0;
-
-      Modal._count++;
-      this._setupEventHandlers();
-    }
-
-    static get defaults() {
-      return _defaults;
-    }
-
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
-
-    /**
-     * Get Instance
-     */
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Modal;
-    }
-
-    /**
-     * Teardown component
-     */
-    destroy() {
-      Modal._count--;
-      this._removeEventHandlers();
-      this.el.removeAttribute('style');
-      this.$overlay.remove();
-      this.el.M_Modal = undefined;
-    }
-
-    /**
-     * Setup Event Handlers
-     */
-    _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[0].addEventListener('click', this._handleOverlayClickBound);
-      this.el.addEventListener('click', this._handleModalCloseClickBound);
-    }
-
-    /**
-     * Remove Event Handlers
-     */
-    _removeEventHandlers() {
-      if (Modal._count === 0) {
-        document.body.removeEventListener('click', this._handleTriggerClick);
-      }
-      this.$overlay[0].removeEventListener('click', this._handleOverlayClickBound);
-      this.el.removeEventListener('click', this._handleModalCloseClickBound);
-    }
-
-    /**
-     * Handle Trigger Click
-     * @param {Event} e
-     */
-    _handleTriggerClick(e) {
-      let $trigger = $(e.target).closest('.modal-trigger');
-      if ($trigger.length) {
-        let modalId = M.getIdFromTrigger($trigger[0]);
-        let modalInstance = document.getElementById(modalId).M_Modal;
-        if (modalInstance) {
-          modalInstance.open($trigger);
-        }
-        e.preventDefault();
-      }
-    }
-
-    /**
-     * Handle Overlay Click
-     */
-    _handleOverlayClick() {
-      if (this.options.dismissible) {
-        this.close();
-      }
-    }
-
-    /**
-     * Handle Modal Close Click
-     * @param {Event} e
-     */
-    _handleModalCloseClick(e) {
-      let $closeTrigger = $(e.target).closest('.modal-close');
-      if ($closeTrigger.length) {
-        this.close();
-      }
-    }
-
-    /**
-     * Handle Keydown
-     * @param {Event} e
-     */
-    _handleKeydown(e) {
-      // ESC key
-      if (e.keyCode === 27 && this.options.dismissible) {
-        this.close();
-      }
-    }
-
-    /**
-     * Handle Focus
-     * @param {Event} e
-     */
-    _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();
-      }
-    }
-
-    /**
-     * Animate in modal
-     */
-    _animateIn() {
-      // Set initial styles
-      $.extend(this.el.style, {
-        display: 'block',
-        opacity: 0
-      });
-      $.extend(this.$overlay[0].style, {
-        display: 'block',
-        opacity: 0
-      });
-
-      // Animate overlay
-      anim({
-        targets: this.$overlay[0],
-        opacity: this.options.opacity,
-        duration: this.options.inDuration,
-        easing: 'easeOutQuad'
-      });
-
-      // Define modal animation options
-      let 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')) {
-        $.extend(enterAnimOptions, {
-          bottom: 0,
-          opacity: 1
-        });
-        anim(enterAnimOptions);
-
-        // Normal modal animation
-      } else {
-        $.extend(enterAnimOptions, {
-          top: [this.options.startingTop, this.options.endingTop],
-          opacity: 1,
-          scaleX: [0.8, 1],
-          scaleY: [0.8, 1]
-        });
-        anim(enterAnimOptions);
-      }
-    }
-
-    /**
-     * Animate out modal
-     */
-    _animateOut() {
-      // Animate overlay
-      anim({
-        targets: this.$overlay[0],
-        opacity: 0,
-        duration: this.options.outDuration,
-        easing: 'easeOutQuart'
-      });
-
-      // Define modal animation options
-      let 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')) {
-        $.extend(exitAnimOptions, {
-          bottom: '-100%',
-          opacity: 0
-        });
-        anim(exitAnimOptions);
-
-        // Normal modal animation
-      } else {
-        $.extend(exitAnimOptions, {
-          top: [this.options.endingTop, this.options.startingTop],
-          opacity: 0,
-          scaleX: 0.8,
-          scaleY: 0.8
-        });
-        anim(exitAnimOptions);
-      }
-    }
-
-    /**
-     * Open Modal
-     * @param {cash} [$trigger]
-     */
-    open($trigger) {
-      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[0].style.zIndex = 1000 + Modal._modalsOpen * 2;
-      this.el.style.zIndex = 1000 + Modal._modalsOpen * 2 + 1;
-
-      // Set opening trigger, undefined indicates modal was opened by javascript
-      this._openingTrigger = !!$trigger ? $trigger[0] : 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[0]);
-
-      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[0]);
-      this._animateIn();
-
-      // Focus modal
-      this.el.focus();
-
-      return this;
-    }
-
-    /**
-     * 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._handleKeydownBound);
-        document.removeEventListener('focus', this._handleFocusBound, true);
-      }
-
-      anim.remove(this.el);
-      anim.remove(this.$overlay[0]);
-      this._animateOut();
-      return this;
-    }
-  }
-
-  /**
-   * @static
-   * @memberof Modal
-   */
-  Modal._modalsOpen = 0;
-
-  /**
-   * @static
-   * @memberof Modal
-   */
-  Modal._count = 0;
-
-  M.Modal = Modal;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Modal, 'modal', 'M_Modal');
-  }
-})(cash, M.anime);
+(function($, anim) {
+  'use strict';
+
+  let _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
+   *
+   */
+  class Modal extends Component {
+    /**
+     * Construct Modal instance and set up overlay
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(Modal, el, options);
+
+      this.el.M_Modal = this;
+
+      /**
+       * Options for the modal
+       * @member Modal#options
+       * @prop {Number} [opacity=0.5] - Opacity of the modal overlay
+       * @prop {Number} [inDuration=250] - Length in ms of enter transition
+       * @prop {Number} [outDuration=250] - Length in ms of exit transition
+       * @prop {Function} onOpenStart - Callback function called before modal is opened
+       * @prop {Function} onOpenEnd - Callback function called after modal is opened
+       * @prop {Function} onCloseStart - Callback function called before modal is closed
+       * @prop {Function} onCloseEnd - Callback function called after modal is closed
+       * @prop {Boolean} [dismissible=true] - Allow modal to be dismissed by keyboard or overlay click
+       * @prop {String} [startingTop='4%'] - startingTop
+       * @prop {String} [endingTop='10%'] - endingTop
+       */
+      this.options = $.extend({}, Modal.defaults, options);
+
+      /**
+       * Describes open/close state of modal
+       * @type {Boolean}
+       */
+      this.isOpen = false;
+
+      this.id = this.$el.attr('id');
+      this._openingTrigger = undefined;
+      this.$overlay = $('<div class="modal-overlay"></div>');
+      this.el.tabIndex = 0;
+      this._nthModalOpened = 0;
+
+      Modal._count++;
+      this._setupEventHandlers();
+    }
+
+    static get defaults() {
+      return _defaults;
+    }
+
+    static init(els, options) {
+      return super.init(this, els, options);
+    }
+
+    /**
+     * Get Instance
+     */
+    static getInstance(el) {
+      let domElem = !!el.jquery ? el[0] : el;
+      return domElem.M_Modal;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      Modal._count--;
+      this._removeEventHandlers();
+      this.el.removeAttribute('style');
+      this.$overlay.remove();
+      this.el.M_Modal = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _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[0].addEventListener('click', this._handleOverlayClickBound);
+      this.el.addEventListener('click', this._handleModalCloseClickBound);
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      if (Modal._count === 0) {
+        document.body.removeEventListener('click', this._handleTriggerClick);
+      }
+      this.$overlay[0].removeEventListener('click', this._handleOverlayClickBound);
+      this.el.removeEventListener('click', this._handleModalCloseClickBound);
+    }
+
+    /**
+     * Handle Trigger Click
+     * @param {Event} e
+     */
+    _handleTriggerClick(e) {
+      let $trigger = $(e.target).closest('.modal-trigger');
+      if ($trigger.length) {
+        let modalId = M.getIdFromTrigger($trigger[0]);
+        let modalInstance = document.getElementById(modalId).M_Modal;
+        if (modalInstance) {
+          modalInstance.open($trigger);
+        }
+        e.preventDefault();
+      }
+    }
+
+    /**
+     * Handle Overlay Click
+     */
+    _handleOverlayClick() {
+      if (this.options.dismissible) {
+        this.close();
+      }
+    }
+
+    /**
+     * Handle Modal Close Click
+     * @param {Event} e
+     */
+    _handleModalCloseClick(e) {
+      let $closeTrigger = $(e.target).closest('.modal-close');
+      if ($closeTrigger.length) {
+        this.close();
+      }
+    }
+
+    /**
+     * Handle Keydown
+     * @param {Event} e
+     */
+    _handleKeydown(e) {
+      // ESC key
+      if (e.keyCode === 27 && this.options.dismissible) {
+        this.close();
+      }
+    }
+
+    /**
+     * Handle Focus
+     * @param {Event} e
+     */
+    _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();
+      }
+    }
+
+    /**
+     * Animate in modal
+     */
+    _animateIn() {
+      // Set initial styles
+      $.extend(this.el.style, {
+        display: 'block',
+        opacity: 0
+      });
+      $.extend(this.$overlay[0].style, {
+        display: 'block',
+        opacity: 0
+      });
+
+      // Animate overlay
+      anim({
+        targets: this.$overlay[0],
+        opacity: this.options.opacity,
+        duration: this.options.inDuration,
+        easing: 'easeOutQuad'
+      });
+
+      // Define modal animation options
+      let 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')) {
+        $.extend(enterAnimOptions, {
+          bottom: 0,
+          opacity: 1
+        });
+        anim(enterAnimOptions);
+
+        // Normal modal animation
+      } else {
+        $.extend(enterAnimOptions, {
+          top: [this.options.startingTop, this.options.endingTop],
+          opacity: 1,
+          scaleX: [0.8, 1],
+          scaleY: [0.8, 1]
+        });
+        anim(enterAnimOptions);
+      }
+    }
+
+    /**
+     * Animate out modal
+     */
+    _animateOut() {
+      // Animate overlay
+      anim({
+        targets: this.$overlay[0],
+        opacity: 0,
+        duration: this.options.outDuration,
+        easing: 'easeOutQuart'
+      });
+
+      // Define modal animation options
+      let 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')) {
+        $.extend(exitAnimOptions, {
+          bottom: '-100%',
+          opacity: 0
+        });
+        anim(exitAnimOptions);
+
+        // Normal modal animation
+      } else {
+        $.extend(exitAnimOptions, {
+          top: [this.options.endingTop, this.options.startingTop],
+          opacity: 0,
+          scaleX: 0.8,
+          scaleY: 0.8
+        });
+        anim(exitAnimOptions);
+      }
+    }
+
+    /**
+     * Open Modal
+     * @param {cash} [$trigger]
+     */
+    open($trigger) {
+      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[0].style.zIndex = 1000 + Modal._modalsOpen * 2;
+      this.el.style.zIndex = 1000 + Modal._modalsOpen * 2 + 1;
+
+      // Set opening trigger, undefined indicates modal was opened by javascript
+      this._openingTrigger = !!$trigger ? $trigger[0] : 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[0]);
+
+      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[0]);
+      this._animateIn();
+
+      // Focus modal
+      this.el.focus();
+
+      return this;
+    }
+
+    /**
+     * 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._handleKeydownBound);
+        document.removeEventListener('focus', this._handleFocusBound, true);
+      }
+
+      anim.remove(this.el);
+      anim.remove(this.$overlay[0]);
+      this._animateOut();
+      return this;
+    }
+  }
+
+  /**
+   * @static
+   * @memberof Modal
+   */
+  Modal._modalsOpen = 0;
+
+  /**
+   * @static
+   * @memberof Modal
+   */
+  Modal._count = 0;
+
+  M.Modal = Modal;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Modal, 'modal', 'M_Modal');
+  }
+})(cash, M.anime);