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 (file)
--- 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 (file)
--- 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 (file)
--- 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>