Check if an image resource is a preferred Choice option; change displ…

…ay order
ProjectMirador · Dec 5, 2024 · ea0fc77 · ea0fc77
1 parent cac3ae2
commit ea0fc77
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 12 deletions.
diff --git a/__tests__/integration/mirador/layers.html b/__tests__/integration/mirador/layers.html
@@ -29,6 +29,9 @@
          { manifestId: "https://prtd.app/aom/manifest.json" },
          { manifestId: "https://prtd.app/fv/manifest.json" },
          { manifestId: "https://manifests.britishart.yale.edu/Osbornfa1" },
+         { manifestId: "https://dvp.prtd.app/hamilton/manifest.json" },
+         { manifestId: "https://iiif.io/api/cookbook/recipe/0036-composition-from-multiple-images/manifest.json" },
+         { manifestId: "https://iiif.io/api/cookbook/recipe/0033-choice/manifest.json" },
        ]
      });
     </script>

diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
@@ -56,7 +56,7 @@ function Layer({
 
   const layer = {
     opacity: 1,
-    visibility: true,
+    visibility: !!resource.preferred,
     ...(layerMetadata || {}),
   };
 

diff --git a/src/lib/CanvasWorld.js b/src/lib/CanvasWorld.js
@@ -147,7 +147,6 @@ export default class CanvasWorld {
 
   /** @private */
   getLayerMetadata(contentResource) {
-    if (!this.layers) return undefined;
     const miradorCanvas = this.canvases.find(c => (
       c.imageResources.find(r => r.id === contentResource.id)
     ));
@@ -156,15 +155,17 @@ export default class CanvasWorld {
 
     const resourceIndex = miradorCanvas.imageResources
       .findIndex(r => r.id === contentResource.id);
+    const resource = miradorCanvas.imageResources
+      .find(r => r.id === contentResource.id);
 
-    const layer = this.layers[miradorCanvas.canvas.id];
-    const imageResourceLayer = layer && layer[contentResource.id];
+    const layer = this.layers && this.layers[miradorCanvas.canvas.id];
+    const imageResourceLayer = (layer && layer[contentResource.id]) || {};
 
     return {
       index: resourceIndex,
       opacity: 1,
       total: miradorCanvas.imageResources.length,
-      visibility: true,
+      visibility: !!resource.preferred,
       ...imageResourceLayer,
     };
   }

diff --git a/src/lib/MiradorCanvas.js b/src/lib/MiradorCanvas.js
@@ -66,19 +66,42 @@ export default class MiradorCanvas {
 
   /** */
   get imageResources() {
+    // FIXME this is in no way production ready; current changes are only for demo purposes
     const resources = flattenDeep([
       this.canvas.getImages().map(i => i.getResource()),
-      this.canvas.getContent().map(i => i.getBody()),
+      this.canvas.getContent().map(i => (i.__jsonld.body.type === 'Choice' ? i.__jsonld.body : i.getBody())),
     ]);
 
     return flatten(resources.map((resource) => {
-      switch (resource.getProperty('type')) {
-        case 'oa:Choice':
-          return new Canvas({ images: flatten([resource.getProperty('default'), resource.getProperty('item')]).map(r => ({ resource: r })) }, this.canvas.options).getImages().map(i => i.getResource());
-        default:
-          return resource;
+      const type = resource.type || resource.getProperty('type');
+      switch (type) {
+        case 'Choice': {
+          return new Canvas({ images: resource.items.map(r => ({ resource: r })) }, this.canvas.options)
+            .getImages().map((img, index) => {
+              const r = img.getResource();
+              if (r) {
+                r.preferred = !index;
+              }
+              return r;
+            });
+        }
+        case 'oa:Choice': {
+          return new Canvas({ images: flattenDeep([resource.getProperty('default'), resource.getProperty('item')]).map(r => ({ resource: r })) }, this.canvas.options).getImages()
+            .map((img, index) => {
+              const r = img.getResource();
+              if (r) {
+                r.preferred = !index;
+              }
+              return r;
+            });
+        }
+        default: {
+          const r = resource;
+          r.preferred = true;
+          return r;
+        }
       }
-    }));
+    })).reverse();
   }
 
   /** */