From: Tara L Andrews <tla@mit.edu>
Date: Sun, 16 Sep 2012 21:37:41 +0000 (+0200)
Subject: use jquery SVG lib to make SVG load in its box properly
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=bd3ccd1507fc22e47a03e53889a57d09a14fefb4;p=scpubgit%2Fstemmaweb.git

use jquery SVG lib to make SVG load in its box properly
---

diff --git a/root/css/style.css b/root/css/style.css
index c54f7ea..d221869 100644
--- a/root/css/style.css
+++ b/root/css/style.css
@@ -166,6 +166,9 @@ div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
 #stemma_graph img {
 	margin-top: expression(( 450 - this.height ) / 2);
 }
+#stemma_graph svg {
+	z-index: -100;
+}
 #textinfo_container_buttons {
     float: right;
     left: -18px;
diff --git a/root/js/componentload.js b/root/js/componentload.js
index 0cb502e..6bc2606 100644
--- a/root/js/componentload.js
+++ b/root/js/componentload.js
@@ -124,8 +124,7 @@ function load_stemma( idx ) {
 	selectedStemmaID = idx;
 	show_stemmapager();
 	if( idx > -1 ) {
-		$('#stemma_graph').empty();
-		$('#stemma_graph').append( stemmata[idx] );
+		loadSVG( stemmata[idx] );
 		// Stexaminer submit action
 		var stexpath = _get_url([ "stexaminer", selectedTextID, idx ]);
 		$('#run_stexaminer').attr( 'action', stexpath );
@@ -133,6 +132,30 @@ function load_stemma( idx ) {
 	}
 }
 
+// Load the SVG we are given
+function loadSVG(svgData) {
+	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 });
+		}
+	});
+}
+
 // General-purpose error-handling function.
 // TODO make sure this gets used throughout, where appropriate.
 function display_error( jqXHR, el ) {
@@ -165,6 +188,7 @@ function _get_url( els ) {
 	return basepath + els.join('/');
 }
 
+
 $(document).ready( function() {
     // call out to load the directory div
     $('#textinfo_container').hide();