From: Tara L Andrews <tla\@mit.edu>
Date: Wed, 14 Mar 2012 23:25:16 +0000 (+0100)
Subject: add work-in-progress overlay, fix position of dialog overlay
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=63213207534ef21aaa4f98d895f2ab10592466a3;p=scpubgit%2Fstemmatology.git

add work-in-progress overlay, fix position of dialog overlay
---

diff --git a/stemmaweb/root/css/relationship.css b/stemmaweb/root/css/relationship.css
index 0d85213..bed28ee 100644
--- a/stemmaweb/root/css/relationship.css
+++ b/stemmaweb/root/css/relationship.css
@@ -74,6 +74,28 @@ span.apimore {
     padding-top: 5px;
     padding-bottom: 5px;    
 }
+#loading_overlay {
+	display: none;
+	position: absolute;
+	height: 500px;
+	width: 89%;
+	z-index: 2;
+	opacity: 0.7;
+    background-image: url("cupertino/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png");
+    background-repeat: repeat;
+    background-attachment: scroll;
+    background-position: 50% 50%;
+    background-color: #EEEEEE; 
+}
+#loading_message {
+	position: relative;
+	background-color: #EDF1FA;
+	color: #222222;
+    border: 2px solid #B0C6F7;
+	height: 20px;
+	width: 150px;
+	padding: 20px;
+}
 #dialog_overlay {
     display: none;
     position: absolute;
diff --git a/stemmaweb/root/js/relationship.js b/stemmaweb/root/js/relationship.js
index 414b78c..7921b1d 100644
--- a/stemmaweb/root/js/relationship.js
+++ b/stemmaweb/root/js/relationship.js
@@ -21,6 +21,16 @@ function getRelationshipURL() {
 }
 
 function svgEnlargementLoaded() {
+	//Give some visual evidence that we are working
+	$('#loading_overlay').show();
+	lo_height = $("#enlargement_container").outerHeight();
+	lo_width = $("#enlargement_container").outerWidth();
+	$("#loading_overlay").height( lo_height );
+	$("#loading_overlay").width( lo_width );
+	$("#loading_overlay").offset( $("#enlargement_container").offset() );
+	$("#loading_message").offset(
+		{ 'top': lo_height / 2 - $("#loading_message").height() / 2,
+		  'left': lo_width / 2 - $("#loading_message").width() / 2 });
     //Set viewbox widht and height to widht and height of $('#svgenlargement svg').
     //This is essential to make sure zooming and panning works properly.
     $('#svgenlargement ellipse').attr( {stroke:'green', fill:'#b3f36d'} );
@@ -41,10 +51,10 @@ function svgEnlargementLoaded() {
     svg_g.setAttribute('transform', transform);
     //used to calculate min and max zoom level:
     start_element_height = $("#svgenlargement .node title:contains('#START#')").siblings('ellipse')[0].getBBox().height;
-    add_relations();
+    add_relations( function() { $('#loading_overlay').hide(); });
 }
 
-function add_relations() {
+function add_relations( callback_fn ) {
 	var basepath = getRelativePath();
 	var textrelpath = getRelationshipURL();
     $.getJSON( basepath + '/definitions', function(data) {
@@ -65,7 +75,8 @@ function add_relations() {
                     node_obj.set_draggable( false );
                     node_obj.ellipse.data( 'node_obj', null );
                 }
-            })
+            });
+            callback_fn.call();
         });
     });
 }
@@ -490,7 +501,7 @@ $(document).ready(function () {
         $(".ui-widget-overlay").css("background", "none");
         $("#dialog_overlay").show();
         $("#dialog_overlay").height( $("#enlargement_container").height() );
-        $("#dialog_overlay").width( $("#enlargement_container").width() );
+        $("#dialog_overlay").width( $("#enlargement_container").innerWidth() );
         $("#dialog_overlay").offset( $("#enlargement_container").offset() );
     },
     close: function() {
diff --git a/stemmaweb/root/src/relate.tt b/stemmaweb/root/src/relate.tt
index 72ea8e1..89ca08c 100644
--- a/stemmaweb/root/src/relate.tt
+++ b/stemmaweb/root/src/relate.tt
@@ -19,6 +19,10 @@ $(function() {
 	</div>
 
 	<div id="enlargement_container">	
+		<div id="loading_overlay">
+			<div id="loading_message"><span>Loading, please wait...</span></div>
+		</div>
+		<div id="dialog_overlay"></div>
 		<div id="enlargement">
 	        <div id="svgenlargement" style="height: 500px;"></div>
 		</div>