1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
(() => {
// packages/collapse/src/index.js
function src_default(Alpine) {
Alpine.directive("collapse", (el, {expression, modifiers}, {effect, evaluateLater}) => {
let duration = modifierValue(modifiers, "duration", 250) / 1e3;
let floor = 0;
if (!el._x_isShown)
el.style.height = `${floor}px`;
if (!el._x_isShown)
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 = () => {
}) {
el.hidden = false;
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.style.height == `${full}px`) {
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`) {
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];
}
return rawValue;
}
// packages/collapse/builds/cdn.js
document.addEventListener("alpine:init", () => {
window.Alpine.plugin(src_default);
});
})();
|
