Implementation of merge back-end & UI

[scpubgit/stemmaweb.git] / root / js / stexaminer.js

diff --git a/root/js/stexaminer.js b/root/js/stexaminer.js
index fd7eade..a846cd0 100644 (file)
--- a/root/js/stexaminer.js
+++ b/root/js/stexaminer.js
@@ -1,27 +1,58 @@
 var colors = ['#ffeeaa','#afc6e9','#d5fff6','#ffccaa','#ffaaaa','#e5ff80','#e5d5ff','#ffd5e5'];
 var row_triggered = false;
-var original_svg;
 
 function handle_row_click( row ) {
        var ridx = row.parent().parent().index()
        var rs = readingstats[ridx];
-    var imghtml = '<img src="../../images/ajax-loader.gif" alt="Loading SVG..."/>'
+    var imghtml = $('<img>').attr( 'src', baseurl + "../images/ajax-loader.gif" ).attr( 'alt', "Loading SVG..." );
     $('#stemma_graph').empty();
     $('#stemma_graph').append( imghtml );
        if( rs.layerwits ) {
                var stemma_form = { 'dot': graphdot, 'layerwits': rs.layerwits };
-               $('#stemma_graph').load( '../graphsvg', stemma_form, function() {
+               $.post( baseurl + 'graphsvg', stemma_form, function( data ) {
+                       var oSerializer = new XMLSerializer();
+                       var xmlString = oSerializer.serializeToString( data.documentElement );
+                       loadSVG( xmlString, function () { 
+                               color_row( row );
+                               show_stats( rs );
+                       });
+               });
+       } else {
+               loadSVG( original_svg, function() {
                        color_row( row );
                        show_stats( rs );
                });
-       } else {
-               $('#stemma_graph').empty();
-               $('#stemma_graph').append( original_svg );
-               color_row( row );
-               show_stats( rs );
        }
 }
 
+// Load the SVG we are given
+function loadSVG(svgData, cb) {
+       var svgElement = $('#stemma_graph');
+
+       $(svgElement).svg('destroy');
+
+       $(svgElement).svg({
+               loadURL: svgData,
+               onLoad : function () {
+                       var theSVG = svgElement.find('svg');
+                       var svgoffset = theSVG.offset();
+                       // Firefox needs a different offset, stupidly enough
+                       var browseroffset = 1;
+                       if( navigator.userAgent.indexOf('Firefox') > -1 ) {
+                               browseroffset = 3;
+                       }
+                       var topoffset = theSVG.position().top - svgElement.position().top - browseroffset;
+                       // If we are on Safari, we need to get rid of the 'pt' in the width/height
+                       // specifications
+                       theSVG.offset({ top: svgoffset.top - topoffset, left: svgoffset.left });
+                       if( cb ) {
+                               cb.call();
+                       }
+                       theSVG.attr( 'width', '100%' );
+               }
+       });
+}
+
 function color_row( row ) {
     row_triggered = true;
     $('ellipse').attr( {stroke:'white', fill:'#fff'} );
@@ -60,8 +91,9 @@ function color_nodes( column_index, arr_node_ids, arr_greynode_ids ) {
 }
 
 function show_stats( rs ) {
+       // Update the title
+       $('#stats_title').empty().text('Statistics for reading at ' + rs.id + ':' );
        var rshtml = $('#stats_template').clone();
-       rshtml.find('#statrank').append( rs.id );
        if( "unsolved" in rs ) {
                var nocalcmsg;
                if( rs.unsolved == 'IDP error' ) {
@@ -95,8 +127,7 @@ function show_stats( rs ) {
                        rshtml.append( rdgstats.contents() );
                });
        }
-       $('#row_statistics').empty();
-       $('#row_statistics').append( rshtml.contents() );
+       $('#stats_container').empty().append( rshtml.contents() );
        
 };
 
@@ -125,7 +156,7 @@ function fill_parent_template( rdghash, type ) {
 
 // Save the original unextended SVG for when we need it.
 $(document).ready(function () {
-       original_svg = $('#stemma_graph > svg').clone();
+       loadSVG( original_svg );
        
        $('#aboutlink').popupWindow({ 
                height:500, 
@@ -136,7 +167,7 @@ $(document).ready(function () {
        }); 
        $('#options').dialog({
                autoOpen: false,
-               height: 200,
+               // height: 'auto',
                width: 300,
                modal: true,
                buttons: {