Add viewer controls to storybook

MuckRock · Dec 14, 2023 · c2e69bd · c2e69bd
1 parent 21e76f2
commit c2e69bd
Show file tree

Hide file tree

Showing 18 changed files with 290 additions and 204 deletions.
diff --git a/src/assets/fullscreen.svg b/src/assets/fullscreen.svg
diff --git a/src/pages/viewer/Body.svelte b/src/pages/viewer/Body.svelte
@@ -17,7 +17,7 @@
     enterAnnotateMode,
     enterModifyMode,
     enterSectionsMode,
-  } from "@/viewer/actions";
+  } from "@/viewer/actions.js";
 
   let docElem;
   let actionHeight;

diff --git a/src/pages/viewer/Footer.svelte b/src/pages/viewer/Footer.svelte
@@ -11,6 +11,7 @@
   export let compact = false;
   export let embed = false;
   export let showFullscreen = false;
+  export let document;
 
   $: style = `height: ${FOOTER_HEIGHT}px;`;
 </script>
@@ -29,7 +30,7 @@
           <Zoom />
         </span>
         {#if embed && showFullscreen}
-          <FullScreen />
+          <FullScreen url={document.canonicalUrl} />
         {/if}
       </div>
     {/if}

diff --git a/src/pages/viewer/Header.svelte b/src/pages/viewer/Header.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
+  import { ChevronLeft24 } from "svelte-octicons";
+  import { createEventDispatcher } from "svelte";
 
   import Loader from "../../common/Loader.svelte";
   import Link from "../../router/Link.svelte";
-  import backArrowSvg from "../../assets/back_arrow.svg?raw";
 
   import Search from "./controls/Search.svelte";
   import Hamburger from "./controls/Hamburger.svelte";
 
-  import { HEADER_HEIGHT } from "./constants";
+  import { HEADER_HEIGHT } from "./constants.js";
 
   export let document: any;
   export let loaded: boolean;
   export let title = true;
   export let showOrg = true;
   export let disableControls = false;
   export let embed = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <header
@@ -29,7 +32,7 @@
       {#if !embed}
         <div class="back">
           <Link back={true}>
-            {@html backArrowSvg}
+            <ChevronLeft24 />
           </Link>
         </div>
       {/if}
@@ -57,7 +60,7 @@
       <Search />
     </div>
     <div class="cell">
-      <Hamburger />
+      <Hamburger on:click={(e) => dispatch("toggle.sidebar")} />
     </div>
   </div>
 </header>

diff --git a/src/pages/viewer/SelectableWord.svelte b/src/pages/viewer/SelectableWord.svelte
@@ -110,7 +110,7 @@
   />
 {/if}
 
-<style lang="scss">
+<style>
   .selectabletext {
     position: absolute;
     color: transparent;
@@ -119,11 +119,11 @@
     transform-origin: left top;
     white-space: pre;
     font-family: monospace;
+  }
 
-    &::selection {
-      background: rgba(66, 147, 240, 0.3);
-      mix-blend-mode: multiply;
-    }
+  .selectabletext::selection {
+    background: rgba(66, 147, 240, 0.3);
+    mix-blend-mode: multiply;
   }
 
   .highlight {

diff --git a/src/pages/viewer/Sidebar.svelte b/src/pages/viewer/Sidebar.svelte
@@ -27,6 +27,7 @@
   export let showOrg = false;
   export let displayAnnotate = false;
   export let disableControls = false;
+  export let show = true;
 
   const style = `top: ${HEADER_HEIGHT}px; bottom: ${FOOTER_HEIGHT}px; width: ${SIDEBAR_WIDTH}px;`;
 
@@ -124,111 +125,113 @@
   }
 </script>
 
-<div
-  class="sidebar"
-  class:white={!signedIn}
-  class:disabled={disableControls}
-  on:mousedown={handleMouseDown}
-  {style}
->
-  {#if loaded}
-    <div class="title">
-      {#if !embed && document?.readable}
-        <div class="updating">
-          {$_("sidebar.updating")}
-          <Progress initializing={true} progress={0} compact={true} />
-        </div>
-      {/if}
+{#if show}
+  <div
+    class="sidebar"
+    class:white={!signedIn}
+    class:disabled={disableControls}
+    on:mousedown={handleMouseDown}
+    {style}
+  >
+    {#if loaded}
+      <div class="title">
+        {#if !embed && document?.readable}
+          <div class="updating">
+            {$_("sidebar.updating")}
+            <Progress initializing={true} progress={0} compact={true} />
+          </div>
+        {/if}
 
-      {#if document?.description != null && document?.description.trim().length > 0}
-        <details class="dc" open>
-          <summary>
-            <h2 class="inlineheader">{document?.title}</h2>
-          </summary>
-          <HtmlField content={document?.description} />
-        </details>
-      {:else}
-        <h2>{document?.title}</h2>
-      {/if}
+        {#if document?.description != null && document?.description.trim().length > 0}
+          <details class="dc" open>
+            <summary>
+              <h2 class="inlineheader">{document?.title}</h2>
+            </summary>
+            <HtmlField content={document?.description} />
+          </details>
+        {:else}
+          <h2>{document?.title}</h2>
+        {/if}
 
-      <TableOfContents />
+        <TableOfContents />
 
-      <hr />
-      {#if !hidePdfLink}
-        <div>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            class="plausible-event-name=viewer-original-document"
-            href={document?.pdf}
-          >
-            {$_("sidebar.original")}
-          </a>
-        </div>
-      {/if}
-      {#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
-        <div>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            class="plausible-event-name=viewer-related-url"
-            href={document?.relatedArticleUrl}
-          >
-            {$_("sidebar.related")}
-          </a>
-        </div>
-      {/if}
-      <small>
-        <p>
-          {$_("sidebar.contributed", {
-            values: {
-              name: showOrg ? document?.orgString : document?.userOrgString,
-            },
-          })}
-        </p>
-      </small>
-      {#if document?.source !== null && document?.source.trim().length > 0}
+        <hr />
+        {#if !hidePdfLink}
+          <div>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              class="plausible-event-name=viewer-original-document"
+              href={document?.pdf}
+            >
+              {$_("sidebar.original")}
+            </a>
+          </div>
+        {/if}
+        {#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
+          <div>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              class="plausible-event-name=viewer-related-url"
+              href={document?.relatedArticleUrl}
+            >
+              {$_("sidebar.related")}
+            </a>
+          </div>
+        {/if}
         <small>
           <p>
-            {$_("sidebar.source", {
-              values: { source: document?.source },
+            {$_("sidebar.contributed", {
+              values: {
+                name: showOrg ? document?.orgString : document?.userOrgString,
+              },
             })}
           </p>
         </small>
-      {/if}
-      {#if document?.editAccess}
-        <div>
-          <AccessIcon {document} showText={true} />
-        </div>
-      {/if}
-      {#if ocrEngine}
-        <small><p>OCR: {ocrEngine}</p></small>
-      {/if}
-    </div>
+        {#if document?.source !== null && document?.source.trim().length > 0}
+          <small>
+            <p>
+              {$_("sidebar.source", {
+                values: { source: document?.source },
+              })}
+            </p>
+          </small>
+        {/if}
+        {#if document?.editAccess}
+          <div>
+            <AccessIcon {document} showText={true} />
+          </div>
+        {/if}
+        {#if ocrEngine}
+          <small><p>OCR: {ocrEngine}</p></small>
+        {/if}
+      </div>
 
-    {#if signedIn}
-      <div class="actions">{$_("sidebar.actions")}</div>
-      {#if document?.editAccess}
-        {#each actions as { id, action, header, description, disabled }}
+      {#if signedIn}
+        <div class="actions">{$_("sidebar.actions")}</div>
+        {#if document?.editAccess}
+          {#each actions as { id, action, header, description, disabled }}
+            <SidebarAction
+              class={`plausible-event-name=sidebar-${id}`}
+              {disabled}
+              {action}
+              {header}
+              {description}
+            />
+          {/each}
+        {:else}
           <SidebarAction
-            class={`plausible-event-name=sidebar-${id}`}
-            {disabled}
-            {action}
-            {header}
-            {description}
+            class="plausible-event-name=sidebar-private-note"
+            action={enterAnnotateMode}
+            header={$_("sidebar.privateNote")}
+            description={$_("sidebar.privateNoteDesc")}
           />
-        {/each}
-      {:else}
-        <SidebarAction
-          class="plausible-event-name=sidebar-private-note"
-          action={enterAnnotateMode}
-          header={$_("sidebar.privateNote")}
-          description={$_("sidebar.privateNoteDesc")}
-        />
+        {/if}
       {/if}
     {/if}
-  {/if}
-</div>
+  </div>
+{/if}
 
 <style lang="scss">
   .sidebar {

diff --git a/src/pages/viewer/SimpleBody.svelte b/src/pages/viewer/SimpleBody.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { layout, cancelAnnotation } from "@/viewer/layout.js";
+  import { layout } from "@/viewer/layout.js";
   import { doc } from "@/viewer/document.js";
 
   import AllText from "./AllText.svelte";

diff --git a/src/pages/viewer/TextBody.svelte b/src/pages/viewer/TextBody.svelte
diff --git a/src/pages/viewer/Viewer.svelte b/src/pages/viewer/Viewer.svelte
@@ -209,6 +209,7 @@
       showOrg={$layout.title}
       disableControls={$layout.disableControls}
       embed={$viewer.embed}
+      on:toggle.sidebar={($layout.showSidebar = !$layout.showSidebar)}
     />
     {#if $doc.mode == "image"}
       <Body mode={$doc.mode} />
@@ -221,23 +222,25 @@
     {:else if $doc.mode == "modify"}
       <ThumbnailBody modify={true} />
     {/if}
-    {#if $layout.showSidebar}
-      <Sidebar
-        document={$viewer.document}
-        signedIn={$viewer.me !== null}
-        loaded={$viewer.loaded}
-        embed={$layout.embed}
-        hidePdfLink={$layout.hidePdfLink}
-        showOrg={$layout.showOrg}
-        displayAnnotate={$layout.displayAnnotate}
-        disableControls={$layout.disableControls}
-      />
-    {/if}
+
+    <Sidebar
+      document={$viewer.document}
+      signedIn={$viewer.me !== null}
+      loaded={$viewer.loaded}
+      embed={$layout.embed}
+      hidePdfLink={$layout.hidePdfLink}
+      showOrg={$layout.showOrg}
+      displayAnnotate={$layout.displayAnnotate}
+      disableControls={$layout.disableControls}
+      show={$layout.showSidebar}
+    />
+
     <Footer
       disableControls={$layout.disableControls}
       compact={$layout.compact}
       embed={$layout.embed}
       showFullscreen={$layout.showFullscreen}
+      document={$viewer.document}
     />
   </Loader>
 {/if}