materialize-sass 0.100.2.1 → 1.0.0.alpha1

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

@@ -6,34 +6,25 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   'use strict';
 
   var _defaults = {
-    displayLength: Infinity,
+    html: '',
+    displayLength: 4000,
     inDuration: 300,
     outDuration: 375,
-    className: undefined,
-    completeCallback: undefined,
+    classes: '',
+    completeCallback: null,
     activationPercent: 0.8
   };
 
   var Toast = function () {
-    function Toast(message, displayLength, className, completeCallback) {
+    function Toast(options) {
       _classCallCheck(this, Toast);
 
-      if (!message) {
-        return;
-      }
-
       /**
        * Options for the toast
        * @member Toast#options
        */
-      this.options = {
-        displayLength: displayLength,
-        className: className,
-        completeCallback: completeCallback
-      };
-
-      this.options = $.extend({}, Toast.defaults, this.options);
-      this.message = message;
+      this.options = $.extend({}, Toast.defaults, options);
+      this.message = this.options.html;
 
       /**
        * Describes current pan state toast
@@ -52,32 +43,27 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       // Create new toast
       Toast._toasts.push(this);
-      var toastElement = this.createToast();
+      var toastElement = this._createToast();
       toastElement.M_Toast = this;
       this.el = toastElement;
       this._animateIn();
-      this.setTimer();
+      this._setTimer();
     }
 
     _createClass(Toast, [{
-      key: 'createToast',
+      key: '_createToast',
 
 
       /**
        * Create toast and append it to toast container
        */
-      value: function createToast() {
+      value: function _createToast() {
         var toast = document.createElement('div');
         toast.classList.add('toast');
 
         // Add custom classes onto toast
-        if (this.options.className) {
-          var classes = this.options.className.split(' ');
-          var i = void 0,
-              count = void 0;
-          for (i = 0, count = classes.length; i < count; i++) {
-            toast.classList.add(classes[i]);
-          }
+        if (!!this.options.classes.length) {
+          $(toast).addClass(this.options.classes);
         }
 
         // Set content
@@ -85,10 +71,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           toast.appendChild(this.message);
 
           // Check if it is jQuery object
-        } else if (this.message instanceof jQuery) {
-          $(toast).append(this.message);
+        } else if (!!this.message.jquery) {
+          $(toast).append(this.message[0]);
 
-          // Insert as text;
+          // Insert as html;
         } else {
           toast.innerHTML = this.message;
         }
@@ -119,8 +105,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'setTimer',
-      value: function setTimer() {
+      key: '_setTimer',
+      value: function _setTimer() {
         var _this = this;
 
         if (this.timeRemaining !== Infinity) {
@@ -132,7 +118,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
             // Animate toast out
             if (_this.timeRemaining <= 0) {
-              _this.remove();
+              _this.dismiss();
             }
           }, 20);
         }
@@ -143,8 +129,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'remove',
-      value: function remove() {
+      key: 'dismiss',
+      value: function dismiss() {
         var _this2 = this;
 
         window.clearInterval(this.counterInterval);
@@ -175,12 +161,23 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         });
       }
     }], [{
-      key: '_createContainer',
+      key: 'getInstance',
 
 
+      /**
+       * Get Instance
+       */
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Toast;
+      }
+
       /**
        * Append toast container and add event handlers
        */
+
+    }, {
+      key: '_createContainer',
       value: function _createContainer() {
         var container = document.createElement('div');
         container.setAttribute('id', 'toast-container');
@@ -259,12 +256,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       /**
        * End drag handler
-       * @param {Event} e
        */
 
     }, {
       key: '_onDragEnd',
-      value: function _onDragEnd(e) {
+      value: function _onDragEnd() {
         if (!!Toast._draggedToast) {
           var toast = Toast._draggedToast;
           toast.panning = false;
@@ -277,7 +273,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           // Remove toast
           if (shouldBeDismissed) {
             toast.wasSwiped = true;
-            toast.remove();
+            toast.dismiss();
 
             // Animate toast back to original position
           } else {
@@ -309,10 +305,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
        */
 
     }, {
-      key: 'removeAll',
-      value: function removeAll() {
+      key: 'dismissAll',
+      value: function dismissAll() {
         for (var toastIndex in Toast._toasts) {
-          Toast._toasts[toastIndex].remove();
+          Toast._toasts[toastIndex].dismiss();
         }
       }
     }, {
@@ -347,8 +343,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
    */
   Toast._draggedToast = null;
 
-  Materialize.Toast = Toast;
-  Materialize.toast = function (message, displayLength, className, completeCallback) {
-    return new Toast(message, displayLength, className, completeCallback);
+  M.Toast = Toast;
+  M.toast = function (options) {
+    return new Toast(options);
   };
-})(jQuery, Materialize.Vel);
+})(cash, M.Vel);

data/assets/javascripts/materialize/tooltip.js

@@ -0,0 +1,325 @@
+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 = {
+    exitDelay: 200,
+    enterDelay: 0,
+    html: null,
+    margin: 5,
+    inDuration: 300,
+    outDuration: 250,
+    position: 'bottom',
+    transitionMovement: 10
+  };
+
+  /**
+   * @class
+   *
+   */
+
+  var Tooltip = function () {
+    /**
+     * Construct Tooltip instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function Tooltip(el, options) {
+      _classCallCheck(this, Tooltip);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_Tooltip) {
+        el.M_Tooltip.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_Tooltip = this;
+      this.options = $.extend({}, Tooltip.defaults, options);
+
+      this.isOpen = false;
+      this.isHovered = false;
+      this._appendTooltipEl();
+      this._setupEventHandlers();
+    }
+
+    _createClass(Tooltip, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        $(this.tooltipEl).remove();
+        this._removeEventHandlers();
+        this.$el[0].M_Tooltip = undefined;
+      }
+    }, {
+      key: '_appendTooltipEl',
+      value: function _appendTooltipEl() {
+        var tooltipEl = document.createElement('div');
+        tooltipEl.classList.add('material-tooltip');
+        this.tooltipEl = tooltipEl;
+
+        var tooltipContentEl = document.createElement('div');
+        tooltipContentEl.classList.add('tooltip-content');
+        tooltipContentEl.innerHTML = this.options.html;
+        tooltipEl.appendChild(tooltipContentEl);
+        document.body.appendChild(tooltipEl);
+      }
+    }, {
+      key: '_updateTooltipContent',
+      value: function _updateTooltipContent() {
+        this.tooltipEl.querySelector('.tooltip-content').innerHTML = this.options.html;
+      }
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this.handleMouseEnterBound = this._handleMouseEnter.bind(this);
+        this.handleMouseLeaveBound = this._handleMouseLeave.bind(this);
+        this.$el[0].addEventListener('mouseenter', this.handleMouseEnterBound);
+        this.$el[0].addEventListener('mouseleave', this.handleMouseLeaveBound);
+      }
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        this.$el[0].removeEventListener('mouseenter', this.handleMouseEnterBound);
+        this.$el[0].removeEventListener('mouseleave', this.handleMouseLeaveBound);
+      }
+    }, {
+      key: 'open',
+      value: function open() {
+        if (this.isOpen) {
+          return;
+        }
+
+        this.isOpen = true;
+        // Update tooltip content with HTML attribute options
+        this.options = $.extend({}, this.options, this._getAttributeOptions());
+        this._updateTooltipContent();
+        this._setEnterDelayTimeout();
+      }
+    }, {
+      key: 'close',
+      value: function close() {
+        if (!this.isOpen) {
+          return;
+        }
+
+        this.isOpen = false;
+        this._setExitDelayTimeout();
+      }
+
+      /**
+        * Create timeout which delays when the tooltip closes
+        */
+
+    }, {
+      key: '_setExitDelayTimeout',
+      value: function _setExitDelayTimeout() {
+        var _this = this;
+
+        clearTimeout(this._exitDelayTimeout);
+
+        this._exitDelayTimeout = setTimeout(function () {
+          if (_this.isHovered) {
+            return;
+          } else {
+            _this._animateOut();
+          }
+        }, this.options.exitDelay);
+      }
+
+      /**
+       * Create timeout which delays when the toast closes
+       */
+
+    }, {
+      key: '_setEnterDelayTimeout',
+      value: function _setEnterDelayTimeout() {
+        var _this2 = this;
+
+        clearTimeout(this._enterDelayTimeout);
+
+        this._enterDelayTimeout = setTimeout(function () {
+          if (!_this2.isHovered) {
+            return;
+          } else {
+            _this2._animateIn();
+          }
+        }, this.options.enterDelay);
+      }
+    }, {
+      key: '_positionTooltip',
+      value: function _positionTooltip() {
+        var origin = this.$el[0],
+            tooltip = this.tooltipEl,
+            originHeight = origin.offsetHeight,
+            originWidth = origin.offsetWidth,
+            tooltipHeight = tooltip.offsetHeight,
+            tooltipWidth = tooltip.offsetWidth,
+            newCoordinates = void 0,
+            margin = this.options.margin,
+            targetTop = void 0,
+            targetLeft = void 0;
+
+        this.xMovement = 0, this.yMovement = 0;
+
+        targetTop = origin.offsetTop;
+        targetLeft = origin.offsetLeft;
+
+        if (this.options.position === 'top') {
+          targetTop += -tooltipHeight - margin;
+          targetLeft += originWidth / 2 - tooltipWidth / 2;
+          this.yMovement = -this.options.transitionMovement;
+        } else if (this.options.position === 'right') {
+          targetTop += originHeight / 2 - tooltipHeight / 2;
+          targetLeft += originWidth + margin;
+          this.xMovement = this.options.transitionMovement;
+        } else if (this.options.position === 'left') {
+          targetTop += originHeight / 2 - tooltipHeight / 2;
+          targetLeft += -tooltipWidth - margin;
+          this.xMovement = -this.options.transitionMovement;
+        } else {
+          targetTop += originHeight + margin;
+          targetLeft += originWidth / 2 - tooltipWidth / 2;
+          this.yMovement = this.options.transitionMovement;
+        }
+
+        newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+        $(tooltip).css({
+          top: newCoordinates.y + 'px',
+          left: newCoordinates.x + 'px'
+        });
+      }
+    }, {
+      key: '_repositionWithinScreen',
+      value: function _repositionWithinScreen(x, y, width, height) {
+        var scrollLeft = M.getDocumentScrollLeft();
+        var scrollTop = M.getDocumentScrollTop();
+        var newX = x - scrollLeft;
+        var newY = y - scrollTop;
+
+        var bounding = {
+          left: newX,
+          top: newY,
+          width: width,
+          height: height
+        };
+
+        var offset = this.options.margin + this.options.transitionMovement;
+        var edges = M.checkWithinContainer(document.body, bounding, offset);
+
+        if (edges.left) {
+          newX = offset;
+        } else if (edges.right) {
+          newX -= newX + width - window.innerWidth;
+        }
+
+        if (edges.top) {
+          newY = offset;
+        } else if (edges.bottom) {
+          newY -= newY + height - window.innerHeight;
+        }
+
+        return { x: newX + scrollLeft, y: newY + scrollTop };
+      }
+    }, {
+      key: '_animateIn',
+      value: function _animateIn() {
+        this._positionTooltip();
+        this.tooltipEl.style.visibility = 'visible';
+        Vel(this.tooltipEl, 'stop');
+        Vel(this.tooltipEl, {
+          opacity: 1,
+          translateX: this.xMovement,
+          translateY: this.yMovement
+        }, {
+          duration: this.options.inDuration,
+          easing: 'easeOutCubic',
+          queue: false
+        });
+      }
+    }, {
+      key: '_animateOut',
+      value: function _animateOut() {
+        Vel(this.tooltipEl, 'stop');
+        Vel(this.tooltipEl, {
+          opacity: 0,
+          translateX: 0,
+          translateY: 0
+        }, {
+          duration: this.options.outDuration,
+          easing: 'easeOutCubic',
+          queue: false
+        });
+      }
+    }, {
+      key: '_handleMouseEnter',
+      value: function _handleMouseEnter() {
+        this.isHovered = true;
+        this.open();
+      }
+    }, {
+      key: '_handleMouseLeave',
+      value: function _handleMouseLeave() {
+        this.isHovered = false;
+        this.close();
+      }
+    }, {
+      key: '_getAttributeOptions',
+      value: function _getAttributeOptions() {
+        var attributeOptions = {};
+        var tooltipTextOption = this.$el[0].getAttribute('data-tooltip');
+        var positionOption = this.$el[0].getAttribute('data-position');
+
+        if (tooltipTextOption) {
+          attributeOptions.html = tooltipTextOption;
+        }
+
+        if (positionOption) {
+          attributeOptions.position = positionOption;
+        }
+        return attributeOptions;
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new Tooltip(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Tooltip;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Tooltip;
+  }();
+
+  M.Tooltip = Tooltip;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Tooltip, 'tooltip', 'M_Tooltip');
+  }
+})(cash, M.Vel);