feat: annotation-highlighting on click

packages/portal/src/components/generic/PaginationNavInput.vue

@@ -46,13 +46,16 @@
       >
         <b-form-input
           v-model="page"
+          name="page"
           :aria-label="$t('pageNumber')"
           :lazy="true"
           :max="totalPages"
           :min="1"
           :number="true"
           data-qa="pagination input"
           type="number"
+          @blur.native="handlePageInputChange"
+          @change.native="handlePageInputChange"
         /> {{ $t('of') }} {{ totalPages }}
       </li>
       <li
@@ -160,6 +163,13 @@
       progress: {
         type: Boolean,
         default: false
+      },
+      /**
+       * Array of url params to exclude on pagination
+       */
+      excludeParams: {
+        type: Array,
+        default: () => []
       }
     },
 
@@ -199,22 +209,25 @@
     watch: {
       '$route.query.page'() {
         this.page = Number(this.$route?.query?.page) || 1;
-      },
-      page: 'changePaginationNav'
+      }
     },
 
     methods: {
-      changePaginationNav() {
-        if (this.page) {
-          this.$router.push(this.linkGen(this.page));
-        }
+      handlePageInputChange() {
+        this.page && this.$router.push(this.linkGen(this.page));
       },
 
-      linkGen(pageNo) {
+      linkGen(page) {
+        const query = { ...this.$route.query, page };
+
+        for (const excludeParam of this.excludeParams) {
+          delete query[excludeParam];
+        }
+
         return {
+          hash: this.$route.hash,
           path: this.$route.path,
-          query: { ...this.$route.query, page: pageNo },
-          hash: this.$route.hash
+          query
         };
       }
     }

packages/portal/src/components/item/ItemMediaPaginationToolbar.vue

@@ -10,6 +10,7 @@
       :page-input="false"
       :button-icon-class="'icon-arrow-outline'"
       :progress="true"
+      :exclude-params="['anno']"
       class="pagination ml-auto"
     />
     <span class="divider" />
@@ -37,7 +38,7 @@
   import PaginationNavInput from '@/components/generic/PaginationNavInput';
 
   export default {
-    name: 'ItemMediaPaginationWidget',
+    name: 'ItemMediaPaginationToolbar',
 
     components: {
       PaginationNavInput

packages/portal/src/components/item/ItemMediaPresentation.vue

@@ -50,7 +50,6 @@
             :height="resource.height"
             :format="resource.format"
             :service="resource.service"
-            :annotation="activeAnnotation"
             :thumbnail="thumbnail"
             @error="handleImageError"
           >
@@ -81,7 +80,6 @@
             v-else-if="resource?.edm.forEdmIsShownAt"
             :url="resource.edm.preview.about"
             :item-id="itemId"
-            :annotation="activeAnnotation"
             :width="resource.edm.preview.ebucoreWidth"
             :height="resource.edm.preview.ebucoreHeight"
             :thumbnail="thumbnail"
@@ -188,7 +186,6 @@
 
     setup() {
       const {
-        activeAnnotation,
         fetchPresentation,
         hasAnnotations,
         hasSearchService,
@@ -200,7 +197,6 @@
       } = useItemMediaPresentation();
 
       return {
-        activeAnnotation,
         fetchPresentation,
         hasAnnotations,
         hasSearchService,

packages/portal/src/components/item/ItemMediaSidebar.vue

@@ -24,7 +24,6 @@
           v-if="annotationList"
           data-qa="item media sidebar annotations"
           button-id="item-media-sidebar-annotations"
-          lazy
           :title-link-attributes="{ 'aria-label': $t('media.sidebar.annotations'), href: '#annotations' }"
         >
           <template #title>

packages/portal/src/components/item/ItemMediaThumbnail.vue

@@ -54,7 +54,7 @@
       link() {
         return {
           path: this.$route.path,
-          query: { ...this.$route.query, page: this.page },
+          query: { ...this.$route.query, page: this.page, anno: undefined },
           hash: this.$route.hash
         };
       },

packages/portal/src/components/media/MediaAnnotationList.vue

@@ -109,9 +109,10 @@
       if (!this.active) {
         return;
       }
-
-      await (this.searching ? this.searchAnnotations(`"${this.query}"`) : this.fetchCanvasAnnotations());
-
+      await Promise.all([
+        this.fetchCanvasAnnotations(),
+        this.searching ? this.searchAnnotations(`"${this.query}"`) : null
+      ]);
       this.setActiveAnnotationFromRouteQuery();
 
       this.$emit('fetched', this.annotations.length);
@@ -134,12 +135,11 @@
           this.scrollActiveAnnotationToCentre();
         }
       },
-      // TODO: should this watcher go into useItemMediaPresentation?
       annotationUri() {
-        !this.searching && this.$fetch();
+        this.searching ? this.fetchCanvasAnnotations() : this.$fetch();
       },
       '$route.hash'() {
-        this.scrollActiveAnnotationToCentre();
+        this.scrollActiveAnnotationToCentre('instant');
       },
       '$route.query.anno'() {
         this.setActiveAnnotationFromRouteQuery();
@@ -156,21 +156,22 @@
           ...this.$route,
           query: {
             ...this.$route.query,
-            anno: anno.id,
-            page: this.pageForAnnotationTarget(anno.target)
+            anno: anno?.id,
+            page: this.pageForAnnotationTarget(anno?.target) || this.$route.query.page
           }
         };
       },
 
       async scrollActiveAnnotationToCentre(behavior = 'smooth') {
-        if (!this.active) {
+        if (!this.active || !this.activeAnnotation) {
           return;
         }
         await this.$nextTick();
 
         if (this.activeAnnotation && this.annotationScrollToContainerSelector && this.$refs.annotationListItems) {
+          const elementIndex = this.annotationList.findIndex((listItem) => listItem.id === this.activeAnnotation.id);
           this.scrollElementToCentre(
-            this.$refs.annotationListItems[this.annotationList.indexOf(this.activeAnnotation)],
+            this.$refs.annotationListItems[elementIndex],
             {
               behavior,
               container: document.querySelector(this.annotationScrollToContainerSelector)
@@ -180,10 +181,17 @@
       },
 
       setActiveAnnotationFromRouteQuery() {
-        if (this.$route.query.anno) {
-          this.setActiveAnnotation(this.annotationList.find((anno) => anno.id === this.$route.query.anno) || null);
-          process.client && this.scrollActiveAnnotationToCentre('instant');
+        if (!this.$route.query.anno) {
+          this.setActiveAnnotation(null);
+          return;
+        }
+        if (this.$route.query.anno !== this.activeAnnotation?.id) {
+          const activeAnnotation = this.annotations.find((anno) => anno.id === this.$route.query.anno) || this.annotationSearchResults.find((anno) => anno.id === this.$route.query.anno);
+          this.setActiveAnnotation(activeAnnotation || null);
         }
+        this.$nextTick(() => {
+          process.client && this.scrollActiveAnnotationToCentre('instant');
+        });
       }
     }
   };

packages/portal/src/components/media/MediaImageViewer.vue

@@ -30,6 +30,7 @@
   import { easeOut } from 'ol/easing.js';
   import { defaults } from 'ol/interaction/defaults';
 
+  import useItemMediaPresentation from '@/composables/itemMediaPresentation.js';
   import useZoom from '@/composables/zoom.js';
   import EuropeanaMediaAnnotation from '@/utils/europeana/media/Annotation.js';
   import EuropeanaMediaService from '@/utils/europeana/media/Service.js';
@@ -51,11 +52,6 @@
     },
 
     props: {
-      // TODO: all we need is the target, not the full object
-      annotation: {
-        type: Object,
-        default: null
-      },
       format: {
         type: String,
         default: null
@@ -94,8 +90,24 @@
         setMax: setMaxZoom,
         setMin: setMinZoom
       } = useZoom();
+      const {
+        activeAnnotation,
+        annotationAtCoordinate,
+        hasAnnotations,
+        pageForAnnotationTarget
+      } = useItemMediaPresentation();
 
-      return { currentZoom, setCurrentZoom, setDefaultZoom, setMaxZoom, setMinZoom };
+      return {
+        activeAnnotation,
+        annotationAtCoordinate,
+        currentZoom,
+        hasAnnotations,
+        pageForAnnotationTarget,
+        setCurrentZoom,
+        setDefaultZoom,
+        setMaxZoom,
+        setMinZoom
+      };
     },
 
     data() {
@@ -130,7 +142,7 @@
     },
 
     watch: {
-      annotation: {
+      activeAnnotation: {
         deep: true,
         handler: 'highlightAnnotation'
       },
@@ -162,15 +174,14 @@
       },
 
       constructAnnotationFeature() {
-        let annotation = this.annotation;
+        let annotation = this.activeAnnotation;
         if (!annotation) {
           return null;
         } else if (!(annotation instanceof EuropeanaMediaAnnotation)) {
           annotation = new EuropeanaMediaAnnotation(annotation);
         }
 
-        // TODO: move to computed property `annotationXywh`? or onto EuropeanaMediaAnnotation class?
-        let [x, y, w, h] = this.olExtent;
+        const extent = annotation.extent || this.olExtent;
         // FIXME: this.url will always be for the image, not the canvas, which works
         //        with europeana's incorrect annotation modelling, but not with
         //        others' correct modelling
@@ -180,15 +191,6 @@
           return;
         }
 
-        const targetHash = new URL(targetId).hash;
-        const xywhSelector = annotation.getHashParam(targetHash, 'xywh');
-        if (xywhSelector) {
-          [x, y, w, h] = xywhSelector
-            .split(',')
-            .map((xywh) => xywh.length === 0 ? undefined : Number(xywh));
-        }
-
-        const extent = [x, y, x + w, y + h];
         const poly = fromExtent(extent);
 
         // Vector Layer co-ordinates start bottom left, not top left, so transform
@@ -206,6 +208,21 @@
         return new Feature(poly);
       },
 
+      handleMapClick(coordinate) {
+        const clickedAnnotation = this.annotationAtCoordinate(coordinate, this.olExtent);
+        if ((clickedAnnotation?.id !== this.activeAnnotation?.id) || (this.$route.hash !== '#annotations')) {
+          this.$router.replace({
+            ...this.$route,
+            hash: '#annotations',
+            query: {
+              ...this.$route.query,
+              anno: clickedAnnotation?.id,
+              page: this.pageForAnnotationTarget(clickedAnnotation?.target) || this.$route.query.page
+            }
+          });
+        }
+      },
+
       async highlightAnnotation() {
         if (!this.fullImageRendered) {
           await this.renderFullImage();
@@ -267,6 +284,11 @@
 
         this.olMap.getView().fit(extent, { size: imageMaxFitSize });
         this.configureZoomLevels();
+        if (this.hasAnnotations) {
+          this.olMap.on('click', (evt) => {
+            this.handleMapClick(evt.coordinate);
+          });
+        }
       },
 
       async renderThumbnail() {
@@ -352,7 +374,7 @@
         if (this.source === 'IIIF') {
           const mapOptions = this.initOlImageLayerIIIF();
           this.initMapWithFullImage(mapOptions);
-        } else if (this.annotation) {
+        } else if (this.activeAnnotation) {
           this.renderFullImage();
         } else {
           this.renderThumbnail();

packages/portal/src/composables/itemMediaPresentation.js

@@ -11,6 +11,16 @@ const activeAnnotation = ref(null);
 const page = ref(1);
 const presentation = ref(null);
 
+const annotationAtCoordinate  = (coordinate, fullExtent) => {
+  const coordinateToCompare = [coordinate[0], fullExtent[3] - coordinate[1]];
+  return annotations.value.find((anno) => {
+    return (anno.extent[0] <= coordinateToCompare[0]) &&
+      (anno.extent[2] >= coordinateToCompare[0]) &&
+      (anno.extent[1] <= coordinateToCompare[1]) &&
+      (anno.extent[3] >= coordinateToCompare[1]);
+  });
+};
+
 /**
  * Annotation page/list: either a URI as a string, or an object with id
  * property being the URI
@@ -119,7 +129,6 @@ const fetchCanvasAnnotations = async() => {
       anno.body = anno.body[0];
     }
   }
-
   annotations.value = annos;
 };
 
@@ -157,6 +166,7 @@ const setPage = (value) => {
 export default function useItemMediaPresentation() {
   return {
     annotations,
+    annotationAtCoordinate,
     annotationCollection,
     annotationSearchHits,
     annotationSearchHitSelectorFor,

packages/portal/src/utils/europeana/media/Annotation.js

@@ -15,6 +15,17 @@ export default class EuropeanaMediaAnnotation extends Base {
       parsed.body = Array.isArray(parsed.body) ? parsed.body.map((bod) => TextualBody.parse(bod)) : TextualBody.parse(parsed.body);
     }
 
+    if (parsed.target) {
+      const targetHash = new URL(parsed.target?.id || parsed.target).hash;
+      const xywhSelector = this.getHashParam(targetHash, 'xywh');
+      if (xywhSelector) {
+        const extent = xywhSelector
+          .split(',')
+          .map((xywh) => xywh.length === 0 ? undefined : Number(xywh));
+        parsed.extent = [extent[0], extent[1], extent[0] + extent[2], extent[1] + extent[3]];
+      }
+    }
+
     return parsed;
   }