administrate-materialize-theme 0.1.0

data/app/assets/javascripts/administrate-materialize-theme/toasts.js

@@ -0,0 +1,310 @@
+(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);

data/app/assets/javascripts/administrate-materialize-theme/tooltip.js

@@ -0,0 +1,303 @@
+(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);