100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
// packages/collapse/src/index.js
|
|
function src_default(Alpine) {
|
|
Alpine.directive("collapse", collapse);
|
|
collapse.inline = (el, { modifiers }) => {
|
|
if (!modifiers.includes("min"))
|
|
return;
|
|
el._x_doShow = () => {
|
|
};
|
|
el._x_doHide = () => {
|
|
};
|
|
};
|
|
function collapse(el, { modifiers }) {
|
|
let duration = modifierValue(modifiers, "duration", 250) / 1e3;
|
|
let floor = modifierValue(modifiers, "min", 0);
|
|
let fullyHide = !modifiers.includes("min");
|
|
if (!el._x_isShown)
|
|
el.style.height = `${floor}px`;
|
|
if (!el._x_isShown && fullyHide)
|
|
el.hidden = true;
|
|
if (!el._x_isShown)
|
|
el.style.overflow = "hidden";
|
|
let setFunction = (el2, styles) => {
|
|
let revertFunction = Alpine.setStyles(el2, styles);
|
|
return styles.height ? () => {
|
|
} : revertFunction;
|
|
};
|
|
let transitionStyles = {
|
|
transitionProperty: "height",
|
|
transitionDuration: `${duration}s`,
|
|
transitionTimingFunction: "cubic-bezier(0.4, 0.0, 0.2, 1)"
|
|
};
|
|
el._x_transition = {
|
|
in(before = () => {
|
|
}, after = () => {
|
|
}) {
|
|
if (fullyHide)
|
|
el.hidden = false;
|
|
if (fullyHide)
|
|
el.style.display = null;
|
|
let current = el.getBoundingClientRect().height;
|
|
el.style.height = "auto";
|
|
let full = el.getBoundingClientRect().height;
|
|
if (current === full) {
|
|
current = floor;
|
|
}
|
|
Alpine.transition(el, Alpine.setStyles, {
|
|
during: transitionStyles,
|
|
start: { height: current + "px" },
|
|
end: { height: full + "px" }
|
|
}, () => el._x_isShown = true, () => {
|
|
if (el.getBoundingClientRect().height == full) {
|
|
el.style.overflow = null;
|
|
}
|
|
});
|
|
},
|
|
out(before = () => {
|
|
}, after = () => {
|
|
}) {
|
|
let full = el.getBoundingClientRect().height;
|
|
Alpine.transition(el, setFunction, {
|
|
during: transitionStyles,
|
|
start: { height: full + "px" },
|
|
end: { height: floor + "px" }
|
|
}, () => el.style.overflow = "hidden", () => {
|
|
el._x_isShown = false;
|
|
if (el.style.height == `${floor}px` && fullyHide) {
|
|
el.style.display = "none";
|
|
el.hidden = true;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
}
|
|
function modifierValue(modifiers, key, fallback) {
|
|
if (modifiers.indexOf(key) === -1)
|
|
return fallback;
|
|
const rawValue = modifiers[modifiers.indexOf(key) + 1];
|
|
if (!rawValue)
|
|
return fallback;
|
|
if (key === "duration") {
|
|
let match = rawValue.match(/([0-9]+)ms/);
|
|
if (match)
|
|
return match[1];
|
|
}
|
|
if (key === "min") {
|
|
let match = rawValue.match(/([0-9]+)px/);
|
|
if (match)
|
|
return match[1];
|
|
}
|
|
return rawValue;
|
|
}
|
|
|
|
// packages/collapse/builds/module.js
|
|
var module_default = src_default;
|
|
export {
|
|
src_default as collapse,
|
|
module_default as default
|
|
};
|