From: Tara L Andrews <tla@mit.edu>
Date: Sun, 16 Sep 2012 22:08:02 +0000 (+0200)
Subject: make stexaminer use JQuery SVG library for load
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=f6bfb7638de00c063e860cec50f348fab3aee181;hp=2923ebb19d7a80ab35d8a9c52640bda8d12155e2;p=scpubgit%2Fstemmaweb.git

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
--- 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
--- 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
--- 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>