Now with visible bridges.

sourcing/static/js/xanaflight.js

@@ -3,7 +3,6 @@
 var doc1 = document.getElementById('doc1');
 var edlform = document.getElementById('edlform');
 var max_zindex = 0;
-var bridge_count = 0;
 var link_bridge_count = 0;
 var payment_params = {};
 var payment_content;
@@ -37,12 +36,8 @@ function dragMoveListener (event) {
 }
 
 function update() {
-    for(var i = 0; i < bridge_count; i++) {
-        update_bridge('bridge' + i, 'span' + i, 'transclusion' + i);
-    }
-
     for(var i = 0; i < link_bridge_count; i++) {
-        update_bridge('linkbridge' + i, 'xanalink' + i, 'link' + i);
+        update_bridge('linkbridge' + i, 'link1_' + i, 'link2_' + i);
     }
 }
 
@@ -52,6 +47,7 @@ function update_bridge(bridge, name_h1, name_h2) {
     var h1 = document.getElementById(name_h1);
     var h2 = document.getElementById(name_h2);
 
+
     if (!h1) {
         return;
     }
@@ -68,6 +64,8 @@ function update_bridge(bridge, name_h1, name_h2) {
 
     var bridge_element = document.getElementById(bridge);
 
+    console.log(h1, h2, bridge_element);
+
     var h_l, h_r, rect_l, rect_r;
     if (h1_x_center < h2_x_center) {
         h_l = h1;
@@ -220,7 +218,6 @@ function reset() {
         svg.removeChild(svg.firstChild);
     }
 
-    bridge_count = 0;
     link_bridge_count = 0;
 }
 
@@ -237,9 +234,9 @@ function get_end_number(str) {
 function hover_link_bridge(element, hover) {
 
     var num = get_end_number(element.id);
-    // var bridge = document.getElementById('linkbridge' + num);
+    var bridge = document.getElementById('linkbridge' + num);
 
-    // bridge.setAttribute("class", hover ? 'hoverlinkbridge' : 'linkbridge');
+    bridge.setAttribute("class", hover ? 'hoverlinkbridge' : 'linkbridge');
 
     var cls = 'hoverlink';
 
@@ -254,16 +251,17 @@ function hover_link_bridge(element, hover) {
     }
 }
 
-function fulfil(doc, index, doc_count, link_count) {
+function create_bridges(link_count) {
-    bridge_count = doc.span_count;
+
     link_bridge_count = link_count;
+
     var svg_element = document.getElementById('svg');
 
     for(var i = 0; i < link_count; i++) {
         var p = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
         p.setAttribute('id', 'linkbridge' + i);
         p.setAttribute('class', 'linkbridge');
-        p.setAttribute('visibility', 'hidden');
+        p.setAttribute('visibility', 'visible');
 
         p.addEventListener('mouseover', function(e) {
             hover_link_bridge(this, true);
@@ -275,6 +273,10 @@ function fulfil(doc, index, doc_count, link_count) {
 
         svg_element.appendChild(p);
     }
+}
+
+function fulfil(doc, index, doc_count) {
+    var svg_element = document.getElementById('svg');
 
     new_document({'heading': 'xanadoc',
                   'text': doc.doc,
@@ -282,8 +284,6 @@ function fulfil(doc, index, doc_count, link_count) {
                   'index': index,
                   'doc_count': doc_count});
 
-    update();
-
     $('.link').bind('mouseover', function(e) {
         hover_link_bridge(this, true);
     });

sourcing/templates/view/xanaflight.html

@@ -49,14 +49,17 @@
 
 var get_span_path = "{{ url_for('.get_span') }}";
 var docs = {{ docs | tojson }};
+var link_count = {{ link_count | tojson }};
 
 $(function() {
     size_svg();
     $(window).resize(size_svg);
     reset();  // clear all documents and bridges
   docs.forEach((doc, index) => {
-    fulfil(doc, index, docs.length, {{ link_count | tojson }});
+    fulfil(doc, index, docs.length);
+    create_bridges(link_count);
   });
+  update();
 });
 </script>