@meve/ui/es/ripple/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";


var ANIMATION_DURATION = 300;

function setStyles(element) {
  var _window$getComputedSt = window.getComputedStyle(element),
      zIndex = _window$getComputedSt.zIndex,
      position = _window$getComputedSt.position;

  element.style.overflow = 'hidden';
  element.style.overflowX = 'hidden';
  element.style.overflowY = 'hidden';
  position === 'static' && (element.style.position = 'relative');
  zIndex === 'auto' && (element.style.zIndex = '1');
}

function computeRippleStyles(element, event) {
  var _element$getBoundingC = element.getBoundingClientRect(),
      top = _element$getBoundingC.top,
      left = _element$getBoundingC.left;

  var clientWidth = element.clientWidth,
      clientHeight = element.clientHeight;
  var radius = Math.sqrt(Math.pow(clientWidth, 2) + Math.pow(clientHeight, 2)) / 2;
  var size = radius * 2;
  var localX = event.touches[0].clientX - left;
  var localY = event.touches[0].clientY - top;
  var centerX = (clientWidth - radius * 2) / 2;
  var centerY = (clientHeight - radius * 2) / 2;
  var x = localX - radius;
  var y = localY - radius;
  return {
    x: x,
    y: y,
    centerX: centerX,
    centerY: centerY,
    size: size
  };
}

function createRipple(event) {
  var _this = this;

  var _ripple = this._ripple;

  _ripple.removeRipple();

  if (_ripple.disabled || _ripple.tasker) {
    return;
  }

  var task = function task() {
    var _ripple$color;

    _ripple.tasker = null;

    var _computeRippleStyles = computeRippleStyles(_this, event),
        x = _computeRippleStyles.x,
        y = _computeRippleStyles.y,
        centerX = _computeRippleStyles.centerX,
        centerY = _computeRippleStyles.centerY,
        size = _computeRippleStyles.size;

    var ripple = document.createElement('div');
    ripple.classList.add('m-ripple');
    ripple.style.opacity = "0";
    ripple.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
    ripple.style.width = size + "px";
    ripple.style.height = size + "px";
    ripple.style.backgroundColor = (_ripple$color = _ripple.color) != null ? _ripple$color : 'currentColor';
    ripple.dataset.createdAt = String(performance.now());
    setStyles(_this);

    _this.appendChild(ripple);

    window.setTimeout(function () {
      ripple.style.transform = "translate(" + centerX + "px, " + centerY + "px) scale3d(1, 1, 1)";
      ripple.style.opacity = ".25";
    }, 20);
  };

  _ripple.tasker = window.setTimeout(task, 60);
}

function removeRipple() {
  var _this2 = this;

  var _ripple = this._ripple;

  var task = function task() {
    var ripples = _this2.querySelectorAll('.m-ripple');

    if (!ripples.length) {
      return;
    }

    var lastRipple = ripples[ripples.length - 1];
    var delay = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt);
    setTimeout(function () {
      lastRipple.style.opacity = "0";
      setTimeout(function () {
        var _lastRipple$parentNod;

        return (_lastRipple$parentNod = lastRipple.parentNode) == null ? void 0 : _lastRipple$parentNod.removeChild(lastRipple);
      }, ANIMATION_DURATION);
    }, delay);
  };

  _ripple.tasker ? setTimeout(task, 60) : task();
}

function inserted(el, binding) {
  var _binding$value;

  el._ripple = _extends({
    tasker: null
  }, (_binding$value = binding.value) != null ? _binding$value : {}, {
    removeRipple: removeRipple.bind(el)
  });
  el.addEventListener('touchstart', createRipple, {
    passive: true
  });
  el.addEventListener('dragstart', removeRipple, {
    passive: true
  });
  document.addEventListener('touchend', el._ripple.removeRipple, {
    passive: true
  });
  document.addEventListener('touchcancel', el._ripple.removeRipple, {
    passive: true
  });
}

function unbind(el) {
  el.removeEventListener('touchstart', createRipple);
  el.removeEventListener('dragstart', removeRipple);
  document.removeEventListener('touchend', el._ripple.removeRipple);
  document.removeEventListener('touchcancel', el._ripple.removeRipple);
}

function update(el, binding) {
  var _binding$value2;

  el._ripple = _extends({}, el._ripple, (_binding$value2 = binding.value) != null ? _binding$value2 : {}, {
    tasker: null
  });
}

var Ripple = {
  inserted: inserted,
  unbind: unbind,
  update: update,
  install: function install(app) {
    app.directive('ripple', this);
  }
};
export var _RippleComponent = Ripple;
export default Ripple;