show loading graphic while we wait; style text list

[scpubgit/stemmatology.git] / stemmaweb / root / js / componentload.js

diff --git a/stemmaweb/root/js/componentload.js b/stemmaweb/root/js/componentload.js
index c5e5d3c..c9e3175 100644 (file)
--- a/stemmaweb/root/js/componentload.js
+++ b/stemmaweb/root/js/componentload.js
@@ -1,6 +1,24 @@
 function loadTradition( textid ) {
-       $('#stemma_graph').load( "stemma/" + textid );
-       $('#stemma_graph > svg').width('485px');
-       $('#variant_graph').load( "variantgraph/" + textid );
-       $('#variant_graph > svg').height('300px');
-}
\ No newline at end of file
+    // 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() {
+       var stemma_svg_element = $('#stemma_graph svg').svg().svg('get').root();
+       console.log( stemma_svg_element );
+       stemma_svg_element.height.baseVal.value = $('#stemma_graph').height();
+       });
+    $('#variant_graph').load( "variantgraph/" + textid , function() {
+       var variant_svg_element = $('#variant_graph svg').svg().svg('get').root();
+       var svg_height = variant_svg_element.height.baseVal.value;
+       var svg_width = variant_svg_element.width.baseVal.value;
+       var container_height = $('#variant_graph').height();
+       variant_svg_element.height.baseVal.value = container_height;
+       variant_svg_element.width.baseVal.value = (svg_width/svg_height * container_height);
+       });
+}