materialize-sass 0.100.2.1 → 1.0.0.alpha1

data/assets/javascripts/materialize/materialbox.js

@@ -0,0 +1,432 @@
+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 ($, Vel) {
+  'use strict';
+
+  var _defaults = {
+    inDuration: 275,
+    outDuration: 200
+  };
+
+  /**
+   * @class
+   *
+   */
+
+  var Materialbox = function () {
+    /**
+     * Construct Materialbox instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function Materialbox(el, options) {
+      _classCallCheck(this, Materialbox);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_Materialbox) {
+        el.M_Materialbox.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_Materialbox = this;
+
+      /**
+       * Options for the modal
+       * @member Materialbox#options
+       * @prop {Number} [inDuration=275] - Length in ms of enter transition
+       * @prop {Number} [outDuration=200] - Length in ms of exit transition
+       */
+      this.options = $.extend({}, Materialbox.defaults, options);
+
+      this.overlayActive = false;
+      this.doneAnimating = true;
+      this.placeholder = $('<div></div>').addClass('material-placeholder');
+      this.originalWidth = 0;
+      this.originalHeight = 0;
+      this.originInlineStyles = this.$el.attr('style');
+      this.caption = this.el.getAttribute('data-caption') || "";
+
+      // Wrap
+      this.$el.before(this.placeholder);
+      this.placeholder.append(this.$el);
+
+      this._setupEventHandlers();
+    }
+
+    _createClass(Materialbox, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        this._removeEventHandlers();
+        this.el.M_Materialbox = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this._handleMaterialboxClickBound = this._handleMaterialboxClick.bind(this);
+        this.el.addEventListener('click', this._handleMaterialboxClickBound);
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: 'removeEventHandlers',
+      value: function removeEventHandlers() {
+        this.el.removeEventListener('click', this._handleMaterialboxClickBound);
+      }
+
+      /**
+       * Handle Materialbox Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleMaterialboxClick',
+      value: function _handleMaterialboxClick(e) {
+        // If already modal, return to original
+        if (this.doneAnimating === false || this.overlayActive && this.doneAnimating) {
+          this.close();
+        } else {
+          this.open();
+        }
+      }
+
+      /**
+       * Handle Window Scroll
+       */
+
+    }, {
+      key: '_handleWindowScroll',
+      value: function _handleWindowScroll() {
+        if (this.overlayActive) {
+          this.close();
+        }
+      }
+
+      /**
+       * Handle Window Resize
+       */
+
+    }, {
+      key: '_handleWindowResize',
+      value: function _handleWindowResize() {
+        if (this.overlayActive) {
+          this.close();
+        }
+      }
+
+      /**
+       * Handle Window Resize
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleWindowEscape',
+      value: function _handleWindowEscape(e) {
+        // ESC key
+        if (e.keyCode === 27 && this.doneAnimating && this.overlayActive) {
+          this.close();
+        }
+      }
+
+      /**
+       * Find ancestors with overflow: hidden; and make visible
+       */
+
+    }, {
+      key: '_makeAncestorsOverflowVisible',
+      value: function _makeAncestorsOverflowVisible() {
+        this.ancestorsChanged = $();
+        var ancestor = this.placeholder[0].parentNode;
+        while (ancestor !== null && !$(ancestor).is(document)) {
+          var curr = $(ancestor);
+          if (curr.css('overflow') !== 'visible') {
+            curr.css('overflow', 'visible');
+            if (this.ancestorsChanged === undefined) {
+              this.ancestorsChanged = curr;
+            } else {
+              this.ancestorsChanged = this.ancestorsChanged.add(curr);
+            }
+          }
+          ancestor = ancestor.parentNode;
+        }
+      }
+
+      /**
+       * Animate image in
+       */
+
+    }, {
+      key: '_animateImageIn',
+      value: function _animateImageIn() {
+        var _this = this;
+
+        var velocityOptions = {
+          duration: this.options.inDuration,
+          queue: false,
+          ease: 'easeOutQuad',
+          complete: function () {
+            _this.doneAnimating = true;
+          }
+        };
+
+        var velocityProperties = {
+          height: this.newHeight,
+          width: this.newWidth,
+          left: M.getDocumentScrollLeft() + this.windowWidth / 2 - this.placeholder.offset().left - this.newWidth / 2,
+          top: M.getDocumentScrollTop() + this.windowHeight / 2 - this.placeholder.offset().top - this.newHeight / 2
+        };
+
+        if (this.$el.hasClass('responsive-img')) {
+          velocityProperties.maxWidth = [this.newWidth, this.newWidth];
+          velocityProperties.width = [velocityProperties.width, this.originalWidth];
+        } else {
+          velocityProperties.left = [velocityProperties.left, 0];
+          velocityProperties.top = [velocityProperties.top, 0];
+        }
+
+        Vel(this.el, velocityProperties, velocityOptions);
+      }
+
+      /**
+       * Animate image out
+       */
+
+    }, {
+      key: '_animateImageOut',
+      value: function _animateImageOut() {
+        var _this2 = this;
+
+        var velocityOptions = {
+          duration: this.options.outDuration,
+          queue: false,
+          ease: 'easeOutQuad',
+          complete: function () {
+            _this2.placeholder.css({
+              height: '',
+              width: '',
+              position: '',
+              top: '',
+              left: ''
+            });
+
+            _this2.$el.removeAttr('style');
+            _this2.$el.attr('style', _this2.originInlineStyles);
+
+            // Remove class
+            _this2.$el.removeClass('active');
+            _this2.doneAnimating = true;
+
+            // Remove overflow overrides on ancestors
+            if (_this2.ancestorsChanged.length) {
+              _this2.ancestorsChanged.css('overflow', '');
+            }
+          }
+        };
+
+        Vel(this.el, {
+          width: this.originalWidth,
+          height: this.originalHeight,
+          left: 0,
+          top: 0
+        }, velocityOptions);
+      }
+
+      /**
+       * Update open and close vars
+       */
+
+    }, {
+      key: '_updateVars',
+      value: function _updateVars() {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+        this.caption = this.el.getAttribute('data-caption') || "";
+      }
+
+      /**
+       * Open Materialbox
+       */
+
+    }, {
+      key: 'open',
+      value: function open() {
+        var _this3 = this;
+
+        this._updateVars();
+        this.originalWidth = this.el.getBoundingClientRect().width;
+        this.originalHeight = this.el.getBoundingClientRect().height;
+
+        // Set states
+        this.doneAnimating = false;
+        this.$el.addClass('active');
+        this.overlayActive = true;
+
+        // Set positioning for placeholder
+        this.placeholder.css({
+          width: this.placeholder[0].getBoundingClientRect().width + 'px',
+          height: this.placeholder[0].getBoundingClientRect().height + 'px',
+          position: 'relative',
+          top: 0,
+          left: 0
+        });
+
+        this._makeAncestorsOverflowVisible();
+
+        // Set css on origin
+        this.$el.css({
+          position: 'absolute',
+          'z-index': 1000,
+          'will-change': 'left, top, width, height'
+        });
+
+        // Add overlay
+        this.$overlay = $('<div id="materialbox-overlay"></div>').css({
+          opacity: 0
+        }).one('click', function () {
+          if (_this3.doneAnimating) {
+            _this3.close();
+          }
+        });
+
+        // Put before in origin image to preserve z-index layering.
+        this.$el.before(this.$overlay);
+
+        // Set dimensions if needed
+        var overlayOffset = this.$overlay[0].getBoundingClientRect();
+        this.$overlay.css({
+          width: this.windowWidth + 'px',
+          height: this.windowHeight + 'px',
+          left: -1 * overlayOffset.left + 'px',
+          top: -1 * overlayOffset.top + 'px'
+        });
+
+        // Animate Overlay
+        Vel(this.$overlay[0], { opacity: 1 }, { duration: this.options.inDuration, queue: false, ease: 'easeOutQuad' });
+
+        // Add and animate caption if it exists
+        if (this.caption !== "") {
+          this.$photoCaption = $('<div class="materialbox-caption"></div>');
+          this.$photoCaption.text(this.caption);
+          $('body').append(this.$photoCaption);
+          this.$photoCaption.css({ "display": "inline" });
+          Vel(this.$photoCaption[0], { opacity: 1 }, { duration: this.options.inDuration, queue: false, ease: 'easeOutQuad' });
+        }
+
+        // Resize Image
+        var ratio = 0;
+        var widthPercent = this.originalWidth / this.windowWidth;
+        var heightPercent = this.originalHeight / this.windowHeight;
+        this.newWidth = 0;
+        this.newHeight = 0;
+
+        if (widthPercent > heightPercent) {
+          ratio = this.originalHeight / this.originalWidth;
+          this.newWidth = this.windowWidth * 0.9;
+          this.newHeight = this.windowWidth * 0.9 * ratio;
+        } else {
+          ratio = this.originalWidth / this.originalHeight;
+          this.newWidth = this.windowHeight * 0.9 * ratio;
+          this.newHeight = this.windowHeight * 0.9;
+        }
+
+        this._animateImageIn();
+
+        // Handle Exit triggers
+        this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
+        this._handleWindowResizeBound = this._handleWindowResize.bind(this);
+        this._handleWindowEscapeBound = this._handleWindowEscape.bind(this);
+
+        window.addEventListener('scroll', this._handleWindowScrollBound);
+        window.addEventListener('resize', this._handleWindowResizeBound);
+        window.addEventListener('keyup', this._handleWindowEscapeBound);
+      }
+
+      /**
+       * Close Materialbox
+       */
+
+    }, {
+      key: 'close',
+      value: function close() {
+        var _this4 = this;
+
+        this._updateVars();
+        this.doneAnimating = false;
+
+        Vel(this.el, 'stop');
+        Vel(this.$overlay[0], 'stop');
+        if (this.caption !== "") {
+          Vel(this.$photoCaption[0], 'stop');
+        }
+
+        // disable exit handlers
+        window.removeEventListener('scroll', this._handleWindowScrollBound);
+        window.removeEventListener('resize', this._handleWindowResizeBound);
+        window.removeEventListener('keyup', this._handleWindowEscapeBound);
+
+        Vel(this.$overlay[0], { opacity: 0 }, { duration: this.options.outDuration, queue: false, ease: 'easeOutQuad', complete: function () {
+            _this4.overlayActive = false;
+            _this4.$overlay.remove();
+          } });
+
+        this._animateImageOut();
+
+        // Remove Caption + reset css settings on image
+        if (this.caption !== "") {
+          Vel(this.$photoCaption[0], { opacity: 0 }, { duration: this.options.outDuration, queue: false, ease: 'easeOutQuad', complete: function () {
+              _this4.$photoCaption.remove();
+            } });
+        }
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new Materialbox(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Materialbox;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Materialbox;
+  }();
+
+  M.Materialbox = Materialbox;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Materialbox, 'materialbox', 'M_Materialbox');
+  }
+})(cash, M.Vel);

data/{app/assets → assets}/javascripts/materialize/modal.js

@@ -25,22 +25,20 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     /**
      * Construct Modal instance and set up overlay
      * @constructor
-     * @param {jQuery} $el
+     * @param {Element} el
      * @param {Object} options
      */
-    function Modal($el, options) {
+    function Modal(el, options) {
       _classCallCheck(this, Modal);
 
       // If exists, destroy and reinitialize
-      if (!!$el[0].M_Modal) {
-        $el[0].M_Modal.destroy();
+      if (!!el.M_Modal) {
+        el.M_Modal.destroy();
       }
 
-      /**
-       * The jQuery element
-       * @type {jQuery}
-       */
-      this.$el = $el;
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_Modal = this;
 
       /**
        * Options for the modal
@@ -62,43 +60,30 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
       this.isOpen = false;
 
-      this.$el[0].M_Modal = this;
-      this.id = $el.attr('id');
-      this.openingTrigger = undefined;
+      this.id = this.$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();
+      this.el.style.zIndex = 1000 + Modal._increment * 2 + 1;
+      this._setupEventHandlers();
     }
 
     _createClass(Modal, [{
-      key: 'getInstance',
-
+      key: 'destroy',
 
-      /**
-       * 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--;
+        this._removeEventHandlers();
+        this.el.removeAttribute('style');
+        this.$overlay.remove();
+        this.el.M_Modal = undefined;
       }
 
       /**
@@ -106,16 +91,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'setupEventHandlers',
-      value: function setupEventHandlers() {
-        this.handleOverlayClickBound = this.handleOverlayClick.bind(this);
-        this.handleModalCloseClickBound = this.handleModalCloseClick.bind(this);
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this._handleOverlayClickBound = this._handleOverlayClick.bind(this);
+        this._handleModalCloseClickBound = this._handleModalCloseClick.bind(this);
 
         if (Modal._count === 1) {
-          document.body.addEventListener('click', this.handleTriggerClick);
+          document.body.addEventListener('click', this._handleTriggerClick);
         }
-        this.$overlay[0].addEventListener('click', this.handleOverlayClickBound);
-        this.$el[0].addEventListener('click', this.handleModalCloseClickBound);
+        this.$overlay[0].addEventListener('click', this._handleOverlayClickBound);
+        this.el.addEventListener('click', this._handleModalCloseClickBound);
       }
 
       /**
@@ -123,13 +108,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'removeEventHandlers',
-      value: function removeEventHandlers() {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
         if (Modal._count === 0) {
-          document.body.removeEventListener('click', this.handleTriggerClick);
+          document.body.removeEventListener('click', this._handleTriggerClick);
         }
-        this.$overlay[0].removeEventListener('click', this.handleOverlayClickBound);
-        this.$el[0].removeEventListener('click', this.handleModalCloseClickBound);
+        this.$overlay[0].removeEventListener('click', this._handleOverlayClickBound);
+        this.el.removeEventListener('click', this._handleModalCloseClickBound);
       }
 
       /**
@@ -138,16 +123,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'handleTriggerClick',
-      value: function handleTriggerClick(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');
-          }
+        if ($trigger.length) {
+          var modalId = M.getIdFromTrigger($trigger[0]);
           var modalInstance = document.getElementById(modalId).M_Modal;
           if (modalInstance) {
             modalInstance.open($trigger);
@@ -161,8 +141,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'handleOverlayClick',
-      value: function handleOverlayClick() {
+      key: '_handleOverlayClick',
+      value: function _handleOverlayClick() {
         if (this.options.dismissible) {
           this.close();
         }
@@ -174,10 +154,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'handleModalCloseClick',
-      value: function handleModalCloseClick(e) {
+      key: '_handleModalCloseClick',
+      value: function _handleModalCloseClick(e) {
         var $closeTrigger = $(e.target).closest('.modal-close');
-        if (e.target && $closeTrigger.length) {
+        if ($closeTrigger.length) {
           this.close();
         }
       }
@@ -188,8 +168,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'handleKeydown',
-      value: function handleKeydown(e) {
+      key: '_handleKeydown',
+      value: function _handleKeydown(e) {
         // ESC key
         if (e.keyCode === 27 && this.options.dismissible) {
           this.close();
@@ -201,12 +181,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'animateIn',
-      value: function animateIn() {
+      key: '_animateIn',
+      value: function _animateIn() {
         var _this = this;
 
         // Set initial styles
-        $.extend(this.$el[0].style, {
+        $.extend(this.el.style, {
           display: 'block',
           opacity: 0
         });
@@ -226,20 +206,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           // Handle modal ready callback
           complete: function () {
             if (typeof _this.options.ready === 'function') {
-              _this.options.ready.call(_this, _this.$el, _this.openingTrigger);
+              _this.options.ready.call(_this, _this.el, _this._openingTrigger);
             }
           }
         };
 
         // Bottom sheet animation
-        if (this.$el[0].classList.contains('bottom-sheet')) {
-          Vel(this.$el[0], { bottom: 0, opacity: 1 }, enterVelocityOptions);
+        if (this.el.classList.contains('bottom-sheet')) {
+          Vel(this.el, { 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);
+          Vel.hook(this.el, 'scaleX', 0.8);
+          Vel.hook(this.el, 'scaleY', 0.8);
+          this.el.style.top = this.options.startingTop;
+          Vel(this.el, { top: this.options.endingTop, opacity: 1, scaleX: 1, scaleY: 1 }, enterVelocityOptions);
         }
       }
 
@@ -248,8 +229,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'animateOut',
-      value: function animateOut() {
+      key: '_animateOut',
+      value: function _animateOut() {
         var _this2 = this;
 
         // Animate overlay
@@ -262,28 +243,28 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           ease: 'easeOutCubic',
           // Handle modal ready callback
           complete: function () {
-            _this2.$el[0].style.display = 'none';
+            _this2.el.style.display = 'none';
             // Call complete callback
             if (typeof _this2.options.complete === 'function') {
               _this2.options.complete.call(_this2, _this2.$el);
             }
-            _this2.$overlay[0].parentNode.removeChild(_this2.$overlay[0]);
+            _this2.$overlay.remove();
           }
         };
 
         // Bottom sheet animation
-        if (this.$el[0].classList.contains('bottom-sheet')) {
-          Vel(this.$el[0], { bottom: '-100%', opacity: 0 }, exitVelocityOptions);
+        if (this.el.classList.contains('bottom-sheet')) {
+          Vel(this.el, { bottom: '-100%', opacity: 0 }, exitVelocityOptions);
 
           // Normal modal animation
         } else {
-          Vel(this.$el[0], { top: this.options.startingTop, opacity: 0, scaleX: 0.7 }, exitVelocityOptions);
+          Vel(this.el, { top: this.options.startingTop, opacity: 0, scaleX: 0.8, scaleY: 0.8 }, exitVelocityOptions);
         }
       }
 
       /**
        * Open Modal
-       * @param {jQuery} [$trigger]
+       * @param {cash} [$trigger]
        */
 
     }, {
@@ -296,19 +277,18 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.isOpen = true;
         var body = document.body;
         body.style.overflow = 'hidden';
-        this.$el[0].classList.add('open');
+        this.el.classList.add('open');
         body.appendChild(this.$overlay[0]);
 
         // Set opening trigger, undefined indicates modal was opened by javascript
-        this.openingTrigger = !!$trigger ? $trigger : undefined;
+        this._openingTrigger = !!$trigger ? $trigger : undefined;
 
         if (this.options.dismissible) {
-          this.handleKeydownBound = this.handleKeydown.bind(this);
-          document.addEventListener('keydown', this.handleKeydownBound);
+          this._handleKeydownBound = this._handleKeydown.bind(this);
+          document.addEventListener('keydown', this._handleKeydownBound);
         }
 
-        this.animateIn();
-
+        this._animateIn();
         return this;
       }
 
@@ -324,15 +304,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         }
 
         this.isOpen = false;
-        this.$el[0].classList.remove('open');
+        this.el.classList.remove('open');
         document.body.style.overflow = '';
 
         if (this.options.dismissible) {
-          document.removeEventListener('keydown', this.handleKeydownBound);
+          document.removeEventListener('keydown', this._handleKeydownBound);
         }
 
-        this.animateOut();
-
+        this._animateOut();
         return this;
       }
     }], [{
@@ -340,10 +319,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function init($els, options) {
         var arr = [];
         $els.each(function () {
-          arr.push(new Modal($(this), options));
+          arr.push(new Modal(this, options));
         });
         return arr;
       }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Modal;
+      }
     }, {
       key: 'defaults',
       get: function () {
@@ -368,30 +358,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
    */
   Modal._count = 0;
 
-  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]();
-        });
-      }
-
-      // Initialize plugin if options or no argument is passed in
-    } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
-      Modal.init(this, arguments[0]);
-      return this;
+  M.Modal = Modal;
 
-      // Return error if an unrecognized  method name is passed in
-    } else {
-      $.error('Method ' + methodOrOptions + ' does not exist on jQuery.modal');
-    }
-  };
-})(jQuery, Materialize.Vel);
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Modal, 'modal', 'M_Modal');
+  }
+})(cash, M.Vel);