mdb-ui-kit/js/dist/ripples.js.map

{"version":3,"sources":["../src/ripples.js"],"names":[],"mappings":"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","file":"ripples.js","sourcesContent":["import Util from './util'\n\nconst Ripples = (($) => {\n\n  /**\n   * ------------------------------------------------------------------------\n   * Constants\n   * ------------------------------------------------------------------------\n   */\n  const NAME = 'ripples'\n  const DATA_KEY = `mdb.${NAME}`\n  const JQUERY_NO_CONFLICT = $.fn[NAME]\n\n  const ClassName = {\n    CONTAINER: 'ripple-container',\n    DECORATOR: 'ripple-decorator'\n  }\n\n  const Selector = {\n    CONTAINER: `.${ClassName.CONTAINER}`,\n    DECORATOR: `.${ClassName.DECORATOR}` //,\n  }\n\n\n  const Default = {\n    container: {\n      template: `<div class='${ClassName.CONTAINER}'></div>`\n    },\n    decorator: {\n      template: `${ClassName.DECORATOR}'></div>`\n    },\n    trigger: {\n      start: 'mousedown touchstart',\n      end: 'mouseup mouseleave touchend'\n    },\n    touchUserAgentRegex: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i,\n    duration: 500\n  }\n\n  /**\n   * ------------------------------------------------------------------------\n   * Class Definition\n   * ------------------------------------------------------------------------\n   */\n  class Ripples {\n\n    constructor(element, config) {\n      this.element = $(element)\n      this.config = $.extend({}, Default, config)\n\n      // attach initial listener\n      this.element.on(this.config.triggerStart, this._onStartRipple)\n    }\n\n    dispose() {\n      $.removeData(this.element, DATA_KEY)\n      this.element = null\n      this.containerElement = null\n      this.decoratorElement = null\n      this.config = null\n    }\n\n    // ------------------------------------------------------------------------\n    // private\n\n    _onStartRipple(event) {\n\n      // Verify if the user is just touching on a device and return if so\n      if (this.isTouch() && event.type === 'mousedown') {\n        return\n      }\n\n      // Find or create the ripple container element\n      this._findOrCreateContainer()\n\n      // Get relY and relX positions of the container element\n      let relY = this._getRelY(event)\n      let relX = this._getRelX(event)\n\n      // If relY and/or relX are false, return the event\n      if (!relY && !relX) {\n        return\n      }\n\n      // set the location and color each time (even if element is cached)\n      this.decoratorElement.css({\n       'left': relX,\n       'top': relY,\n       'background-color': this._getRipplesColor()\n       })\n\n      // Make sure the ripple has the styles applied (ugly hack but it works)\n      this._forceStyleApplication()\n\n      // Turn on the ripple animation\n      this.rippleOn()\n\n      // Call the rippleEnd function when the transition 'on' ends\n      setTimeout(() => {\n        this.rippleEnd()\n      }, this.config.duration)\n\n      // Detect when the user leaves the element (attach only when necessary for performance)\n      this.element.on(this.config.triggerEnd, () => {\n        this.decoratorElement.data('mousedown', 'off')\n\n        if (this.decoratorElement.data('animating') === 'off') {\n          this.rippleOut()\n        }\n      })\n    }\n\n    _findOrCreateContainer() {\n      if (!this.containerElement || !this.containerElement.length > 0) {\n        this.element.append(this.config.container.template)\n        this.containerElement = this.element.find(Selector.CONTAINER)\n      }\n\n      // always add the rippleElement, it is always removed\n      this.containerElement.append(this.config.element.template)\n      this.decoratorElement = this.containerElement.find(Selector.DECORATOR)\n    }\n\n    // Make sure the ripple has the styles applied (ugly hack but it works)\n    _forceStyleApplication() {\n      return window.getComputedStyle(this.decoratorElement[0]).opacity\n    }\n\n    /**\n     * Get the relX\n     */\n    _getRelX(event) {\n      let wrapperOffset = this.containerElement.offset()\n\n      let result = null\n      if (!this.isTouch()) {\n        // Get the mouse position relative to the ripple wrapper\n        result = event.pageX - wrapperOffset.left\n      } else {\n         // Make sure the user is using only one finger and then get the touch\n         //  position relative to the ripple wrapper\n        event = event.originalEvent\n\n        if (event.touches.length === 1) {\n          result = event.touches[0].pageX - wrapperOffset.left\n        } else {\n          result = false\n        }\n      }\n\n      return result\n    }\n\n    /**\n     * Get the relY\n     */\n    _getRelY(event) {\n      let containerOffset = this.containerElement.offset()\n      let result = null\n\n      if (!this.isTouch()) {\n        /**\n         * Get the mouse position relative to the ripple wrapper\n         */\n        result = event.pageY - containerOffset.top\n      } else {\n        /**\n         * Make sure the user is using only one finger and then get the touch\n         * position relative to the ripple wrapper\n         */\n        event = event.originalEvent\n\n        if (event.touches.length === 1) {\n          result =  event.touches[0].pageY - containerOffset.top\n        } else {\n          result = false\n        }\n      }\n\n      return result\n    }\n\n    /**\n     * Get the ripple color\n     */\n    _getRipplesColor() {\n      let color = this.element.data('ripple-color') ? this.element.data('ripple-color') : window.getComputedStyle(this.element[0]).color\n      return color\n    }\n\n    /**\n     * Verify if the client is using a mobile device\n     */\n    isTouch() {\n      return this.config.touchUserAgentRegex.test(navigator.userAgent)\n    }\n\n    /**\n     * End the animation of the ripple\n     */\n    rippleEnd() {\n      this.decoratorElement.data('animating', 'off')\n\n      if (this.decoratorElement.data('mousedown') === 'off') {\n        this.rippleOut(this.decoratorElement)\n      }\n    }\n\n    /**\n     * Turn off the ripple effect\n     */\n    rippleOut() {\n      this.decoratorElement.off()\n\n      if (Util.transitionEndSupported()) {\n        this.decoratorElement.addClass('ripple-out')\n      } else {\n        this.decoratorElement.animate({ 'opacity': 0 }, 100, () => {\n          this.decoratorElement.triggerStart('transitionend')\n        })\n      }\n\n      this.decoratorElement.on(Util.transitionEndSelector(), () => {\n        this.decoratorElement.remove()\n        this.decoratorElement = null\n      })\n    }\n\n    /**\n     * Turn on the ripple effect\n     */\n    rippleOn() {\n      let size = this._getNewSize()\n\n      if (Util.transitionEndSupported()) {\n        this.decoratorElement\n          .css({\n            '-ms-transform': `scale(${size})`,\n            '-moz-transform': `scale(${size})`,\n            '-webkit-transform': `scale(${size})`,\n            'transform': `scale(${size})`\n          })\n          .addClass('ripple-on')\n          .data('animating', 'on')\n          .data('mousedown', 'on')\n      } else {\n        this.decoratorElement.animate({\n          'width': Math.max(this.element.outerWidth(), this.element.outerHeight()) * 2,\n          'height': Math.max(this.element.outerWidth(), this.element.outerHeight()) * 2,\n          'margin-left': Math.max(this.element.outerWidth(), this.element.outerHeight()) * (-1),\n          'margin-top': Math.max(this.element.outerWidth(), this.element.outerHeight()) * (-1),\n          'opacity': 0.2\n        }, this.config.duration, () => {\n          this.decoratorElement.triggerStart('transitionend')\n        })\n      }\n    }\n\n    /**\n     * Get the new size based on the element height/width and the ripple width\n     */\n    _getNewSize() {\n      return (Math.max(this.element.outerWidth(), this.element.outerHeight()) / this.decoratorElement.outerWidth()) * 2.5\n    }\n\n    // ------------------------------------------------------------------------\n    // static\n\n    static _jQueryInterface(config) {\n      return this.each(() => {\n        let element = $(this)\n        let data = element.data(DATA_KEY)\n\n        if (!data) {\n          data = new Ripples(this, config)\n          element.data(DATA_KEY, data)\n        }\n      })\n    }\n  }\n\n  /**\n   * ------------------------------------------------------------------------\n   * jQuery\n   * ------------------------------------------------------------------------\n   */\n  $.fn[NAME] = Ripples._jQueryInterface\n  $.fn[NAME].Constructor = Ripples\n  $.fn[NAME].noConflict = () => {\n    $.fn[NAME] = JQUERY_NO_CONFLICT\n    return Ripples._jQueryInterface\n  }\n\n  return Ripples\n\n})(jQuery)\n\nexport default Ripples\n"]}