margin: 0;
font: 1em "Open Sans", Arial, Helvetica, sans-serif;
font-size: 85%;
- background-color: #e6e6e6;
+ background: #EDF1FA;
color: #444;
}
-#main_page {
- background: transparent url('../images/logo_001.png') no-repeat scroll -200px -100px;
- background-size: 600px;
- background-color: #ffffff;
- width: 1124px;
- padding-bottom: 30px;
- margin: 0 auto;
- margin-top: 48px;
-
-}
.clearfix:after {
content: "\00A0";
display: block;
opacity: 0.5;
background: url("../images/button_left_28.png") no-repeat scroll right bottom transparent;
}
+#main_page {
+ background: transparent url('../images/logo_001.png') no-repeat scroll -200px -100px;
+ background-size: 600px;
+ background-color: #ffffff;
+ width: 1124px;
+ padding-bottom: 30px;
+ margin: 0 auto;
+ margin-top: 48px;
+
+}
#topbanner {
padding: 30px;
}
margin-right: 12%;
margin-top: 15px;
}
-.navlink {
- color: #ffffff;
- text-decoration: underline;
-}
-
-
-
-/* Index page components */
-
-#directory_container {
- background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
- float: left;
- width: 300px;
- height: 450px;
- border: 1px #c6dcf1 solid;
- margin-left: 30px;
- padding-left: 10px;
- padding-right: 10px;
-}
-#loading_message {
- display: none;
-}
-#directory {
- height: 360px;
- margin-left: 10px;
- overflow: auto;
-}
-#new_trad_button {
- margin-left: 10px;
- position: relative;
- top: 10px;
-}
-.traditionname {
- text-decoration: underline;
-}
-.selected {
- font-style: italic;
+#docco {
+ background-color: #edf1fa;
+ padding: 10px;
}
.mainnav {
font-size: 14px;
padding: 5px;
float: right;
}
-.mainnav a {
+.navlink {
color: #ffffff;
+ text-decoration: underline;
}
-#textinfo_waitbox {
- float: left;
- padding-left: 50px;
-}
-#textinfo_container {
- background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
- border: 1px solid #C6DCF1;
- float: left;
- height: 510px;
- width: 710px;
- margin-left: 10px;
- padding-left: 10px;
- padding-right: 10px;
-}
-#edit_instructions {
- float: left;
-}
-#stemma_container h2 h3 {
- color: #666;
-}
-#stemma_graph {
- height: 375px;
- width: 500px;
- text-align: center;
- border: 1px #c6dcf1 solid;
-}
-#stemma_graph img {
- margin-top: expression(( 450 - this.height ) / 2);
-}
-#stemma_graph svg {
-}
-#stemma_graph_title {
- bottom: 20px;
- margin-left: 5px;
- position: relative;
-}
-#stemma_identifier {
- color: #488dd2;
- font-size: 12px;
- font-weight: bold;
-}
-#textinfo_container_buttons {
- z-index: 100;
- width: 224px;
- float: right;
- left: -18px;
- position: relative;
- top: 15px;
-}
-#run_stexaminer, #run_relater, #open_stemma_add, #open_stemma_edit, #open_stemweb_ui, #query_stemweb_ui {
- height: 32px;
-}
-#stemma_pager {
- height: 38px;
-}
-.stemma_node_highlight {
- stroke-width: 1.5px;
- stroke: #415555;
- fill: #d6e0f5;
-}
-#open_textinfo_edit {
- float: right;
- height: 30px;
- position: relative;
- top: -34px;
- left: -8px;
-}
-#upload-collation-dialog {
- overflow: hidden;
-}
-.uploadfile {
- font-weight: bold;
-}
-#uploadfile_label {
- font-weight: normal;
-}
-#filelist {
- position: relative;
- top: 10px;
- margin-bottom: 24px;
-}
-.error {
- font-weight: bold;
- color: #ff3333;
-}
-.notification {
- font-weight: bold;
- color: #33ff33;
-}
-#new_file {
- position: absolute;
- top: -50px;
- opacity: 0.0;
-}
-#new_file_name {
- font-weight: bold;
-}
-#new_name, #new_lang, #new_public, #new_file_name_container {
- margin-bottom: 6px;
-}
-#new_file_label {
- float: left;
- padding-right: 8px;
-}
-#root_tree_dialog {
- position: absolute;
- border: 2px solid #B2E0B2;
- background: #e6f5e6;
- padding: 4px 8px 4px 12px;
- z-index: 200;
- font-size: 75%;
-}
-#root_tree_dialog img {
- vertical-align: middle;
-}
+
--- /dev/null
+[% WRAPPER header.tt
+ pagetitle = "Stemmaweb - Phylogeny calculation tool"
+ applicationjs = c.uri_for( 'js/phylotools.js' )
+%]
+ <script type="text/javascript">
+var basepath = "[% c.uri_for( '/' ) %]";
+var textid = "[% textid %]";
+var editable = "[% editable %]"
+var currSelected;
+var stemmadot = [];
+var stemmasvg = [];
+var stemmata_added = {};
+
+function getPhylogeny () {
+ stemmadot = [];
+ stemmasvg = [];
+ var phylourl = basepath + textid;
+ $('#textinfo_waitbox').show();
+ $.getJSON( basepath + "phylocalc/" + textid, function (textdata) {
+ stemmadot = textdata.stemmadot;
+ stemmasvg = textdata.stemmasvg;
+ $('#textinfo_waitbox').hide();
+ load_stemma( 0 );
+ }); // TODO error handling
+}
+
+function load_stemma( idx ) {
+ // Load the stemma at idx
+ currSelected = idx;
+ show_stemmapager();
+ if( idx > -1 ) {
+ $('#stemma_graph').empty();
+ $('#stemma_graph').append( stemmasvg[idx] );
+ if( stemmadot[idx].substr('digraph') > -1 && stemmata_added[idx] != true ) {
+ // It has a root, so we may add it to the tradition stemmata.
+ $('#add_stemma_button').show();
+ }
+ setTimeout( 'start_element_height = $("#stemma_graph .node")[0].getBBox().height;', 500 );
+ }
+}
+
+function show_stemmapager () {
+ $('.pager_left_button').unbind('click').addClass( 'greyed_out' );
+ $('.pager_right_button').unbind('click').addClass( 'greyed_out' );
+ if( currSelected > 0 ) {
+ $('.pager_left_button').click( function () {
+ load_stemma( currSelected - 1 );
+ }).removeClass( 'greyed_out' );
+ }
+ if( selectedStemmaID + 1 < stemmata.length ) {
+ $('.pager_right_button').click( function () {
+ load_stemma( currSelected + 1 );
+ }).removeClass( 'greyed_out' );
+ }
+}
+
+function add_selected_stemma () {
+ var requrl = basepath + "stemma/" + textid + "/n";
+ var reqparam = { 'dot': stemmadot[currSelected] };
+ $.post( requrl, reqparam, function (data) {
+ // Disable add for any stemma already added
+ stemmata_added[currSelected] = true;
+ $('#add_stemma_button').hide();
+ // TODO maybe check on the server if the stemma exists?
+ }, 'json' );
+}
+
+function rootStemma ( stemidx, root ) {
+ // Send the stemmadot at stemidx to the server, along with the name of the
+ // selected root node. Receive back a dot spec and an SVG, and enable the
+ var rooturl = basepath + 'microservices/rootedstemma';
+ var params = { 'dot': stemmadot[stemidx], 'root': root };
+ $.post( rooturl, params, function (data) {
+ stemmadot[stemidx] = data.stemmadot;
+ stemmasvg[stemidx] = data.stemmasvg;
+ load_stemma( stemidx );
+ }); // TODO error handling
+}
+
+$(document).ready( function() {
+ $('#stemma_graph').mousedown( function(evt) {
+ evt.stopPropagation();
+ $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
+ $('body').mousemove( function(evt) {
+ mouse_scale = 1; // for now, was: mouse_scale = svg_root_element.getScreenCTM().a;
+ dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
+ dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
+ $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
+ var svg_root = $('#stemma_graph svg').svg().svg('get').root();
+ var g = $('g.graph', svg_root).get(0);
+ current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
+ new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
+ g.setAttribute( 'transform', new_transform );
+ evt.returnValue = false;
+ evt.preventDefault();
+ return false;
+ });
+ $('body').mouseup( function(evt) {
+ $('body').unbind('mousemove');
+ $('body').unbind('mouseup');
+ });
+ });
+
+ $('#stemma_graph').mousewheel(function (event, delta) {
+ event.returnValue = false;
+ event.preventDefault();
+ if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
+ if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
+ if( delta < -9 ) { delta = -9 };
+ var z = 1 + delta/10;
+ z = delta > 0 ? 1 : -1;
+ var svg_root = $('#stemma_graph svg').svg().svg('get').root();
+ var g = $('g.graph', svg_root).get(0);
+ if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
+ var scaleLevel = z/10;
+ current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
+ new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
+ g.setAttribute( 'transform', new_transform );
+ }
+ });
+
+ $('#stemma_root_cancel').hide();
+ if( !editable ) {
+ $('#stemma_add_form').hide();
+ }
+ // call out to run the phylogeny calculation
+ getPhylogeny();
+
+});
+ </script>
+
+[% END %]
+
+ <div id="topbanner">
+ <h1>Stemmaweb - [% algorithm_name %] calculation for [% text_name %]</h1>
+ <span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> | [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
+ </div>
+ <div id="textinfo_container">
+ <div id="textinfo_load_status"></div>
+ <h2>Text <span class="texttitle">[% text_name %]</span></h2>
+ <div id="textinfo_container_buttons">
+ <form id="stemma_pager" action="" method="GET" name="stemma_pager">
+ <div id="stemma_pager_buttons">
+ <div class="pager_left_button" id="stemma_pager_left_button"></div>
+ <div class="pager_right_button" id="stemma_pager_right_button"></div>
+ </div>
+ </form>
+ <form id="stemma_root_form" action="" method="GET" name="start_root_stemma">
+ <div class="button" id="stemma_root_button"
+ onClick="TODO">
+ <span>Choose a root for this stemma</span>
+ </div>
+ </form>
+ <form id="stemma_root_cancel" action="" method="GET" name="stemma_root_cancel">
+ <div class="button" id="stemma_root_cancel_button"
+ onClick="TODO">
+ <span>Cancel root selection</span>
+ </div>
+ </form>
+ <form id="stemma_add_form" action="" method="GET" name="stemma_add_form">
+ <div class="button" id="add_stemma_button"
+ onClick="add_selected_stemma()">
+ <span>Add this stemma to the tradition</span>
+ </div>
+ </form>
+ </div>
+ <div id="stemma_graph"></div>
+ </div>
+
+ <!-- Interim 'loading' message for directory box -->
+ <div id="loading_message">
+ <h3>Calculating text phylogeny, please wait...</h3>
+ <img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
+ </div>
+
+[% PROCESS footer.tt %]
\ No newline at end of file
projects / scpubgit/stemmaweb.git / commitdiff