Some styling
Joris van Zundert [Thu, 30 Aug 2012 22:20:16 +0000 (00:20 +0200)]
stemmaweb/root/css/style.css
stemmaweb/root/js/svginteraction.js [deleted file]
stemmaweb/root/src/index.tt

index 1f7b74b..9606b21 100644 (file)
@@ -9,11 +9,7 @@ body {
 h1 {
     border-bottom: 1px solid #488dd2;
     color: #488dd2;
-    font-size: 24px;
-    font-weight: 100;
-    margin: 0 0 17px;
-    padding: 0;
-    width: 650px;
+    font-size: 18pt;
 }
 h2 {
     margin-top: 10px;
@@ -60,8 +56,6 @@ div.button:hover span {
 
 #topbanner {
        width: 100%;
-       height: 100px;
-       margin-top: 20px;
 }
 #bannerinfo {
        float: right;
@@ -82,6 +76,8 @@ div.button:hover span {
        width: 300px;
        height: 450px;
        border: 1px #c6dcf1 solid;
+       padding-left: 10px;
+       padding-right: 10px;
 }
 #directory {
        height: 360px;
@@ -102,7 +98,7 @@ div.button:hover span {
 .mainnav {
        position: absolute;
        top: 10px;
-       right: 80px;
+       right: 22px;
        font-size: 14px;
        font-weight: 100;
        color: #488dd2;
@@ -111,10 +107,13 @@ div.button:hover span {
        color: #488dd2;
 }
 #textinfo_container {
+    border: 1px solid #C6DCF1;
        float: left;
        height: 500px;
-       width: 700px;
-       margin-left: 40px;
+       width: 710px;
+       margin-left: 10px;
+       padding-left: 10px;
+       padding-right: 10px;
 }
 #stemma_container h2 h3 {
        color: #666;
@@ -133,6 +132,12 @@ div.button:hover span {
        margin-top: 13px;
 }
 #relater_button {
-       float: left;
-    margin-left:  100px;
+}
+#textinfo_container_buttons {
+    float: right;
+}
+#run_stexaminer, #run_relater, #stemma_pager {
+    height: 30px;
+    left: -10px;
+    position: relative;
 }
diff --git a/stemmaweb/root/js/svginteraction.js b/stemmaweb/root/js/svginteraction.js
deleted file mode 100644 (file)
index 8fa72e2..0000000
+++ /dev/null
@@ -1,310 +0,0 @@
-function getRelativePath( action ) {
-    path_elements = window.location.pathname.split('/'); 
-    if( path_elements[1].length > 0 ) {
-        return window.location.pathname.split('/')[1] + '/' + action;
-    } else {
-        return action;
-    }
-}
-
-function svgLoaded() {
-  $('ellipse').attr( {stroke:'black', fill:'#fff'} );
-  ncpath = getRelativePath( 'node_click' );
-  var jqjson = $.getJSON( ncpath, 'node_id=null', function(data) {
-    $.each( data, function(item, node_id_and_state) {
-      if( node_id_and_state[1] == 1 ) {
-        node_ellipse = $('.node').children('title').filter( function(index) {
-          return $(this).text() == node_id_and_state[0];
-        }).siblings('ellipse');
-        node_ellipse.attr( {stroke:'green', fill:'#b3f36d'} );
-        $('#constructedtext').append( node_ellipse.siblings('text').text() + ' ' );
-      } else {
-        if( node_id_and_state[1] == null ) {
-          $('#constructedtext').append( ' … ' );
-        }
-      }
-    });
-    add_node_objs();
-  });
-}
-
-function add_node_objs() {
-  $('ellipse[fill="#fff"]').each( function() {
-      $(this).data( 'node_obj', new node_obj( $(this) ) );
-    }
-  );
-}
-
-function get_node_obj( node_id ) {
-  return $('.node').children('title').filter( function(index) {
-    return $(this).text() == node_id;
-  }).siblings('ellipse').data( 'node_obj' );
-}
-
-function get_edge( edge_id ) {
-  return $('.edge').filter( function(index) {
-    return $(this).children( 'title' ).text() == $('<div/>').html(edge_id).text() ;
-  });
-}
-
-function node_obj(ellipse) {
-  this.ellipse = ellipse;
-  var self = this;
-  
-  this.x = 0;
-  this.y = 0;
-  this.dx = 0;
-  this.dy = 0;
-  this.node_elements = node_elements_for(self.ellipse);
-  this.sub_nodes = [];
-  this.super_node = null;
-
-  this.dblclick_listener = function(evt) {
-    node_id = self.ellipse.siblings('title').text();
-    ncpath = getRelativePath( 'node_click' );
-    var jqjson = $.getJSON( ncpath, 'node_id=' + node_id, function(data) {
-      $('#constructedtext').empty();
-      $.each( data, function(item, node_id_and_state) {
-        node = get_node_obj( node_id_and_state[0] );
-        // 1 -> turn the associated SVG node on, put in the associate word in the text box.
-        // 0 -> turn SVG node off.
-        // null -> turn node off, put in ellipsis in text box at the corresponding place.
-        if( node_id_and_state[1] == 1 ) {
-//TODO: create test suite en refactor this in to more OO! (node and node_ellipse are 'conflated')
-          node_ellipse = $('.node').children('title').filter( function(index) {
-            return $(this).text() == node_id_and_state[0];
-          }).siblings('ellipse');
-          $('#constructedtext').append( node_ellipse.siblings('text').text() + '&#32;' );
-          if( node ) { node.set_draggable( false ) }
-        } else {
-          if( node ) { node.set_draggable( true ) };
-          if( node_id_and_state[1] == null ) {
-            $('#constructedtext').append( ' &hellip; ' );
-          }
-        }
-      });
-    });
-  }
-
-  this.set_draggable = function( draggable ) {
-    if( draggable ) {
-      self.ellipse.attr( {stroke:'black', fill:'#fff'} );
-      self.ellipse.mousedown( this.mousedown_listener );
-      self.ellipse.hover( this.enter_node, this.leave_node );  
-    } else {
-      self.ellipse.unbind('mouseenter').unbind('mouseleave').unbind('mousedown');
-      self.ellipse.attr( {stroke:'green', fill:'#b3f36d'} );
-    }
-  }
-
-  this.mousedown_listener = function(evt) {
-    evt.stopPropagation();
-    self.x = evt.clientX;
-    self.y = evt.clientY;
-    $('body').mousemove( self.mousemove_listener );
-    $('body').mouseup( self.mouseup_listener );
-    self.ellipse.unbind('mouseenter').unbind('mouseleave')
-    self.ellipse.attr( 'fill', '#ff66ff' );
-  }
-
-  this.mousemove_listener = function(evt) {
-    self.dx = evt.clientX - self.x;
-    self.dy = evt.clientY - self.y;
-    self.move_elements();
-  }
-
-  this.mouseup_listener = function(evt) {    
-    if( $('ellipse[fill="#ffccff"]').size() > 0 ) {
-      $('#source_node_id').val( self.ellipse.siblings('title').text() );
-      $('#target_node_id').val( $('ellipse[fill="#ffccff"]').siblings("title").text() );
-      $( '#dialog-form' ).dialog( 'open' );
-    };
-    $('body').unbind('mousemove');
-    $('body').unbind('mouseup');
-    self.ellipse.attr( 'fill', '#fff' );
-    self.ellipse.hover( self.enter_node, self.leave_node );
-    if( self.super_node ) {
-      self.eclipse();
-    } else {
-      self.reset_elements();
-    }
-  }
-
-  this.cpos = function() {
-    return { x: self.ellipse.attr('cx'), y: self.ellipse.attr('cy') };
-  }
-
-  this.get_g = function() {
-    return self.ellipse.parent('g');
-  }
-
-  this.stack_behind = function( collapse_info ) {
-    self.super_node = get_node_obj( collapse_info.target );
-    self.super_node.sub_nodes.push( self );
-    self.eclipse();
-    if( collapse_info.edges ) {
-      $.each( collapse_info.edges, function( source_edge_id, target_info ) {
-        get_edge(source_edge_id).attr( 'display', 'none' );
-        target_edge = get_edge(target_info.target);
-        // Unfortunately, the simple solution doesn't work...
-        // target_edge.children( 'text' ).replaceWith( '<text x="2270" y="-59.400001525878906"><tspan text-anchor="middle">A, B</tspan><tspan fill="red">, C</tspan></text>' );
-        // ..so we take the long and winding road...
-        var svg = $('#svgbasics').children('svg').svg().svg('get');
-        textx = target_edge.children( 'text' )[0].x.baseVal.getItem(0).value
-        texty = target_edge.children( 'text' )[0].y.baseVal.getItem(0).value
-        current_label = target_edge.children( 'text' ).text(); 
-        target_edge.children( 'text' ).remove();
-        texts = svg.createText();
-        texts.span(current_label, {'text-anchor': 'middle'}).span(target_info.label, {fill: 'red'});
-        svg.text(target_edge, textx, texty, texts);
-      }); 
-    }
-  }
-
-  this.eclipse = function() {
-    self.dx = new Number( self.super_node.cpos().x ) - new Number( self.cpos().x ) + ( 10 * (self.super_node.sub_nodes.indexOf(self) + 1) );
-    self.dy = new Number( self.super_node.cpos().y ) - new Number( self.cpos().y ) + ( 5 * (self.super_node.sub_nodes.indexOf(self) + 1) );
-    self.move_elements();
-    eclipse_index = self.super_node.sub_nodes.indexOf(self) - 1;
-    if( eclipse_index > -1 ) {
-      self.get_g().insertBefore( self.super_node.sub_nodes[eclipse_index].get_g() );
-    } else {
-      self.get_g().insertBefore( self.super_node.get_g() );
-    }
-  }
-
-  this.enter_node = function(evt) {
-    self.ellipse.attr( 'fill', '#ffccff' );
-  }
-
-  this.leave_node = function(evt) {
-    self.ellipse.attr( 'fill', '#fff' );
-  }
-
-  this.move_elements = function() {
-    $.each( self.node_elements, function(index, value) {
-      value.move(self.dx,self.dy);
-    });
-  }
-
-  this.reset_elements = function() {
-    $.each( self.node_elements, function(index, value) {
-      value.reset();
-    });
-  }
-
-  this.ellipse.dblclick( this.dblclick_listener );
-  self.set_draggable( true );
-}
-
-function svgshape( shape_element ) {
-  this.shape = shape_element;
-  this.move = function(dx,dy) {
-    this.shape.attr( "transform", "translate(" + dx + " " + dy + ")" );
-  }
-  this.reset = function() {
-    this.shape.attr( "transform", "translate( 0, 0 )" );
-  }
-}
-
-function svgpath( path_element ) {
-  this.path = path_element;
-  this.x = this.path.x;
-  this.y = this.path.y;
-  this.move = function(dx,dy) {
-    this.path.x = this.x + dx;
-    this.path.y = this.y + dy;
-  }
-  this.reset = function() {
-    this.path.x = this.x;
-    this.path.y = this.y;
-  }
-}
-
-function node_elements_for( ellipse ) {
-  node_elements = get_edge_elements_for( ellipse );
-  node_elements.push( new svgshape( ellipse.siblings('text') ) );
-  node_elements.push( new svgshape( ellipse ) );
-  return node_elements;
-}
-
-function get_edge_elements_for( ellipse ) {
-  edge_elements = new Array();
-  node_id = ellipse.siblings('title').text();
-  edge_in_pattern = new RegExp( node_id + '$' );
-  edge_out_pattern = new RegExp( '^' + node_id );
-  $.each( $('.edge').children('title'), function(index) {
-    title = $(this).text();
-    if( edge_in_pattern.test(title) ) {
-      edge_elements.push( new svgshape( $(this).siblings('polygon') ) );
-      path_segments = $(this).siblings('path')[0].pathSegList;
-      edge_elements.push( new svgpath( path_segments.getItem(path_segments.numberOfItems - 1) ) );
-    }
-    if( edge_out_pattern.test(title) ) {
-      path_segments = $(this).siblings('path')[0].pathSegList;
-      edge_elements.push( new svgpath( path_segments.getItem(0) ) );
-    }
-  });
-  return edge_elements;
-} 
-
-$(document).ready(function () {
-  $('#graph').ajaxError(function() {
-    console.log( 'Oops.. something went wrong with trying to save this change. Please try again...' );
-  });
-  $('#graph').mousedown(function (event) {
-    $(this)
-      .data('down', true)
-      .data('x', event.clientX)
-      .data('scrollLeft', this.scrollLeft);
-      return false;
-  }).mouseup(function (event) {
-    $(this).data('down', false);
-  }).mousemove(function (event) {
-    if ($(this).data('down') == true ) {
-      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
-    }
-  }).mousewheel(function (event, delta) {
-      this.scrollLeft -= (delta * 30);
-  }).css({
-    'overflow' : 'hidden',
-    'cursor' : '-moz-grab'
-  });
-  $( "#dialog-form" ).dialog({
-    autoOpen: false,
-    height: 150,
-    width: 250,
-    modal: true,
-    buttons: {
-      "Ok": function() {
-        form_values = $('#collapse_node_form').serialize()
-       ncpath = getRelativePath( 'node_collapse' );
-        var jqjson = $.getJSON( ncpath, form_values, function(data) {
-          $.each( data, function(item, collapse_info) { 
-            get_node_obj( item ).stack_behind( collapse_info );
-          });
-        });
-        $( this ).dialog( "close" );
-      },
-      Cancel: function() {
-        $( this ).dialog( "close" );
-      }
-    },
-    close: function() {
-      $('#reason').val( "" ).removeClass( "ui-state-error" );
-    }
-  });
-});
-
-
-$(window).mouseout(function (event) {
-  if ($('#graph').data('down')) {
-    try {
-      if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
-        $('#graph').data('down', false);
-      }                
-    } catch (e) {}
-  }
-});
-
-
index 49f0266..0235472 100644 (file)
@@ -50,17 +50,24 @@ $(document).ready(function() {
       </ul>
       
       <!-- TODO buttons on either side of the graph div to flip through the stemmata -->
+      <div id="textinfo_container_buttons">
+          <form id="stemma_pager" action="" method="GET" name="stemma_pager">
+            <div class="button" id="stemma_pager_button" onClick="$('#stemma_pager').submit()">
+                 <span>Left &amp; right go here</span>
+            </div>
+          </form>
+          <form id="run_stexaminer" action="" method="GET" name="run_stexaminer">
+            <div class="button" id="stexaminer_button" onClick="$('#run_stexaminer').submit()">
+                 <span>Examine variants against this stemma</span>
+            </div>
+          </form>
+          <form id="run_relater" action="" method="GET" name="run_relater">
+            <div class="button" id="relater_button" onClick="$('#run_relater').submit()">
+              <span>Run relationship mapper</span>
+            </div>
+          </form>
+      </div>
       <div id="stemma_graph"></div>
-      <form id="run_stexaminer" action="" method="GET" name="run_stexaminer">
-        <div class="button" id="stexaminer_button" onClick="$('#run_stexaminer').submit()">
-         <span>Examine variants against this stemma</span>
-        </div>
-      </form>
-      <form id="run_relater" action="" method="GET" name="run_relater">
-        <div class="button" id="relater_button" onClick="$('#run_relater').submit()">
-          <span>Run relationship mapper</span>
-        </div>
-      </form>
     </div>
 
 [% PROCESS footer.tt %]
\ No newline at end of file