Merge pull request #879 from MuckRock/query-param-links

Pass query through viewer links between modes

src/lib/components/viewer/AnnotationLayer.svelte

@@ -14,8 +14,10 @@ Assumes it's a child of a ViewerContext
 
   import { invalidate, pushState } from "$app/navigation";
 
+  import { fly } from "svelte/transition";
   import { _ } from "svelte-i18n";
 
+  import Note from "./Note.svelte";
   import EditNote from "../forms/EditNote.svelte";
   import NoteTab from "./NoteTab.svelte";
 
@@ -31,8 +33,6 @@ Assumes it's a child of a ViewerContext
     isEmbedded,
   } from "$lib/components/viewer/ViewerContext.svelte";
   import { getNotes, getViewerHref } from "$lib/utils/viewer";
-  import Note from "./Note.svelte";
-  import { fly } from "svelte/transition";
 
   export let scale = 1.5;
   export let page_number: number; // zero-indexed

src/lib/components/viewer/Page.svelte

@@ -5,6 +5,8 @@ Assumes it's a child of a ViewerContext
 -->
 
 <script lang="ts">
+  import { page } from "$app/stores";
+
   import { createEventDispatcher, onMount } from "svelte";
   import { _ } from "svelte-i18n";
 
@@ -17,6 +19,7 @@ Assumes it's a child of a ViewerContext
     getDocument,
     isEmbedded,
   } from "$lib/components/viewer/ViewerContext.svelte";
+  import { getQuery } from "$lib/utils/search";
   import { getViewerHref } from "$lib/utils/viewer";
 
   export let page_number: number;
@@ -44,6 +47,7 @@ Assumes it's a child of a ViewerContext
     mode: "document",
     page: page_number,
     embed,
+    query: getQuery($page.url, "q"),
   });
 
   function isDOMRectReadOnly(
@@ -121,7 +125,7 @@ Assumes it's a child of a ViewerContext
   <div class="title"><slot name="title" /></div>
   <header>
     <h4 class="pageNumber">
-      <a {href}>
+      <a href={documentHref}>
         {$_("documents.pageAbbrev")}
         {page_number}
       </a>

src/lib/components/viewer/ReadingToolbar.svelte

@@ -83,7 +83,7 @@ Assumes it's a child of a ViewerContext
         {#each readModes.entries() as [value, name]}
           <Tab
             active={$mode === value}
-            href={getViewerHref({ document, mode: value, embed })}
+            href={getViewerHref({ document, mode: value, embed, query })}
           >
             <svelte:component this={icons[value]} />
             {name}
@@ -127,7 +127,10 @@ Assumes it's a child of a ViewerContext
   <Flex justify="end" slot="right">
     {#if !BREAKPOINTS.WRITE_MENU && canWrite}
       {#each writeModes as [value, name]}
-        <Button ghost href={getViewerHref({ document, mode: value, embed })}>
+        <Button
+          ghost
+          href={getViewerHref({ document, mode: value, embed, query })}
+        >
           <span class="icon"><svelte:component this={icons[value]} /></span>
           {name}
         </Button>

src/lib/utils/tests/viewer.test.ts

@@ -15,8 +15,8 @@ import {
   pageHashUrl,
   READING_MODES,
   WRITING_MODES,
-} from "@/lib/api/documents";
-import { noteHashUrl } from "@/lib/api/notes";
+} from "$lib/api/documents";
+import { noteHashUrl } from "$lib/api/notes";
 
 describe("getViewerHref", () => {
   const docUrl = canonicalUrl(document);

src/lib/utils/viewer.ts

@@ -17,24 +17,36 @@ interface ViewerHrefOptions {
   note?: Note;
   mode?: ViewerMode;
   embed?: boolean;
+  query?: string;
 }
 
 export function getViewerHref(options: ViewerHrefOptions = {}) {
-  const { document, page, note, mode = "document", embed = false } = options;
+  const {
+    document,
+    page,
+    note,
+    query,
+    mode = "document",
+    embed = false,
+  } = options;
+
   let hash = "";
   if (page) hash = pageHashUrl(page);
   if (note) hash = noteHashUrl(note);
+
+  const params = { mode };
+  if (embed) params["embed"] = 1;
+  if (query) params["q"] = query;
+
   if (document) {
     // If we have the document, we can provide an absolute URL
     let url = canonicalUrl(document);
-    url.searchParams.set("mode", mode);
-    if (embed) url.searchParams.set("embed", "1");
+    url.search = new URLSearchParams(params).toString();
     if (hash) url.hash = hash;
     return url.href;
   } else {
     // If we don't, we can provide a relative URL
-    let href = `?mode=${mode}`;
-    if (embed) href += "&embed=1";
+    let href = "?" + new URLSearchParams(params).toString();
     if (hash) href += hash;
     return href;
   }