SHARE
TWEET

Untitled

a guest Jul 22nd, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function transform(el, value) {
  2.   el.style["transform"] = value;
  3.   el.style["webkitTransform"] = value;
  4. }
  5.  
  6. function opacity(el, value) {
  7.   el.style["opacity"] = value.toString();
  8. }
  9.  
  10. const calculate = (e, el, value = {}) => {
  11.   const offset = el.getBoundingClientRect();
  12.   const target = e;
  13.   const localX = target.clientX - offset.left;
  14.   const localY = target.clientY - offset.top;
  15.   let radius = 0;
  16.   let scale = 0.3;
  17.   if (el._ripple && el._ripple.circle) {
  18.     scale = 0.15;
  19.     radius = el.clientWidth / 2;
  20.     radius = value.center
  21.       ? radius
  22.       : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
  23.   } else {
  24.     radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
  25.   }
  26.   const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
  27.   const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
  28.   const x = value.center ? centerX : `${localX - radius}px`;
  29.   const y = value.center ? centerY : `${localY - radius}px`;
  30.   return { radius, scale, x, y, centerX, centerY };
  31. };
  32.  
  33. const ripple = {
  34.   /* eslint-disable max-statements */
  35.   show(e, el, value = {}) {
  36.     if (!el._ripple || !el._ripple.enabled) {
  37.       return;
  38.     }
  39.     const container = document.createElement("span");
  40.     const animation = document.createElement("span");
  41.     container.appendChild(animation);
  42.     container.className = "v-ripple__container";
  43.     if (value.class) {
  44.       container.className += ` ${value.class}`;
  45.     }
  46.     const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value);
  47.     const size = `${radius * 2}px`;
  48.     animation.className = "v-ripple__animation";
  49.     animation.style.width = size;
  50.     animation.style.height = size;
  51.     el.appendChild(container);
  52.     const computed = window.getComputedStyle(el);
  53.     if (computed && computed.position === "static") {
  54.       el.style.position = "relative";
  55.       el.dataset.previousPosition = "static";
  56.     }
  57.     animation.classList.add("v-ripple__animation--enter");
  58.     animation.classList.add("v-ripple__animation--visible");
  59.     transform(
  60.       animation,
  61.       `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`
  62.     );
  63.     opacity(animation, 0);
  64.     animation.dataset.activated = String(performance.now());
  65.     setTimeout(() => {
  66.       animation.classList.remove("v-ripple__animation--enter");
  67.       animation.classList.add("v-ripple__animation--in");
  68.       transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
  69.       opacity(animation, 0.25);
  70.     }, 0);
  71.   },
  72.   hide(el) {
  73.     if (!el || !el._ripple || !el._ripple.enabled) return;
  74.     const ripples = el.getElementsByClassName("v-ripple__animation");
  75.     if (ripples.length === 0) return;
  76.     const animation = ripples[ripples.length - 1];
  77.     if (animation.dataset.isHiding) return;
  78.     else animation.dataset.isHiding = "true";
  79.     const diff = performance.now() - Number(animation.dataset.activated);
  80.     const delay = Math.max(250 - diff, 0);
  81.     setTimeout(() => {
  82.       animation.classList.remove("v-ripple__animation--in");
  83.       animation.classList.add("v-ripple__animation--out");
  84.       opacity(animation, 0);
  85.       setTimeout(() => {
  86.         const ripples = el.getElementsByClassName("v-ripple__animation");
  87.         if (ripples.length === 1 && el.dataset.previousPosition) {
  88.           el.style.position = el.dataset.previousPosition;
  89.           delete el.dataset.previousPosition;
  90.         }
  91.         animation.parentNode && el.removeChild(animation.parentNode);
  92.       }, 300);
  93.     }, delay);
  94.   },
  95. };
  96.  
  97. function isRippleEnabled(value) {
  98.   return typeof value === "undefined" || !!value;
  99. }
  100. function rippleShow(e) {
  101.   const value = {};
  102.   const element = e.currentTarget;
  103.   if (!element || !element._ripple) return;
  104.   value.center = element._ripple.centered;
  105.   if (element._ripple.class) {
  106.     value.class = element._ripple.class;
  107.   }
  108.   ripple.show(e, element, value);
  109. }
  110. function rippleHide(e) {
  111.   const element = e.currentTarget;
  112.   if (!element) return;
  113.   ripple.hide(element);
  114. }
  115. function updateRipple(el, binding, wasEnabled) {
  116.   const enabled = isRippleEnabled(binding.value);
  117.   if (!enabled) {
  118.     ripple.hide(el);
  119.   }
  120.   el._ripple = el._ripple || {};
  121.   el._ripple.enabled = enabled;
  122.   const value = binding.value || {};
  123.   if (value.center) {
  124.     el._ripple.centered = true;
  125.   }
  126.   if (value.class) {
  127.     el._ripple.class = binding.value.class;
  128.   }
  129.   if (value.circle) {
  130.     el._ripple.circle = value.circle;
  131.   }
  132.   if (enabled && !wasEnabled) {
  133.     el.addEventListener("mousedown", rippleShow);
  134.     el.addEventListener("mouseup", rippleHide);
  135.     el.addEventListener("mouseleave", rippleHide);
  136.     // Anchor tags can be dragged, causes other hides to fail - #1537
  137.   } else if (!enabled && wasEnabled) {
  138.     removeListeners(el);
  139.   }
  140. }
  141. function removeListeners(el) {
  142.   el.removeEventListener("mousedown", rippleShow);
  143.   el.removeEventListener("mouseup", rippleHide);
  144.   el.removeEventListener("mouseleave", rippleHide);
  145. }
  146. function directive(el, binding, node) {
  147.   updateRipple(el, binding, false);
  148.   // warn if an inline element is used, waiting for el to be in the DOM first
  149.   node.context &&
  150.     node.context.$nextTick(() => {
  151.       const computed = window.getComputedStyle(el);
  152.       if (computed && computed.display === "inline") {
  153.         const context = node.fnOptions
  154.           ? [node.fnOptions, node.context]
  155.           : [node.componentInstance];
  156.         console.warn(
  157.           "v-ripple can only be used on block-level elements",
  158.           context
  159.         );
  160.       }
  161.     });
  162. }
  163. function unbind(el) {
  164.   delete el._ripple;
  165.   removeListeners(el);
  166. }
  167. function update(el, binding) {
  168.   if (binding.value === binding.oldValue) {
  169.     return;
  170.   }
  171.   const wasEnabled = isRippleEnabled(binding.oldValue);
  172.   updateRipple(el, binding, wasEnabled);
  173. }
  174. export default {
  175.   bind: directive,
  176.   unbind,
  177.   update,
  178. };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top