ISSUE-443: Better Date Range Facets + Core Ajax improvements + New conditionals

config/schema/format_strawberryfield.schema.yml

@@ -445,7 +445,6 @@ field.formatter.settings.strawberry_pannellum_formatter:
     hide_on_embargo:
       type: string
       label: 'Hide Viewer if embargo is resolved as embargoed.'
-
 field.formatter.settings.strawberry_video_formatter:
   type: mapping
   label: 'Specific Config for strawberry_video_formatter'

format_strawberryfield.libraries.yml

@@ -192,23 +192,23 @@ pdfs_strawberry:
     - format_strawberryfield/iiif_formatstrawberryfield_utils
 
 mirador_projectmirador:
-  version: 3.3.0
+  version: 3.4.0
   license:
     name: Apache
     url: //github.com/ProjectMirador/mirador/blob/master/LICENSE
     gpl-compatible: true
   js:
-    https://cdn.jsdelivr.net/npm/mirador@3.3.0/dist/mirador.min.js: { external: true, minified: true, preprocess: false}
+    https://cdn.jsdelivr.net/npm/mirador@3.4.0/dist/mirador.min.js: { external: true, minified: true, preprocess: false}
     https://cdn.jsdelivr.net/npm/redux-saga@1.2.3/dist/redux-saga.umd.min.js: { external: true, minified: true, preprocess: false}
 
 mirador_projectmirador_4:
-  version: 4.0.0-alpha
+  version: 4.0.0-alpha4
   license:
     name: Apache
     url: //github.com/ProjectMirador/mirador/blob/master/LICENSE
     gpl-compatible: true
   js:
-    https://unpkg.com/mirador@4.0.0-alpha.2/dist/mirador.min.js: { external: true, minified: true, preprocess: false}
+    https://unpkg.com/mirador@4.0.0-alpha.4/dist/mirador.min.js: { external: true, minified: true, preprocess: false}
     https://cdn.jsdelivr.net/npm/redux-saga@1.2.3/dist/redux-saga.umd.min.js: { external: true, minified: true, preprocess: false}
   dependencies:
     - format_strawberryfield/mirador_font
@@ -220,13 +220,13 @@ mirador_font:
       'https://fonts.googleapis.com/css?family=Roboto:300,400,500': { external: true }
 
 mirador_archipelago_custom:
-  version: 3.3.0
+  version: 4.0.0
   license:
     name: Apache
     url: //github.com/ProjectMirador/mirador/blob/master/LICENSE
     gpl-compatible: true
   js:
-    js/mirador-archipelago.js: {minified: false, preprocess: false}
+    js/mirador4-image.min.js: {minified: false, preprocess: false}
     https://cdn.jsdelivr.net/npm/redux-saga@1.2.3/dist/redux-saga.umd.min.js: { external: true, minified: true, preprocess: false}
 
 mirador_strawberry:

format_strawberryfield.services.yml

@@ -16,7 +16,7 @@ services:
     arguments: [ '@string_translation', '@messenger', '@logger.factory' ]
   format_strawberryfield.view_mode_resolver:
     class: Drupal\format_strawberryfield\ViewModeResolver
-    arguments: ['@strawberryfield.utility', '@config.factory']
+    arguments: ['@strawberryfield.utility', '@config.factory', '@context.repository']
   format_strawberryfield.embargo_resolver:
     class: Drupal\format_strawberryfield\EmbargoResolver
     arguments: ['@config.factory', '@current_user', '@request_stack']

js/iiif-annotations_strawberry.js

@@ -20,6 +20,11 @@
             var disableUrlClickWhenVisible = function (event) {
                 // Bound to groupsetting (this)
                 event.preventDefault();
+                // We have no way of cancelling / avoiding bubbling on the annotation onClik
+               // we actually have to check if someone clicked the SVG wrapper.
+                if (event.target.tagName != 'svg') {
+                  return;
+                }
                 // If there is a Link around the image we will reuse as direct link
                 // if we don't prevent the default.
                 // Sadly there is no getVisible() method. But we can check the annotationlayer if any

js/iiif-archipelago-interactions_utils.js

@@ -4,6 +4,7 @@
   var FormatStrawberryfieldIiifUtils = {
 
     images_jmespath_pattern: "items[?type == 'Canvas'].{\"canvas_id\":id ,\"items\": items[?type == 'AnnotationPage'].{\"id\":id,\"image_ids\": items[?motivation == 'painting'].body.id, \"service_ids\": items[?motivation == 'painting'].body.service[].{type: not_null(type, \"@type\"), id: not_null(id, \"@id\")}[?starts_with(type, 'ImageService')].id }}",
+    images_canvas_jmespath_pattern: "[{\"canvas_id\":id ,\"items\": items[?type == 'AnnotationPage'].{\"id\":id,\"image_ids\": items[?motivation == 'painting'].body.id, \"service_ids\": items[?motivation == 'painting'].body.service[].{type: not_null(type, \"@type\"), id: not_null(id, \"@id\")}[?starts_with(type, 'ImageService')].id }}]",
     geoannotation_jmespath_pattern: "items[?type == 'Canvas'].{\"canvas_id\":id ,\"annotations\": annotations[?type == 'AnnotationPage'].{\"id\":id, \"annotation\": items[?motivation == 'georeferencing'].{\"features\": not_null(body[].features[], body.features), \"target\": target}}}",
     geoannotation_jmespath_pattern_split: "items[?type == 'Canvas'].{\"canvas_id\":id ,\"annotations\": annotations[?type == 'AnnotationPage'].{\"id\":id,\"features\": items[?motivation == 'georeferencing'].body[].features, \"target\": items[?motivation == 'georeferencing'].target}}",
     images_jmespath_pattern_with_canvasids: "items[?type == 'Canvas' && id=='{{token1}}'].{\"canvas_id\":id ,\"items\": items[?type == 'AnnotationPage'].{\"id\":id,\"image_ids\": items[?motivation == 'painting'].body.id, \"service_ids\": items[?motivation == 'painting'].body.service[].{type: not_null(type, \"@type\"), id: not_null(id, \"@id\")}[?starts_with(type, 'ImageService')].id }}",
@@ -100,7 +101,11 @@
       return this;
     },
     fetchIIIFManifest: async function (iiifmanifesturl) {
-      const response = await fetch(iiifmanifesturl);
+      const response = await fetch(iiifmanifesturl, {
+          mode: 'cors',
+          method: 'GET'
+        }
+      );
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
@@ -281,8 +286,15 @@
     // @by awesome https://github.com/digitaldogsbody Mike Bennet
     const image_services = jmespath.search(iiifmanifest, this.images_jmespath_pattern);
     return image_services;
+    },
+
+  getIIIFServicesForCanvas: function (iiifcanvas) {
+      // See https://github.com/esmero/format_strawberryfield/pull/252/commits/81094b6cc1d7db6e12602022d7813e9361099595
+      // @by awesome https://github.com/digitaldogsbody Mike Bennet
+    const image_services = jmespath.search(iiifcanvas, this.images_canvas_jmespath_pattern);
+    return image_services;
     }
-  };
+};
 
   /* Make it part of the Global Drupal Object */
   Drupal.FormatStrawberryfieldIiifUtils = FormatStrawberryfieldIiifUtils;

js/iiif-openseadragon_strawberry.js

@@ -545,6 +545,9 @@
           if (!groupsinfojsons.hasOwnProperty(group)) {
             groupsinfojsons[group] = [infojson];
             groupsinfomanifests[group] = [drupalSettings.format_strawberryfield.openseadragon[element_id]?.manifesturl];
+            if (drupalSettings.format_strawberryfield.openseadragon[element_id]?.manifestother) {
+              groupsinfomanifests[group].push(...drupalSettings.format_strawberryfield.openseadragon[element_id]?.manifestother);
+            }
             if (typeof icons_prefixurl == "undefined" || icons_prefixurl == "") {
               icons_prefixurl = "https://cdn.jsdelivr.net/npm/openseadragon@2.4.2/build/openseadragon/images/";
             }
@@ -585,6 +588,7 @@
           }
           else {
             groupsinfojsons[group].push(infojson);
+            groupsinfomanifests[group].push(...drupalSettings.format_strawberryfield.openseadragon[element_id]?.manifestother);
             groupsinfomanifests[group].push(drupalSettings.format_strawberryfield.openseadragon[element_id]?.manifesturl);
             // hide other strawberry-media-items
             $(this).height(0);
@@ -674,13 +678,45 @@
             const $iiifmanifest = Drupal.FormatStrawberryfieldIiifUtils.fetchIIIFManifest($manifest);
             $iiifmanifest.then(iiifmanifest_promise_resolved => {
               let $iiif_parsed = Drupal.FormatStrawberryfieldIiifUtils.getIIIFServices(iiifmanifest_promise_resolved);
+              let future_canvas_promises = [];
               if (Array.isArray($iiif_parsed)) {
                 $iiif_parsed = $iiif_parsed.map($canvas_structure => {
-                  const first_image_service = $canvas_structure.items.map($item => $item.service_ids[0]);
-                  infojson.push(first_image_service[0]+'/info.json');
-                  // this is async so it should have started already
+                  if ($canvas_structure?.items !== null) {
+                      // this is async so it should have started already
+                    const first_image_service = $canvas_structure.items.map($item => $item.service_ids[0]);
+                    infojson.push(first_image_service[0] + '/info.json');
+                  } else if ($canvas_structure?.canvas_id) {
+                    const $iiifCanvas = Drupal.FormatStrawberryfieldIiifUtils.fetchIIIFManifest($canvas_structure.canvas_id);
+                    future_canvas_promises.push($iiifCanvas);
+                  }
                 });
               }
+              if (future_canvas_promises.length > 0) {
+                  Promise.allSettled(future_canvas_promises).then(iiifCanvas_promises_resolved => {
+                      iiifCanvas_promises_resolved.forEach((iiifCanvas_promise_resolved) => {
+                        if (iiifCanvas_promise_resolved.status == "fulfilled") {
+                          let $iiif_canvas_parsed = Drupal.FormatStrawberryfieldIiifUtils.getIIIFServicesForCanvas(iiifCanvas_promise_resolved.value);
+                          if (Array.isArray($iiif_canvas_parsed)) {
+                              $iiif_canvas_parsed = $iiif_canvas_parsed.map($canvas_structure_remote => {
+                                  if ($canvas_structure_remote?.items !== null) {
+                                      // this is async so it should have started already
+                                      const first_image_service = $canvas_structure_remote.items.map($item => $item.service_ids[0]);
+                                      tiles.push(first_image_service[0] + '/info.json');
+                                      viewers[element_id].addTiledImage({tileSource: first_image_service[0] + '/info.json'});
+                                      //viewers[element_id].tileSources = viewers[element_id].tileSources.concat(first_image_service[0] + '/info.json');
+                                      if (tiles.length > 1) {
+                                          viewers[element_id].addReferenceStrip();
+                                      }
+                                  }
+                              });
+                          }
+                      }});
+                          viewers[element_id].open(tiles, 0);
+                          viewers[element_id].addReferenceStrip();
+                  }
+                  )
+              }
+
               infojson.forEach($tile => {tiles.push($tile);viewers[element_id].addTiledImage({tileSource: $tile });});
               viewers[element_id].tileSources = viewers[element_id].tileSources.concat(infojson);
               if (infojson.length >= 1) {
@@ -691,6 +727,8 @@
                 loadFirstAnnotationOfGroup(group);
                 viewers[element_id].goToPage(0);
               }
+            }).catch(function () {
+                console.log("IIIF Loading from URL failed and Rejected");
             });
           });
         }

js/mirador_strawberry.js

@@ -241,6 +241,8 @@
               manifestId: manifest.id,
             })).view
           }
+          let allCanvases = yield effects.select(Mirador.selectors.getCanvases, { windowId});
+
           let canvasIds = [];
           let currentDrupalNodeId = [];
           let currentDrupalNodeForViews = [];
@@ -382,12 +384,6 @@
               allowClose: false,
               imageToolsEnabled: true,
               imageToolsOpen: true,
-              views: [
-                { key: 'single', behaviors: [null, 'individuals'] },
-                { key: 'book', behaviors: [null, 'paged'] },
-                { key: 'scroll', behaviors: ['continuous'] },
-                { key: 'gallery' },
-              ],
             };
             $options.windows[0].workspaceControlPanel = {
               enabled: false
@@ -396,6 +392,18 @@
               isWorkspaceAddVisible: false,
               allowNewWindows: true,
             };
+            // Needed bc of how Image Pluging uses Canvas info/get Image from OSD to apply effects.
+            $options.osdConfig = {
+              crossOriginPolicy: 'Anonymous'
+            }
+            $options.theme = {
+              palette: {
+                primary: {
+                  main: '#1967d2',
+                },
+              },
+            };
+
           }
 
 
@@ -483,6 +491,7 @@
                 });
               }
             }
+
             $options = {
               ...$options,
               ...viewer_override,
@@ -492,8 +501,16 @@
 
           //@TODO add an extra Manifests key with every other one so people can select the others.
           if (drupalSettings.format_strawberryfield.mirador[element_id]['custom_js'] == true) {
-            const miradorInstance = renderMirador($options);
-            console.log('initializing Custom Mirador 3.3.0')
+            const miradorInstance = Mirador.viewerWithImagePlugin($options, [formatStrawberryFieldReactPlugin]);
+            console.log('initializing Custom Mirador 4.0 with Image Tools')
+            if (miradorInstance) {
+              // To allow bubling up we need to add this one to the document
+              // Multiple Miradors will replace each other?
+              // @TODO check on that diego..
+              document.addEventListener('sbf:canvas:change', CaptureAdoMiradorCanvasChange.bind(document, miradorInstance, element_id));
+              document.addEventListener('sbf:ado:change', CaptureAdoMiradorAdoChange.bind(document, miradorInstance, element_id));
+              const windowId = Object.keys(miradorInstance.store.getState().windows)[0];
+            }
           }
           else {
             const miradorInstance = Mirador.viewer($options, [formatStrawberryFieldReactPlugin]);
@@ -504,8 +521,10 @@
               // @TODO check on that diego..
               document.addEventListener('sbf:canvas:change', CaptureAdoMiradorCanvasChange.bind(document, miradorInstance, element_id));
               document.addEventListener('sbf:ado:change', CaptureAdoMiradorAdoChange.bind(document, miradorInstance, element_id));
+              const windowId = Object.keys(miradorInstance.store.getState().windows)[0];
             }
           }
+
           // Work around https://github.com/ProjectMirador/mirador/issues/3486
           const mirador_window = document.getElementById(element_id);
           var observer = new MutationObserver(function(mutations) {

js/plugin.iiif-iabookreader_strawberry.js

@@ -196,6 +196,7 @@ BookReader.prototype.setup = (function(super_) {
             numPages: null,
             bookUrl: null
         };
+        this.leafsToUUids = {};
         this.searchTerm = '';
         this.searchResults = null;
         this.searchInsideUrl = options.searchInsideUrl;
@@ -382,6 +383,7 @@ function processBehaviorToIABookreaderModeV2(jsonLd) {
 
 BookReader.prototype.parseSequence = function (sequenceId) {
     var self = this;
+
     // viewingDirection is the same in V2 and V3 BUT on V2 it can be inside a sequence ..
     if (typeof(self.jsonLd.viewingDirection) !== "undefined") {
         if (self.jsonLd.viewingDirection == "right-to-left") {
@@ -560,11 +562,14 @@ BookReader.prototype.parseSequence = function (sequenceId) {
                         imageObj.canvasHeight = canvas.height;
 
                         if (!(/#xywh/).test(image.on)) {
-                            imagesList.push(imageObj);
+                          imagesList.push(imageObj);
+                          const UUIDandSequence = self.getUUIDAndSequencefromCanvas(canvas['@id']);
+                          if (UUIDandSequence) {
+                            self.leafsToUUids[UUIDandSequence] = imagesList.length;
+                          }
                         }
                     }
                 });
-
             }
         });
 
@@ -598,6 +603,10 @@ BookReader.prototype.parseSequence = function (sequenceId) {
                         // Add it to the images list
                         if (!(/#xywh/).test(annotation.target)) {
                             imagesList.push(imageObj);
+                            const UUIDandSequence = self.getUUIDAndSequencefromCanvas(item.id);
+                            if (UUIDandSequence) {
+                              self.leafsToUUids[UUIDandSequence] = imagesList.length;
+                            }
                         }
                     }
                 });
@@ -703,6 +712,41 @@ BookReader.prototype.getIIIFInfoJsonFromURL = function(string){
   }
 }
 
+BookReader.prototype.getUUIDAndSequencefromCanvas = function(string){
+  let url;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return '';
+  }
+  let path = url.pathname;
+  // IIIF will have  id/crop/size/rotation/filename So we will split and reverse
+  if (path !== '/') {
+    // Assumes /somestuff/84e618e0-3456-4edd-841e-5b4c9e8e0490/canvas/p1
+    let path_parts = path.split("/");
+    if (path_parts.length >= 5) {
+      path_parts = path_parts.reverse();
+      path_parts = path_parts.slice(0,3);
+      if (path_parts.length == 3) {
+        const page = path_parts[0].replace(/\D/g,'');
+        const uuid = path_parts[2];
+        // We will use this as an index to match File UUIDs and their internal Sequence IDs to IABookreader pages.
+        return uuid + '/' + page;
+      }
+    }
+    else {
+      // Might be non IIIF, so we return the Image itself.
+      return null;
+    }
+  }
+  else {
+    return null;
+  }
+}
+
+
+
 /**
  * @param  {number} index
  * @return {Number|undefined}
@@ -893,13 +937,22 @@ BookReader.prototype.search =  (function(super_) {
                         return typeof a === 'object' && !Array.isArray(a) && a !== null
                     }
                 );
+
                 searchInsideResults.matches.forEach(function(match,index,array) {
+                    let uuid = match?.sbf_metadata.file_uuid;
                     match.par[0].boxes.forEach(function(box,index,array) {
-                        var pageindex = self.leafNumToIndex(array[index].page);
+                        let page = array[index].page;
+                        if (self.leafsToUUids.hasOwnProperty(uuid+'/'+(parseInt(page)+1))) {
+                          page = self.leafsToUUids[uuid+'/'+(parseInt(page)+1)];
+                          page = page - 1;
+                        }
+                        var pageindex = self.leafNumToIndex(page);
                         array[index].l = Math.round(box.l * self.getPageWidth(pageindex));
                         array[index].t = Math.round(box.t * self.getPageHeight(pageindex));
                         array[index].r = Math.round(box.r * self.getPageWidth(pageindex));
                         array[index].b = Math.round(box.b * self.getPageHeight(pageindex));
+                        array[index].page = page;
+                        match.par[0].page = page;
                     })
                 });
                 hasCustomSuccess