From 1ef2961b9527e2a790cbb30a6b4aa528f170df2e Mon Sep 17 00:00:00 2001
From: yvesn <yvesn>
Date: Wed, 7 Jun 2017 15:25:00 +0000
Subject: [PATCH] SSDM-4169 : ELN image preview - added images in tooltips for
attached files
SVN: 38278
---
.../as/webapps/eln-lims/html/js/util/Util.js | 51 ++++++++++--------
.../DataSetForm/widgets/DatasetViewerModel.js | 11 +++-
.../DataSetForm/widgets/DatasetViewerView.js | 53 +++++++++++++++++--
3 files changed, 87 insertions(+), 28 deletions(-)
diff --git a/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/Util.js b/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/Util.js
index 64a2f9bbce6..ddb8af3fbee 100644
--- a/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/Util.js
+++ b/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/Util.js
@@ -390,32 +390,37 @@ var Util = new function() {
}
var $image = $("<img>", {"src" : imageURL});
- $image.load(function() {
- var imageWidth = $image[0].width;
- var imageHeight = $image[0].height;
-
- if(containerWidth < imageWidth) {
- var newImageWidth = containerWidth;
- var newImageHeight = imageHeight * newImageWidth / imageWidth;
-
- imageWidth = newImageWidth;
- imageHeight = newImageHeight;
- }
+ $image.load((function() {
+ var imageSize = this.getImageSize(containerWidth, containerHeight, $image);
+ $image.attr("width", imageSize.width);
+ $image.attr("height", imageSize.height);
+ showImageB($image);
+ }).bind(this));
+ }
+
+ this.getImageSize = function(containerWidth, containerHeight, $image) {
+ var imageWidth = $image[0].width;
+ var imageHeight = $image[0].height;
+
+ if(containerWidth < imageWidth) {
+ var newImageWidth = containerWidth;
+ var newImageHeight = imageHeight * newImageWidth / imageWidth;
- if(containerHeight < imageHeight) {
- var newImageHeight = containerHeight;
- var newImageWidth = imageWidth * newImageHeight / imageHeight;
-
- imageWidth = newImageWidth;
- imageHeight = newImageHeight;
- }
+ imageWidth = newImageWidth;
+ imageHeight = newImageHeight;
+ }
+
+ if(containerHeight < imageHeight) {
+ var newImageHeight = containerHeight;
+ var newImageWidth = imageWidth * newImageHeight / imageHeight;
- $image.attr("width", imageWidth);
- $image.attr("height", imageHeight);
- showImageB($image);
- });
+ imageWidth = newImageWidth;
+ imageHeight = newImageHeight;
+ }
+
+ return {width : imageWidth, height : imageHeight};
}
-
+
//
// Date Formating
//
diff --git a/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerModel.js b/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerModel.js
index 9c4c1d3f29c..790f9389767 100644
--- a/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerModel.js
+++ b/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerModel.js
@@ -91,11 +91,18 @@ function DataSetViewerModel(containerId, profile, entity, serverFacade, datastor
this.getPreviewLink = function(datasetCode, datasetFile) {
var previewLink = null;
if(this._isPreviewableImage(datasetFile.pathInDataSet)) {
- var imageURLAsString = profile.getDefaultDataStoreURL() + "/" + datasetCode + "/" + datasetFile.pathInDataSet + "?sessionID=" + mainController.serverFacade.getSession();
+ var imageURLAsString = this.getImageUrl(datasetCode, datasetFile);
var onclick = "Util.showImage(\"" + imageURLAsString + "\");"
previewLink = "<span onclick='" + onclick + "' class='glyphicon glyphicon-search'></span>";
}
return previewLink;
}
-
+
+ this.getImageUrl = function(datasetCode, datasetFile) {
+ if(this._isPreviewableImage(datasetFile.pathInDataSet)) {
+ return profile.getDefaultDataStoreURL() + "/" + datasetCode + "/" + datasetFile.pathInDataSet + "?sessionID=" + mainController.serverFacade.getSession();
+ }
+ return null;
+ }
+
}
\ No newline at end of file
diff --git a/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerView.js b/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerView.js
index b35955afd5c..e3970300375 100644
--- a/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerView.js
+++ b/openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/DataSetForm/widgets/DatasetViewerView.js
@@ -153,6 +153,7 @@ function DataSetViewerView(dataSetViewerController, dataSetViewerModel) {
var file = files.result[fIdx];
var titleValue = null;
+ var imageUrl = null;
if (file.isDirectory) {
titleValue = file.pathInListing;
var directLink = _this._dataSetViewerModel.getDirectDirectoryLink(code, file.pathInDataSet);
@@ -163,11 +164,21 @@ function DataSetViewerView(dataSetViewerController, dataSetViewerModel) {
var $fileLink = _this._dataSetViewerModel.getDownloadLink(code, file, true);
titleValue = $fileLink[0].outerHTML;
var previewLink = _this._dataSetViewerModel.getPreviewLink(code, file);
+ imageUrl = _this._dataSetViewerModel.getImageUrl(code, file);
if (previewLink) {
titleValue = previewLink + " " + titleValue;
}
}
- results.push({ title : titleValue, key : file.pathInDataSet, folder : file.isDirectory, lazy : file.isDirectory, datasetCode : parentDatasetCode });
+ results.push({
+ // node properties
+ title : titleValue,
+ key : file.pathInDataSet,
+ folder : file.isDirectory,
+ lazy : file.isDirectory,
+ // custom data
+ datasetCode : parentDatasetCode,
+ imageUrl : imageUrl,
+ });
}
dfd.resolve(results);
@@ -189,14 +200,50 @@ function DataSetViewerView(dataSetViewerController, dataSetViewerModel) {
});
}
};
-
+
+ // add tooltip for images
+ var onRenderNode = function(event, data) {
+
+ if (data.node.data.imageUrl == null) {
+ return;
+ }
+
+ var $img = $("<img>", { src : data.node.data.imageUrl });
+ var $tooltip = $("<div>", { class : "tooltip_templates" }).append($("<span>")
+ .append($img));
+
+ var $span = $(data.node.span);
+ $span.tooltipster({
+ content : $tooltip,
+ position : "left",
+ functionFormat : function(instance, helper, content) {
+
+ var containerWidth = $(helper.origin).offset().left*0.9;
+ var containerHeight = $(window).height()*0.9;
+
+ var $img = content.find("img");
+ var imageSize = Util.getImageSize(containerWidth, containerHeight, $img);
+
+ $img.css({
+ width : "" + imageSize.width + "px",
+ height : "" + imageSize.height + "px",
+ "background-color" : "white",
+ });
+
+ return content;
+ }
+ });
+
+ }
+
$tree.fancytree({
extensions: ["dnd", "edit", "glyph"], //, "wide"
glyph: glyph_opts,
source: treeModel,
createNode: onCreateNode,
click: onClick,
- lazyLoad : onLazyLoad
+ lazyLoad : onLazyLoad,
+ renderNode : onRenderNode,
});
}
--
GitLab