From: Tara L Andrews 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;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 @@