kmaterialize 2.0.0 → 2.3.3-1.0.0

package/js/toasts.js

@@ -1,310 +0,0 @@
-(function($, anim) {
-  'use strict';
-
-  let _defaults = {
-    html: '',
-    displayLength: 4000,
-    inDuration: 300,
-    outDuration: 375,
-    classes: '',
-    completeCallback: null,
-    activationPercent: 0.8
-  };
-
-  class Toast {
-    constructor(options) {
-      /**
-       * Options for the toast
-       * @member Toast#options
-       */
-      this.options = $.extend({}, Toast.defaults, options);
-      this.message = this.options.html;
-
-      /**
-       * Describes current pan state toast
-       * @type {Boolean}
-       */
-      this.panning = false;
-
-      /**
-       * Time remaining until toast is removed
-       */
-      this.timeRemaining = this.options.displayLength;
-
-      if (Toast._toasts.length === 0) {
-        Toast._createContainer();
-      }
-
-      // Create new toast
-      Toast._toasts.push(this);
-      let toastElement = this._createToast();
-      toastElement.M_Toast = this;
-      this.el = toastElement;
-      this.$el = $(toastElement);
-      this._animateIn();
-      this._setTimer();
-    }
-
-    static get defaults() {
-      return _defaults;
-    }
-
-    /**
-     * Get Instance
-     */
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Toast;
-    }
-
-    /**
-     * Append toast container and add event handlers
-     */
-    static _createContainer() {
-      let container = document.createElement('div');
-      container.setAttribute('id', 'toast-container');
-
-      // Add event handler
-      container.addEventListener('touchstart', Toast._onDragStart);
-      container.addEventListener('touchmove', Toast._onDragMove);
-      container.addEventListener('touchend', Toast._onDragEnd);
-
-      container.addEventListener('mousedown', Toast._onDragStart);
-      document.addEventListener('mousemove', Toast._onDragMove);
-      document.addEventListener('mouseup', Toast._onDragEnd);
-
-      document.body.appendChild(container);
-      Toast._container = container;
-    }
-
-    /**
-     * Remove toast container and event handlers
-     */
-    static _removeContainer() {
-      // Add event handler
-      document.removeEventListener('mousemove', Toast._onDragMove);
-      document.removeEventListener('mouseup', Toast._onDragEnd);
-
-      $(Toast._container).remove();
-      Toast._container = null;
-    }
-
-    /**
-     * Begin drag handler
-     * @param {Event} e
-     */
-    static _onDragStart(e) {
-      if (e.target && $(e.target).closest('.toast').length) {
-        let $toast = $(e.target).closest('.toast');
-        let toast = $toast[0].M_Toast;
-        toast.panning = true;
-        Toast._draggedToast = toast;
-        toast.el.classList.add('panning');
-        toast.el.style.transition = '';
-        toast.startingXPos = Toast._xPos(e);
-        toast.time = Date.now();
-        toast.xPos = Toast._xPos(e);
-      }
-    }
-
-    /**
-     * Drag move handler
-     * @param {Event} e
-     */
-    static _onDragMove(e) {
-      if (!!Toast._draggedToast) {
-        e.preventDefault();
-        let toast = Toast._draggedToast;
-        toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
-        toast.xPos = Toast._xPos(e);
-        toast.velocityX = toast.deltaX / (Date.now() - toast.time);
-        toast.time = Date.now();
-
-        let totalDeltaX = toast.xPos - toast.startingXPos;
-        let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-        toast.el.style.transform = `translateX(${totalDeltaX}px)`;
-        toast.el.style.opacity = 1 - Math.abs(totalDeltaX / activationDistance);
-      }
-    }
-
-    /**
-     * End drag handler
-     */
-    static _onDragEnd() {
-      if (!!Toast._draggedToast) {
-        let toast = Toast._draggedToast;
-        toast.panning = false;
-        toast.el.classList.remove('panning');
-
-        let totalDeltaX = toast.xPos - toast.startingXPos;
-        let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-        let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
-
-        // Remove toast
-        if (shouldBeDismissed) {
-          toast.wasSwiped = true;
-          toast.dismiss();
-
-          // Animate toast back to original position
-        } else {
-          toast.el.style.transition = 'transform .2s, opacity .2s';
-          toast.el.style.transform = '';
-          toast.el.style.opacity = '';
-        }
-        Toast._draggedToast = null;
-      }
-    }
-
-    /**
-     * Get x position of mouse or touch event
-     * @param {Event} e
-     */
-    static _xPos(e) {
-      if (e.targetTouches && e.targetTouches.length >= 1) {
-        return e.targetTouches[0].clientX;
-      }
-      // mouse event
-      return e.clientX;
-    }
-
-    /**
-     * Remove all toasts
-     */
-    static dismissAll() {
-      for (let toastIndex in Toast._toasts) {
-        Toast._toasts[toastIndex].dismiss();
-      }
-    }
-
-    /**
-     * Create toast and append it to toast container
-     */
-    _createToast() {
-      let toast = document.createElement('div');
-      toast.classList.add('toast');
-
-      // Add custom classes onto toast
-      if (!!this.options.classes.length) {
-        $(toast).addClass(this.options.classes);
-      }
-
-      // Set content
-      if (
-        typeof HTMLElement === 'object'
-          ? this.message instanceof HTMLElement
-          : this.message &&
-            typeof this.message === 'object' &&
-            this.message !== null &&
-            this.message.nodeType === 1 &&
-            typeof this.message.nodeName === 'string'
-      ) {
-        toast.appendChild(this.message);
-
-        // Check if it is jQuery object
-      } else if (!!this.message.jquery) {
-        $(toast).append(this.message[0]);
-
-        // Insert as html;
-      } else {
-        toast.innerHTML = this.message;
-      }
-
-      // Append toasft
-      Toast._container.appendChild(toast);
-      return toast;
-    }
-
-    /**
-     * Animate in toast
-     */
-    _animateIn() {
-      // Animate toast in
-      anim({
-        targets: this.el,
-        top: 0,
-        opacity: 1,
-        duration: this.options.inDuration,
-        easing: 'easeOutCubic'
-      });
-    }
-
-    /**
-     * Create setInterval which automatically removes toast when timeRemaining >= 0
-     * has been reached
-     */
-    _setTimer() {
-      if (this.timeRemaining !== Infinity) {
-        this.counterInterval = setInterval(() => {
-          // If toast is not being dragged, decrease its time remaining
-          if (!this.panning) {
-            this.timeRemaining -= 20;
-          }
-
-          // Animate toast out
-          if (this.timeRemaining <= 0) {
-            this.dismiss();
-          }
-        }, 20);
-      }
-    }
-
-    /**
-     * Dismiss toast with animation
-     */
-    dismiss() {
-      window.clearInterval(this.counterInterval);
-      let activationDistance = this.el.offsetWidth * this.options.activationPercent;
-
-      if (this.wasSwiped) {
-        this.el.style.transition = 'transform .05s, opacity .05s';
-        this.el.style.transform = `translateX(${activationDistance}px)`;
-        this.el.style.opacity = 0;
-      }
-
-      anim({
-        targets: this.el,
-        opacity: 0,
-        marginTop: -40,
-        duration: this.options.outDuration,
-        easing: 'easeOutExpo',
-        complete: () => {
-          // Call the optional callback
-          if (typeof this.options.completeCallback === 'function') {
-            this.options.completeCallback();
-          }
-          // Remove toast from DOM
-          this.$el.remove();
-          Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
-          if (Toast._toasts.length === 0) {
-            Toast._removeContainer();
-          }
-        }
-      });
-    }
-  }
-
-  /**
-   * @static
-   * @memberof Toast
-   * @type {Array.<Toast>}
-   */
-  Toast._toasts = [];
-
-  /**
-   * @static
-   * @memberof Toast
-   */
-  Toast._container = null;
-
-  /**
-   * @static
-   * @memberof Toast
-   * @type {Toast}
-   */
-  Toast._draggedToast = null;
-
-  M.Toast = Toast;
-  M.toast = function(options) {
-    return new Toast(options);
-  };
-})(cash, M.anime);

package/js/tooltip.js

@@ -1,303 +0,0 @@
-(function($, anim) {
-  'use strict';
-
-  let _defaults = {
-    exitDelay: 200,
-    enterDelay: 0,
-    html: null,
-    margin: 5,
-    inDuration: 250,
-    outDuration: 200,
-    position: 'bottom',
-    transitionMovement: 10
-  };
-
-  /**
-   * @class
-   *
-   */
-  class Tooltip extends Component {
-    /**
-     * Construct Tooltip instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
-    constructor(el, options) {
-      super(Tooltip, el, options);
-
-      this.el.M_Tooltip = this;
-      this.options = $.extend({}, Tooltip.defaults, options);
-
-      this.isOpen = false;
-      this.isHovered = false;
-      this.isFocused = false;
-      this._appendTooltipEl();
-      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_Tooltip;
-    }
-
-    /**
-     * Teardown component
-     */
-    destroy() {
-      $(this.tooltipEl).remove();
-      this._removeEventHandlers();
-      this.el.M_Tooltip = undefined;
-    }
-
-    _appendTooltipEl() {
-      let tooltipEl = document.createElement('div');
-      tooltipEl.classList.add('material-tooltip');
-      this.tooltipEl = tooltipEl;
-
-      let tooltipContentEl = document.createElement('div');
-      tooltipContentEl.classList.add('tooltip-content');
-      tooltipContentEl.innerHTML = this.options.html;
-      tooltipEl.appendChild(tooltipContentEl);
-      document.body.appendChild(tooltipEl);
-    }
-
-    _updateTooltipContent() {
-      this.tooltipEl.querySelector('.tooltip-content').innerHTML = this.options.html;
-    }
-
-    _setupEventHandlers() {
-      this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
-      this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
-      this._handleFocusBound = this._handleFocus.bind(this);
-      this._handleBlurBound = this._handleBlur.bind(this);
-      this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
-      this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
-      this.el.addEventListener('focus', this._handleFocusBound, true);
-      this.el.addEventListener('blur', this._handleBlurBound, true);
-    }
-
-    _removeEventHandlers() {
-      this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
-      this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
-      this.el.removeEventListener('focus', this._handleFocusBound, true);
-      this.el.removeEventListener('blur', this._handleBlurBound, true);
-    }
-
-    open(isManual) {
-      if (this.isOpen) {
-        return;
-      }
-      isManual = isManual === undefined ? true : undefined; // Default value true
-      this.isOpen = true;
-      // Update tooltip content with HTML attribute options
-      this.options = $.extend({}, this.options, this._getAttributeOptions());
-      this._updateTooltipContent();
-      this._setEnterDelayTimeout(isManual);
-    }
-
-    close() {
-      if (!this.isOpen) {
-        return;
-      }
-
-      this.isHovered = false;
-      this.isFocused = false;
-      this.isOpen = false;
-      this._setExitDelayTimeout();
-    }
-
-    /**
-     * Create timeout which delays when the tooltip closes
-     */
-    _setExitDelayTimeout() {
-      clearTimeout(this._exitDelayTimeout);
-
-      this._exitDelayTimeout = setTimeout(() => {
-        if (this.isHovered || this.isFocused) {
-          return;
-        }
-
-        this._animateOut();
-      }, this.options.exitDelay);
-    }
-
-    /**
-     * Create timeout which delays when the toast closes
-     */
-    _setEnterDelayTimeout(isManual) {
-      clearTimeout(this._enterDelayTimeout);
-
-      this._enterDelayTimeout = setTimeout(() => {
-        if (!this.isHovered && !this.isFocused && !isManual) {
-          return;
-        }
-
-        this._animateIn();
-      }, this.options.enterDelay);
-    }
-
-    _positionTooltip() {
-      let origin = this.el,
-        tooltip = this.tooltipEl,
-        originHeight = origin.offsetHeight,
-        originWidth = origin.offsetWidth,
-        tooltipHeight = tooltip.offsetHeight,
-        tooltipWidth = tooltip.offsetWidth,
-        newCoordinates,
-        margin = this.options.margin,
-        targetTop,
-        targetLeft;
-
-      (this.xMovement = 0), (this.yMovement = 0);
-
-      targetTop = origin.getBoundingClientRect().top + M.getDocumentScrollTop();
-      targetLeft = origin.getBoundingClientRect().left + M.getDocumentScrollLeft();
-
-      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'
-      });
-    }
-
-    _repositionWithinScreen(x, y, width, height) {
-      let scrollLeft = M.getDocumentScrollLeft();
-      let scrollTop = M.getDocumentScrollTop();
-      let newX = x - scrollLeft;
-      let newY = y - scrollTop;
-
-      let bounding = {
-        left: newX,
-        top: newY,
-        width: width,
-        height: height
-      };
-
-      let offset = this.options.margin + this.options.transitionMovement;
-      let 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
-      };
-    }
-
-    _animateIn() {
-      this._positionTooltip();
-      this.tooltipEl.style.visibility = 'visible';
-      anim.remove(this.tooltipEl);
-      anim({
-        targets: this.tooltipEl,
-        opacity: 1,
-        translateX: this.xMovement,
-        translateY: this.yMovement,
-        duration: this.options.inDuration,
-        easing: 'easeOutCubic'
-      });
-    }
-
-    _animateOut() {
-      anim.remove(this.tooltipEl);
-      anim({
-        targets: this.tooltipEl,
-        opacity: 0,
-        translateX: 0,
-        translateY: 0,
-        duration: this.options.outDuration,
-        easing: 'easeOutCubic'
-      });
-    }
-
-    _handleMouseEnter() {
-      this.isHovered = true;
-      this.isFocused = false; // Allows close of tooltip when opened by focus.
-      this.open(false);
-    }
-
-    _handleMouseLeave() {
-      this.isHovered = false;
-      this.isFocused = false; // Allows close of tooltip when opened by focus.
-      this.close();
-    }
-
-    _handleFocus() {
-      if (M.tabPressed) {
-        this.isFocused = true;
-        this.open(false);
-      }
-    }
-
-    _handleBlur() {
-      this.isFocused = false;
-      this.close();
-    }
-
-    _getAttributeOptions() {
-      let attributeOptions = {};
-      let tooltipTextOption = this.el.getAttribute('data-tooltip');
-      let positionOption = this.el.getAttribute('data-position');
-
-      if (tooltipTextOption) {
-        attributeOptions.html = tooltipTextOption;
-      }
-
-      if (positionOption) {
-        attributeOptions.position = positionOption;
-      }
-      return attributeOptions;
-    }
-  }
-
-  M.Tooltip = Tooltip;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Tooltip, 'tooltip', 'M_Tooltip');
-  }
-})(cash, M.anime);