materialize-sass 0.99.0 → 0.100.0

data/app/assets/javascripts/materialize/modal.js

@@ -1,185 +1,396 @@
-(function($) {
-  var _stack = 0,
-  _lastID = 0,
-  _generateID = function() {
-    _lastID++;
-    return 'materialize-modal-overlay-' + _lastID;
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+(function ($) {
+  'use strict';
+
+  var _defaults = {
+    opacity: 0.5,
+    inDuration: 250,
+    outDuration: 250,
+    ready: undefined,
+    complete: undefined,
+    dismissible: true,
+    startingTop: '4%',
+    endingTop: '10%'
   };
 
-  var methods = {
-    init : function(options) {
-      var defaults = {
-        opacity: 0.5,
-        inDuration: 350,
-        outDuration: 250,
-        ready: undefined,
-        complete: undefined,
-        dismissible: true,
-        startingTop: '4%',
-        endingTop: '10%'
-      };
-
-      // Override defaults
-      options = $.extend(defaults, options);
-
-      return this.each(function() {
-        var $modal = $(this);
-        var modal_id = $(this).attr("id") || '#' + $(this).data('target');
-
-        var closeModal = function() {
-          var overlayID = $modal.data('overlay-id');
-          var $overlay = $('#' + overlayID);
-          $modal.removeClass('open');
-
-          // Enable scrolling
-          $('body').css({
-            overflow: '',
-            width: ''
-          });
-
-          $modal.find('.modal-close').off('click.close');
-          $(document).off('keyup.modal' + overlayID);
-
-          $overlay.velocity( { opacity: 0}, {duration: options.outDuration, queue: false, ease: "easeOutQuart"});
-
-
-          // Define Bottom Sheet animation
-          var exitVelocityOptions = {
-            duration: options.outDuration,
-            queue: false,
-            ease: "easeOutCubic",
-            // Handle modal ready callback
-            complete: function() {
-              $(this).css({display:"none"});
-
-              // Call complete callback
-              if (typeof(options.complete) === "function") {
-                options.complete.call(this, $modal);
-              }
-              $overlay.remove();
-              _stack--;
-            }
-          };
-          if ($modal.hasClass('bottom-sheet')) {
-            $modal.velocity({bottom: "-100%", opacity: 0}, exitVelocityOptions);
+  /**
+   * @class
+   *
+   */
+
+  var Modal = function () {
+    /**
+     * Construct Modal instance and set up overlay
+     * @constructor
+     * @param {jQuery} $el
+     * @param {Object} options
+     */
+    function Modal($el, options) {
+      _classCallCheck(this, Modal);
+
+      // If exists, destroy and reinitialize
+      if (!!$el[0].M_Modal) {
+        $el[0].M_Modal.destroy();
+      }
+
+      /**
+       * The jQuery element
+       * @type {jQuery}
+       */
+      this.$el = $el;
+
+      /**
+       * 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} ready - Callback function called when modal is finished entering
+       * @prop {Function} complete - Callback function called when modal is finished exiting
+       * @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.$el[0].M_Modal = this;
+      this.id = $el.attr('id');
+      this.openingTrigger = undefined;
+      this.$overlay = $('<div class="modal-overlay"></div>');
+
+      Modal._increment++;
+      Modal._count++;
+      this.$overlay[0].style.zIndex = 1000 + Modal._increment * 2;
+      this.$el[0].style.zIndex = 1000 + Modal._increment * 2 + 1;
+      this.setupEventHandlers();
+    }
+
+    _createClass(Modal, [{
+      key: 'getInstance',
+
+
+      /**
+       * Get Instance
+       */
+      value: function getInstance() {
+        return this;
+      }
+
+      /**
+       * Teardown component
+       */
+
+    }, {
+      key: 'destroy',
+      value: function destroy() {
+        this.removeEventHandlers();
+        this.$el[0].removeAttribute('style');
+        if (!!this.$overlay[0].parentNode) {
+          this.$overlay[0].parentNode.removeChild(this.$overlay[0]);
+        }
+        this.$el[0].M_Modal = undefined;
+        Modal._count--;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: 'setupEventHandlers',
+      value: function setupEventHandlers() {
+        this.handleOverlayClickBound = this.handleOverlayClick.bind(this);
+        this.handleModalCloseClickBound = this.handleModalCloseClick.bind(this);
+
+        if (Modal._count === 1) {
+          document.addEventListener('click', this.handleTriggerClick);
+        }
+        this.$overlay[0].addEventListener('click', this.handleOverlayClickBound);
+        this.$el[0].addEventListener('click', this.handleModalCloseClickBound);
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: 'removeEventHandlers',
+      value: function removeEventHandlers() {
+        if (Modal._count === 0) {
+          document.removeEventListener('click', this.handleTriggerClick);
+        }
+        this.$overlay[0].removeEventListener('click', this.handleOverlayClickBound);
+        this.$el[0].removeEventListener('click', this.handleModalCloseClickBound);
+      }
+
+      /**
+       * Handle Trigger Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: 'handleTriggerClick',
+      value: function handleTriggerClick(e) {
+        var $trigger = $(e.target).closest('.modal-trigger');
+        if (e.target && $trigger.length) {
+          var modalId = $trigger[0].getAttribute('href');
+          if (modalId) {
+            modalId = modalId.slice(1);
+          } else {
+            modalId = $trigger[0].getAttribute('data-target');
           }
-          else {
-            $modal.velocity(
-              { top: options.startingTop, opacity: 0, scaleX: 0.7},
-              exitVelocityOptions
-            );
+          var modalInstance = document.getElementById(modalId).M_Modal;
+          if (modalInstance) {
+            modalInstance.open($trigger);
           }
-        };
+          e.preventDefault();
+        }
+      }
 
-        var openModal = function($trigger) {
-          var $body = $('body');
-          var oldWidth = $body.innerWidth();
-          $body.css('overflow', 'hidden');
-          $body.width(oldWidth);
+      /**
+       * Handle Overlay Click
+       */
 
-          if ($modal.hasClass('open')) {
-            return;
-          }
+    }, {
+      key: 'handleOverlayClick',
+      value: function handleOverlayClick() {
+        if (this.options.dismissible) {
+          this.close();
+        }
+      }
 
-          var overlayID = _generateID();
-          var $overlay = $('<div class="modal-overlay"></div>');
-          var lStack = (++_stack);
-
-          // Store a reference of the overlay
-          $overlay.attr('id', overlayID).css('z-index', 1000 + lStack * 2);
-          $modal.data('overlay-id', overlayID).css('z-index', 1000 + lStack * 2 + 1);
-          $modal.addClass('open');
-
-          $("body").append($overlay);
-
-          if (options.dismissible) {
-            $overlay.click(function() {
-              closeModal();
-            });
-            // Return on ESC
-            $(document).on('keyup.modal' + overlayID, function(e) {
-              if (e.keyCode === 27) {   // ESC key
-                closeModal();
-              }
-            });
-          }
+      /**
+       * Handle Modal Close Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: 'handleModalCloseClick',
+      value: function handleModalCloseClick(e) {
+        if (e.target && e.target.classList.contains('modal-close')) {
+          this.close();
+        }
+      }
+
+      /**
+       * Handle Keydown
+       * @param {Event} e
+       */
+
+    }, {
+      key: 'handleKeydown',
+      value: function handleKeydown(e) {
+        // ESC key
+        if (e.keyCode === 27 && this.options.dismissible) {
+          this.close();
+        }
+      }
 
-          $modal.find(".modal-close").on('click.close', function(e) {
-            closeModal();
-          });
-
-          $overlay.css({ display : "block", opacity : 0 });
-
-          $modal.css({
-            display : "block",
-            opacity: 0
-          });
-
-          $overlay.velocity({opacity: options.opacity}, {duration: options.inDuration, queue: false, ease: "easeOutCubic"});
-          $modal.data('associated-overlay', $overlay[0]);
-
-          // Define Bottom Sheet animation
-          var enterVelocityOptions = {
-            duration: options.inDuration,
-            queue: false,
-            ease: "easeOutCubic",
-            // Handle modal ready callback
-            complete: function() {
-              if (typeof(options.ready) === "function") {
-                options.ready.call(this, $modal, $trigger);
-              }
+      /**
+       * Animate in modal
+       */
+
+    }, {
+      key: 'animateIn',
+      value: function animateIn() {
+        var _this = this;
+
+        // Set initial styles
+        $.extend(this.$el[0].style, {
+          display: 'block',
+          opacity: 0
+        });
+        $.extend(this.$overlay[0].style, {
+          display: 'block',
+          opacity: 0
+        });
+
+        // Animate overlay
+        Vel(this.$overlay[0], { opacity: this.options.opacity }, { duration: this.options.inDuration, queue: false, ease: 'easeOutCubic' });
+
+        // Define modal animation options
+        var enterVelocityOptions = {
+          duration: this.options.inDuration,
+          queue: false,
+          ease: 'easeOutCubic',
+          // Handle modal ready callback
+          complete: function () {
+            if (typeof _this.options.ready === 'function') {
+              _this.options.ready.call(_this, _this.$el, _this.openingTrigger);
             }
-          };
-          if ($modal.hasClass('bottom-sheet')) {
-            $modal.velocity({bottom: "0", opacity: 1}, enterVelocityOptions);
-          }
-          else {
-            $.Velocity.hook($modal, "scaleX", 0.7);
-            $modal.css({ top: options.startingTop });
-            $modal.velocity({top: options.endingTop, opacity: 1, scaleX: '1'}, enterVelocityOptions);
           }
+        };
+
+        // Bottom sheet animation
+        if (this.$el[0].classList.contains('bottom-sheet')) {
+          Vel(this.$el[0], { bottom: 0, opacity: 1 }, enterVelocityOptions);
+
+          // Normal modal animation
+        } else {
+          Vel.hook(this.$el[0], 'scaleX', 0.7);
+          this.$el[0].style.top = this.options.startingTop;
+          Vel(this.$el[0], { top: this.options.endingTop, opacity: 1, scaleX: 1 }, enterVelocityOptions);
+        }
+      }
+
+      /**
+       * Animate out modal
+       */
+
+    }, {
+      key: 'animateOut',
+      value: function animateOut() {
+        var _this2 = this;
+
+        // Animate overlay
+        Vel(this.$overlay[0], { opacity: 0 }, { duration: this.options.outDuration, queue: false, ease: 'easeOutQuart' });
 
+        // Define modal animation options
+        var exitVelocityOptions = {
+          duration: this.options.outDuration,
+          queue: false,
+          ease: 'easeOutCubic',
+          // Handle modal ready callback
+          complete: function () {
+            _this2.$el[0].style.display = 'none';
+            // Call complete callback
+            if (typeof _this2.options.complete === 'function') {
+              _this2.options.complete.call(_this2, _this2.$el);
+            }
+            _this2.$overlay[0].remove();
+          }
         };
 
-        // Reset handlers
-        $(document).off('click.modalTrigger', 'a[href="#' + modal_id + '"], [data-target="' + modal_id + '"]');
-        $(this).off('openModal');
-        $(this).off('closeModal');
+        // Bottom sheet animation
+        if (this.$el[0].classList.contains('bottom-sheet')) {
+          Vel(this.$el[0], { bottom: '-100%', opacity: 0 }, exitVelocityOptions);
 
-        // Close Handlers
-        $(document).on('click.modalTrigger', 'a[href="#' + modal_id + '"], [data-target="' + modal_id + '"]', function(e) {
-          options.startingTop = ($(this).offset().top - $(window).scrollTop()) /1.15;
-          openModal($(this));
-          e.preventDefault();
-        }); // done set on click
+          // Normal modal animation
+        } else {
+          Vel(this.$el[0], { top: this.options.startingTop, opacity: 0, scaleX: 0.7 }, exitVelocityOptions);
+        }
+      }
+
+      /**
+       * Open Modal
+       * @param {jQuery} [$trigger]
+       */
+
+    }, {
+      key: 'open',
+      value: function open($trigger) {
+        if (this.isOpen) {
+          return;
+        }
+
+        this.isOpen = true;
+        var body = document.body;
+        body.style.overflow = 'hidden';
+        this.$el[0].classList.add('open');
+        body.appendChild(this.$overlay[0]);
+
+        // Set opening trigger, undefined indicates modal was opened by javascript
+        this.openingTrigger = !!$trigger ? $trigger : undefined;
+
+        if (this.options.dismissible) {
+          this.handleKeydownBound = this.handleKeydown.bind(this);
+          document.addEventListener('keydown', this.handleKeydownBound);
+        }
 
-        $(this).on('openModal', function() {
-          var modal_id = $(this).attr("href") || '#' + $(this).data('target');
-          openModal();
+        this.animateIn();
+
+        return this;
+      }
+
+      /**
+       * Close Modal
+       */
+
+    }, {
+      key: 'close',
+      value: function close() {
+        if (!this.isOpen) {
+          return;
+        }
+
+        this.isOpen = false;
+        this.$el[0].classList.remove('open');
+        document.body.style.overflow = null;
+
+        if (this.options.dismissible) {
+          document.removeEventListener('keydown', this.handleKeydownBound);
+        }
+
+        this.animateOut();
+
+        return this;
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new Modal($(this), options));
         });
+        return arr;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Modal;
+  }();
+
+  /**
+   * @static
+   * @memberof Modal
+   */
 
-        $(this).on('closeModal', function() {
-          closeModal();
+
+  Modal._increment = 0;
+
+  /**
+   * @static
+   * @memberof Modal
+   */
+  Modal._count = 0;
+
+  window.Materialize.Modal = Modal;
+
+  $.fn.modal = function (methodOrOptions) {
+    // Call plugin method if valid method name is passed in
+    if (Modal.prototype[methodOrOptions]) {
+      // Getter methods
+      if (methodOrOptions.slice(0, 3) === 'get') {
+        return this.first()[0].M_Modal[methodOrOptions]();
+
+        // Void methods
+      } else {
+        return this.each(function () {
+          this.M_Modal[methodOrOptions]();
         });
-      }); // done return
-    },
-    open : function() {
-      methods.init.apply( this, arguments );
-      $(this).trigger('openModal');
-    },
-    close : function() {
-      $(this).trigger('closeModal');
-    }
-  };
+      }
+
+      // Initialize plugin if options or no argument is passed in
+    } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
+      Modal.init(this, arguments[0]);
+      return this;
 
-  $.fn.modal = function(methodOrOptions) {
-    if ( methods[methodOrOptions] ) {
-      return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
-    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
-      // Default to "init"
-      return methods.init.apply( this, arguments );
+      // Return error if an unrecognized  method name is passed in
     } else {
-      $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.modal' );
+      $.error('Method ' + methodOrOptions + ' does not exist on jQuery.modal');
     }
   };
 })(jQuery);