From: Tara L Andrews 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() {
+
+
Loading, please wait...
+
+