diff --git a/app/assets/stylesheets/local/scihist_viewer.scss b/app/assets/stylesheets/local/scihist_viewer.scss index 198589aeb..c894b3861 100644 --- a/app/assets/stylesheets/local/scihist_viewer.scss +++ b/app/assets/stylesheets/local/scihist_viewer.scss @@ -79,6 +79,7 @@ $scihist_image_viewer_thumb_width: 54px; // Needs to match ImageServiceHelper::T .viewer-alert { position: absolute; + bottom: 0; z-index: 1; } @@ -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; @@ -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 { @@ -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; diff --git a/app/javascript/src/js/scihist_viewer.js b/app/javascript/src/js/scihist_viewer.js index 849dfd954..1bd1323c6 100644 --- a/app/javascript/src/js/scihist_viewer.js +++ b/app/javascript/src/js/scihist_viewer.js @@ -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(); @@ -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) { @@ -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. @@ -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(); + } + }); + + } }); diff --git a/app/serializers/viewer_member_info_serializer.rb b/app/serializers/viewer_member_info_serializer.rb index d1536f2ab..fc36413dc 100644 --- a/app/serializers/viewer_member_info_serializer.rb +++ b/app/serializers/viewer_member_info_serializer.rb @@ -6,6 +6,7 @@ # class ViewerMemberInfoSerializer include Rails.application.routes.url_helpers + include ActionView::Helpers::TextHelper THUMB_DERIVATIVE = :thumb_mini @@ -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 diff --git a/app/views/scihist_image_viewer/_scihist_viewer_modal.html.erb b/app/views/scihist_image_viewer/_scihist_viewer_modal.html.erb index 57bfa0b0c..db895f46d 100644 --- a/app/views/scihist_image_viewer/_scihist_viewer_modal.html.erb +++ b/app/views/scihist_image_viewer/_scihist_viewer_modal.html.erb @@ -33,10 +33,36 @@
-
- - -
+
+ + + + + +
+
+
+ + + + + + +
+ <%= render "scihist_image_viewer/scihist_viewer_navbar", work: work %>
diff --git a/app/views/scihist_image_viewer/_scihist_viewer_navbar.html.erb b/app/views/scihist_image_viewer/_scihist_viewer_navbar.html.erb index 0c381e761..aedd8a1dd 100644 --- a/app/views/scihist_image_viewer/_scihist_viewer_navbar.html.erb +++ b/app/views/scihist_image_viewer/_scihist_viewer_navbar.html.erb @@ -7,7 +7,7 @@ options for fixed work this modal is for. %> -
+
/