71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
|
import {
|
||
|
|
computePosition,
|
||
|
|
flip,
|
||
|
|
shift,
|
||
|
|
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';
|
||
|
|
|
||
|
|
function update_position(button, dropdown_div) {
|
||
|
|
const placement = button.dataset.dropdownDirection;
|
||
|
|
computePosition(button, dropdown_div, {
|
||
|
|
placement: placement,
|
||
|
|
middleware: [
|
||
|
|
flip(),
|
||
|
|
shift()
|
||
|
|
],
|
||
|
|
}).then(({x, y}) => {
|
||
|
|
Object.assign(dropdown_div.style, {
|
||
|
|
left: `${x}px`,
|
||
|
|
top: `${y}px`,
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function setup_dropdown(button) {
|
||
|
|
const dropdown_div = document.querySelector("#" + button.dataset.dropdownTarget);
|
||
|
|
update_position(button, dropdown_div);
|
||
|
|
return function () {
|
||
|
|
if (dropdown_div.style.display == "none") {
|
||
|
|
|
||
|
|
dropdown_div.style.removeProperty("display");
|
||
|
|
if (button.dataset.dropdownMotion == "expand-down") {
|
||
|
|
dropdown_div.style.display = "block";
|
||
|
|
dropdown_div.style.maxHeight = "0px";
|
||
|
|
|
||
|
|
button.style.borderBottomLeftRadius = "0px";
|
||
|
|
button.style.borderBottomRightRadius = "0px";
|
||
|
|
}
|
||
|
|
|
||
|
|
update_position(button, dropdown_div);
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
if (button.dataset.dropdownMotion == "expand-down") {
|
||
|
|
dropdown_div.style.maxHeight = "100px";
|
||
|
|
} else {
|
||
|
|
dropdown_div.style.opacity = 1;
|
||
|
|
}
|
||
|
|
}, 110);
|
||
|
|
} else {
|
||
|
|
if (button.dataset.dropdownMotion == "expand-down") {
|
||
|
|
dropdown_div.style.maxHeight = "0px";
|
||
|
|
} else {
|
||
|
|
dropdown_div.style.opacity = 0;
|
||
|
|
}
|
||
|
|
setTimeout(function () {
|
||
|
|
if (button.dataset.dropdownMotion == "expand-down") {
|
||
|
|
button.style.removeProperty("border-bottom-left-radius");
|
||
|
|
button.style.removeProperty("border-bottom-right-radius");
|
||
|
|
}
|
||
|
|
dropdown_div.style.display = "none";
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function register_dropdowns() {
|
||
|
|
document.querySelectorAll(".dropdown-button").forEach(function (el) {
|
||
|
|
el.addEventListener("click", setup_dropdown(el));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export {register_dropdowns}
|