make relationship app use SVG IDs; make (unused) form for reading info

diff --git a/stemmaweb/root/js/relationship.js b/stemmaweb/root/js/relationship.js
index adc23bf..32869ee 100644 (file)
--- a/stemmaweb/root/js/relationship.js
+++ b/stemmaweb/root/js/relationship.js
@@ -31,6 +31,11 @@ function getRelationshipURL() {
        return path_parts[0] + '/' + path_parts[1] + '/relationships';
 }
 
+// Make an XML ID into a valid selector
+function jq(myid) { 
+       return '#' + myid.replace(/(:|\.)/g,'\\$1');
+}
+
 function svgEnlargementLoaded() {
        //Give some visual evidence that we are working
        $('#loading_overlay').show();
@@ -105,7 +110,7 @@ function svgEnlargementLoaded() {
     var transform = 'rotate(0) scale(' + scale + ') translate(4 ' + translate + ')';
     svg_g.setAttribute('transform', transform);
     //used to calculate min and max zoom level:
-    start_element_height = $("#svgenlargement .node title:contains('START#')").siblings('ellipse')[0].getBBox().height;
+    start_element_height = $('#__START__ ellipse')[0].getBBox().height;
     add_relations( function() { $('#loading_overlay').hide(); });
 }
 
@@ -139,9 +144,7 @@ function add_relations( callback_fn ) {
 }
 
 function get_ellipse( node_id ) {
-  return $('#svgenlargement .node').children('title').filter( function(index) {
-    return $(this).text() == node_id;
-  }).siblings('ellipse');
+       return $( jq( node_id ) + ' ellipse');
 }
 
 function get_node_obj( node_id ) {
@@ -152,12 +155,6 @@ function get_node_obj( node_id ) {
     return node_ellipse.data( 'node_obj' );
 }
 
-function get_edge( edge_id ) {
-  return $('#svgenlargement .edge').filter( function(index) {
-    return $(this).children( 'title' ).text() == $('<div/>').html(edge_id).text() ;
-  });
-}
-
 function node_obj(ellipse) {
   this.ellipse = ellipse;
   var self = this;
@@ -169,7 +166,7 @@ function node_obj(ellipse) {
   this.node_elements = node_elements_for(self.ellipse);
 
   this.get_id = function() {
-    return self.ellipse.siblings('title').text()
+    return $(self.ellipse).parent().attr('id')
   }
   
   this.set_draggable = function( draggable ) {
@@ -208,9 +205,9 @@ function node_obj(ellipse) {
 
   this.mouseup_listener = function(evt) {    
     if( $('ellipse[fill="#ffccff"]').size() > 0 ) {
-        var source_node_id = self.ellipse.siblings('title').text();
+        var source_node_id = $(self.ellipse).parent().attr('id');
         var source_node_text = self.ellipse.siblings('text').text();
-        var target_node_id = $('ellipse[fill="#ffccff"]').siblings("title").text();
+        var target_node_id = $('ellipse[fill="#ffccff"]').parent().attr('id');
         var target_node_text = $('ellipse[fill="#ffccff"]').siblings("text").text();
         $('#source_node_id').val( source_node_id );
         $('#source_node_text').val( source_node_text );
@@ -330,7 +327,7 @@ function node_elements_for( ellipse ) {
 
 function get_edge_elements_for( ellipse ) {
   edge_elements = new Array();
-  node_id = ellipse.siblings('title').text();
+  node_id = ellipse.parent().attr('id');
   edge_in_pattern = new RegExp( node_id + '$' );
   edge_out_pattern = new RegExp( '^' + node_id );
   $.each( $('#svgenlargement .edge,#svgenlargement .relation').children('title'), function(index) {
@@ -359,12 +356,8 @@ function relation_factory() {
     this.relation_colors = [ "#5CCCCC", "#67E667", "#F9FE72", "#6B90D4", "#FF7673", "#E467B3", "#AA67D5", "#8370D8", "#FFC173" ];
 
     this.create_temporary = function( source_node_id, target_node_id ) {
-        var relation = $('#svgenlargement .relation').filter( function(index) {
-            var relation_id = $(this).children('title').text();
-            if( ( relation_id == ( source_node_id + '->' + target_node_id ) ) || ( relation_id == ( target_node_id + '->' + source_node_id ) ) ) {
-                return true;
-            } 
-        } );
+       var relation_id = get_relation_id( source_node_id, target_node_id );
+        var relation = $( jq( relation_id ) );
         if( relation.size() == 0 ) { 
             draw_relation( source_node_id, target_node_id, self.temp_color );
         } else {
@@ -392,16 +385,16 @@ function relation_factory() {
         return relation;
     }
     this.toggle_active = function( relation_id ) {
-        var relation = $("#svgenlargement .relation:has(title:contains('" + relation_id + "'))");
+        var relation = $( jq( relation_id ) );
         var relation_path = relation.children('path');
         if( !relation.data( 'active' ) ) {
             relation_path.css( {'cursor':'pointer'} );
             relation_path.mouseenter( function(event) { 
                 outerTimer = setTimeout( function() { 
                     timer = setTimeout( function() { 
-                        var title = relation.children('title').text();
-                        var source_node_id = title.substring( 0, title.indexOf( "->" ) );
-                        var target_node_id = title.substring( (title.indexOf( "->" ) + 2) );
+                        var related_nodes = get_related_nodes( relation_id );
+                        var source_node_id = related_nodes[0];
+                        var target_node_id = related_nodes[1];
                         $('#delete_source_node_id').val( source_node_id );
                         $('#delete_target_node_id').val( target_node_id );
                         self.showinfo(relation); 
@@ -442,14 +435,28 @@ function relation_factory() {
         dialog_aria.offset({ left: nx, top: ny });
     }
     this.remove = function( relation_id ) {
-        var relation = $("#svgenlargement .relation:has(title:contains('" + relation_id + "'))");
+        var relation = $( jq( relation_id ) );
         relation.remove();
     }
 }
 
+// Utility function to create/return the ID of a relation link between
+// a source and target.
+function get_relation_id( source_id, target_id ) {
+       var idlist = [ source_id, target_id ];
+       idlist.sort();
+       return 'relation-' + idlist[0] + '-...-' + idlist[1];
+}
+
+function get_related_nodes( relation_id ) {
+       var srctotarg = relation_id.substr( 9 );
+       return srctotarg.split('-...-');
+}
+
 function draw_relation( source_id, target_id, relation_color ) {
     var source_ellipse = get_ellipse( source_id );
     var target_ellipse = get_ellipse( target_id );
+    var relation_id = get_relation_id( source_id, target_id );
     var svg = $('#svgenlargement').children('svg').svg().svg('get');
     var path = svg.createPath(); 
     var sx = parseInt( source_ellipse.attr('cx') );
@@ -457,7 +464,8 @@ function draw_relation( source_id, target_id, relation_color ) {
     var sy = parseInt( source_ellipse.attr('cy') );
     var ex = parseInt( target_ellipse.attr('cx') );
     var ey = parseInt( target_ellipse.attr('cy') );
-    var relation = svg.group( $("#svgenlargement svg g"), {'class':'relation'} );
+    var relation = svg.group( $("#svgenlargement svg g"), 
+       { 'class':'relation', 'id':relation_id } );
     svg.title( relation, source_id + '->' + target_id );
     svg.path( relation, path.move( sx, sy ).curveC( sx + (2*rx), sy, ex + (2*rx), ey, ex, ey ), {fill: 'none', stroke: relation_color, strokeWidth: 4});
     var relation_element = $('#svgenlargement .relation').filter( ':last' );
@@ -546,11 +554,11 @@ $(document).ready(function () {
                var source_found = get_ellipse( source_target[0] );
                var target_found = get_ellipse( source_target[1] );
                if( source_found.size() && target_found.size() ) {
-                var relation = relation_manager.create( source_target[0], source_target[1], $('#rel_type')[0].selectedIndex-1 );
+                    var relation = relation_manager.create( source_target[0], source_target[1], $('#rel_type')[0].selectedIndex-1 );
                                        relation.data( 'type', $('#rel_type :selected').text()  );
                                        relation.data( 'scope', $('#scope :selected').text()  );
                                        relation.data( 'note', $('#note').val()  );
-                                       relation_manager.toggle_active( relation.children('title').text() );
+                                       relation_manager.toggle_active( relation.attr('id') );
                                }
             });
             $( "#dialog-form" ).dialog( "close" );
@@ -610,7 +618,7 @@ $(document).ready(function () {
           ncpath = getRelationshipURL()
           var jqjson = $.ajax({ url: ncpath, data: form_values, success: function(data) {
               $.each( data, function(item, source_target) { 
-                  relation_manager.remove( source_target[0] + '->' + source_target[1] );
+                  relation_manager.remove( get_relation_id( source_target[0], source_target[1] ) );
               });
               $( "#delete-form" ).dialog( "close" );
           }, dataType: 'json', type: 'DELETE' });
@@ -635,7 +643,34 @@ $(document).ready(function () {
   });
 
   // function for reading form dialog should go here; for now hide the element
-  $('#reading_form').hide();
+  $('#reading-form').dialog({
+       autoOpen: false,
+       height: 400,
+       width: 200,
+       modal: true,
+       buttons: {
+               Cancel: function() {
+                       $( this ).dialog( "close" );
+               },
+               Update: function() {
+                       form_values = $('#reading_data_form').serialize();
+                       ncpath = getReadingURL();
+                       var reading_element = get_node_obj( $('#reading_data_id').val() );
+                       $(':button :contains("Update")').attr("disabled", true);
+                       var jqjson = $.post( ncpath, form_values, function(data) {
+                               $.each( data, function(key, value) { 
+                                       reading_element.data( key, value );
+                               });
+                               $( "#reading-form" ).dialog( "close" );
+                       });
+               }
+       },
+       create: function() {},
+       open: function() {},
+       close: function() {
+               $("#dialog_overlay").hide();
+       }
+  });
 
   $('#update_workspace_button').click( function() {
      var svg_enlargement = $('#svgenlargement').svg().svg('get').root();
@@ -693,7 +728,8 @@ $(document).ready(function () {
       $('#svgenlargement .relation').find( "title:contains('" + node_id +  "')" ).each( function(index) {
           matchid = new RegExp( "^" + node_id );
           if( $(this).text().match( matchid ) != null ) {
-              relation_manager.toggle_active( $(this).text() );
+                 var relation_id = $(this).parent().attr('id');
+              relation_manager.toggle_active( relation_id );
           };
       });
   }

diff --git a/stemmaweb/root/src/relate.tt b/stemmaweb/root/src/relate.tt
index 891e5a2..a8e879a 100644 (file)
--- a/stemmaweb/root/src/relate.tt
+++ b/stemmaweb/root/src/relate.tt
@@ -74,7 +74,23 @@ $(document).ready(function () {
                </form>
                <div id="delete-form-text"></div>
        </div>
-       
+       
+       <div id="reading-form" title="Reading info...">
+               <form id="reading_data_form" action="#">
+                       <input type="hidden" name="reading_id" id="reading_data_id"/>
+                       <label for="reading_nonsense">This is a nonsense word</label>
+                       <input type="checkbox" name="reading_nonsense" id="reading_nonsense_id"/>
+                       <label for="reading_badgrammar">This word's grammar cannot be right</label>
+                       <input type="checkbox" name="reading_badgrammar" id="reading_badgrammar_id"/>
+                               <!-- Morphological options will go here -->
+                       <br/><br/>
+                       <label for="morphology">Lemma / part of speech:</label>
+                       <select name="morphology" id="morphology" class=".ui-widget select">
+                               <option></option>
+                       </select>
+               </form>
+    </div>
+       
     <p/><p/>   
     <div id="keymap">
         <ul id="keymaplist">