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

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

diff --git a/root/js/componentload.js b/root/js/componentload.js
index 0cb502e..6bc2606 100644 (file)
--- 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();