Show two page thumbnails

sul-dlss · Feb 8, 2025 · f6b435f · f6b435f
1 parent 2ef13f0
commit f6b435f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/app/assets/javascripts/select_image_area.js b/app/assets/javascripts/select_image_area.js
@@ -5,6 +5,8 @@ class SelectImageAreaWidget {
       this.addSelectImageAreaLink()
       this.listenForImageViewerStateUpdate()
       this.listenForMultiImageSelectorChanges()
+      this.listenForThumbnailUrl()
+      this.refreshThumbnails()
     }
   }
 
@@ -21,7 +23,8 @@ class SelectImageAreaWidget {
   get fullImageUrlInputElement() { return this.panel.querySelector(`input[name="item[${this.itemId}][full_image_url]"]`) }
   get selectImageAreaLinkElement() { return this.panel.querySelector('.select-image-area') }
   get thumbnailImageUrlInputElement() { return this.panel.querySelector(`input[name="item[${this.itemId}][thumbnail_image_url]"]`) }
-  get thumbnailImageElement() { return this.panel.querySelector('.img-thumbnail') }
+  get thumbnailImageElement() { return this.panel.querySelector('.pic .img-thumbnail') }
+  get thumbnail2ImageElement() { return this.panel.querySelector('.pic .img-thumbnail:nth-of-type(2)') }
 
   applicable() {
     return !this.isLocalImage() && !this.selectImageAreaLinkElement
@@ -61,6 +64,12 @@ class SelectImageAreaWidget {
     })
   }
 
+  listenForThumbnailUrl() {
+    this.thumbnailImageUrlInputElement.addEventListener('change', (event) => {
+      this.refreshThumbnails()
+    })
+  }
+
   listenForMultiImageSelectorChanges() {
     // These are changes to the hidden `iiif_canvas_id` field that Spotlight's
     // multi-image selector makes.
@@ -76,17 +85,39 @@ class SelectImageAreaWidget {
     const canvasId = windows[viewerKey]['canvasId']
     const iiifViewerConfig = JSON.stringify(viewers[viewerKey])
     const iiifImageUrl = iiif_images[0]
-    const thumbnailUrl = iiifImageUrl.replace('full', '!100,100')
 
     this.iiifCanvasIdElement.value = canvasId
     this.iiifViewerConfigElement.value = iiifViewerConfig
     this.fullImageUrlInputElement.value = iiifImageUrl
-    this.thumbnailImageUrlInputElement.value = thumbnailUrl
-    this.thumbnailImageElement.src = `${thumbnailUrl}?${new Date().getTime()}`
+    this.thumbnailImageUrlInputElement.value = this.makeThumbnailUrl(iiif_images)
+    this.refreshThumbnails()
     this.setCurrentPaginationImage(canvas_index)
     this.updateSelectImageAreaLink()
   }
 
+  makeThumbnailUrl(iiifImageUrls) {
+    const size = iiifImageUrls.length == 1 ? '/!100,100/' : '/!50,50/'
+    const thumbs = iiifImageUrls.map(image => image.replace(/\/full\//, size))
+    return thumbs.join("#")
+  }
+
+  refreshThumbnails() {
+    if (!this.thumbnailImageUrlInputElement.value) return
+
+    const [first, second] = this.thumbnailImageUrlInputElement.value.split("#")
+    const picElement = this.panel.querySelector(".pic")
+
+    picElement.classList.add('d-flex', 'p-2')
+    this.thumbnail2ImageElement?.remove()
+    this.thumbnailImageElement.src = `${first}?${new Date().getTime()}`
+    if (!second) return
+
+    const thumbnail2 = document.createElement('img')
+    thumbnail2.classList.add('img-thumbnail')
+    thumbnail2.src = `${second}?${new Date().getTime()}`
+    this.thumbnailImageElement.after(thumbnail2)
+  }
+
   setCurrentPaginationImage(index) {
     if (this.paginationCurrentPageElement) {
       const thumbIndex = index - 1

diff --git a/app/assets/javascripts/sir_trevor_block_overrides.js b/app/assets/javascripts/sir_trevor_block_overrides.js
@@ -14,15 +14,22 @@ SirTrevor.Blocks.SolrDocumentsEmbed = (function(){
       const panelElement = panel[0]
       const itemId = panelElement.dataset.id
       const iiifCanvasId = panelElement.querySelector(`input[name="item[${itemId}][iiif_canvas_id]"]`)
-      const oldValue = iiifCanvasId.value
+      const oldCanvasId = iiifCanvasId.value
 
       spotlightSetIiifFields.call(this, panel, manifest_data, initialize)
-      if (oldValue !== iiifCanvasId.value) {
+      if (oldCanvasId !== iiifCanvasId.value) {
         iiifCanvasId.dispatchEvent(new Event('change', { bubbles: false }))
       }
     },
     _itemPanelIiifFields: function(index, autocomplete_data) {
       const spotliightIiifFields = spotlightItemPanelIiifFields.call(this, index, autocomplete_data)
+
+      // This is the initialization of all block level thumbnails.
+      const thumbnails = this?.el.querySelectorAll('input[name*="[thumbnail_image_url]"]')
+      thumbnails?.forEach(thumbnail => {
+        thumbnail.dispatchEvent(new Event('change', { bubbles: false }))
+      })
+
       return [
         spotliightIiifFields,
         "<input type='hidden' name='item[" + index + "][iiif_initial_viewer_config]' value='" + (autocomplete_data.iiif_initial_viewer_config) + "'/>",