mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-09-08 03:39:20 +02:00
- add basic rollup config to bundle minified and browser compatible js - use babel to transpile typescript files to js - add static code checkers: eslint and stylelint - update package.json scripts - update DEPENDENCIES.md file to include rollup and popper - set html in rss feed description fields - update Podcast and Episode entities to add description_html attribute generated by parsing markdown to html using parsedown #9
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { createPopper, Placement } from "@popperjs/core";
|
|
|
|
const Dropdown = (): void => {
|
|
const dropdownContainers: NodeListOf<HTMLElement> = document.querySelectorAll(
|
|
"[data-toggle='dropdown']"
|
|
);
|
|
|
|
for (let i = 0; i < dropdownContainers.length; i++) {
|
|
const dropdownContainer = dropdownContainers[i];
|
|
|
|
const button: HTMLElement | null = dropdownContainer.querySelector(
|
|
"[data-popper='button']"
|
|
);
|
|
const menu: HTMLElement | null = dropdownContainer.querySelector(
|
|
"[data-popper='menu']"
|
|
);
|
|
|
|
if (button && menu) {
|
|
const popper = createPopper(button, menu, {
|
|
placement: menu.dataset.popperPlacement as Placement,
|
|
modifiers: [
|
|
{
|
|
name: "offset",
|
|
options: {
|
|
offset: [menu.dataset.popperOffsetX, menu.dataset.popperOffsetY],
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
const dropdownToggle = () => {
|
|
const isExpanded = !menu.classList.contains("hidden");
|
|
|
|
if (isExpanded) {
|
|
menu.classList.add("hidden");
|
|
menu.classList.remove("flex");
|
|
} else {
|
|
menu.classList.add("flex");
|
|
menu.classList.remove("hidden");
|
|
}
|
|
|
|
button.setAttribute("aria-expanded", isExpanded.toString());
|
|
popper.update();
|
|
};
|
|
|
|
// Toggle dropdown menu on button click event
|
|
button.addEventListener("click", dropdownToggle);
|
|
|
|
// Toggle off when clicking outside of dropdown
|
|
document.addEventListener("click", function (event) {
|
|
const isExpanded = !menu.classList.contains("hidden");
|
|
const isClickOutside = !dropdownContainer.contains(
|
|
event.target as Node
|
|
);
|
|
|
|
if (isExpanded && isClickOutside) {
|
|
dropdownToggle();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
export default Dropdown;
|