diff --git a/app/assets/javascripts/request_viewer_state.js b/app/assets/javascripts/request_viewer_state.js index 05ad7c489..7dd44cdf3 100644 --- a/app/assets/javascripts/request_viewer_state.js +++ b/app/assets/javascripts/request_viewer_state.js @@ -1,10 +1,8 @@ /* eslint-disable camelcase */ -/* global Blacklight */ +/* global RequestViewerState */ (function (global) { - var RequestViewerState; - - RequestViewerState = { + const RequestViewerState = { init: function() { this.setupIframeMessageListener(); this.setupRequestButton(); @@ -12,11 +10,11 @@ }, setupRequestButton: function() { - $('#request-state').on('click', (event) => { - this.formId = event.target.dataset.formId; - this.itemId = event.target.dataset.itemId; - this.requestState(); - }); + document.querySelector('#request-state').addEventListener('click', (event) => { + this.formId = event.target.dataset.formId; + this.itemId = event.target.dataset.itemId; + this.requestState(); + }); }, setupIframeMessageListener: function() { @@ -33,51 +31,55 @@ } if (parsedData.type === "stateResponse" && parsedData.source === "sul-embed-m3") { - - console.log('Exhibits: received state:', parsedData.data); - let { viewers, windows, iiif_images, canvas_index } = parsedData.data; - if (document.querySelector('#page-2-placeholder')) document.querySelector('#page-2-placeholder').remove(); - const viewer = Object.keys(viewers)[0]; - const canvas_id = windows[viewer]['canvasId']; - const iiif_initial_viewer_config = JSON.stringify(viewers[viewer]); - const canvasField = document.querySelector(`#${this.formId} > input[name="item[${this.itemId}][iiif_canvas_id]"]`) - const configInput = document.querySelector(`#${this.formId} > input[name="item[${this.itemId}][iiif_initial_viewer_config]"]`) - canvasField.value = canvas_id; - configInput.value = iiif_initial_viewer_config; - document.querySelector(`#${this.formId} > input[name="item[${this.itemId}][full_image_url]"]`).value = iiif_images[0]; - const thumbnail_size = iiif_images.length > 1 ? '!33,100' : '!100,100'; - const thumbnail = iiif_images.map(image => image.replace('full', thumbnail_size)) - document.querySelector(`#${this.formId} > input[name="item[${this.itemId}][thumbnail_image_url]"]`).value = thumbnail[0]; - document.querySelector(`#${this.formId} img`).src = `${thumbnail[0]}?${new Date().getTime()}`; - if (thumbnail.length > 1){ - if (!document.querySelector('#page-2')) { - document.querySelector(`#${this.formId} img`).insertAdjacentHTML('afterend', ``); - } else { - document.querySelector('#page-2').src = `${thumbnail[1]}?${new Date().getTime()}`; - } - } else if (document.querySelector('#page-2')) { - document.querySelector('#page-2').src = '' - } - let modal_link_element = document.querySelector(`#${this.formId} #select-image-area`); - let modal_link = this.updateQueryParameters(modal_link_element.href, canvas_id, iiif_initial_viewer_config); - const multi_page = document.querySelector('[data-current-image]'); - if (multi_page) multi_page.innerText = canvas_index; - modal_link_element.href = modal_link; + this.updateForm(parsedData.data); } } }); }, - updateQueryParameters: function(url, canvas_id, iiif_initial_viewer_config) { + updateForm: function(data) { + console.log('Exhibits: received state:', data); + let { viewers, windows, iiif_images, canvas_index } = data; + if (document.querySelector('#page-2-placeholder')) document.querySelector('#page-2-placeholder').remove(); + const viewer = Object.keys(viewers)[0]; + const canvasId = windows[viewer]['canvasId']; + const iiifInitialViewerConfig = JSON.stringify(viewers[viewer]); + const formNode = document.getElementById(this.formId); + const canvasField = formNode.querySelector(`input[name="item[${this.itemId}][iiif_canvas_id]"]`) + const configInput = formNode.querySelector(`input[name="item[${this.itemId}][iiif_initial_viewer_config]"]`) + canvasField.value = canvasId; + configInput.value = iiifInitialViewerConfig; + formNode.querySelector(`input[name="item[${this.itemId}][full_image_url]"]`).value = iiif_images[0]; + const thumbnailSize = iiif_images.length > 1 ? '!33,100' : '!100,100'; + const thumbnail = iiif_images.map(image => image.replace('full', thumbnailSize)) + formNode.querySelector(`input[name="item[${this.itemId}][thumbnail_image_url]"]`).value = thumbnail[0]; + formNode.querySelector('img').src = `${thumbnail[0]}?${new Date().getTime()}`; + if (thumbnail.length > 1){ + if (!document.querySelector('#page-2')) { + formNode.querySelector('img').insertAdjacentHTML('afterend', ``); + } else { + document.querySelector('#page-2').src = `${thumbnail[1]}?${new Date().getTime()}`; + } + } else if (document.querySelector('#page-2')) { + document.querySelector('#page-2').src = '' + } + let modalLinkElement = formNode.querySelector('#select-image-area'); + let modalLink = this.updateQueryParameters(modalLinkElement.href, canvasId, iiifInitialViewerConfig); + const multiPage = document.querySelector('[data-current-image]'); + if (multiPage) multiPage.innerText = canvas_index; + modalLinkElement.href = modalLink; + }, + + updateQueryParameters: function(url, canvasId, iiifInitialViewerConfig) { const urlObj = new URL(url); - urlObj.searchParams.set('canvas_id', canvas_id); - urlObj.searchParams.set('iiif_initial_viewer_config', iiif_initial_viewer_config); + urlObj.searchParams.set('canvas_id', canvasId); + urlObj.searchParams.set('iiif_initial_viewer_config', iiifInitialViewerConfig); return urlObj.href; }, requestState: function() { - const iframe = document.querySelector('.oembed-widget iframe, iframe.mirador-embed-wrapper'); - iframe.contentWindow.postMessage(JSON.stringify({ type: 'requestState' }), '*'); // Change '*' to a specific origin for security? + const iframe = document.querySelector('.oembed-widget iframe, iframe.mirador-embed-wrapper'); + iframe.contentWindow.postMessage(JSON.stringify({ type: 'requestState' }), '*'); // Change '*' to a specific origin for security? } }; @@ -85,9 +87,6 @@ }(this)); -Blacklight.onLoad(function () { - 'use strict'; - document.addEventListener('show.blacklight.blacklight-modal', function(event) { - RequestViewerState.init() - }) -}); \ No newline at end of file +document.addEventListener('loaded.blacklight.blacklight-modal', function() { + if (document.querySelector('#request-state')) RequestViewerState.init() +}) \ No newline at end of file diff --git a/app/assets/javascripts/select_image_area.js b/app/assets/javascripts/select_image_area.js index 50677ca17..bd6a9e3ae 100644 --- a/app/assets/javascripts/select_image_area.js +++ b/app/assets/javascripts/select_image_area.js @@ -2,9 +2,7 @@ /* global Blacklight */ (function (global) { - var SelectImageArea; - - SelectImageArea = { + const SelectImageArea = { init: function(el) { this.panel = $(el); this.addSelectImageAreaLink(); @@ -18,7 +16,8 @@ const exhibit_path = this.panel.closest('form')[0].dataset.exhibitPath; const iiif_initial_viewer_config = $(`input[name="item[${itemId}][iiif_initial_viewer_config]"]`, this.panel)[0].value; const canvas_id = $(`input[name="item[${itemId}][iiif_canvas_id]"]`, this.panel)[0].value; - let href = `${exhibit_path}/select_image_area/${resourceId}?form_id=${this.panel[0].id}&item_id=${itemId}&canvas_id=${canvas_id}` + let href = `${exhibit_path}/select_image_area/${resourceId}?form_id=${this.panel[0].id}&item_id=${itemId}` + if (canvas_id != "undefined") href += `&canvas_id=${canvas_id}` if (iiif_initial_viewer_config && iiif_initial_viewer_config != "undefined") href += `&iiif_initial_viewer_config=${encodeURIComponent(iiif_initial_viewer_config)}` const selectImageAreaHtml = $(`Select image area`); const image_url = this.panel[0].querySelector('img'); @@ -46,16 +45,18 @@ Blacklight.onLoad(function () { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.nodeType === 1 && node.tagName === 'LI') { - SelectImageArea.init(node); + const isEmbed = node.closest('[data-type]').dataset.type == 'solr_documents_embed'; + if (isEmbed) SelectImageArea.init(node); } }); } } }; - document.querySelectorAll('[data-type="solr_documents_embed"]').forEach(function(element, i) { + const editPageElement = document.getElementById('page-content'); + if (editPageElement) { const observer = new MutationObserver(callback); - observer.observe(element, {childList: true, subtree: true}); - }) + observer.observe(editPageElement, {childList: true, subtree: true}); + } }); diff --git a/app/components/custom_viewer_component.rb b/app/components/custom_viewer_component.rb index efdbfc458..12ffab664 100644 --- a/app/components/custom_viewer_component.rb +++ b/app/components/custom_viewer_component.rb @@ -5,12 +5,19 @@ class CustomViewerComponent < Blacklight::Component attr_reader :document, :presenter, :view_config, :classes, :block_context + SirTrevorBlock = Struct.new(:maxheight, :item) + def initialize(document:, presenter:, view_config: nil, block_context: nil, **kwargs) super @document = document @presenter = presenter @view_config = view_config - @block_context = block_context + @block_context = correct_block(block_context) + end + + def correct_block(block_context) + item = block_context&.item&.select { |_key, value| value['id'] == @document.id } + SirTrevorBlock.new(maxheight: block_context&.maxheight, item:) end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 0ab0e58ba..d48fb9ba8 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -68,11 +68,11 @@ def custom_render_oembed_tag_async(document, canvas_id, block) # @param [SirTrevorRails::Blocks::SolrDocumentsEmbedBlock] block # @return [String] Selected canvas URI def choose_canvas_id(sir_trevor_block) - sir_trevor_block&.items&.dig(0, 'iiif_canvas_id') if sir_trevor_block.respond_to? :items + sir_trevor_block&.item&.values&.dig(0, 'iiif_canvas_id') end def choose_initial_viewer_config(sir_trevor_block) - sir_trevor_block&.items&.dig(0, 'iiif_initial_viewer_config') if sir_trevor_block.respond_to? :items + sir_trevor_block&.item&.values&.dig(0, 'iiif_initial_viewer_config') end def context_specific_oembed_url(document) diff --git a/db/development.sqlite3-shm b/db/development.sqlite3-shm deleted file mode 100644 index fe9ac2845..000000000 Binary files a/db/development.sqlite3-shm and /dev/null differ diff --git a/db/development.sqlite3-wal b/db/development.sqlite3-wal deleted file mode 100644 index e69de29bb..000000000 diff --git a/spec/views/catalog/_embedded_mirador3.html.erb_spec.rb b/spec/views/catalog/_embedded_mirador3.html.erb_spec.rb index eacffca5d..4c4428ea3 100644 --- a/spec/views/catalog/_embedded_mirador3.html.erb_spec.rb +++ b/spec/views/catalog/_embedded_mirador3.html.erb_spec.rb @@ -9,7 +9,8 @@ before do without_partial_double_verification do allow(view).to receive_messages( - document: document + document: document, + block: nil ) end end @@ -17,7 +18,10 @@ it 'renders an iframe' do render - expect(rendered).to have_css "iframe[src='https://embed.stanford.edu/iiif?#{{ url: manifest_url }.to_query}']" + expect(rendered).to have_css "iframe[src='#{Settings.iiif_embed.url}?#{{ + url: manifest_url, canvas_id: '', + iiif_initial_viewer_config: '' + }.to_query}']" end context 'with a local IIIF manifest' do @@ -28,7 +32,10 @@ render - expect(rendered).to have_css "iframe[src='https://embed.stanford.edu/iiif?#{{ url: expected_url }.to_query}']" + expect(rendered).to have_css "iframe[src='#{Settings.iiif_embed.url}?#{{ + url: expected_url, canvas_id: '', + iiif_initial_viewer_config: '' + }.to_query}']" end end end