Merge pull request #5 from NCSU-Libraries/enhancement/api3.0

Enhancement/api3.0
NCSU-Libraries · Jun 25, 2020 · 163c631 · 163c631
2 parents c81cdf0 + 6f97f99
commit 163c631
Show file tree

Hide file tree

Showing 19 changed files with 1,092 additions and 147 deletions.
diff --git a/dist/js/annona.js b/dist/js/annona.js
diff --git a/dist/js/annona.js.map b/dist/js/annona.js.map
diff --git a/docs/3-rangestoryboard.md b/docs/3-rangestoryboard.md
@@ -10,10 +10,11 @@ code {
   white-space: normal;
 }
 </style>
-
+<script src="{{site.url}}{{site.baseurl}}/latest/annona.js"></script>
+<link rel="stylesheet" type="text/css" href="{{site.url}}{{site.baseurl}}/latest/annona.css">
 | Props      | Values |
 | ----------- | ----------- |
-| **rangeurl** | URL for the range of annotations that are going to be loaded into the viewer.|
+| **rangeurl** | URL for the **range** of annotations **or** a **manifest** with at least one annotation link or embedded annotation. In the manifest annotations should be in the OtherContent (v2.0) or items (v3.0) field. that are going to be loaded into the viewer.|
 | styling | string structured styling. See [settings table](/annona/storyboard/#settings) for more options |
 | ws | link to web socket. Should have a wss:// or ws:/ preceding instead of https:// or http://. See [web sockets](#web-sockets) section about how to set up |
 
@@ -25,9 +26,26 @@ See [toolbar icon](/{{site.baseurl}}/storyboard/#toolbar-icons) table for other
 | <i class="fas fa-chevron-left"></i> | `alt+p`(window)/`option+p`(mac) or `alt+,`(windows)/`option+,`(mac) or  <code>alt+<i class="fas fa-arrow-left"></i></code>(window)/<code>option+<i class="fas fa-arrow-left"></i></code>(mac)| This will go to the next annotation in the list|
 | <i class="fas fa-chevron-right"></i> | `alt+n`(window)/`option+n`(mac) or `alt+.`(windows)/`option+.`(mac) or  <code>alt+<i class="fas fa-arrow-right"></i></code>(window)/<code>option+<i class="fas fa-arrow-right"></i></code>(mac) | This will go to the previous annotation in the list|
 
+## Manifest Examples
 
-<script src="{{site.url}}{{site.baseurl}}/latest/annona.js"></script>
-<link rel="stylesheet" type="text/css" href="{{site.url}}{{site.baseurl}}/latest/annona.css">
+```
+<iiif-rangestoryboard rangeurl="https://iiif.bodleian.ox.ac.uk/iiif/manifest/748a9d50-5a3a-440e-ab9d-567dd68b6abb.json" styling="overlaynext: true"></iiif-rangestoryboard>
+```
+**Page 4 has a really cool annotation**
+
+<iiif-rangestoryboard rangeurl="https://iiif.bodleian.ox.ac.uk/iiif/manifest/748a9d50-5a3a-440e-ab9d-567dd68b6abb.json" styling="overlaynext: true"></iiif-rangestoryboard>
+
+
+```
+<iiif-rangestoryboard rangeurl="https://wd-image-positions.toolforge.org/iiif/Q64686074/P18/manifest.json"></iiif-rangestoryboard>
+```
+This manifest has only one annotation so it appears as a regular storyboard.
+
+<iiif-rangestoryboard rangeurl="https://wd-image-positions.toolforge.org/iiif/Q64686074/P18/manifest.json"></iiif-rangestoryboard>
+
+
+
+## Range Examples
 
 ```
 <iiif-rangestoryboard rangeurl="https://tomcrane.github.io/iiif-collector/objects/longer-article.json"></iiif-rangestoryboard>

diff --git a/docs/dist/annona.js b/docs/dist/annona.js
diff --git a/docs/dist/annona.js.map b/docs/dist/annona.js.map
diff --git a/docs/dist2.zip b/docs/dist2.zip
diff --git a/docs/latest/annona.js b/docs/latest/annona.js
diff --git a/docs/latest/annona.js.map b/docs/latest/annona.js.map
diff --git a/docs/latest/dist2.zip b/docs/latest/dist2.zip
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "jquery": "^3.4.1",
     "node-sass": "^4.12.0",
     "openseadragon": "^2.4.0",
+    "raphael": "^2.3.0",
     "rtl-detect": "^1.0.2",
     "sass-loader": "^7.1.0",
     "socket.io-client": "^2.2.0",

diff --git a/src/components/iiifannotation.vue b/src/components/iiifannotation.vue
@@ -69,8 +69,7 @@ export default {
   },
   methods: {
     parseAnnoManifest: function(annotation_data){
-      this.anno = annotation_data.resources ? annotation_data.resources : annotation_data.items ? annotation_data.items : annotation_data;
-      this.anno = Array.isArray(this.anno) ? this.anno : [].concat(this.anno);
+      this.anno = shared.getAnnotations(annotation_data);
       if (annotation_data.hits){
         this.anno.map(elem => elem['hits'] = annotation_data.hits.filter(hit => hit.annotations.indexOf(elem['@id']) > -1)[0])
       }
@@ -108,17 +107,15 @@ export default {
     annoloop: function(hasmanifest) {
       for (var i =0; i < this.anno.length; i++){
         var dictionary = this.getImageData(i); //get image data for annotation
-        var ondict = shared.on_structure(this.anno[i]);
-        var canvasId = this.anno[i].target !== undefined ? this.anno[i].target : ondict[0].full ? ondict.map(element => element.full) : shared.flatten(ondict);
-        canvasId = [].concat(canvasId);
+        var canvasId = shared.getCanvasId(this.anno[i]);
         // Get custom size values
         var size;
         var width = this.settings.width ? this.settings.width : this.manifestlink.indexOf('iiif/2.0') > -1 ? '1200' : '';
         var height = this.settings.height ? this.settings.height : '';
         size = `${width}${height}` != '' ? `${width},${height}` : 'full';
         // If has manifest take canvas ids and check canvas against manifest to get image
         if (hasmanifest) {
-          var imagedata = this.getManifestCanvas(canvasId, this.anno[i], dictionary, size)
+          var imagedata = this.getManifestCanvas(canvasId, this.anno[i], dictionary, size);
           dictionary['image'] = dictionary['image'].concat(imagedata['image']);
           dictionary['fullImage'] = imagedata['fullImage'];
         } else if (!this.settings.text_only) {
@@ -129,7 +126,7 @@ export default {
             var imagedict = this.getImages(canvasRegion['canvasId'], canvasRegion['canvasRegion'], size);
             var imageurl = imagedict['imageurl'];
             dictionary['fullImage'] = imagedict['fullImage']
-            var imagehtml = this.createimagehtml(imageurl, canvasRegion, dictionary, ondict, cn);
+            var imagehtml = this.createimagehtml(imageurl, canvasRegion, dictionary, cn);
             dictionary['image'].push(imagehtml.outerHTML);
           }
         }
@@ -145,11 +142,11 @@ export default {
       this.counts = shared.getTagDict(alltags, this.settings, '');
     },
     // Create SVG elements and corresponding image
-    createimagehtml: function(imageurl, canvasRegion, dictionary, ondict, cn) {
+    createimagehtml: function(imageurl, canvasRegion, dictionary, cn) {
       var imagehtml;
       var isderivative = imageurl.indexOf('img/derivatives') > -1;
       var extension = shared.getExtension(canvasRegion['canvasId']);
-      var path = shared.getSVGoverlay(ondict[cn]);
+      var path = canvasRegion['svg'];
       isderivative ? imageurl = dictionary['fullImage'] : '';
       if (path && !isderivative) {
         imagehtml = this.createSVG(imageurl, canvasRegion['canvasRegion'], dictionary, path, cn)
@@ -203,7 +200,8 @@ export default {
       for (var cn = 0; cn < canvasId.length; cn++){
         var canvasItem = canvasId[cn];
         var ondict = shared.on_structure(anno);
-        var canvasRegion = shared.canvasRegion(canvasItem, ondict[cn]);
+        ondict = ondict ? ondict[cn] : ondict;
+        var canvasRegion = shared.canvasRegion(canvasItem, ondict);
         for(var idx = 0; idx < this.manifest.sequences[0].canvases.length; idx++){
           var existing = this.manifest.sequences[0].canvases[idx];
           var cleanexisting = existing['@id'].replace("https", "http").replace('/info.json', '')
@@ -228,7 +226,7 @@ export default {
         var imageurl = imagedict['imageurl'];
         dictionary['fullImage'] = fullImage;
 
-        var imagehtml = this.createimagehtml(imageurl, canvasRegion, dictionary, ondict, cn);
+        var imagehtml = this.createimagehtml(imageurl, canvasRegion, dictionary, cn);
         images.push(imagehtml.outerHTML)
       }
       return {'fullImage': fullImage, 'image': images}

diff --git a/src/components/rangestoryboard.vue b/src/components/rangestoryboard.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-bind:id="rangeid" class="rangestoryboard" v-bind:class="[!settings.fullpage && !isfullscreen ? 'rangestoryboardview' : 'rangefullpage']">
-  <storyboard :key="position" v-if="annotationurl" v-bind:annotationlist="annotationurl.anno" v-bind:manifesturl="annotationurl.manifest" v-bind:styling="stylingstring" v-bind:ws="isws" v-bind:layers="customlayers"></storyboard>
+  <storyboard :key="position" v-if="annotationurl" v-bind:jsonannotation="annotationurl.jsonanno" v-bind:annotationlist="annotationurl.anno" v-bind:manifesturl="annotationurl.manifest" v-bind:styling="stylingstring" v-bind:ws="isws" v-bind:layers="customlayers"></storyboard>
   <button id="previousPageInactiveButton" v-hotkey="prevshortcut" v-on:click="nextItemRange('prev')" class="pageButton toolbarButton" v-bind:class="[{ 'pageinactive' : prevPageInactive}, viewingDirection == 'rtl' ? 'floatleft' : 'floatright' ]">
     <span v-html="buttons.prev"></span>
     <span class="toolbartext">Previous page</span>
@@ -69,52 +69,95 @@ export default {
     created(){
       // get annotation urls in list
       this.rangeid = this.$props.rangeurl.split("/").slice(-1)[0];
-      var isURL = shared.isURL(this.$props.rangeurl, this.settings);
       this.settings = shared.getsettings(this);
+      var isURL = shared.isURL(this.$props.rangeurl, this.settings);
       if (isURL['isURL']){
         axios.get(this.$props.rangeurl).then(response => {
-          this.getRangeData(response.data);
+          this.manifestOrRange(response.data);
         })
       } else {
-        this.getRangeData(isURL['json'])
+        this.manifestOrRange(isURL['json']);
       }
     },
     methods: {
-      getRangeData: function(rangelist) {
-        var annos = rangelist.contentLayer.otherContent;
-        var canvases = rangelist.canvases ? rangelist.canvases : [];
-        var viewingDirection = rangelist.viewingDirection;
+      manifestOrRange: function(contents) {
+        var listtype = contents['@type'] ? contents['@type'] : contents['type'];
+        if (listtype.toLowerCase().indexOf('manifest') > -1){
+          this.getManifestData(contents);
+        } else {
+          this.getRangeData(contents);
+        }
+      },
+      getManifestData: function(manifest) {
+        var otherContent = [];
+        if (manifest['sequences']){
+          var canvases = shared.flatten(manifest['sequences'].map(element => element['canvases']));
+          for (var cv=0; cv<canvases.length; cv++){
+            var canvas = canvases[cv];
+            var canvasid = shared.getId(canvas);
+            if (canvas['otherContent']){
+              otherContent.push(canvas['otherContent']);
+            }            
+          }
+        } else {
+          otherContent = shared.flatten(manifest['items'].map(element => element['annotations']));
+        }
+        for (var an=0; an<otherContent.length; an++){
+          var anno = otherContent[an];
+          if (anno.constructor.name == 'Array') { 
+            for (var h=0; h<anno.length; h++){
+              this.addToLists(anno[h], an+h, this.$props.rangeurl, canvasid);
+            }
+          } else{
+            this.addToLists(anno, an, this.$props.rangeurl, canvasid);
+          }  
+        }
+        this.setDefaults(manifest);
+      },
+      addToLists: function(anno, an, manifesturl, canvasid, xywh) {
+        if(anno.resources || anno.items){
+          var jsonanno = anno; 
+        } else {
+          var annourl = shared.getId(anno);
+        }
+        var toclabel = anno['label'] ? anno['label'] : `Page ${an + 1}`;
+        var description = anno['description'] ?  anno['description'] : '';
+        this.toc.push({ 'position' :an, 'label' : toclabel, 'description': description});
+        this.rangelist.push({'canvas': canvasid, 'anno': annourl, 'jsonanno': jsonanno, 'manifest': manifesturl, 'section': xywh, 'title': toclabel});
+      },
+      setDefaults: function(data) {
+        var viewingDirection = data.viewingDirection;
         if(viewingDirection === 'right-to-left'){
           this.viewingDirection = 'rtl';
           this.buttons.prev = this.buttons.next;
           this.buttons.next = '<i class="fas fa-chevron-left"></i>';
         }
-        this.rangetitle = rangelist.label;
+        this.annotationurl = this.rangelist[0];
+        this.rangetitle = shared.parseMetaFields(data.label);
+        this.settings.autorun_interval ? '' : this.settings.autorun_interval = 3;
+        this.getTitle();
+        this.$props.ws ? this.isws = this.$props.ws : '';
+        this.$props.layers ? this.customlayers = this.$props.layers : '';
+        this.annotationurl.section ? this.settings.imagecrop = this.annotationurl.section : '';
+        this.getStylingString();
+        this.rangelist.length == 1 ? this.nextPageInactive = true : ''
+      },
+      getRangeData: function(rangelist) {
+        var annos = rangelist.contentLayer.otherContent;
+        var canvases = rangelist.canvases ? rangelist.canvases : [];
         for (var ca=0; ca<annos.length; ca++){
           var canvas = canvases[ca];
           var anno = annos[ca];
           var xywh = '';
           var manifest = canvas ? canvas['within'] : '';
-          manifest = manifest['@id'] ? manifest['@id'] : manifest['id'] ? manifest['id'] : manifest;
+          manifest = shared.getId(manifest);
           if (canvas){
-            var canvasid = canvas['@id'] ? canvas['@id'] : canvas['id'] ? canvas['id'] : canvas;
+            var canvasid = shared.getId(canvas);
             xywh = canvasid.constructor.name === 'String' && canvasid.split("#xywh=").length > 1 ? canvasid.split("#xywh=").slice(-1)[0] : '';
           }
-          var annostring = anno['@id'] ? anno['@id'] : anno['id'] ? anno['id'] : anno;
-          var toclabel = anno['label'] ? anno['label'] : `Page ${ca + 1}`
-          var description = anno['description'] ?  anno['description'] : '';
-          this.toc.push({ 'position' :ca, 'label' : toclabel, 'description': description});
-          this.rangelist.push({'canvas': canvas, 'anno': annostring,  'manifest': manifest, section: xywh, title: anno['label']})
+          this.addToLists(anno, ca, manifest, canvasid, xywh);
         }
-        this.annotationurl = this.rangelist[0];
-        // Get settings and create styling string
-        this.settings.autorun_interval ? '' : this.settings.autorun_interval = 3;
-        this.getTitle();
-        this.$props.ws ? this.isws = this.$props.ws : '';
-        this.$props.layers ? this.customlayers = this.$props.layers : '';
-        this.annotationurl.section ? this.settings.imagecrop = this.annotationurl.section : '';
-        this.getStylingString();
-        this.rangelist.length == 1 ? this.nextPageInactive = true : ''
+        this.setDefaults(rangelist);
       },
       nextItemRange: function(prevornext){
         if (prevornext == 'prev') {
@@ -138,13 +181,15 @@ export default {
       },
       getStylingString: function(){
         for (var key in this.settings){
-          this.stylingstring += `${key}:${this.settings[key]};`
+          this.stylingstring += `${key}:${this.settings[key]};`;
         }
       },
       getTitle: function() {
         var title = this.rangetitle ? this.rangetitle : '';
-        this.rangetitle && this.annotationurl.title ? title += ': ' : '';
-        title += this.annotationurl.title ? this.annotationurl.title : '';
+        if (this.rangelist.length > 1 || this.annotationurl.title.substring(0, 4) != 'Page') {
+          this.rangetitle && this.annotationurl.title ? title += ': ' : '';
+          title += this.annotationurl.title ? this.annotationurl.title : '';
+        }
         this.settings.title = title;
       },
       updateFullScreen: function(fullscreen, expandbutton) {