+pretty animations

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

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/builder/page.ts b/builder/page.ts
@@ -19,7 +19,7 @@ export async function CreatePage(toolbar: string, path: string) {
 	<body>
 		${toolbar}
 		<div class="dashboard">
-			<details class="entry" data-src="${Reroute(path)}">${html}</details>
+			<details class="entry" style="view-transition-name: ${Reroute(path).replaceAll("/", "_")}" data-src="${Reroute(path)}">${html}</details>
 		</div>
 	</body>
 </html>`;
@@ -76,7 +76,7 @@ function RenderPage(path: string, data: string) {
 					) : "}")
 			+ `</div>`
 		+ `</div>`
-		+ `<div class="close" onclick="this.parentNode.parentNode.remove();">Close</div>`
+		+ `<div class="close" onclick="CloseEntry(event, this);">Close</div>`
 		+ `<div style="white-space: pre-wrap;">${summary.text}</div>`
 	+ `</summary>`
 	+ `<div style="white-space: pre-wrap;">${details}</div>`;

diff --git a/client/helper.ts b/client/helper.ts
@@ -0,0 +1,7 @@
+export async function TransitionStart() {
+	return new Promise<void>((res) => {
+		const d = (document as any);
+		if (typeof d.startViewTransition === "function") return d.startViewTransition(res);
+		res();
+	});
+}
diff --git a/client/index.ts b/client/index.ts
@@ -1,3 +1,5 @@
+import { TransitionStart } from "./helper";
+
 const parser = new DOMParser();
 
 function AnyClick(ev: MouseEvent) {
@@ -11,7 +13,7 @@ function AnyClick(ev: MouseEvent) {
 		ev.stopPropagation();
 		ev.preventDefault();
 
-		OpenEntry(href);
+		OpenEntry(href, ev.target);
 		return;
 	}
 
@@ -25,12 +27,11 @@ function AnyClick(ev: MouseEvent) {
 	}
 }
 
-async function OpenEntry(href: string) {
+async function OpenEntry(href: string, caller?: HTMLElement) {
 	const dashboard = document.querySelector(".dashboard");
 	if (!dashboard) throw new Error("Missing dashboard element");
 
 	const existing = FindOpenEntry(href);
-	if (existing) existing.remove();
 
 	const req = await fetch(href);
 	if (!req.ok) throw new Error(`Failed to load ${href}`);
@@ -40,6 +41,10 @@ async function OpenEntry(href: string) {
 
 	if (!entry) throw new Error("Route is missing div.entry");
 
+	if (!existing && caller) caller.style.setProperty('view-transition-name', href.replaceAll("/", "_"));
+	await TransitionStart();
+	if (existing) existing.remove();
+	if (caller) caller.style.removeProperty('view-transition-name');
 	dashboard.insertBefore(entry, dashboard.firstChild);
 	dashboard.scrollTo({top: 0});
 
@@ -50,6 +55,21 @@ async function OpenEntry(href: string) {
 	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;
@@ -71,6 +91,7 @@ async function OpenFolder(href: string) {
 
 	if (!toolbar) throw new Error("Route is missing div.toolbar");
 
+	await TransitionStart();
 	current.replaceWith(toolbar);
 
 	const title = doc.querySelector("title")?.innerText || document.title;
@@ -88,12 +109,12 @@ function Save() {
 }
 
 
-function Startup() {
+async function Startup() {
 	document.body.addEventListener("click", AnyClick);
 
 	const pages = (localStorage.getItem('open-pages') || "").split("\n");
 	for (const page of pages) {
-		OpenEntry(page);
+		await OpenEntry(page);
 	}
 }
 

diff --git a/public/main.css b/public/main.css
@@ -5,6 +5,7 @@ body {
 
 	display: grid;
 	grid-template-columns: auto 1fr;
+	justify-items: center;
 	gap: 20px;
 
 	background-color: #272822;
@@ -54,7 +55,9 @@ a[folder][parent] + a[folder]:not([parent]) {
 }
 
 .dashboard {
+	max-width: 800px;
 	margin: 10px 0;
+	width: 100%;
 
 	display: flex;
 	flex-direction: column;
@@ -68,11 +71,12 @@ a[folder][parent] + a[folder]:not([parent]) {
 
 .entry .close {
 	position: absolute;
-	top: 10px;
-	right: 10px;
+	top: 0;
+	right: 0;
 
-	cursor: pointer;
+	font-size: 0.85em;
 	user-select: none;
+	cursor: pointer;
 }
 
 .entry .context {