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.

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

new derivatives monster PR #889

Merged
merged 89 commits into from Nov 20, 2017
Commits
Jump to file or symbol
Failed to load files and symbols.
+1,253 −250
Diff settings

Always

Just for now

View
@@ -76,6 +76,8 @@ gem 'slackistrano', "~> 3.8"
source 'https://rails-assets.org' do
gem 'rails-assets-lazysizes'
gem 'rails-assets-promise-polyfill' # mainly for use by fetch polyfill
gem 'rails-assets-fetch' # fetch polyfill, initially used by our custom viewer
end
group :production do
View
@@ -986,7 +986,9 @@ GEM
bundler (>= 1.3.0)
railties (= 5.0.6)
sprockets-rails (>= 2.0.0)
rails-assets-fetch (2.0.3)
rails-assets-lazysizes (3.0.0)
rails-assets-promise-polyfill (6.0.2)
rails-dom-testing (2.0.3)
activesupport (>= 4.2.0)
nokogiri (>= 1.6)
@@ -1296,7 +1298,9 @@ DEPENDENCIES
pry-byebug
pry-rails
rails (~> 5.0.0)
rails-assets-fetch!
rails-assets-lazysizes!
rails-assets-promise-polyfill!
resque-pool
rest-client
riiif (~> 1.4)
@@ -0,0 +1,4 @@
<?xml version="1.0" standalone="yes"?>
<svg version="1.1" viewBox="0.0 0.0 288.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l288.0 0l0 288.0l-288.0 0l0 -288.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l288.0 0l0 288.0l-288.0 0z" fill-rule="evenodd"></path><path fill="#000000" fill-opacity="0.0" d="m5.4960628 5.4960628l277.00787 0l0 277.00787l-277.00787 0z" fill-rule="evenodd"></path><path stroke="#999999" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="butt" d="m5.4960628 5.4960628l277.00787 0l0 277.00787l-277.00787 0z" fill-rule="evenodd"></path><path fill="#000000" fill-opacity="0.0" d="m282.0 7.0l-274.99213 274.01575" fill-rule="evenodd"></path><path stroke="#999999" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="butt" d="m282.0 7.0l-274.99213 274.01575" fill-rule="evenodd"></path><path fill="#000000" fill-opacity="0.0" d="m7.0 7.0l275.02362 276.0" fill-rule="evenodd"></path><path stroke="#999999" stroke-width="3.0" stroke-linejoin="round" stroke-linecap="butt" d="m7.0 7.0l275.02362 276.0" fill-rule="evenodd"></path></g></svg>
@@ -17,6 +17,10 @@
// does, or the presence of AMD in a non-AMD aware build tool confuses aspectratio.
//= require 'lazysizes/plugins/aspectratio/ls.aspectratio.js'
// fetch and promise polyfills for older browsers, used in our custom viewer
//= require promise-polyfill
//= require fetch
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
// Required by Blacklight
@@ -0,0 +1,14 @@
// If a thumb image breaks, replace it with our missing image placeholder,
// and log to console too.
// restrict to known thumb images right now.
$( document ).ready(function() {
// Possible improvement, replace with a data- attribute asking for placeholder replacement?
$('img.show-page-image-image, .chf-results-list-item-thumb img, img.file_listing_thumbnail').error(function(){
var origSrc = $(this).attr('src');
$(this).attr('src', '<%= asset_path(ImageServiceHelper::PLACEHOLDER_IMAGE_PATH) %>');
$(this).attr('srcset', '');
console.log("broken thumb on '" + origSrc + "', replacing with placeholder");
});
});
@@ -16,15 +16,6 @@ ChfImageViewer.prototype.show = function(id) {
this.initOpenSeadragon();
}
this.totalCount = parseInt(document.querySelector(".viewer-thumbs[data-total-count]").getAttribute("data-total-count"));
if (this.totalCount == 1) {
// hide multi-item-relevant controls
this.hideUiElement(document.querySelector("#viewer-pagination"));
this.hideUiElement(document.querySelector("#viewer-right"));
this.hideUiElement(document.querySelector("#viewer-left"));
this.hideUiElement(document.querySelector("#viewer-thumbs"));
}
if (! OpenSeadragon.supportsFullScreen) {
this.hideUiElement(document.querySelector("#viewer-fullscreen"));
}
@@ -33,25 +24,36 @@ ChfImageViewer.prototype.show = function(id) {
this.hideUiElement(document.querySelector("#viewer-rotate-right"));
}
var selectedThumb;
// find the thumb
if (id) {
selectedThumb = document.querySelector(".viewer-thumb-img[data-member-id='" + id + "']");
}
if (! selectedThumb) {
// just use the first one
selectedThumb = document.querySelector(".viewer-thumb-img");
}
this.selectThumb(selectedThumb);
var _self = this;
// Make sure we don't try to do this before thumbs are loaded
this.thumbsLoadedGuard.then(function() {
if (_self.totalCount == 1) {
// hide multi-item-relevant controls
_self.hideUiElement(document.querySelector("#viewer-pagination"));
_self.hideUiElement(document.querySelector("#viewer-right"));
_self.hideUiElement(document.querySelector("#viewer-left"));
_self.hideUiElement(document.querySelector("#viewer-thumbs"));
}
// show the viewer
$(this.modal).modal("show");
this.scrollSelectedIntoView();
var selectedThumb;
// find the thumb
if (id) {
selectedThumb = document.querySelector(".viewer-thumb-img[data-member-id='" + id + "']");
}
if (! selectedThumb) {
// just use the first one
selectedThumb = document.querySelector(".viewer-thumb-img");
}
_self.selectThumb(selectedThumb);
// Catch keyboard controls
var _self = this;
$("body").on("keydown.chf_image_viewer", function(event) {
_self.onKeyDown(event);
// show the viewer
$(_self.modal).modal("show");
_self.scrollSelectedIntoView();
// Catch keyboard controls
$("body").on("keydown.chf_image_viewer", function(event) {
_self.onKeyDown(event);
});
});
};
@@ -126,18 +128,19 @@ ChfImageViewer.prototype.removeLoading = function() {
ChfImageViewer.prototype.selectThumb = function(thumbElement) {
this.selectedThumb = thumbElement;
// toggle classes, sorry some jQuery
var index = parseInt(thumbElement.getAttribute("data-index"));
var humanIndex = index + 1;
this.selectedThumbData = this.thumbnailData[index];
// toggle classes
$('.viewer-thumbs .viewer-thumb-selected').removeClass('viewer-thumb-selected')
thumbElement.classList.add('viewer-thumb-selected');
var id = thumbElement.getAttribute('data-member-id');
var index = thumbElement.getAttribute('data-index');
var shouldShowInfo = thumbElement.getAttribute('data-member-should-show-info') == "true";
var title = thumbElement.getAttribute('data-title');
var linkUrl = thumbElement.getAttribute('data-member-show-url');
var downloadOriginalUrl = thumbElement.getAttribute('data-member-dl-original-url');
var downloadJpegUrl = thumbElement.getAttribute('data-member-dl-jpeg-url');
var tileSource = thumbElement.getAttribute('data-tile-source');
var id = this.selectedThumbData.memberId;
var shouldShowInfo = this.selectedThumbData.memberShouldShowInfo;
var title = this.selectedThumbData.title;
var linkUrl = this.selectedThumbData.memberShowUrl;
var tileSource = this.selectedThumbData.tileSource;
// hide any currently visible alerts, they only apply to
// previously current image.
@@ -151,12 +154,9 @@ ChfImageViewer.prototype.selectThumb = function(thumbElement) {
document.querySelector('*[data-hook="viewer-navbar-title-label"]').textContent = title;
document.querySelector('*[data-hook="viewer-navbar-info-link"]').href = linkUrl;
document.getElementsByClassName('viewer-pagination-numerator').item(0).textContent = index;
document.getElementsByClassName('viewer-pagination-numerator').item(0).textContent = humanIndex;
var originalLink = document.querySelector('#chf-image-viewer *[data-content-hook=dl-original-link]');
if (originalLink) { originalLink.setAttribute('href', downloadOriginalUrl); }
var jpegLink = document.querySelector('#chf-image-viewer *[data-content-hook=dl-jpeg-link]');
if (jpegLink) { jpegLink.setAttribute('href', downloadJpegUrl); }
$(this.modal).find("#viewer-download .dropdown-menu").html(this.downloadMenuItems(this.selectedThumbData));
if (shouldShowInfo) {
// spacer shows up when info doesn't.
@@ -168,13 +168,13 @@ ChfImageViewer.prototype.selectThumb = function(thumbElement) {
}
// show/hide next/prev as appropriate
if (index <= 1) {
if (humanIndex <= 1) {
this.hideUiElement(document.querySelector("#viewer-left"));
} else if ( this.totalCount != 1 ) {
this.showUiElement(document.querySelector("#viewer-left"));
}
if (index >= this.totalCount) {
if (humanIndex >= this.totalCount) {
this.hideUiElement(document.querySelector("#viewer-right"));
} else if ( this.totalCount != 1 ) {
this.showUiElement(document.querySelector("#viewer-right"));
@@ -199,17 +199,9 @@ ChfImageViewer.prototype.prev = function() {
}
};
// If open fails, try this one?
ChfImageViewer.prototype.fallbackOsdOpenArg = function(fileId) {
return {
type: "image",
url: ("/downloads/" + encodeURIComponent(fileId) + "?file=jpeg")
};
};
ChfImageViewer.prototype.setLocationUrl = function() {
var currentPath = location.pathname;
var selectedID = this.selectedThumb.getAttribute('data-member-id');
var selectedID = this.selectedThumbData.memberId;
var newPath;
@@ -370,6 +362,83 @@ ChfImageViewer.prototype.initModal = function(modalElement) {
show: false,
keyboard: false
});
this.workId = modalElement.getAttribute("data-work-id");
var rightsElement = modalElement.querySelector('.parent-rights-inline');
if (rightsElement) {
this.rightsInlineHtml = rightsElement.innerHTML;
}
var _self = this;
var imageInfoUrl = modalElement.getAttribute("data-images-info-path");
// This promise should be used in #show to make sure we don't until this
this.thumbsLoadedGuard = fetch(imageInfoUrl, {
credentials: 'include'
}).then(function(response) {
if(response.ok) {
return response.json();
}
// non-200, something is bad.
throw new Error(response.status + ': ImageViewer could not fetch image info from: ' + imageInfoUrl);
}).then(function(json) {
_self.totalCount = json.length;
_self.makeThumbnails(json);
});
};
// From json data describing our images, make the thumbnail sidebar
ChfImageViewer.prototype.makeThumbnails = function(json) {
this.thumbnailData = json;
var container = $(this.modal).find("#viewer-thumbs");
$.each(json, function(index, config) {
if (! config) {
return;
}
container.append(
'<img class="lazyload viewer-thumb-img"' +
' height="' + config.thumbHeight + '"' +
' alt="" tabindex="0" role="button"' +
' data-member-id="' + config.memberId + '"' +
' data-trigger="change-viewer-source"' +
' data-src="' + config.thumbSrc + '"' +
' data-srcset="' + (config.thumbSrcset || '') + '"' +
' data-index="' + index + '"' +
'>'
);
});
};
ChfImageViewer.prototype.downloadMenuItems = function(thumbData) {
var _self = this;
var htmlElements = []
if (_self.rightsInlineHtml) {
htmlElements.push('<li class="dropdown-header">Rights</li>');
htmlElements.push('<li tabindex="-1" role="menuItem">' + _self.rightsInlineHtml + '</li>');
htmlElements.push('<li role="separator" class="divider"></li>');
}
htmlElements.push('<li class="dropdown-header">Download selected image</li>');
htmlElements = htmlElements.concat(
$.map(thumbData.downloads, function(downloadElement) {
return '<li tabindex="-1" role="menuitem">' +
'<a target="_new" data-analytics-category="Work"' +
' data-analytics-action="' + (downloadElement.analyticsAction || "download") + '"' +
' data-analytics-label="' + _self.workId + '"' +
' href="' + downloadElement.url + '">' +
downloadElement.label +
' <small>' + (downloadElement.subhead || '') + '</small>' +
'</a>' +
'</li>';
})
);
return htmlElements;
};
ChfImageViewer.prototype.initOpenSeadragon = function() {
@@ -417,8 +486,8 @@ ChfImageViewer.prototype.initOpenSeadragon = function() {
} );
this.viewer.addHandler("open-failed", function(event) {
// Try fallback URL if available
var fileId = _self.selectedThumb.getAttribute('data-member-id');
var fallbackOsdOpenArg = _self.fallbackOsdOpenArg(fileId)
var fileId = _self.selectedThumbData.memberId;
var fallbackOsdOpenArg = _self.selectedThumbData.fallbackTileSource;
if (fallbackOsdOpenArg && fallbackOsdOpenArg !== event.source) {
_self.displayAlert("Sorry, full zooming is not currently available.")
_self.viewer.open(fallbackOsdOpenArg);
@@ -39,3 +39,8 @@
.representative-media {
display: inline !important;
}
// make sure our larger thumbs don't overflow
img.representative-media {
max-width: 100%;
}
@@ -20,7 +20,7 @@
contents and have CSS properties relevant to that too.
*/
$chf_image_viewer_thumb_width: 60px; // Needs to match MemberHelper::VIEWER_THUMB_WIDTH
$chf_image_viewer_thumb_width: 54px; // Needs to match ImageServiceHelper::THUMB_BASE_WIDHTS[:mini]
// Override some bootstrap modal stuff to give us a full-viewport modal
#chf-image-viewer-modal {
@@ -278,11 +278,11 @@ $chf_image_viewer_thumb_width: 60px; // Needs to match MemberHelper::VIEWER_THUM
overflow-x: auto;
background-color: $brand-inverse;
padding: 7px;
max-height: 100%; // IE 11 needs this, although others don't, i dunno.
.viewer-thumb-img {
display: inline-block; // makes FF respect width on unloaded image, not sure why needed
max-height: 80px;
box-sizing: content-box;
width: $chf_image_viewer_thumb_width;
cursor: pointer;
@@ -309,10 +309,6 @@ $chf_image_viewer_thumb_width: 60px; // Needs to match MemberHelper::VIEWER_THUM
// sorry the selectors get crazy unpredictable to ensure specificity
// for override. needs refactor.
.viewer-thumbs {
padding-top: 0;
}
.viewer-content {
flex-direction: row;
// don't totally understand this, but it gets our flex-in-flex layout
@@ -322,11 +318,15 @@ $chf_image_viewer_thumb_width: 60px; // Needs to match MemberHelper::VIEWER_THUM
}
.viewer-thumbs {
padding-top: 0;
max-height: 100%; // IE 11 needs this, although others don't, i dunno.
white-space: normal;
overflow-y: auto;
overflow-x: hidden;
// need to leave enough room for scroll-bar on browsers that count that inside
width: calc(#{$chf_image_viewer_thumb_width} * 2 + 7px * 3 + 1em);
// 20px, need to leave enough room for scroll-bar on browsers that count that inside
width: calc(#{$chf_image_viewer_thumb_width} * 2 + 7px * 3 + 22px);
text-align: center;
flex-shrink: 0;
.viewer-thumb-img {
@@ -183,7 +183,7 @@
.chf-results-list-item-thumb {
flex-basis: 208px;
width: 208px; // Should match ImageServiceHelper::BASE_WIDTHS[:standard]
width: 208px; // Should match ImageServiceHelper::THUMB_BASE_WIDTHS[:standard]
max-width: 33%; // on smaller screens, more space for text
margin-right: $line-height-computed;
flex-shrink: 0;
@@ -124,3 +124,16 @@ hr.brand {
// }
}
.download-menu {
.dropdown-header {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.03em;
}
li small {
color: $text-muted;
margin-left: 8px;
font-weight: 100;
}
}
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.