ivue-material-plus
Version:
A high quality UI components Library with Vue.js
203 lines (201 loc) • 6.51 kB
JavaScript
function transform(el, value) {
el.style["transform"] = value;
el.style["webkitTransform"] = value;
}
function opacity(el, value) {
el.style["opacity"] = value.toString();
}
function isTouchEvent(e) {
return e.constructor.name === "TouchEvent";
}
function isRippleEnabled(value) {
return typeof value === "undefined" || !!value;
}
function rippleShow(e) {
const value = {
center: false,
class: {}
};
const element = e.currentTarget;
if (!element || !element._ripple || element._ripple.touched) {
return;
}
if (isTouchEvent(e)) {
element._ripple.touched = true;
}
value.center = element._ripple.centered;
if (element._ripple.class) {
value.class = element._ripple.class;
}
ripple.show(e, element, value);
}
function rippleHide(e) {
const element = e.currentTarget;
if (!element) {
return;
}
window.setTimeout(() => {
if (element._ripple) {
element._ripple.touched = false;
}
});
ripple.hide(element);
}
const calculate = (e, el, value) => {
const offset = el.getBoundingClientRect();
const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e;
const localX = target.clientX - offset.left;
const localY = target.clientY - offset.top;
let radius = 0;
let scale = 0.3;
if (el._ripple && el._ripple.circle) {
scale = 0.15;
radius = el.clientWidth / 2;
radius = value.center ? radius : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
} else {
radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
}
const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
const x = value.center ? centerX : `${localX - radius}px`;
const y = value.center ? centerY : `${localY - radius}px`;
return { radius, scale, x, y, centerX, centerY };
};
const ripple = {
show(e, el, value) {
if (!el._ripple || !el._ripple.enabled) {
return;
}
const container = document.createElement("span");
const animation = document.createElement("span");
container.appendChild(animation);
container.className = "ivue-ripple";
if (value.class && typeof value.class === "string") {
container.className += ` ${value.class}`;
}
const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value);
const size = `${radius * 2}px`;
animation.className = "ivue-ripple-wave";
animation.style.width = size;
animation.style.height = size;
el.appendChild(container);
const computed = window.getComputedStyle(el);
if (computed && computed.position === "static") {
el.style.position = "relative";
el.dataset.previousPosition = "static";
}
animation.classList.add("ivue-ripple-wave-enter");
animation.classList.add("ivue-ripple-wave-visible");
transform(
animation,
`translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`
);
opacity(animation, 0);
animation.dataset.activated = String(performance.now());
setTimeout(() => {
animation.classList.remove("ivue-ripple-wave--enter");
animation.classList.add("ivue-ripple-wave--in");
transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
opacity(animation, 0.25);
}, 0);
},
hide(el) {
if (!el || !el._ripple || !el._ripple.enabled) {
return;
}
const ripples = el.getElementsByClassName("ivue-ripple-wave");
if (ripples.length === 0) {
return;
}
const animation = ripples[ripples.length - 1];
if (animation.dataset.isHiding) {
return;
} else {
animation.dataset.isHiding = "true";
}
const diff = performance.now() - Number(animation.dataset.activated);
const delay = Math.max(250 - diff, 0);
setTimeout(() => {
animation.classList.remove("ivue-ripple-wave--in");
animation.classList.add("ivue-ripple-wave--on");
opacity(animation, 0);
setTimeout(() => {
const ripples2 = el.getElementsByClassName("ivue-ripple-wave");
if (ripples2.length === 1 && el.dataset.previousPosition) {
el.style.position = el.dataset.previousPosition;
delete el.dataset.previousPosition;
}
animation.parentNode && el.removeChild(animation.parentNode);
}, 300);
}, delay);
}
};
function updateRipple(el, binding, wasEnabled) {
const enabled = isRippleEnabled(binding.value);
if (!enabled) {
ripple.hide(el);
}
el._ripple = el._ripple || {};
el._ripple.enabled = enabled;
const value = binding.value || {};
if (value.center) {
el._ripple.centered = true;
}
if (value.class) {
el._ripple.class = binding.value.class;
}
if (value.circle) {
el._ripple.circle = value.circle;
}
if (enabled && !wasEnabled) {
el.addEventListener("touchstart", rippleShow, { passive: true });
el.addEventListener("touchend", rippleHide, { passive: true });
el.addEventListener("touchcancel", rippleHide);
el.addEventListener("mousedown", rippleShow);
el.addEventListener("mouseup", rippleHide);
el.addEventListener("mouseleave", rippleHide);
el.addEventListener("dragstart", rippleHide, { passive: true });
} else if (!enabled && wasEnabled) {
removeListeners(el);
}
}
function removeListeners(el) {
el.removeEventListener("mousedown", rippleShow);
el.removeEventListener("touchstart", rippleHide);
el.removeEventListener("touchend", rippleHide);
el.removeEventListener("touchcancel", rippleHide);
el.removeEventListener("mouseup", rippleHide);
el.removeEventListener("mouseleave", rippleHide);
el.removeEventListener("dragstart", rippleHide);
}
function directive(el, binding, node) {
updateRipple(el, binding, false);
node.context && node.context.$nextTick(() => {
const computed = window.getComputedStyle(el);
if (computed && computed.display === "inline") {
const context = node.fnOptions ? [node.fnOptions, node.context] : [node.componentInstance];
console.warn(
"v-ripple can only be used on block-level elements",
...context
);
}
});
}
function unmounted(el) {
delete el._ripple;
removeListeners(el);
}
function updated(el, binding) {
if (binding.value === binding.oldValue) {
return;
}
const wasEnabled = isRippleEnabled(binding.oldValue);
updateRipple(el, binding, wasEnabled);
}
var ripple$1 = {
beforeMount: directive,
unmounted,
updated
};
export { ripple$1 as default };
//# sourceMappingURL=ripple.mjs.map