tdesign-vue
Version:
113 lines (109 loc) • 4.29 kB
JavaScript
/**
* tdesign v1.14.1
* (c) 2025 tdesign
* @license MIT
*/
import setStyle from '../_common/js/utils/setStyle.js';
import { prefix } from '../config.js';
var Ripple = {
startTimeId: null,
finishTimeId: null,
inserted: function inserted(el, binding) {
if (binding.value === false) return;
var period = 200;
var defaultBg = "rgba(0, 0, 0, 0.35)";
var bg = binding.value === true || binding.value == null ? defaultBg : binding.value;
var rippleContainer = document.createElement("div");
var hasCreateContainer = false;
var count = 0;
el.addEventListener("pointerdown", function (e) {
if (el.classList.contains("".concat(prefix, "-is-active")) || el.classList.contains("".concat(prefix, "-is-disabled")) || el.classList.contains("".concat(prefix, "-is-checked")) || el.classList.contains("".concat(prefix, "-is-loading"))) {
return;
}
if (e.button !== 0) return;
if (bg === defaultBg && el !== null && el !== void 0 && el.dataset.ripple) {
bg = el.dataset.ripple;
}
var cssVariable = getComputedStyle(el).getPropertyValue("--ripple-color");
if (cssVariable) {
bg = cssVariable;
}
var elBorder = parseInt(getComputedStyle(el).borderWidth.replace("px", ""), 10);
var border = elBorder > 0 ? elBorder : 0;
var width = el.offsetWidth;
var height = el.offsetHeight;
var style = getComputedStyle(el);
if (!hasCreateContainer) {
hasCreateContainer = true;
setStyle(rippleContainer, {
position: "absolute",
left: "".concat(0 - border, "px"),
top: "".concat(0 - border, "px"),
width: "".concat(width, "px"),
height: "".concat(height, "px"),
borderRadius: style.borderRadius,
pointerEvents: "none",
overflow: "hidden"
});
el.appendChild(rippleContainer);
}
var ripple = document.createElement("div");
setStyle(ripple, {
marginTop: "0",
marginLeft: "0",
right: "".concat(width, "px"),
width: "".concat(width + 20, "px"),
height: "100%",
transition: "transform ".concat(period, "ms cubic-bezier(.38, 0, .24, 1), background ").concat(period * 2, "ms linear"),
transform: "skewX(-8deg)",
pointerEvents: "none",
position: "absolute",
zIndex: "0",
backgroundColor: bg,
opacity: "0.9"
});
var elMap = /* @__PURE__ */new WeakMap();
for (var n = el.children.length, i = 0; i < n; ++i) {
var child = el.children[i];
if (child.style.zIndex === "" && child !== rippleContainer) {
child.style.zIndex = "1";
elMap.set(child, true);
}
}
var initPosition = el.style.position ? el.style.position : getComputedStyle(el).position;
if (initPosition === "" || initPosition === "static") {
el.style.position = "relative";
}
rippleContainer.insertBefore(ripple, rippleContainer.firstChild);
count += 1;
clearTimeout(Ripple.startTimeId);
Ripple.startTimeId = setTimeout(function () {
ripple.style.transform = "translateX(".concat(width, "px)");
}, 0);
var _handleClearRipple = function handleClearRipple() {
ripple.style.backgroundColor = "rgba(0, 0, 0, 0)";
el.removeEventListener("pointerup", _handleClearRipple, false);
el.removeEventListener("pointerleave", _handleClearRipple, false);
setTimeout(function () {
rippleContainer.removeChild(ripple);
count -= 1;
if (count > 0) return;
el.style.position = initPosition !== "static" ? initPosition : "";
for (var _n = el.children.length, _i = 0; _i < _n; ++_i) {
var _child = el.children[_i];
if (elMap.has(_child)) {
_child.style.zIndex = "";
elMap["delete"](_child);
}
}
el.removeChild(rippleContainer);
hasCreateContainer = false;
}, period * 2 + 100);
};
el.addEventListener("pointerup", _handleClearRipple, false);
el.addEventListener("pointerleave", _handleClearRipple, false);
});
}
};
export { Ripple as default };
//# sourceMappingURL=ripple.js.map