SSDM-1169 : Javascript image viewer improvements

SVN: 32972

screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/AbstractWidget.js

-define([ "jquery", "components/common/ListenerManager" ], function($, ListenerManager) {
+define([ "jquery", "components/common/ListenerManager",
+		"components/imageviewer/LoadingWidget" ], function($, ListenerManager, LoadingWidget) {
 
 	//
 	// ABSTRACT WIDGET
@@ -38,6 +39,10 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
 			if (this.loaded) {
 				doRender();
 			} else {
+				var loading = new LoadingWidget();
+				loading.setLoading(true);
+				this.panel.append(loading.render());
+
 				this.load(function() {
 					thisWidget.loaded = true;
 					thisWidget.notifyLoadListeners();

screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/LoadingView.js

-define([ "jquery", "components/imageviewer/AbstractView" ], function($, AbstractView) {
+define([ "jquery" ], function($) {
 
 	//
 	// LOADING VIEW
@@ -8,10 +8,10 @@ define([ "jquery", "components/imageviewer/AbstractView" ], function($, Abstract
 		this.init(controller);
 	}
 
-	$.extend(LoadingView.prototype, AbstractView.prototype, {
+	$.extend(LoadingView.prototype, {
 
 		init : function(controller) {
-			AbstractView.prototype.init.call(this, controller);
+			this.controller = controller;
 			this.panel = $("<div>");
 		},
 
@@ -20,7 +20,7 @@ define([ "jquery", "components/imageviewer/AbstractView" ], function($, Abstract
 		},
 
 		refresh : function() {
-			this.panel.text(this.controller.isLoading() ? "loading..." : "");
+			this.panel.text(this.controller.isLoading() ? "Loading..." : "");
 		}
 
 	});

screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/LoadingWidget.js

-define([ "jquery", "components/imageviewer/AbstractWidget", "components/imageviewer/LoadingView" ], function($, AbstractWidget, LoadingView) {
+define([ "jquery", "components/imageviewer/LoadingView" ], function($,
+		LoadingView) {
 
 	//
 	// LOADING WIDGET
@@ -8,10 +9,30 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
 		this.init();
 	}
 
-	$.extend(LoadingWidget.prototype, AbstractWidget.prototype, {
+	$.extend(LoadingWidget.prototype, {
 
 		init : function() {
-			AbstractWidget.prototype.init.call(this, new LoadingView(this));
+			this.view = new LoadingView(this);
+		},
+
+		render : function() {
+			if (this.rendered) {
+				return this.panel;
+			}
+
+			this.panel = $("<div>");
+			this.panel.append(this.view.render());
+			this.rendered = true;
+
+			return this.panel;
+		},
+
+		refresh : function() {
+			if (!this.rendered) {
+				return;
+			}
+
+			this.view.refresh();
 		},
 
 		setLoading : function(loading) {

screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/css/image-viewer.css

 .imageViewer .formPanel {
-	
+	min-width: 350px;
 }
 
 .imageViewer .imagePanel {