Anson/zine
1
0
Fork 0
mirror of https://gitlab.com/Anson-Projects/zine.git synced 2025-06-15 21:26:38 +00:00
Code Releases Activity

Fixes #9, turns out id's are important

Browse Source
This commit is contained in:
Anson Biggs 2024-11-06 21:36:03 -07:00
parent caa0100e26
commit 65998c7fa7
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
output/modal.js
View File

@ -18,12 +18,9 @@ const toggleModal = (event) => {
event.preventDefault(); event.preventDefault();
const modal = document.getElementById(event.currentTarget.dataset.target); const modal = document.getElementById(event.currentTarget.dataset.target);
if (!modal) return; if (!modal) return;
modal && (isModalOpen(modal) ? closeModal(modal) : openModal(modal)); modal && (modal.open ? closeModal(modal) : openModal(modal));
}; };
// Is modal open
const isModalOpen = (modal) => modal.hasAttribute("open") && modal.getAttribute("open") !== "false";
// Open modal // Open modal
const openModal = (modal) => { const openModal = (modal) => {
const { documentElement: html } = document; const { documentElement: html } = document;
@ -36,7 +33,7 @@ const openModal = (modal) => {
visibleModal = modal; visibleModal = modal;
html.classList.remove(openingClass); html.classList.remove(openingClass);
}, animationDuration); }, animationDuration);
modal.setAttribute("open", true); modal.showModal();
}; };
// Close modal // Close modal
@ -47,7 +44,7 @@ const closeModal = (modal) => {
setTimeout(() => { setTimeout(() => {
html.classList.remove(closingClass, isOpenClass); html.classList.remove(closingClass, isOpenClass);
html.style.removeProperty(scrollbarWidthCssVar); html.style.removeProperty(scrollbarWidthCssVar);
modal.removeAttribute("open"); modal.close();
}, animationDuration); }, animationDuration);
}; };

8
src/site_generator.rs
View File

@ -89,7 +89,7 @@ fn generate_header() -> Markup {
li { h1 { "The Biggs Brief" }} li { h1 { "The Biggs Brief" }}
} }
ul { ul {
li { button data-target="about" onclick="toggleModal(event)" { "About" } } li { button data-target="modal-about" onclick="toggleModal(event)" { "About" } }
li { li {
} }
@ -123,11 +123,11 @@ fn about_modal(entries: Vec<utilities::Post>) -> Markup {
links.sort(); links.sort();
html! { html! {
dialog id="about" { dialog id="modal-about" {
article { article {
header { header {
a href="#" aria-label="Close" rel="prev" {} button aria-label="Close" rel="prev" data-target="modal-about" onclick="toggleModal(event)" {}
p { strong { "About" }} h3 { "About" }
} }
p { p {
"I couldn't find a RSS reader that I liked so I decided to build my own." "I couldn't find a RSS reader that I liked so I decided to build my own."