Skip to content

Commit

Permalink
bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@dnoneill
dnoneill committed Jan 29, 2025
1 parent 878590d commit 124f6e2
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 64 deletions.
99 changes: 49 additions & 50 deletions app/assets/javascripts/request_viewer_state.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
/* eslint-disable camelcase */
/* global Blacklight */
/* global RequestViewerState */

(function (global) {
var RequestViewerState;

RequestViewerState = {
const RequestViewerState = {
init: function() {
this.setupIframeMessageListener();
this.setupRequestButton();
$('[data-embed-url]').oEmbed();
},

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() {
Expand All @@ -33,61 +31,62 @@
}

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', `<img id="page-2" src="${thumbnail[1]}?${new Date().getTime()}"/>`);
} 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', `<img id="page-2" src="${thumbnail[1]}?${new Date().getTime()}"/>`);
} 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?
}
};

global.RequestViewerState = RequestViewerState;
}(this));


Blacklight.onLoad(function () {
'use strict';
document.addEventListener('show.blacklight.blacklight-modal', function(event) {
RequestViewerState.init()
})
});
document.addEventListener('loaded.blacklight.blacklight-modal', function() {
if (document.querySelector('#request-state')) RequestViewerState.init()
})
17 changes: 9 additions & 8 deletions app/assets/javascripts/select_image_area.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
/* global Blacklight */

(function (global) {
var SelectImageArea;

SelectImageArea = {
const SelectImageArea = {
init: function(el) {
this.panel = $(el);
this.addSelectImageAreaLink();
Expand All @@ -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 = $(`<a id="select-image-area" data-blacklight-modal="trigger" href="${href}">Select image area</a>`);
const image_url = this.panel[0].querySelector('img');
Expand Down Expand Up @@ -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});
}
});

9 changes: 8 additions & 1 deletion app/components/custom_viewer_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions app/helpers/application_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Binary file removed db/development.sqlite3-shm
View file
Binary file not shown.
Empty file removed db/development.sqlite3-wal
View file
Empty file.
13 changes: 10 additions & 3 deletions spec/views/catalog/_embedded_mirador3.html.erb_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,19 @@
before do
without_partial_double_verification do
allow(view).to receive_messages(
document: document
document: document,
block: nil
)
end
end

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
Expand All @@ -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

0 comments on commit 124f6e2

Please sign in to comment.