Merge pull request #900 from MuckRock/885-embed-params

Fix embed param parsing, remove "responsive"
MuckRock · Nov 26, 2024 · 04651bb · 04651bb
2 parents 43da90d + 1f75266
commit 04651bb
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 66 deletions.
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -81,10 +81,10 @@
     "respOff": "Off",
     "respOffHelp": "The document will fit the sizes specified below",
     "width": "Width",
-    "widthAuto": "Will fill the available space if the document is set to responsive, otherwise defaults to 700px",
-    "widthFixed": "Set a maximum width if the document is responsive, or set a fixed size if not responsive",
+    "widthAuto": "Will fill the available space",
+    "widthFixed": "Set a maximum width, in pixels",
     "height": "Height",
-    "heightAuto": "The height is based on the size of the document, with no maximum size. If responsive, will be set to the height of the browser window minus 100px",
+    "heightAuto": "The height is based on the size of the document, with no maximum size",
     "sidebarBehavior": "Sidebar behavior",
     "sbResponsive": "Responsive",
     "sbResponsiveHelp": "Show sidebar automatically on large screens and hide on mobile devices. In embed mode, the sidebar will be hidden",

diff --git a/src/lib/components/documents/Share.svelte b/src/lib/components/documents/Share.svelte
@@ -67,7 +67,6 @@
   let permalink: URL;
   let embedSrc: URL;
   let iframe: string;
-  // let wpShortcode: string; is broken in WordPress
 
   let customizeEmbedOpen = false;
   let editOpen = false;
@@ -82,14 +81,6 @@
         embedSrc = embedUrl(document, embedUrlParams);
 
         iframe = `<iframe src="${embedSrc.href}"`;
-        /*
-        wpShortcode = `[documentcloud url="${embedSrc.href}" ${Array.from(
-          embedUrlParams,
-        )
-          .slice(1)
-          .map(([key, value]) => `${key}="${value}"`)
-          .join(" ")}]`;
-        */
         if ($embedSettings.width) {
           iframe += ` width="${$embedSettings.width}"`;
         }
@@ -103,7 +94,6 @@
         embedSrc = canonicalPageUrl(document, page);
         embedSrc.searchParams.set("embed", "1");
         iframe = `<iframe src="${embedSrc.href}" />`;
-        // wpShortcode = `[documentcloud url="${embedSrc}"]`;
         break;
       case "note":
         const noteObject = document.notes?.find(
@@ -114,7 +104,6 @@
           embedSrc = canonicalNoteUrl(document, noteObject);
           embedSrc.searchParams.set("embed", "1");
           iframe = `<iframe src="${embedSrc.href}" />`;
-          // wpShortcode = `[documentcloud url="${embedSrc}"]`;
         }
         break;
     }
@@ -222,27 +211,6 @@
           --font-size="var(--font-sm)"
         />
       </Field>
-      <!-- wp shortcode is broken at the moment
-      <Field>
-        <FieldLabel>
-          WordPress Shortcode
-          <Button
-            slot="action"
-            size="small"
-            ghost mode="primary"
-            on:click={() => copy(wpShortcode)}
-            disabled={!navigator.clipboard}
-          >
-            <Copy16 /> Copy
-          </Button>
-        </FieldLabel>
-        <Text
-          value={wpShortcode}
-          --font-family="var(--font-mono)"
-          --font-size="var(--font-sm)"
-        />
-      </Field> 
-      -->
 
       <Field>
         <FieldLabel>

diff --git a/src/lib/utils/embed.ts b/src/lib/utils/embed.ts
@@ -28,7 +28,7 @@ export interface EmbedSettingConfig {
 }
 
 export let settings = {
-  responsive: null,
+  // responsive: null,
   width: null,
   height: null,
   sidebar: null,
@@ -42,7 +42,7 @@ export let settings = {
 export type EmbedSettings = Record<keyof typeof settings, null | number>;
 
 export const defaultSettings: EmbedSettings = {
-  responsive: 1,
+  // responsive: 1,
   width: null,
   height: null,
   sidebar: null,
@@ -68,14 +68,27 @@ export function getEmbedSettings(searchParams: URLSearchParams): EmbedSettings {
   const embedSettings = Object.assign({}, defaultSettings);
   Object.keys(embedSettings).forEach((key) => {
     if (searchParams.has(key)) {
-      embedSettings[key] = searchParams.get(key);
+      embedSettings[key] = truthy(searchParams.get(key));
     }
   });
   return embedSettings;
 }
 
+function truthy(
+  value: string | number | boolean | null | undefined,
+): boolean | number {
+  if (value === undefined) return false;
+  if (value === null) return false;
+
+  if (typeof value === "boolean") return value;
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return JSON.parse(value);
+
+  return false;
+}
+
 export const settingsConfig: Record<keyof EmbedSettings, EmbedSettingConfig> = {
-  responsive: {
+  /*   responsive: {
     storageIndex: 8, // out-of-order because added later
     defaultValue: 1,
     field: {
@@ -95,6 +108,7 @@ export const settingsConfig: Record<keyof EmbedSettings, EmbedSettingConfig> = {
       ],
     },
   },
+ */
   width: {
     storageIndex: 1,
     defaultValue: null,

diff --git a/src/lib/utils/tests/__snapshots__/embed.test.ts.snap b/src/lib/utils/tests/__snapshots__/embed.test.ts.snap
@@ -80,26 +80,6 @@ exports[`embed settings > settingsConfig 1`] = `
     },
     "storageIndex": 4,
   },
-  "responsive": {
-    "defaultValue": 1,
-    "field": {
-      "label": "dialogDocumentEmbedDialog.responsive",
-      "options": [
-        {
-          "help": "dialogDocumentEmbedDialog.respOnHelp",
-          "label": "dialogDocumentEmbedDialog.respOn",
-          "value": 1,
-        },
-        {
-          "help": "dialogDocumentEmbedDialog.respOffHelp",
-          "label": "dialogDocumentEmbedDialog.respOff",
-          "value": 0,
-        },
-      ],
-      "type": "toggle",
-    },
-    "storageIndex": 8,
-  },
   "sidebar": {
     "defaultValue": null,
     "field": {

diff --git a/src/lib/utils/tests/embed.test.ts b/src/lib/utils/tests/embed.test.ts
@@ -14,19 +14,19 @@ describe("embed settings", () => {
   });
 
   test("createEmbedSearchParams", () => {
-    expect(createEmbedSearchParams({ responsive: null }).toString()).toEqual(
-      "",
-    );
+    expect(createEmbedSearchParams({ title: null }).toString()).toEqual("");
   });
 
   test("getEmbedSettings", () => {
-    const url = new URL("", "https://www.documentcloud.org");
+    const url = new URL("https://www.documentcloud.org");
     url.searchParams.set("pdf", "false");
     url.searchParams.set("onlyshoworg", "true");
+    url.searchParams.set("title", "0");
     expect(getEmbedSettings(url.searchParams)).toEqual({
       ...defaultSettings,
-      pdf: "false",
-      onlyshoworg: "true",
+      pdf: false,
+      onlyshoworg: true,
+      title: 0,
     });
   });
 });

diff --git a/src/style/kit.css b/src/style/kit.css
@@ -99,7 +99,7 @@ Updated variables and styles for new SvelteKit routes
   --z-dropdownBackdrop: 11;
   --z-dropdown: 12;
   --z-toast: 20;
-  --z-tooltip: 2;
+  --z-tooltip: 21;
 }
 
 html,