make stexaminer use JQuery SVG library for load

diff --git a/lib/stemmaweb/Controller/Stexaminer.pm b/lib/stemmaweb/Controller/Stexaminer.pm
index 0b5b395..535bd29 100644 (file)
--- a/lib/stemmaweb/Controller/Stexaminer.pm
+++ b/lib/stemmaweb/Controller/Stexaminer.pm
@@ -46,7 +46,9 @@ sub index :Path :Args(2) {
        
        if( $tradition->stemma_count ) {
                my $stemma = $tradition->stemma( $stemid );
-               $c->stash->{svg} = $stemma->as_svg( { size => [ 600, 350 ] } );
+               my $svgstr = $stemma->as_svg();
+               $svgstr =~ s/\n/ /g;
+               $c->stash->{svg} = $svgstr;
                $c->stash->{graphdot} = $stemma->editable({ linesep => ' ' });
                $c->stash->{text_id} = $textid;
                $c->stash->{text_title} = $tradition->name;
@@ -139,7 +141,7 @@ sub graphsvg :Local {
        open my $stemma_fh, '<', \$dot;
        binmode( $stemma_fh, ':encoding(UTF-8)' );
        my $tempstemma = Text::Tradition::Stemma->new( 'dot' => $stemma_fh );
-       my $svgopts = { size => [ 600, 350 ] };
+       my $svgopts = {};
        if( @layerwits ) {
                $svgopts->{'layerwits'} = \@layerwits;
        }

diff --git a/root/js/stexaminer.js b/root/js/stexaminer.js
index 0509c66..be48368 100644 (file)
--- a/root/js/stexaminer.js
+++ b/root/js/stexaminer.js
@@ -1,6 +1,5 @@
 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()
@@ -10,18 +9,49 @@ function handle_row_click( row ) {
     $('#stemma_graph').append( imghtml );
        if( rs.layerwits ) {
                var stemma_form = { 'dot': graphdot, 'layerwits': rs.layerwits };
-               $('#stemma_graph').load( baseurl + '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();
+                       }
+               }
+       });
+}
+
 function color_row( row ) {
     row_triggered = true;
     $('ellipse').attr( {stroke:'white', fill:'#fff'} );
@@ -125,7 +155,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, 

diff --git a/root/src/stexaminer.tt b/root/src/stexaminer.tt
index 9867a8a..ce7d92b 100644 (file)
--- a/root/src/stexaminer.tt
+++ b/root/src/stexaminer.tt
@@ -6,6 +6,7 @@
 <script type="text/javascript">
 var baseurl = "[% c.uri_for( '/stexaminer/' ) %]";
 var textid = '[% text_id %]';
+var original_svg = '[% svg %]';
 [% IF error -%]
 var readingstats = [];
 [% ELSE -%]
@@ -36,7 +37,6 @@ var graphdot = '[% graphdot %]';
     </div>
     <div>
                <div id="stemma_graph">
-                 [% svg %]
                </div>
                <div id="row_statistics">
                  <h3>Aggregate text statistics</h3>