scrolly (#308)

Fil · web-flow · commit 5874262e63a8 · 2023-12-04T16:52:07.000+01:00
save sidebar scrolltop on beforeunload; restore on load closes #305
diff --git a/src/render.ts b/src/render.ts
@@ -138,6 +138,9 @@ function renderSidebar(title = "Home", pages: (Page | Section)[], path: string):
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>`;
 }
 
diff --git a/test/output/build/archives/tar.html b/test/output/build/archives/tar.html
@@ -76,6 +76,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/archives/zip.html b/test/output/build/archives/zip.html
@@ -62,6 +62,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/config/closed/page.html b/test/output/build/config/closed/page.html
@@ -41,6 +41,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/config/index.html b/test/output/build/config/index.html
@@ -41,6 +41,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/config/one.html b/test/output/build/config/one.html
@@ -41,6 +41,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/config/sub/two.html b/test/output/build/config/sub/two.html
@@ -41,6 +41,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/config/toc-override.html b/test/output/build/config/toc-override.html
@@ -41,6 +41,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
 <nav>
diff --git a/test/output/build/config/toc.html b/test/output/build/config/toc.html
@@ -41,6 +41,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
 <nav>
diff --git a/test/output/build/fetches/foo.html b/test/output/build/fetches/foo.html
@@ -43,6 +43,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/fetches/top.html b/test/output/build/fetches/top.html
@@ -46,6 +46,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/files/files.html b/test/output/build/files/files.html
@@ -57,6 +57,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/files/subsection/subfiles.html b/test/output/build/files/subsection/subfiles.html
@@ -57,6 +57,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/imports/foo/foo.html b/test/output/build/imports/foo/foo.html
@@ -49,6 +49,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/missing-file/index.html b/test/output/build/missing-file/index.html
@@ -39,6 +39,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/missing-import/index.html b/test/output/build/missing-import/index.html
@@ -40,6 +40,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/multi/index.html b/test/output/build/multi/index.html
@@ -50,6 +50,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/multi/subsection/index.html b/test/output/build/multi/subsection/index.html
@@ -34,6 +34,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/simple-public/index.html b/test/output/build/simple-public/index.html
@@ -33,6 +33,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/simple/simple.html b/test/output/build/simple/simple.html
@@ -42,6 +42,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
diff --git a/test/output/build/subtitle/index.html b/test/output/build/subtitle/index.html
@@ -33,6 +33,9 @@
       case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;
     }
   }
+  addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));
+  const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");
+  if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;
 }</script>
 <aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
 <nav>

Original file line number	Diff line number	Diff line change
`@@ -138,6 +138,9 @@ function renderSidebar(title = "Home", pages: (Page \| Section)[], path: string):`
`138`	`138`	`case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;`
`139`	`139`	`}`
`140`	`140`	`}`
	`141`	`+ addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));`
	`142`	`+ const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");`
	`143`	`+ if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;`
`141`	`144`	}</script>`;
`142`	`145`	`}`
`143`	`146`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,9 @@`
`76`	`76`	`case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;`
`77`	`77`	`}`
`78`	`78`	`}`
	`79`	`+ addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));`
	`80`	`+ const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");`
	`81`	`+ if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;`
`79`	`82`	`}</script>`
`80`	`83`	`<div id="observablehq-center">`
`81`	`84`	`<main id="observablehq-main" class="observablehq">`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,9 @@`
`62`	`62`	`case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;`
`63`	`63`	`}`
`64`	`64`	`}`
	`65`	`+ addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));`
	`66`	`+ const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");`
	`67`	`+ if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;`
`65`	`68`	`}</script>`
`66`	`69`	`<div id="observablehq-center">`
`67`	`70`	`<main id="observablehq-main" class="observablehq">`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,9 @@`
`41`	`41`	`case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;`
`42`	`42`	`}`
`43`	`43`	`}`
	`44`	`+ addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));`
	`45`	`+ const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");`
	`46`	`+ if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;`
`44`	`47`	`}</script>`
`45`	`48`	`<div id="observablehq-center">`
`46`	`49`	`<main id="observablehq-main" class="observablehq">`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,9 @@`
`43`	`43`	`case "false": if (!details.classList.contains("observablehq-section-active")) details.open = false; break;`
`44`	`44`	`}`
`45`	`45`	`}`
	`46`	`+ addEventListener("beforeunload", () => sessionStorage.setItem("observablehq-sidebar-scrolly", document.querySelector("#observablehq-sidebar").scrollTop));`
	`47`	`+ const scrolly = +sessionStorage.getItem("observablehq-sidebar-scrolly");`
	`48`	`+ if (scrolly) document.querySelector("#observablehq-sidebar").scrollTop = scrolly;`
`46`	`49`	`}</script>`
`47`	`50`	`<div id="observablehq-center">`
`48`	`51`	`<main id="observablehq-main" class="observablehq">`