fix wider-than-tall SVG on FF, futile fix attempt for upload trouble

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

diff --git a/root/js/componentload.js b/root/js/componentload.js
index 0cb502e..f33653b 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,39 @@ 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();
+                       var browseroffset = 1;
+                       // Firefox needs a different offset, stupidly enough
+                       if( navigator.userAgent.indexOf('Firefox') > -1 ) {
+                               browseroffset = 3; // works for tall images
+                               // ...but if the SVG is wider than it is tall, Firefox treats
+                               // the top as being the top of the graph, loaded into the middle
+                               // of the canvas, but then the margin at the top of the canvas
+                               // extends upward. So we have to find the actual top of the canvas
+                               // and correct for *that* instead.
+                               var vbdim = svgElement.svg().svg('get').root().viewBox.baseVal;
+                               if( vbdim.height < vbdim.width ) {
+                                       var vbscale = svgElement.width() / vbdim.width;
+                                       var vbrealheight = vbdim.height * vbscale;
+                                       browseroffset = 3 + ( svgElement.height() - vbrealheight ) / 2;
+                               }
+                       }
+                       var topoffset = theSVG.position().top - svgElement.position().top - browseroffset;
+                       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 ) {
@@ -154,10 +186,10 @@ function display_error( jqXHR, el ) {
 
 function start_upload_dialog() {
     if( typeof uploader != 'undefined' ){ uploader.destroy() };
-    $('#upload-collation-dialog').dialog('option', 'attach_uploader')();
     $('#upload_status').empty();
     $('#upload_button').button('disable');
     $('#upload-collation-dialog').dialog('open');
+    $('#upload-collation-dialog').dialog('option', 'attach_uploader')();
 }
 
 // Utility function to neatly construct an application URL
@@ -165,6 +197,7 @@ function _get_url( els ) {
        return basepath + els.join('/');
 }
 
+
 $(document).ready( function() {
     // call out to load the directory div
     $('#textinfo_container').hide();
@@ -295,7 +328,7 @@ $(document).ready( function() {
                  pick: {
                    text: "Pick File",
                    id: "pick_uploadfile_button",
-                   click: function() {}       
+                   click: function() {}
                  },
                  upload: {
                    text: 'Upload',