Add functionality to handle fragments in ...

... ranges when getting canvases

Author: MImranAsghar

src/Manifest.ts

@@ -164,14 +164,15 @@ export class Manifest extends IIIFResource {
           this._parseRanges(item, path + "/" + i, range);
         } else if (
           (item["@type"] && item["@type"].toLowerCase() === "sc:canvas") ||
-          (item["type"] && item["type"].toLowerCase() === "canvas")
+          (item["type"] && item["type"].toLowerCase() === "canvas") ||
+          (item["type"] && item["type"].toLowerCase() === "specificresource")
         ) {
           // store the ids on the __jsonld object to be used by Range.getCanvasIds()
           if (!range.canvases) {
             range.canvases = [];
           }
-
-          const id: string = item.id || item["@id"];
+          
+          const id: string = item.id || item["@id"] || item["source"];
 
           range.canvases.push(id);
         }

src/Range.ts

@@ -22,7 +22,7 @@ export class Range extends ManifestResource {
   public path: string;
   public treeNode: TreeNode;
 
-  constructor(jsonld?: any, options?: IManifestoOptions) {
+  constructor(jsonld ? : any, options ? : IManifestoOptions) {
     super(jsonld, options);
   }
 
@@ -58,63 +58,90 @@ export class Range extends ManifestResource {
     ).options.resource.getSequences()[0];
     let manifestCanvases =
       manifestSequence.__jsonld.canvases || manifestSequence.__jsonld.elements;
+
     const canvasLength = this.canvases ? this.canvases.length : 0;
     let canvasItems: (Canvas | null)[] = new Array(canvasLength).fill(null);
 
+    const rangeItems = this.__jsonld.items;
+
     if (manifestCanvases && this.canvases) {
       for (let i = 0; i < manifestCanvases.length; i++) {
-        const c = manifestCanvases[i];
+        let c = manifestCanvases[i];
+
+        const fragmentCanvas = rangeItems.filter(item => {
+          return item.source === c.id;
+        });
 
         if (c.id in this.canvases) {
+          if (fragmentCanvas) {
+            const fragment = fragmentCanvas[0].selector.value;
+            const fragmentCanvasId = `${c.id}#${fragment}`;
+            c = this._updateFragmentIds(c, fragmentCanvasId);
+          }
+
           const canvas: Canvas = new Canvas(c, this.options);
           canvas.index = this.canvases.indexOf(c.id);
           canvasItems.splice(canvas.index, 1, canvas);
         }
       }
     } else if (manifestSequence.__jsonld && this.canvases) {
       for (let i = 0; i < manifestSequence.__jsonld.length; i++) {
-        const c = manifestSequence.__jsonld[i];
+        let c = manifestSequence.__jsonld[i];
+
+        const fragmentCanvas = rangeItems.filter(item => {
+          return item.source === c.id;
+        });
 
         if (this.canvases.includes(c.id)) {
+          const cIndex = this.canvases.indexOf(c.id);
+          if (fragmentCanvas) {
+            const fragment = fragmentCanvas[0].selector.value;
+            const fragmentCanvasId = `${c.id}#${fragment}`;
+            c = this._updateFragmentIds(c, fragmentCanvasId);
+          }
+
           const canvas: Canvas = new Canvas(c, this.options);
+          canvas.index = cIndex;
 
-          canvas.index = this.canvases.indexOf(c.id);
           canvasItems.splice(canvas.index, 1, canvas);
         }
       }
     }
 
     this._canvases =
-      canvasItems.length > 0
-        ? !canvasItems.includes(null)
-          ? <Canvas[]>canvasItems
-          : null
-        : null;
+      canvasItems.length > 0 ?
+      !canvasItems.includes(null) ?
+      < Canvas[] > canvasItems :
+      null :
+      null;
 
     return this._canvases !== null ? this._canvases : [];
   }
 
   // update __jsonld canvas id's because that is used by other functions in
   // the library when working with canvases
-  /*   _updateCanvasIds(canvasJson: any, newCanvasId: string): any {
-      // update ids in annotations
-      const items = canvasJson.items || canvasJson.content;
-      const annotations = items.length && items[0].items ? items[0].items : [];
-      if (annotations && canvasJson.items) {
-        for (let i = 0; i < annotations.length; i++) {
-          canvasJson["id"] = newCanvasId;
-          // update target canvas Id in all canvas annotations
-          canvasJson.items[0].items[i]["target"] = newCanvasId;
-        }
-      } else if (annotations) {
-        for (let i = 0; i < annotations.length; i++) {
-          canvasJson["id"] = newCanvasId;
-          // update target canvas Id in all canvas annotations
-          canvasJson.content[0].items[i]["target"] = newCanvasId;
-        }
+  _updateFragmentIds(canvasJson: any, newCanvasId: string): any {
+    // update ids in annotations
+    const items = canvasJson.items || canvasJson.content;
+    const annotations = items.length && items[0].items ? items[0].items : [];
+
+    if (annotations && canvasJson.items) {
+      for (let i = 0; i < annotations.length; i++) {
+        canvasJson["id"] = newCanvasId;
+        // update target canvas Id in all canvas annotations
+        canvasJson.items[0].items[i]["target"] = newCanvasId;
+      }
+    } else if (annotations) {
+      for (let i = 0; i < annotations.length; i++) {
+        canvasJson["id"] = newCanvasId;
+        // update target canvas Id in all canvas annotations
+        // replace this with (something that looks at other contents)
+        canvasJson.content[0].items[i]["target"] = newCanvasId;
       }
-      return canvasJson;
-    } */
+    }
+
+    return canvasJson;
+  }
 
   getCanvasByIndex(canvasIndex: number): any {
     return this.getCanvases()[canvasIndex];
@@ -286,7 +313,7 @@ export class Range extends ManifestResource {
       return this._ranges;
     }
 
-    return (this._ranges = <Range[]>this.items.filter(m => m.isRange()));
+    return (this._ranges = < Range[] > this.items.filter(m => m.isRange()));
   }
 
   getBehavior(): Behavior | null {
@@ -344,7 +371,7 @@ export class Range extends ManifestResource {
   }
 
   private _parseTreeNode(node: TreeNode, range: Range): void {
-    node.label = <string>range.getLabel().getValue(this.options.locale);
+    node.label = < string > range.getLabel().getValue(this.options.locale);
     node.data = range;
     node.data.type = Utils.normaliseType(TreeNodeType.RANGE);
     range.treeNode = node;
@@ -366,4 +393,4 @@ export class Range extends ManifestResource {
       }
     }
   }
-}
+}

test/fixtures/pres3.json

@@ -186,15 +186,22 @@
         "type": "Range",
         "behavior": "sequence",
         "items": [
-          {
-            "id": "http://example.org/iiif/book1/canvas/0",
-            "type": "Canvas",
-            "label": {
-                "@none": [
-                    "p. 1"
-                ]
+            {
+              "type": "SpecificResource",
+              "source": "http://example.org/iiif/book1/canvas/0",
+              "selector": {
+                "type": "FragmentSelector",
+                "value": "xywh=0,0,750,300"
+              }
+            },
+            {
+                "type": "SpecificResource",
+                "source": "http://example.org/iiif/book1/canvas/1",
+                "selector": {
+                  "type": "FragmentSelector",
+                  "value": "xywh=0,0,750,300"
+                }
             }
-          }
         ]
       }
     ]

test/tests/pres3.js

@@ -48,6 +48,13 @@ describe('presentation 3', function() {
 /* B */
     });
 
+    it('updates canvas Id if canvas is listed as a fragment in range', function() {
+        canvas = range.getCanvases()[1];
+        const hasFragment = canvas.id.includes('#xywh=')
+        expect(hasFragment).to.exist;
+/* B */
+    });
+
     it('has an annotation body', function() {
         content = canvas.getContent();
         annotation = content[0];