f55c766881
- Implemented a floating action button (FAB) for newsletter subscription in the template. - Added JavaScript to handle the toggle state of the FAB and close it on outside clicks or Escape key press. - Created CSS styles for the FAB, including animations and responsive design. - Added a Django template tag to return a random default cover image for the FAB. - Integrated a form for email input and submission within the FAB.
30 lines
730 B
JavaScript
30 lines
730 B
JavaScript
(function () {
|
|
const root = document.querySelector("[data-subscribe-fab]");
|
|
if (!root) return;
|
|
|
|
const toggle = root.querySelector(".subscribe-fab__toggle");
|
|
if (!toggle) return;
|
|
|
|
const setOpen = (open) => {
|
|
root.classList.toggle("is-open", open);
|
|
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
|
};
|
|
|
|
toggle.addEventListener("click", function () {
|
|
const isOpen = root.classList.contains("is-open");
|
|
setOpen(!isOpen);
|
|
});
|
|
|
|
document.addEventListener("click", function (event) {
|
|
if (!root.contains(event.target)) {
|
|
setOpen(false);
|
|
}
|
|
});
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.key === "Escape") {
|
|
setOpen(false);
|
|
}
|
|
});
|
|
})();
|