Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft prototype of experimental viewer features for transcription/translation text #1491

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Draft prototype of experimental viewer features for transcription/translation text #1491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fce6df
totally hacky hacky mess of a prototype of including transccription/t…
jrochkind Nov 22, 2021
369b1b4
Merge branch 'master' into hack_text_viewer
jrochkind Dec 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions app/assets/stylesheets/local/scihist_viewer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ $scihist_image_viewer_thumb_width: 54px; // Needs to match ImageServiceHelper::T

.viewer-alert {
position: absolute;
bottom: 0;
z-index: 1;
}

Expand Down Expand Up @@ -138,10 +139,11 @@ $scihist_image_viewer_thumb_width: 54px; // Needs to match ImageServiceHelper::T

.viewer-image-and-navbar {
// https://css-tricks.com/flexbox-truncated-text/
min-width: 0;
width: 100vw; // important to keep long child texts from overflowing on IE11
// min-width: 0;
// width: 100vw; // important to keep long child texts from overflowing on IE11
// as a member of it's container flex
flex-grow: 1;
flex-shrink: 1;

// as a flex itself with content
display: flex;
Expand Down Expand Up @@ -203,8 +205,11 @@ $scihist_image_viewer_thumb_width: 54px; // Needs to match ImageServiceHelper::T

.viewer-image {
flex-grow: 1;
overflow: scroll;
// to be a anchor point for openseadragon viewer inside
position: relative;

display: flex;
}

.viewer-image-loading {
Expand All @@ -222,6 +227,9 @@ $scihist_image_viewer_thumb_width: 54px; // Needs to match ImageServiceHelper::T
}

.viewer-navbar {
flex-grow: 1;
flex-shrink: 1;

// bootstrap btn-justified doens't seem to be working, and flex is
// more powerful anyway.
display: flex;
Expand Down
21 changes: 20 additions & 1 deletion app/javascript/src/js/scihist_viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,10 @@ ScihistImageViewer.prototype.selectThumb = function(thumbElement) {
var linkUrl = this.selectedThumbData.memberShowUrl;
var tileSource = this.selectedThumbData.tileSource;

var transcriptionHtml = this.selectedThumbData.transcription_html;
var englishTranslationHtml = this.selectedThumbData.english_translation_html;


// hide any currently visible alerts, they only apply to
// previously current image.
$(this.modal).find(".viewer-alert").remove();
Expand All @@ -195,6 +199,9 @@ ScihistImageViewer.prototype.selectThumb = function(thumbElement) {
document.querySelector('*[data-hook="viewer-navbar-info-link"]').href = linkUrl;
document.getElementsByClassName('viewer-pagination-numerator').item(0).textContent = humanIndex;

document.getElementById('transcription-container').innerHTML = transcriptionHtml;
document.getElementById('english-translation-container').innerHTML = englishTranslationHtml;

$(this.modal).find(".downloads *[data-slot='selected-downloads']").html(this.downloadMenuItems(this.selectedThumbData));

if (shouldShowInfo) {
Expand Down Expand Up @@ -500,7 +507,7 @@ ScihistImageViewer.prototype.initOpenSeadragon = function() {
// own container. If we just change that to 'absolute', then it properly fills
// the space of it's container on our page the way we want it to. There
// must be a better way to do this, sorry for the hack.
this.viewer.container.style.position = "absolute";
//this.viewer.container.style.position = "absolute";

// The OSD 'open' event is fired when it tries to request an image,
// but hasn't neccesarily received it yet. Riiif can be really slow.
Expand Down Expand Up @@ -636,5 +643,17 @@ jQuery(document).ready(function($) {
OpenSeadragon.requestFullScreen( document.body );
}
});

// hacky temporary implementation of our toggleable areas
$(document).on("change", "*[data-hook='viewer-area-toggle']", function(event) {
var element = $("#" + event.target["name"]);
if (event.target.checked) {
element.show();
} else {
element.hide();
}
});


}
});
5 changes: 4 additions & 1 deletion app/serializers/viewer_member_info_serializer.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
#
class ViewerMemberInfoSerializer
include Rails.application.routes.url_helpers
include ActionView::Helpers::TextHelper

THUMB_DERIVATIVE = :thumb_mini

Expand All @@ -30,7 +31,9 @@ def as_hash
# if tilesource DZI is unavailable, give them a more reasonable sized JPG
fallbackTileSource: { type: "image", url: download_derivative_path(asset, :download_medium, disposition: "inline") },
thumbAspectRatio: ("#{asset.width.to_f / asset.height}" if asset.width && asset.height),
downloads: download_options(asset).as_json
downloads: download_options(asset).as_json,
transcription_html: member.respond_to?(:transcription) && member.transcription.present? && simple_format(member.transcription),
english_translation_html: member.respond_to?(:english_translation) && member.english_translation.present? && simple_format(member.english_translation)
}.merge(thumb_src_attributes(asset))
end
end
Expand Down
34 changes: 30 additions & 4 deletions app/views/scihist_image_viewer/_scihist_viewer_modal.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,36 @@

<div class="viewer-content">
<div class="viewer-image-and-navbar" data-alert-container>
<div class="viewer-image" id="openseadragon-container">
<button href="#" id="viewer-left" class="viewer-image-prev" data-trigger="viewer-prev" aria-label="Previous image" tabindex="0"><i class="fa fa-chevron-left" title="Previous"></i></button>
<button href="#" id="viewer-right" class="viewer-image-next" data-trigger="viewer-next" aria-label="Next image" tabindex="0"><i class="fa fa-chevron-right" title="Next"></i></button>
</div>
<div class="top-navbar" style="background-color: #646469; color: white; padding: 8px; display: flex; flex-grow: 0; flex-shrink: 0;">
<label style="flex: 1;">
<input type="checkbox" name="openseadragon-container" data-hook="viewer-area-toggle" checked>
Image
</label>

<label style="flex: 1;">
<input type="checkbox" name="transcription-container" data-hook="viewer-area-toggle">
Transcription
</label>

<label style="flex: 1;">
<input type="checkbox" name="english-translation-container" data-hook="viewer-area-toggle">
English Translation
</label>
</div>
<div class="viewer-image" style="flex-basis: 0; flex-grow: 1; flex-shrink: 1;">
<div id="openseadragon-container" style="flex: 1; border: 1px solid #646469;"></div>
<div id="transcription-container" style="flex: 1; display: none; border: 1px solid #646469; padding: 0.5rem; overflow: scroll;">
<p>SVANTE ARRHENIUS<br />STOCKHOLM</p><p>Stockholm den 10 März 1909.</p><p>Lieber alter Freund! [Bredig’s hand: Bredig]</p><p>Ich danke Dir herzlichst für Dein liebes Schreiben zu meinem 50. Geburtstag, welches vor allen anderen Glückwünschen ankam. Wenige von denselben haben mich in solchem Maass gefreut wie Deine allerliebsten Zeilen. Ich danke Dir auch für all‘ die lange schöne Zeit, während deren ich mit Dir verbunden gewesen bin, und für die treue Freundschaft, die mir unausgesetzt geweiht hast. Ich wage wohl zu hoffen, dass dieselbe noch sehr sehr lange unvermündet bleiben wird. Herzlichen Dank, lieber alter Freund auch von meiner Frau.</p><p>Ich sitze jetzt schon lange meistens bei den</p>
</div>
<div id="english-translation-container" style="flex: 1; display: none; border: 1px solid #646469; padding: 0.5rem; overflow: scroll;">
<p>SVANTE ARRHENIUS<br />STOCKHOLM</p><p>Stockholm, 10 March 1909</p><p>Dear old friend,</p><p>Thank you very much for your kind letter wishing me a happy 50th birthday, which arrived before all the other correspondence. Few of them have pleased me as much as your very nice message. I also appreciate your years of loyal friendship, which has meant a lot to me. I hope that it will remain unchanged for a very, very long time. My wife and I thank you, dear old friend.<br /> </p>
</div>


<button href="#" id="viewer-left" class="viewer-image-prev" data-trigger="viewer-prev" aria-label="Previous image" tabindex="0"><i class="fa fa-chevron-left" title="Previous"></i></button>
<button href="#" id="viewer-right" class="viewer-image-next" data-trigger="viewer-next" aria-label="Next image" tabindex="0"><i class="fa fa-chevron-right" title="Next"></i></button>
</div>


<%= render "scihist_image_viewer/scihist_viewer_navbar", work: work %>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/scihist_image_viewer/_scihist_viewer_navbar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
options for fixed work this modal is for.
%>

<div class="viewer-navbar btn-group" role="group" aria-label="actions">
<div class="viewer-navbar btn-group" role="group" aria-label="actions" style="flex-grow: 0; flex-shrink: 0;">
<div id="viewer-pagination" class="viewer-pagination viewer-navbar-btn">
<span class="viewer-pagination-numerator"></span> / <span class="viewer-pagination-denominator"></span>
</div>
Expand Down