From 1ce0b02ed0ddee6c907f46d3178dfd350df7fbc2 Mon Sep 17 00:00:00 2001
From: juanf <juanf>
Date: Tue, 15 Apr 2014 15:17:49 +0000
Subject: [PATCH] SSDM-109 : Ability to show images on the ELN UI
SVN: 31370
---
.../1/as/webapps/newbrowser/html/index.html | 7 +-
.../html/js/widgets/DataSetViewer.js | 100 +++++-
.../html/lib/bootstrap-switch/LICENSE.txt | 24 ++
.../html/lib/bootstrap-switch/VERSION.txt | 1 +
.../bootstrap-switch/css/toggle-switch.css | 310 ++++++++++++++++++
5 files changed, 425 insertions(+), 17 deletions(-)
create mode 100644 plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/LICENSE.txt
create mode 100644 plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/VERSION.txt
create mode 100644 plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/css/toggle-switch.css
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/index.html b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/index.html
index 50fd238269a..a6a490ce10d 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/index.html
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/index.html
@@ -28,21 +28,22 @@
<link type="text/css" rel="stylesheet" href="./lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
<link type="text/css" rel="stylesheet" href="./lib/bootstrap-multiselect/css/bootstrap-multiselect.css" />
<link type="text/css" rel="stylesheet" href="./lib/bootstrap-slider/css/bootstrap-slider.css" />
+ <link type="text/css" rel="stylesheet" href="./lib/bootstrap-switch/css/toggle-switch.css" />
<link type="text/css" rel="stylesheet" href="./lib/jquery-jnotify/css/jNotify.jquery.css" />
<!-- ELN UI Stylesheets -->
<link type="text/css" rel="stylesheet" href="./css/style.css" />
- <!-- For debugging with GWT
+ <!-- For debugging with GWT -->
<script type="text/javascript" src="/ch.systemsx.cisd.openbis.OpenBIS/resources/js/jquery.js"></script>
<script type="text/javascript" src="/ch.systemsx.cisd.openbis.OpenBIS/resources/js/openbis.js"></script>
<script type="text/javascript" src="/ch.systemsx.cisd.openbis.OpenBIS/resources/js/openbis-login.js"></script>
- -->
- <!-- For production ussage -->
+ <!-- For production ussage
<script type="text/javascript" src="/openbis/resources/js/jquery.js"></script>
<script type="text/javascript" src="/openbis/resources/js/openbis.js"></script>
<script type="text/javascript" src="/openbis/resources/js/openbis-login.js"></script>
+ -->
<!-- Third party libraries -->
<script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script>
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/widgets/DataSetViewer.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/widgets/DataSetViewer.js
index 81775db406b..5f22d57e042 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/widgets/DataSetViewer.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/widgets/DataSetViewer.js
@@ -26,10 +26,13 @@
*/
function DataSetViewer(containerId, sample, serverFacade, datastoreDownloadURL) {
this.containerId = containerId;
+ this.containerIdTitle = containerId + "-title";
+ this.containerIdContent = containerId + "-content";
this.serverFacade = serverFacade;
this.sample = sample;
this.sampleDataSets = {};
this.sampleDataSetsFiles = {};
+ this.datastoreDownloadURL = datastoreDownloadURL
this._isPreviewable = function(file) {
if(!file.isDirectory) {
@@ -48,14 +51,33 @@ function DataSetViewer(containerId, sample, serverFacade, datastoreDownloadURL)
return false;
}
+ this._isImage = function(file) {
+ if(!file.isDirectory) {
+ var haveExtension = file.pathInDataSet.lastIndexOf(".");
+ if( haveExtension !== -1 && (haveExtension + 1 < file.pathInDataSet.length)) {
+ var extension = file.pathInDataSet.substring(haveExtension + 1, file.pathInDataSet.length).toLowerCase();
+
+ return extension === "jpg" || extension === "jpeg" ||
+ extension === "png" ||
+ extension === "gif";
+ }
+ }
+ return false;
+ }
+
this.init = function() {
//
// Loading Message
//
var $container = $("#"+this.containerId);
$container.empty();
- $container.append($("<legend>").html("DataSets"));
- $container.append($("<p>")
+
+ var $containerTitle = $("<div>", {"id" : this.containerIdTitle });
+ $container.append($containerTitle);
+ $container.append($("<div>", {"id" : this.containerIdContent }));
+
+ $containerTitle.append($("<legend>").html("Data Sets"));
+ $containerTitle.append($("<p>")
.append($("<i>", { class: "icon-info-sign" }))
.append(" Loading datasets."));
//
@@ -74,7 +96,22 @@ function DataSetViewer(containerId, sample, serverFacade, datastoreDownloadURL)
if(getCall) {
getCall(callback);
} else {
- localReference.repaint();
+ //Switch Title
+ $containerTitle.empty();
+
+ //Upload Button
+ var $uploadButton = $("<a>", { class: "btn" }).append($("<i>", { class: "icon-upload" }));
+ $uploadButton.click(function() {
+ mainController.changeView('showCreateDataSetPage',localReference.sample); //TO-DO Fix Global Access
+ } );
+
+ $containerTitle.append($("<legend>").append("Data Sets ").append($uploadButton));
+
+ //Switch
+ $containerTitle.append(localReference._getSwitch());
+
+ //Repaint
+ localReference.repaintImages();
}
}
@@ -94,20 +131,55 @@ function DataSetViewer(containerId, sample, serverFacade, datastoreDownloadURL)
});
}
- this.repaint = function() {
- var $container = $("#"+this.containerId);
- $container.empty();
+ this._getSwitch = function() {
+ var _this = this;
+ var $switch = $("<div>", {"class" : "switch-toggle well"});
+ $switch.change(function(event) {
+ var mode = $('input[name=dataSetVieweMode]:checked').val();
+ switch(mode) {
+ case "imageMode":
+ _this.repaintImages();
+ break;
+ case "fileMode":
+ _this.repaintFiles();
+ break;
+ }
+ });
- //Upload Button
- var $uploadButton = $("<a>", { class: "btn" }).append($("<i>", { class: "icon-upload" }));
+ $switch
+ .append($("<input>", {"value" : "imageMode", "id" : "imageMode", "name" : "dataSetVieweMode", "type" : "radio", "checked" : ""}))
+ .append($("<label>", {"for" : "imageMode", "onclick" : ""}).append("Data Set Images"))
+ .append($("<input>", {"value" : "fileMode", "id" : "fileMode","name" : "dataSetVieweMode", "type" : "radio"}))
+ .append($("<label>", {"for" : "fileMode", "onclick" : ""}).append("Data Set Files"));
+
+ $switch.append($("<a>", {"class" : "btn btn-primary"}));
- var localSample = this.sample;
- $uploadButton.click(function() {
- mainController.changeView('showCreateDataSetPage',localSample); //TO-DO Fix Global Access
- } );
+ return $switch;
+ }
+
+ this.repaintImages = function() {
+ _this = this;
- //Title
- $container.append($("<legend>").html("DataSets ").append($uploadButton));
+ var $container = $("#"+this.containerIdContent);
+ $container.empty();
+ //
+ for(var datasetCode in this.sampleDataSets) {
+ var dataset = this.sampleDataSets[datasetCode];
+ var datasetFiles = this.sampleDataSetsFiles[datasetCode];
+
+ datasetFiles.forEach(
+ function(file) {
+ if (_this._isImage(file)) {
+ var $image = $("<img>", {"style" : "width:300px", "src" : _this.datastoreDownloadURL + '/' + dataset.code + "/" + file.pathInDataSet + "?sessionID=" + _this.serverFacade.getSession()});
+ $container.append($image);
+ }
+ });
+ }
+ }
+
+ this.repaintFiles = function() {
+ var $container = $("#"+this.containerIdContent);
+ $container.empty();
//
// No data store URL
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/LICENSE.txt b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/LICENSE.txt
new file mode 100644
index 00000000000..00d2e135a7e
--- /dev/null
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/LICENSE.txt
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>
\ No newline at end of file
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/VERSION.txt b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/VERSION.txt
new file mode 100644
index 00000000000..44c20126352
--- /dev/null
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/VERSION.txt
@@ -0,0 +1 @@
+N/A
\ No newline at end of file
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/css/toggle-switch.css b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/css/toggle-switch.css
new file mode 100644
index 00000000000..ee41749d0d3
--- /dev/null
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/lib/bootstrap-switch/css/toggle-switch.css
@@ -0,0 +1,310 @@
+/*
+ * CSS TOGGLE SWITCHES
+ * Unlicense
+ *
+ * IonuÈ› Colceriu - ghinda.net
+ * https://github.com/ghinda/css-toggle-switch
+ *
+ */
+/* Toggle Switches
+ */
+/* Shared
+ */
+/* Checkbox
+ */
+/* Radio Switch
+ */
+/* Hide by default
+ */
+.switch-toggle a, .switch-light span span {
+ display: none; }
+
+/* We can't test for a specific feature,
+ * so we only target browsers with support for media queries.
+ */
+@media only screen {
+ /* Checkbox switch
+ */
+ /* Radio switch
+ */
+ /* Standalone Themes */
+ /* Candy Theme
+ * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
+ * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
+ */
+ /* Android Theme
+ */
+ /* iOS Theme
+ */
+ .switch-light {
+ display: block;
+ height: 30px;
+ /* Outline the toggles when the inputs are focused
+ */
+ position: relative;
+ overflow: visible;
+ padding: 0;
+ margin-left: 100px;
+ /* Position the label over all the elements, except the slide-button (<a>)
+ * Clicking anywhere on the label will change the switch-state
+ */
+ /* Don't hide the input from screen-readers and keyboard access
+ */ }
+ .switch-light * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .switch-light a {
+ display: block;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out; }
+ .switch-light label, .switch-light > span {
+ line-height: 30px;
+ vertical-align: middle; }
+ .switch-light input:focus ~ a, .switch-light input:focus + label {
+ outline: 1px dotted #888888; }
+ .switch-light label {
+ position: relative;
+ z-index: 3;
+ display: block;
+ width: 100%; }
+ .switch-light input {
+ position: absolute;
+ opacity: 0;
+ z-index: 5; }
+ .switch-light input:checked ~ a {
+ right: 0%; }
+ .switch-light > span {
+ position: absolute;
+ left: -100px;
+ width: 100%;
+ margin: 0;
+ padding-right: 100px;
+ text-align: left; }
+ .switch-light > span span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ display: block;
+ width: 50%;
+ margin-left: 100px;
+ text-align: center; }
+ .switch-light > span span:last-child {
+ left: 50%; }
+ .switch-light a {
+ position: absolute;
+ right: 50%;
+ top: 0;
+ z-index: 4;
+ display: block;
+ width: 50%;
+ height: 100%;
+ padding: 0; }
+ .switch-toggle {
+ display: block;
+ height: 30px;
+ /* Outline the toggles when the inputs are focused
+ */
+ position: relative;
+ /* For callout panels in foundation
+ */
+ padding: 0 !important;
+ /* Generate styles for the multiple states */ }
+ .switch-toggle * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+ .switch-toggle a {
+ display: block;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out; }
+ .switch-toggle label, .switch-toggle > span {
+ line-height: 30px;
+ vertical-align: middle; }
+ .switch-toggle input:focus ~ a, .switch-toggle input:focus + label {
+ outline: 1px dotted #888888; }
+ .switch-toggle input {
+ position: absolute;
+ opacity: 0; }
+ .switch-toggle input + label {
+ position: relative;
+ z-index: 2;
+ float: left;
+ width: 50%;
+ height: 100%;
+ margin: 0;
+ text-align: center; }
+ .switch-toggle a {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0;
+ z-index: 1;
+ width: 50%;
+ height: 100%; }
+ .switch-toggle input:last-of-type:checked ~ a {
+ left: 50%; }
+ .switch-toggle.switch-3 label, .switch-toggle.switch-3 a {
+ width: 33.33333%; }
+ .switch-toggle.switch-3 input:checked:nth-of-type(2) ~ a {
+ left: 33.33333%; }
+ .switch-toggle.switch-3 input:checked:last-of-type ~ a {
+ left: 66.66667%; }
+ .switch-toggle.switch-4 label, .switch-toggle.switch-4 a {
+ width: 25%; }
+ .switch-toggle.switch-4 input:checked:nth-of-type(2) ~ a {
+ left: 25%; }
+ .switch-toggle.switch-4 input:checked:nth-of-type(3) ~ a {
+ left: 50%; }
+ .switch-toggle.switch-4 input:checked:last-of-type ~ a {
+ left: 75%; }
+ .switch-toggle.switch-5 label, .switch-toggle.switch-5 a {
+ width: 20%; }
+ .switch-toggle.switch-5 input:checked:nth-of-type(2) ~ a {
+ left: 20%; }
+ .switch-toggle.switch-5 input:checked:nth-of-type(3) ~ a {
+ left: 40%; }
+ .switch-toggle.switch-5 input:checked:nth-of-type(4) ~ a {
+ left: 60%; }
+ .switch-toggle.switch-5 input:checked:last-of-type ~ a {
+ left: 80%; }
+ .switch-candy {
+ background-color: #2d3035;
+ border-radius: 3px;
+ color: white;
+ font-weight: bold;
+ text-align: center;
+ text-shadow: 1px 1px 1px #191b1e;
+ box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); }
+ .switch-candy label {
+ color: white;
+ -webkit-transition: color 0.2s ease-out;
+ -moz-transition: color 0.2s ease-out;
+ transition: color 0.2s ease-out; }
+ .switch-candy input:checked + label {
+ color: #333333;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
+ .switch-candy a {
+ border: 1px solid #333333;
+ background-color: #70c66b;
+ border-radius: 3px;
+ background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
+ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45); }
+ .switch-candy > span {
+ color: #333333;
+ text-shadow: none; }
+ .switch-candy span {
+ color: white; }
+ .switch-candy.switch-candy-blue a {
+ background-color: #38a3d4; }
+ .switch-candy.switch-candy-yellow a {
+ background-color: #f5e560; }
+ .switch-android {
+ background-color: #464747;
+ border-radius: 1px;
+ color: white;
+ box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
+ /* Selected ON switch-light
+ */ }
+ .switch-android label {
+ color: white; }
+ .switch-android > span span {
+ opacity: 0;
+ -webkit-transition: all 0.1s;
+ -moz-transition: all 0.1s;
+ transition: all 0.1s; }
+ .switch-android > span span:first-of-type {
+ opacity: 1; }
+ .switch-android a {
+ background-color: #666666;
+ border-radius: 1px;
+ box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0, inset rgba(0, 0, 0, 0.3) 0 -1px 0; }
+ .switch-android.switch-light input:checked ~ a {
+ background-color: #0e88b1; }
+ .switch-android.switch-light input:checked ~ span span:first-of-type {
+ opacity: 0; }
+ .switch-android.switch-light input:checked ~ span span:last-of-type {
+ opacity: 1; }
+ .switch-android.switch-toggle, .switch-android > span span {
+ font-size: 85%;
+ text-transform: uppercase; }
+ .switch-ios.switch-light {
+ color: #868686; }
+ .switch-ios.switch-light a {
+ left: 0;
+ width: 30px;
+ background-color: white;
+ border: 1px solid lightgrey;
+ border-radius: 100%;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+ box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1); }
+ .switch-ios.switch-light > span span {
+ width: 100%;
+ left: 0;
+ opacity: 0; }
+ .switch-ios.switch-light > span span:first-of-type {
+ opacity: 1;
+ padding-left: 30px; }
+ .switch-ios.switch-light > span span:last-of-type {
+ padding-right: 30px; }
+ .switch-ios.switch-light > span:before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 100px;
+ top: 0;
+ background-color: #fafafa;
+ border: 1px solid lightgrey;
+ border-radius: 30px;
+ -webkit-transition: all 0.5s ease-out;
+ -moz-transition: all 0.5s ease-out;
+ transition: all 0.5s ease-out;
+ box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; }
+ .switch-ios.switch-light input:checked ~ a {
+ left: 100%;
+ margin-left: -30px; }
+ .switch-ios.switch-light input:checked ~ span:before {
+ border-color: #53d76a;
+ box-shadow: inset 0 0 0 30px #53d76a; }
+ .switch-ios.switch-light input:checked ~ span span:first-of-type {
+ opacity: 0; }
+ .switch-ios.switch-light input:checked ~ span span:last-of-type {
+ opacity: 1;
+ color: white; }
+ .switch-ios.switch-toggle {
+ background-color: #fafafa;
+ border: 1px solid lightgrey;
+ border-radius: 30px;
+ box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; }
+ .switch-ios.switch-toggle a {
+ background-color: #53d76a;
+ border-radius: 25px;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out; }
+ .switch-ios.switch-toggle label {
+ color: #868686; }
+ .switch-ios input:checked + label {
+ color: #3a3a3a; } }
+
+/* Bugfix for older Webkit, including mobile Webkit. Adapted from
+ * http://css-tricks.com/webkit-sibling-bug/
+ */
+@media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 1280px) {
+ .switch-light, .switch-toggle {
+ -webkit-animation: webkitSiblingBugfix infinite 1s; } }
+
+@-webkit-keyframes webkitSiblingBugfix {
+ from {
+ -webkit-transform: translate3d(0, 0, 0); }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0); } }
--
GitLab