Add language options to Scroll component. (#237)

* Add language popover. * Add scroll language detection. * Update docs.
samvera-labs · Nov 25, 2024 · 59ba84a · 59ba84a
1 parent 6768d2b
commit 59ba84a
Show file tree

Hide file tree

Showing 18 changed files with 450 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "@iiif/parser": "^2.1.4",
     "@nulib/use-markdown": "^0.2.2",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-popover": "^1.1.2",
@@ -95,7 +96,7 @@
     "react-error-boundary": "^4.1.2",
     "react-i18next": "^15.1.1",
     "sanitize-html": "^2.13.1",
-    "swiper": "^9.4.1",
+    "swiper": "^9.0.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

diff --git a/pages/docs/scroll.mdx b/pages/docs/scroll.mdx
@@ -102,12 +102,13 @@ const MyCustomScroll = () => {
 
 `Scroll` can configured through an `options` prop, which will serve as a object for common options.
 
-| Prop             | Type                  | Required | Default |
-| ---------------- | --------------------- | -------- | ------- |
-| `iiifContent`    | `string`              | Yes      |         |
-| `options`        | `object`              | No       |         |
-| `options.offset` | `number`              | No       | `0`     |
-| `options.figure` | [See Figure](#figure) | No       |         |
+| Prop               | Type                      | Required | Default |
+| ------------------ | ------------------------- | -------- | ------- |
+| `iiifContent`      | `string`                  | Yes      |         |
+| `options`          | `object`                  | No       |         |
+| `options.offset`   | `number`                  | No       | `0`     |
+| `options.figure`   | [See Figure](#figure)     | No       |         |
+| `options.language` | [See Language](#language) | No       |         |
 
 ### Offset
 
@@ -142,3 +143,31 @@ The Scroll component renders a `figure` element for each Canvas. The `options.fi
   }}
 />
 ```
+
+### Language
+
+The `options.language` object allows for the configuration of the language options for the Scroll component. This includes the default languages and language options.
+
+By default, the `options.language` object is not set, and the Scroll component will not display any language options. When the `options.language` object is set, the Scroll component will display a language dropdown that allows users to filter the content by languages within the Manifest annotation body resources. If defaultLanguages are not set, the Scroll component will display all languages available in the Manifest.
+
+The `options.language.options` array should be an array of objects with key-value pairs where the key is the language code and the value is the language name. The language code should match the language code in the Manifest annotation body resources.
+
+| Prop                                | Type                           | Required | Default |
+| ----------------------------------- | ------------------------------ | -------- | ------- |
+| `options.language.defaultLanguages` | `string[]`                     | No       | `[]`    |
+| `options.language.enabled`          | `boolean`                      | Yes      | `false` |
+| `options.language.options`          | `Array<[key: string]: string>` | No       | `[]`    |
+
+```jsx
+<Scroll
+  iiifContent="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
+  options={{
+    offset: 90,
+    language: {
+      defaultLanguages: ["en"],
+      enabled: true,
+      options: [{ en: "English" }, { ar: "Arabic" }],
+    },
+  }}
+/>
+```
diff --git a/pages/docs/scroll/demo.mdx b/pages/docs/scroll/demo.mdx
@@ -16,6 +16,13 @@ A UI component rendering vertical scrolling articles that output individual Canv
 ---
 
 <Scroll
-  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5756"
-  options={{ offset: 90 }}
+  iiifContent="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
+  options={{
+    offset: 90,
+    language: {
+      defaultLanguages: ["en"],
+      enabled: true,
+      options: [{ en: "English" }, { ar: "Arabic" }],
+    },
+  }}
 />
diff --git a/src/components/Scroll/Annotation/Body.styled.tsx b/src/components/Scroll/Annotation/Body.styled.tsx
@@ -3,10 +3,18 @@ import { styled } from "src/styles/stitches.config";
 const highlightColor = "255, 197, 32"; // #FFC520
 
 const TextualBody = styled("div", {
+  opacity: "1",
+
   "&[dir=rtl]": {
     textAlign: "right",
   },
 
+  "&[data-active-language=false]": {
+    opacity: "0",
+    width: "0",
+    height: "0",
+  },
+
   ul: {
     padding: "1rem",
   },

diff --git a/src/components/Scroll/Annotation/Body.tsx b/src/components/Scroll/Annotation/Body.tsx
@@ -18,7 +18,7 @@ const ScrollAnnotationBody = ({
   type?: string;
 }) => {
   const { state } = useContext(ScrollContext);
-  const { searchActiveMatch, searchString } = state;
+  const { activeLanguages, searchActiveMatch, searchString } = state;
 
   let value = String(body.value);
 
@@ -65,6 +65,7 @@ const ScrollAnnotationBody = ({
   const isRtl = ["ar"].includes(String(body.language));
   const dir = isRtl ? "rtl" : "ltr";
   const fontSize = isRtl ? "1.3em" : "1em";
+  const lang = String(body.language);
 
   useEffect(() => {
     // Scroll to the active match
@@ -84,17 +85,17 @@ const ScrollAnnotationBody = ({
   if (!innerHtml) return null;
 
   return (
-    <>
-      <TextualBody
-        dangerouslySetInnerHTML={{ __html: innerHtml }}
-        data-body-id={id}
-        data-testid="scroll-item-body"
-        style={{ "--num-items": numItems } as React.CSSProperties}
-        id={id}
-        dir={dir}
-        css={{ fontSize }}
-      />
-    </>
+    <TextualBody
+      dangerouslySetInnerHTML={{ __html: innerHtml }}
+      data-active-language={activeLanguages?.includes(lang)}
+      data-body-id={id}
+      data-testid="scroll-item-body"
+      style={{ "--num-items": numItems } as React.CSSProperties}
+      id={id}
+      dir={dir}
+      css={{ fontSize }}
+      lang={lang}
+    />
   );
 };
 

diff --git a/src/components/Scroll/Items/Item.tsx b/src/components/Scroll/Items/Item.tsx
@@ -33,21 +33,18 @@ const ScrollItem: React.FC<ScrollItemProps> = ({
   itemNumber,
 }) => {
   const { state } = React.useContext(ScrollContext);
-  const { annotations, vault, options } = state;
+  const { activeLanguages, annotations, vault, options } = state;
   const { figure } = options;
 
   const canvas = vault?.get(item) as CanvasNormalized;
 
-  const numItems = annotations?.filter(
-    // @ts-ignore
-    (annotation) => annotation.target?.source?.id === item.id,
-  ).length;
+  const numItems = activeLanguages?.length;
 
   const annotationBody = annotations
     // @ts-ignore
     ?.filter((annotation) => annotation.target?.source?.id === item.id)
     ?.map((annotation) => {
-      return annotation?.body?.map((body, index) => (
+      return annotation?.body.map((body, index) => (
         <ScrollItemBody
           body={body as unknown as EmbeddedResource}
           key={index}

diff --git a/src/components/Scroll/Layout/Layout.styled.tsx b/src/components/Scroll/Layout/Layout.styled.tsx
@@ -1,19 +1,20 @@
 import { styled } from "src/styles/stitches.config";
 
-const StyledScrollFixed = styled("div", {
+const StyledScrollSearch = styled("div", {
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
+  background: "$primary",
+  filter: "drop-shadow(2px 2px 5px #0002)",
+  borderRadius: "2rem",
 });
 
 const StyledScrollPanel = styled("div", {
   position: "absolute",
   zIndex: 10,
-  background: "$primary",
-  filter: "drop-shadow(2px 2px 5px #0002)",
-  borderRadius: "2rem",
   overflow: "hidden",
   height: "2rem",
+  justifyContent: "space-between",
 });
 
 const StyledScrollHeader = styled("header", {
@@ -39,7 +40,7 @@ const StyledScrollWrapper = styled("section", {
 
 export {
   StyledScrollPanel,
-  StyledScrollFixed,
+  StyledScrollSearch,
   StyledScrollHeader,
   StyledScrollWrapper,
 };