show loading graphic while we wait; style text list

diff --git a/root/css/style.css b/root/css/style.css
index 11fe773..c7d543a 100644 (file)
--- a/root/css/style.css
+++ b/root/css/style.css
@@ -29,18 +29,32 @@ h2 {
        height: 450px;
        border: 1px #c6dcf1 solid;
 }
+.traditionname {
+       text-decoration: underline;
+}
+.selected {
+       font-style: italic;
+}
 #variant_graph {
        clear: both;
        width: 900px;
        height: 400px;
        border: 1px #c6dcf1 solid;
        overflow: auto; 
+       text-align: center;
+}
+#variant_graph img {
+       margin-top: expression(( 400 - this.height ) / 2);
 }
 #stemma_graph {
     float: left;
     width: 500px;
     height: 450px;
     border: 1px #c6dcf1 solid;
+    text-align: center;
+}
+#stemma_graph img {
+       margin-top: expression(( 450 - this.height ) / 2);
 }
 /* Additional components for the stexaminer */
 #variants_table {

diff --git a/root/images/ajax-loader.gif b/root/images/ajax-loader.gif
new file mode 100644 (file)
index 0000000..7f0c6ec
Binary files /dev/null and b/root/images/ajax-loader.gif differ

diff --git a/root/js/componentload.js b/root/js/componentload.js
index e05e5c5..c9e3175 100644 (file)
--- a/root/js/componentload.js
+++ b/root/js/componentload.js
@@ -1,5 +1,11 @@
 function loadTradition( textid ) {
-    
+    // First insert the placeholder image
+    var imghtml = '<img src="/images/ajax-loader.gif" alt="Loading SVG..."/>'
+    $('#stemma_graph').empty();
+    $('#variant_graph').empty();
+    $('#stemma_graph').append( imghtml );
+    $('#variant_graph').append( imghtml );
+    // Then get and load the actual content.
     // TODO: scale #stemma_grpah both horizontally and vertically
     // TODO: load svgs from SVG.Jquery (to make scaling react in Safari)
        $('#stemma_graph').load( "stemma/" + textid , function() {

diff --git a/root/src/directory.tt b/root/src/directory.tt
index bf49c2c..1313c4b 100644 (file)
--- a/root/src/directory.tt
+++ b/root/src/directory.tt
@@ -3,7 +3,7 @@
       <ul>
 [% SET i = 0 -%]
 [% FOREACH t IN texts -%]
-        <li><span class="traditionname" onClick="loadTradition('[% t.id %]')">[% t.name %]</span></li>
+        <li><span class="traditionname" onClick="$('.traditionname').removeClass('selected');$(this).addClass('selected');loadTradition('[% t.id %]')">[% t.name %]</span></li>
 [% i = i + 1 -%]
 [% END -%]
      </table>