@icreate/ics-mui/dist/packages/ripple/Ripple.js

京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __pow = Math.pow;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __defProp2 = Object.defineProperty;
var __defProps2 = Object.defineProperties;
var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
var __defNormalProp2 = (obj, key3, value) => key3 in obj ? __defProp2(obj, key3, { enumerable: true, configurable: true, writable: true, value }) : obj[key3] = value;
var __spreadValues2 = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp2.call(b, prop))
      __defNormalProp2(a, prop, b[prop]);
  if (__getOwnPropSymbols2)
    for (var prop of __getOwnPropSymbols2(b)) {
      if (__propIsEnum2.call(b, prop))
        __defNormalProp2(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
function inBrowser$1() {
  return typeof window !== "undefined";
}
function getGlobalThis() {
  if (typeof globalThis !== "undefined") {
    return globalThis;
  }
  if (inBrowser$1()) {
    return window;
  }
  return typeof global !== "undefined" ? global : self;
}
function isArray(val) {
  return Array.isArray(val);
}
function isString(val) {
  return typeof val === "string";
}
function isWindow(val) {
  return val === window;
}
function classes(...classes2) {
  return classes2.map((className) => {
    if (isArray(className)) {
      const [condition, truthy, falsy = null] = className;
      return condition ? truthy : falsy;
    }
    return className;
  });
}
function camelize(s) {
  s = s.replace(/-(\w)/g, (_, p) => p.toUpperCase());
  return s.replace(s.charAt(0), s.charAt(0).toLowerCase());
}
function pascalCase(s) {
  return camelize(s).replace(s.charAt(0), s.charAt(0).toUpperCase());
}
function createNamespaceFn(namespace) {
  return (name) => {
    const componentName = `${namespace}-${name}`;
    const createBEM = (suffix) => {
      if (!suffix) {
        return componentName;
      }
      if (suffix[0] === "$") {
        return suffix.replace("$", namespace);
      }
      return suffix.startsWith("--") ? `${componentName}${suffix}` : `${componentName}__${suffix}`;
    };
    return {
      name: pascalCase(componentName),
      n: createBEM,
      classes
    };
  };
}
function getStyle(element) {
  return window.getComputedStyle(element);
}
function getRect(element) {
  if (isWindow(element)) {
    const width = element.innerWidth;
    const height = element.innerHeight;
    const rect = {
      x: 0,
      y: 0,
      top: 0,
      left: 0,
      right: width,
      bottom: height,
      width,
      height
    };
    return __spreadProps2(__spreadValues2({}, rect), {
      toJSON: () => rect
    });
  }
  return element.getBoundingClientRect();
}
function createStorage(storage) {
  return __spreadProps2(__spreadValues2({}, storage), {
    set(key3, value) {
      if (value == null) {
        return;
      }
      if (!isString(value)) {
        value = JSON.stringify(value);
      }
      storage.setItem(key3, value);
    },
    get(key3) {
      const data = storage.getItem(key3);
      try {
        return JSON.parse(data);
      } catch (err) {
        return data;
      }
    },
    remove(key3) {
      storage.removeItem(key3);
    }
  });
}
createStorage(getGlobalThis().sessionStorage);
createStorage(getGlobalThis().localStorage);
const inBrowser = typeof window !== "undefined";
const supportTouch = inBrowser && "ontouchstart" in window;
const createNamespace = createNamespaceFn("var");
const { n } = createNamespace("ripple");
const enableRipple = true;
const ANIMATION_DURATION = 250;
function setStyles(element) {
  const { zIndex, position } = getStyle(element);
  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 isTouchEvent(event) {
  return "touches" in event;
}
function computeRippleStyles(element, event) {
  const { top, left } = getRect(element);
  const { clientWidth, clientHeight } = element;
  const radius = Math.sqrt(__pow(clientWidth, 2) + __pow(clientHeight, 2)) / 2;
  const size = radius * 2;
  const localX = isTouchEvent(event) ? event.touches[0].clientX - left : clientWidth / 2;
  const localY = isTouchEvent(event) ? event.touches[0].clientY - top : clientHeight / 2;
  const centerX = (clientWidth - radius * 2) / 2;
  const centerY = (clientHeight - radius * 2) / 2;
  const x = localX - radius;
  const y = localY - radius;
  return { x, y, centerX, centerY, size };
}
function createRipple(event) {
  const _ripple = this._ripple;
  _ripple.removeRipple();
  if (_ripple.disabled || _ripple.tasker || !enableRipple) {
    return;
  }
  const task = () => {
    _ripple.tasker = null;
    const { x, y, centerX, centerY, size } = computeRippleStyles(this, event);
    const ripple = document.createElement("div");
    ripple.classList.add(n());
    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.color && (ripple.style.backgroundColor = _ripple.color);
    ripple.dataset.createdAt = String(performance.now());
    setStyles(this);
    this.appendChild(ripple);
    window.setTimeout(() => {
      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`;
      ripple.style.opacity = `.25`;
    }, 20);
  };
  _ripple.tasker = window.setTimeout(task, 30);
}
function removeRipple() {
  const _ripple = this._ripple;
  const task = () => {
    const ripples = this.querySelectorAll(`.${n()}`);
    if (!ripples.length) {
      return;
    }
    const lastRipple = ripples[ripples.length - 1];
    const delay = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt);
    window.setTimeout(() => {
      lastRipple.style.opacity = `0`;
      window.setTimeout(() => {
        var _a;
        return (_a = lastRipple.parentNode) == null ? void 0 : _a.removeChild(lastRipple);
      }, ANIMATION_DURATION);
    }, delay);
  };
  _ripple.tasker ? window.setTimeout(task, 30) : task();
}
function forbidRippleTask() {
  if (!supportTouch || !enableRipple) {
    return;
  }
  const _ripple = this._ripple;
  _ripple.tasker && window.clearTimeout(_ripple.tasker);
  _ripple.tasker = null;
}
let hasKeyboardRipple = false;
function createKeyboardRipple(event) {
  if (hasKeyboardRipple || !(event.key === " " || event.key === "Enter")) {
    return;
  }
  createRipple.call(this, event);
  hasKeyboardRipple = true;
}
function removeKeyboardRipple() {
  if (!hasKeyboardRipple) {
    return;
  }
  removeRipple.call(this);
  hasKeyboardRipple = false;
}
function mounted(el, binding) {
  var _a, _b, _c, _d;
  el._ripple = __spreadProps(__spreadValues({
    tasker: null
  }, (_a = binding.value) != null ? _a : {}), {
    removeRipple: removeRipple.bind(el)
  });
  el.addEventListener("touchstart", createRipple, { passive: true });
  el.addEventListener("touchmove", forbidRippleTask, { passive: true });
  el.addEventListener("dragstart", removeRipple, { passive: true });
  el.addEventListener("keydown", createKeyboardRipple);
  el.addEventListener("keyup", removeKeyboardRipple);
  el.addEventListener("blur", removeKeyboardRipple);
  document.addEventListener("touchend", (_b = el._ripple) == null ? void 0 : _b.removeRipple, { passive: true });
  document.addEventListener("touchcancel", (_c = el._ripple) == null ? void 0 : _c.removeRipple, { passive: true });
  document.addEventListener("dragend", (_d = el._ripple) == null ? void 0 : _d.removeRipple, { passive: true });
}
function unmounted(el) {
  el.removeEventListener("touchstart", createRipple);
  el.removeEventListener("touchmove", forbidRippleTask);
  el.removeEventListener("dragstart", removeRipple);
  if (!el._ripple || !el._ripple.removeRipple) {
    return;
  }
  document.removeEventListener("touchend", el._ripple.removeRipple);
  document.removeEventListener("touchcancel", el._ripple.removeRipple);
  document.removeEventListener("dragend", el._ripple.removeRipple);
}
function updated(el, binding) {
  var _a, _b, _c, _d, _e, _f;
  const newBinding = {
    color: (_a = binding.value) == null ? void 0 : _a.color,
    disabled: (_b = binding.value) == null ? void 0 : _b.disabled
  };
  const diff = newBinding.color !== ((_c = el._ripple) == null ? void 0 : _c.color) || newBinding.disabled !== ((_d = el._ripple) == null ? void 0 : _d.disabled);
  if (diff) {
    el._ripple = __spreadValues({
      tasker: newBinding.disabled ? null : (_e = el._ripple) == null ? void 0 : _e.tasker,
      removeRipple: (_f = el._ripple) == null ? void 0 : _f.removeRipple
    }, newBinding);
  }
}
const Ripple = {
  mounted,
  unmounted,
  updated,
  install(app) {
    app.directive("ripple", this);
  }
};
const _RippleComponent = Ripple;
export {
  _RippleComponent,
  Ripple as default
};