make the icon an <a> sometimes

the1lab · Dec 9, 2023 · 21e84b7 · 21e84b7
1 parent 1558812
commit 21e84b7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/support/web/js/equations.ts b/support/web/js/equations.ts
@@ -62,22 +62,22 @@ window.addEventListener("DOMContentLoaded", () => {
 window.addEventListener("hashchange", scrollToHash);
 
 function scrollToHash() {
-  if (window.location.hash != '') {
-    const id = window.location.hash.slice(1);
-    // #id doesn't work with numerical IDs
-    const elem = document.querySelector(`[id="${id}"]`);
-    if (!(elem instanceof HTMLInputElement)) return;
-    // If the element is in a commented-out block or a <details> tag, unhide it
-    // and scroll to it.
-    const commentedOut = elem.closest('.commented-out') as HTMLInputElement | null;
-    if (commentedOut)
-      commentedOut.style.display = 'revert';
-    const details = elem.closest('details') as HTMLInputElement | null;
-    if (details)
-      details.setAttribute("open", "");
-    if (commentedOut || details)
-      elem.scrollIntoView();
-  }
+  if (window.location.hash === '') return;
+
+  const id = window.location.hash.slice(1);
+  // #id doesn't work with numerical IDs
+  const elem = document.querySelector(`[id="${id}"]`);
+  if (!(elem instanceof HTMLInputElement)) return;
+  // If the element is in a commented-out block or a <details> tag, unhide it
+  // and scroll to it.
+  const commentedOut = elem.closest('.commented-out') as HTMLInputElement | null;
+  if (commentedOut)
+    commentedOut.style.display = 'revert';
+  const details = elem.closest('details') as HTMLInputElement | null;
+  if (details)
+    details.setAttribute("open", "");
+  if (commentedOut || details)
+    elem.scrollIntoView();
 }
 
 export { };
diff --git a/support/web/js/theme.tsx b/support/web/js/theme.tsx
@@ -1,20 +1,28 @@
 import { JSX, type Content } from "./lib/jsx";
 import { type Theme, themeSetting, equationSetting, Setting, hiddenCodeSetting, footnoteSetting, serifFontSetting } from "./lib/settings";
 
+// This is pretty evil, but a loose <script> tag assigns these to the
+// window object in the HTML template.
+const links: { baseURL: string, source: string } = window as any;
+
 function Button(props: { label: Content, icon?: string, click: ((ev: MouseEvent) => void) | string, ['class']?: string }): HTMLButtonElement {
+  const style = `background-image: url('${links.baseURL}/static/icons/${props.icon}.svg');`;
+
+  const ic: HTMLElement = typeof props.click === 'string' ?
+    <a class="icon" style={style} href={props.click} /> :
+    <span class="icon" style={style} />;
+
   const el: HTMLElement =
-    <button class={`labelled-button ${props['class']}`}>
-      <span class="icon" style={`background-image: url('/static/icons/${props.icon}.svg');`}></span>
+    <button class={`labelled-button ${props['class'] ?? ''}`}>
+      {ic}
       <span class="hover-label">{props.label}</span>
     </button>;
 
-  el.addEventListener("click", (ev) => {
-    if (typeof props.click === 'string') {
-      window.location.href = props.click;
-      return;
-    }
-    props.click(ev)
-  });
+  if (typeof props.click !== 'string') {
+    el.addEventListener("click", (ev) => {
+      (props.click as any)(ev)
+    });
+  };
 
   return el as HTMLButtonElement;
 }
@@ -55,8 +63,6 @@ function Toggle(props: { label: string, sync: Setting<boolean> }): HTMLElement {
   );
 }
 
-const links: { baseURL: string, source: string } = window as any;
-
 document.addEventListener("DOMContentLoaded", () => {
   const main = document.querySelector("div#post-toc-container");
   if (!main) return;