animated details collapse

salient-lang · Apr 14, 2024 · 5b97e34 · 5b97e34
1 parent 081afd8
commit 5b97e34
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/builder/page.ts b/builder/page.ts
@@ -19,7 +19,9 @@ export async function CreatePage(toolbar: string, path: string) {
 	<body>
 		${toolbar}
 		<div class="dashboard">
-			<details class="entry" style="view-transition-name: ${Reroute(path).replaceAll("/", "_")}" data-src="${Reroute(path)}">${html}</details>
+			<details class="entry" style="view-transition-name: ${Reroute(path).replaceAll("/", "_")}" data-src="${Reroute(path)}" onclick="AnimateDetailsChange(event);">`
+				+ html
+			+`</details>
 		</div>
 	</body>
 </html>`;

diff --git a/client/index.ts b/client/index.ts
@@ -55,21 +55,6 @@ async function OpenEntry(href: string, caller?: HTMLElement) {
 	Save();
 }
 
-async function CloseEntry(ev: MouseEvent, closeBtn: HTMLDivElement) {
-	ev.stopImmediatePropagation();
-	ev.stopPropagation();
-	ev.preventDefault();
-
-	await TransitionStart();
-
-	const entry = closeBtn.closest(".entry");
-	if (!entry) return;
-
-	entry.remove();
-	Save();
-}
-(window as any).CloseEntry = CloseEntry;
-
 function FindOpenEntry(href: string) {
 	for (const div of document.body.querySelectorAll(".entry")) {
 		if (div.getAttribute("data-src") == href) return div;
@@ -103,12 +88,47 @@ async function OpenFolder(href: string) {
 function Save() {
 	const pages = [ ...document.body.querySelectorAll(".entry") ]
 		.map(x => x.getAttribute("data-src"))
-		.filter(x => x);
+		.filter(x => x)
+		.reverse();
 
 	localStorage.setItem("open-pages", pages.join("\n"));
 }
 
 
+
+
+
+async function AnimateDetailsChange(ev: MouseEvent) {
+	const elm = ev.currentTarget;
+	if (!(elm instanceof HTMLDetailsElement)) return;
+
+	ev.stopImmediatePropagation();
+	ev.stopPropagation();
+	ev.preventDefault();
+
+	await TransitionStart();
+
+	if (elm.hasAttribute("open")) elm.removeAttribute("open");
+	else elm.setAttribute("open", "true");
+}
+(window as any).AnimateDetailsChange = AnimateDetailsChange;
+
+async function CloseEntry(ev: MouseEvent, closeBtn: HTMLDivElement) {
+	ev.stopImmediatePropagation();
+	ev.stopPropagation();
+	ev.preventDefault();
+
+	await TransitionStart();
+
+	const entry = closeBtn.closest(".entry");
+	if (!entry) return;
+
+	entry.remove();
+	Save();
+}
+(window as any).CloseEntry = CloseEntry;
+
+
 async function Startup() {
 	document.body.addEventListener("click", AnyClick);