vue-move-directives
Version:
A set of Vue 3 directives to animate elements moving to other elements.
63 lines (62 loc) • 2.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.mover = void 0;
const nanoid_1 = require("nanoid");
;
const mover = (emitter) => ({
mounted(el, binding) {
var _a, _b, _c;
const transitionDurationSec = (((_a = binding.value.transition) === null || _a === void 0 ? void 0 : _a.durationMs) || 300) / 1000;
const timingFunction = ((_b = binding.value.transition) === null || _b === void 0 ? void 0 : _b.timingFunction) || 'ease-out';
const zIndex = (_c = binding.value.transition) === null || _c === void 0 ? void 0 : _c.zIndex;
const moveCallbackListener = (event) => {
if (event.elementId === elementId) {
const { x: fromX, y: fromY } = el.getBoundingClientRect();
const { x: toX, y: toY } = event;
const translateX = toX - fromX;
const translateY = toY - fromY;
position = { x: translateX, y: translateY };
if (zIndex) {
el.style.zIndex = String(zIndex);
}
el.style.transition = `transform ${transitionDurationSec}s ${timingFunction}`;
el.style.transform = `translate(${translateX}px, ${translateY}px)`;
setTimeout(() => {
if (binding.value.afterClick) {
binding.value.afterClick(clickEvent);
}
if (binding.value.deleteAfterFinish) {
el.remove();
}
}, transitionDurationSec * 1000);
}
};
const elementId = (0, nanoid_1.nanoid)();
let position = { x: 0, y: 0 };
let clickEvent = null;
emitter.on('moveElementCallback', moveCallbackListener);
el._cleanup = () => {
emitter.off('moveElementCallback', moveCallbackListener);
};
el.addEventListener('click', (e) => {
clickEvent = e;
let targetId = '';
if (typeof binding.value.target === 'function') {
targetId = binding.value.target(e);
}
else {
targetId = binding.value.target;
}
emitter.emit('moveElement', {
elementId: elementId,
targetId: targetId,
});
});
},
beforeUnmount(el) {
if (el._cleanup) {
el._cleanup();
}
}
});
exports.mover = mover;