Skip to content

GitLab

Commit ea27139d authored by Gradl, Tobias's avatar Gradl, Tobias
Browse files

1278: Improve image handling esp. when not available 

Task-Url: https://pm.winseda.de/issues/1278
parent 3e56a318
Hide whitespace changes
Inline Side-by-side
js/search/search.js
View file @ ea27139d
...@@ -9,7 +9,6 @@ $(document).ready(function() { ...@@ -9,7 +9,6 @@ $(document).ready(function() {
$("#btn-exec-search").click(function() { queryHandler.doSearch(); }); $("#btn-exec-search").click(function() { queryHandler.doSearch(); });
$("#explain").change(function() { queryHandler.doSearch(); }); $("#explain").change(function() { queryHandler.doSearch(); });
$("#includeOriginal").change(function() { queryHandler.doSearch(); });
$('#expression').keyup(function (e) { if (e.which==13) { queryHandler.doSearch(); }}); $('#expression').keyup(function (e) { if (e.which==13) { queryHandler.doSearch(); }});
$("#size").bind("slider:changed", function (event, data) { $("#size").bind("slider:changed", function (event, data) {
...@@ -52,6 +51,9 @@ var QueryHandler = function(options) { ...@@ -52,6 +51,9 @@ var QueryHandler = function(options) {
factor: 60, factor: 60,
offset: 12 offset: 12
} }
},
images: {
maxTries: 5
} }
}, options) }, options)
...@@ -539,8 +541,7 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle ...@@ -539,8 +541,7 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle
$("#search-results-resources-heading").text(String.format(__translator.translate("~eu.dariah.de.minfba.search.view.result.n_of_m_results"), resultElements.length, totalHits)); $("#search-results-resources-heading").text(String.format(__translator.translate("~eu.dariah.de.minfba.search.view.result.n_of_m_results"), resultElements.length, totalHits));
var explain = $("#explain").prop('checked'); var explain = $("#explain").prop('checked');
var includeOriginal = $("#includeOriginal").prop('checked');
for (var i=0; i<resultElements.length; i++) { for (var i=0; i<resultElements.length; i++) {
var content = []; var content = [];
var hideElements = []; var hideElements = [];
...@@ -567,7 +568,7 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle ...@@ -567,7 +568,7 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle
resultElements[i].presentation.Presentation !== undefined) { resultElements[i].presentation.Presentation !== undefined) {
if (resultElements[i].presentation.Presentation.Title !== undefined) { if (resultElements[i].presentation.Presentation.Title !== undefined) {
content.push(["title", resultElements[i].presentation.Presentation.Title, 500]); content.push(["title", resultElements[i].presentation.Presentation.Title, 200]);
} else { } else {
content.push(["title", "<em>" + __translator.translate("~eu.dariah.de.minfba.search.view.result.no_title") + "</em>"]); content.push(["title", "<em>" + __translator.translate("~eu.dariah.de.minfba.search.view.result.no_title") + "</em>"]);
} }
...@@ -603,14 +604,26 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle ...@@ -603,14 +604,26 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle
$("#search-results-resources").append(this.renderResultItem(itemTemplate, content, hideElements)); $("#search-results-resources").append(this.renderResultItem(itemTemplate, content, hideElements));
var images = {
containerSelector : "#search-result-image-container-" + i,
resources: [],
placeholders: []
};
if (resultElements[i].presentation.Presentation.Images!==undefined && resultElements[i].presentation.Presentation.Images.Resource!==undefined) { if (resultElements[i].presentation.Presentation.Images!==undefined) {
this.handleImages(resultElements[i].collectionId, resultElements[i].endpointId, resultElements[i].datasetId, this.getValues(resultElements[i].presentation.Presentation.Images.Resource), i, false); if (resultElements[i].presentation.Presentation.Images.Resource!==undefined) {
} else { images.resources = this.prepImages(resultElements[i].collectionId, resultElements[i].endpointId, resultElements[i].datasetId, this.getValues(resultElements[i].presentation.Presentation.Images.Resource));
if (resultElements[i].presentation.Presentation.Images!==undefined && resultElements[i].presentation.Presentation.Images.Placeholder!==undefined) { }
this.handleImages(resultElements[i].collectionId, resultElements[i].endpointId, resultElements[i].datasetId, this.getValues(resultElements[i].presentation.Presentation.Images.Placeholder), i, true); if (resultElements[i].presentation.Presentation.Images.Placeholder!==undefined) {
images.placeholders = this.prepImages(resultElements[i].collectionId, resultElements[i].endpointId, resultElements[i].datasetId, this.getValues(resultElements[i].presentation.Presentation.Images.Placeholder));
} }
} }
if (images.resources.length+images.placeholders.length > 0) {
this.imageQueue.push(images);
} else {
// Show placeholder right away
this.showImage(images.containerSelector, __util.composeUrl("theme/img/placeholder-logo.png"), undefined);
}
if (resultElements[i].presentation.Presentation.Objects!==undefined) { if (resultElements[i].presentation.Presentation.Objects!==undefined) {
this.handleObjects(resultElements[i].presentation.Presentation.Objects, i); this.handleObjects(resultElements[i].presentation.Presentation.Objects, i);
...@@ -627,7 +640,7 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle ...@@ -627,7 +640,7 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle
} }
} }
this.processImagesQueue(); this.processImages();
/*if (hasMore) { /*if (hasMore) {
...@@ -636,6 +649,69 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle ...@@ -636,6 +649,69 @@ QueryHandler.prototype.processResponseResources = function(isShowMore, resultEle
}; };
QueryHandler.prototype.prepImages = function(collectionId, endpointId, datasetId, imageUrls) {
var images = [];
for (var i=0; i<imageUrls.length && i<this.options.images.maxTries; i++) {
images.push(__util.composeUrl("cachedimages/" + collectionId + "/" + endpointId + "/" + datasetId + "?i=" + encodeURIComponent(imageUrls[i])));
}
return images;
};
QueryHandler.prototype.processImages = function(imageContainer) {
if (imageContainer==undefined) {
if (this.imageQueue.length==0) {
return;
}
imageContainer = this.imageQueue.shift();
}
var _this = this;
var url;
var placeholder = false;
if (imageContainer.resources.length>0) {
url = imageContainer.resources.shift();
} else if (imageContainer.placeholders.length>0) {
url = imageContainer.placeholders.shift();
placeholder = true;
} else {
// Nothing left to try with this container -> show placeholder
_this.showImage(imageContainer.containerSelector, __util.composeUrl("theme/img/placeholder-logo.png"), undefined);
this.processImages();
return;
}
var image = new Image();
image.src = url;
image.onload = function() {
_this.showImage(imageContainer.containerSelector, image.src, ( placeholder ? undefined : image.src + "&type=DISPLAY"));
// Go on with next in queue
_this.processImages();
}
image.onerror = function() {
// Retry with next image
_this.processImages(imageContainer);
}
};
QueryHandler.prototype.showImage = function(containerSelector, tmbsrc, src) {
var image;
if (src===undefined) {
$(containerSelector).find(".no-preview-overlay").removeClass("hide");
image = "<div class=\"search-result-image\" style=\"background-image: url(" + tmbsrc + ");\"></div>";
} else {
image = "<a href=\"" + src + "\" class=\"venobox\">" +
"<div class=\"search-result-image\" style=\"background-image: url(" + tmbsrc + ");\"></div>" +
"<a>";
}
$(containerSelector).append(image);
if (src!==undefined) {
$(containerSelector).find(".venobox").venobox();
}
$(containerSelector).find(".image-loading-overlay").addClass("hide");
};
QueryHandler.prototype.handleObjects = function(objects, index) { QueryHandler.prototype.handleObjects = function(objects, index) {
var result = []; var result = [];
...@@ -777,158 +853,7 @@ QueryHandler.prototype.createLink = function(link, type) { ...@@ -777,158 +853,7 @@ QueryHandler.prototype.createLink = function(link, type) {
return "<li><a href='" + link["~"] + "' target='_blank'>" + linkLabel + "</a></li>"; return "<li><a href='" + link["~"] + "' target='_blank'>" + linkLabel + "</a></li>";
}; };
QueryHandler.prototype.handleImages = function(collectionId, endpointId, datasetId, images, index, placeholder) {
var tmpsrc = undefined;
var src = undefined;
if (placeholder) {
tmbsrc = __util.composeUrl("cachedimages/" + collectionId + "?i=" + encodeURIComponent(images[0]));
} else {
src = __util.composeUrl("cachedimages/" + collectionId + "/" + endpointId + "/" + datasetId + "?i=" + encodeURIComponent(images[0]) + "&type=DISPLAY");
tmbsrc = __util.composeUrl("cachedimages/" + collectionId + "/" + endpointId + "/" + datasetId + "?i=" + encodeURIComponent(images[0]));
}
this.imageQueue.push({
tmbsrc: tmbsrc,
src: src,
index: index,
imageIndex: 0,
placeholder: placeholder,
onlyImage: (placeholder || images.length==1)
});
};
QueryHandler.prototype.processImagesQueue = function() {
if (this.imageQueue.length==0) {
return;
}
var image = this.imageQueue.shift();
var _this = this;
console.log(image);
$.ajax({
url : image.tmbsrc,
cache: true,
context: {
tmbsrc: image.tmbsrc,
src: image.src,
index: image.index,
imageIndex: 0,
placeholder: image.placeholder
},
success: function() {
_this.showImage(this.tmbsrc, this.src, this.index, this.imageIndex);
/*$("#search-results-resources .venobox").venobox(); */
},
error: function(jqXHR, textStatus, errorThrown) {
_this.showImage(__util.composeUrl("theme/img/placeholder-logo.png"), undefined, this.index, this.imageIndex);
},
complete: function() {
if (this.placeholder) {
$("#search-results-image-" + this.index + " .no-preview-overlay").removeClass("hide");
}
$("#search-results-image-" + this.index + " .image-loading-overlay").addClass("hide");
_this.processImagesQueue();
}
});
};
QueryHandler.prototype.showImage = function(tmbsrc, src, resultIndex, imageIndex) {
var carouselContainer = $("#search-results-image-" + resultIndex);
if (src===undefined) {
var image = "<div id=\"search-results-image-" + resultIndex + "-" + imageIndex + "\" class=\"search-result-image-tmb\" style=\"background-image: url(" + tmbsrc + ");\"></div>";
} else {
var image = "<a href=\"" + src + "\" data-gall=\"search-results-image-" + resultIndex + "\" class=\"venobox\">" +
"<div id=\"search-results-image-" + resultIndex + "-" + imageIndex + "\" class=\"search-result-image-tmb\" style=\"background-image: url(" + tmbsrc + ");\"></div>"
"<a>";
}
carouselContainer.html(image);
};
QueryHandler.prototype.handleImagesOld = function(collectionId, endpointId, datasetId, images, index, placeholder) {
var _this = this;
var imageContainer = $("#search-results-image-" + index);
var imageBackgroundContainer = $("#search-results-image-" + index + " .background");
if (placeholder && images.length>1) {
images = [images[0]];
}
if (images.length>0) {
imageBackgroundContainer.addClass("hide");
// Limit this preview to five images
/*if (images[0]===undefined || images[0]===null) {
continue;
}*/
var tmpsrc = undefined;
var src = undefined;
if (placeholder) {
tmbsrc = __util.composeUrl("cachedimages/" + collectionId + "?i=" + encodeURIComponent(images[0]));
} else {
src = __util.composeUrl("cachedimages/" + collectionId + "/" + endpointId + "/" + datasetId + "?i=" + encodeURIComponent(images[0]) + "&type=DISPLAY");
tmbsrc = __util.composeUrl("cachedimages/" + collectionId + "/" + endpointId + "/" + datasetId + "?i=" + encodeURIComponent(images[0]));
}
$.ajax({
url : tmbsrc,
cache: true,
context: {
tmbsrc: tmbsrc,
src: src,
index: index,
imageIndex: 0,
placeholder: placeholder,
onlyImage: (placeholder || images.length==1)
},
success: function() {
_this.loadImage(this.tmbsrc, this.src, this.index, this.imageIndex, this.onlyImage);
if (!placeholder) {
$("#search-results-image-" + this.index + " .no-preview-overlay").hide();
}
$("#search-results-resources .venobox").venobox();
},
error: function(jqXHR, textStatus, errorThrown) {
if ($("#search-results-image-" + this.index + " .carousel-inner .carousel-item").length==0) {
$("#search-results-image-" + this.index).remove();
}
},
complete: function() {
$("#search-results-image-" + this.index).removeClass("hide");
}
});
}
};
QueryHandler.prototype.loadImage = function(tmbsrc, src, resultIndex, imageIndex, onlyImage) {
var carouselContainer = $("#search-results-image-" + resultIndex);
if (src===undefined) {
var image = "<div id=\"search-results-image-" + resultIndex + "-" + imageIndex + "\" class=\"search-result-image-tmb\" style=\"background-image: url(" + tmbsrc + ");\"></div>";
} else {
var image = "<a href=\"" + src + "\" data-gall=\"search-results-image-" + resultIndex + "\" class=\"venobox\">" +
"<div id=\"search-results-image-" + resultIndex + "-" + imageIndex + "\" class=\"search-result-image-tmb\" style=\"background-image: url(" + tmbsrc + ");\"></div>"
"<a>";
}
if (onlyImage) {
carouselContainer.html(image);
} else {
carouselContainer.find(".carousel-inner").append("<div class=\"carousel-item"+ (imageIndex==0 ? " active" : "") +"\">" + image + "</div>");
}
};
QueryHandler.prototype.renderResultItem = function(item, content, hideElements) { QueryHandler.prototype.renderResultItem = function(item, content, hideElements) {
for (var i=0; i<content.length; i++) { for (var i=0; i<content.length; i++) {
...@@ -943,6 +868,7 @@ QueryHandler.prototype.renderResultItem = function(item, content, hideElements) ...@@ -943,6 +868,7 @@ QueryHandler.prototype.renderResultItem = function(item, content, hideElements)
uniquitems.push(value); uniquitems.push(value);
} }
} }
result = this.renderValue(result, content[i][2]);
} else { } else {
result = this.renderValue(content[i][1], content[i][2]); result = this.renderValue(content[i][1], content[i][2]);
} }
...@@ -1011,7 +937,6 @@ QueryHandler.prototype.buildQuery = function(isShowMore) { ...@@ -1011,7 +937,6 @@ QueryHandler.prototype.buildQuery = function(isShowMore) {
query.size = $("#size").val(); query.size = $("#size").val();
query.explain = $("#explain").prop('checked'); query.explain = $("#explain").prop('checked');
query.includeOriginal = $("#includeOriginal").prop('checked');
query.sourceIds = sourceSelection.getSelectedSourceIds(); query.sourceIds = sourceSelection.getSelectedSourceIds();
query.customSearch = this.options.customSearch; query.customSearch = this.options.customSearch;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment