opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Upgraded to jquery-ui ~1.5b2. Workflow now uses *no* iframes, closer to

Browse Source 
working on IE6.
This commit is contained in:
James Taylor
2008-05-01 15:10:38 +00:00
parent 92d17f65ee
commit f4da57df63
13 changed files with 1228 additions and 1094 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/galaxy/web/controllers/workflow.py
-7
View File
@@ -79,13 +79,6 @@ class WorkflowController( BaseController ):
return trans.show_error_message( "Must be logged in to create or modify workflows" )
return trans.fill_template( "workflow/editor.mako",
workflow_id=id )
@web.expose
def editor_canvas( self, trans ):
"""
Render the workflow editor canvas.
"""
return trans.fill_template( "workflow/editor_canvas.mako" )
@web.json
def editor_tool_form( self, trans, tool_id=None, **incoming ):
static/june_2007_style/blue/panel_layout.css
+37 -36
View File
@@ -13,8 +13,11 @@ body
}
#background
{
position: absolute;
background: #eee;
z-index: -1;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
@@ -141,7 +144,7 @@ table.column-layout
height: 100%;
}
div.unified-panel-header {
.unified-panel-header {
height: 2em;
overflow: hidden;
z-index: 1000;
@@ -158,7 +161,7 @@ div.unified-panel-header {
font-weight: bold;
}
div.unified-panel-header-inner {
.unified-panel-header-inner {
padding-top: 0.45em;
}
@@ -175,37 +178,6 @@ div.unified-panel-body {
margin-top: 1px;
}
.dialog-wrapper {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 30000;
}
.dialog-box {
top: 80px;
position: fixed;
border: solid #999 1px;
background: white;
min-width: 230px;
z-index: 80000;
}
.dialog-box .title, .dialog-box .body, .dialog-box .buttons {
padding: 5px;
}
.dialog-box .title {
height: 2em;
z-index: 1000;
background: #cccccc;
background-image: url(panel_header_bg.png);
background-position: top center;
background-repeat: repeat-x;
border-bottom: solid #999 1px;
margin: 0;
padding: 0;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
}
.panel-header-button {
color: #333;
text-decoration: none;
@@ -268,16 +240,45 @@ div.popupmenu-item:hover {
}
#overlay {
position: fixed;
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 20000;
}
#overlay-inner
{
#overlay-inner {
width: 100%; height: 100%;
background-color:#FFF;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
z-index: 20000;
}
.dialog-box-container {
position: relative;
margin-top: 80px;
margin-right: auto;
margin-left: auto;
}
.dialog-box-underlay {
position: absolute;
left: -1em;
right: -1em;
top: -1em;
bottom: -1em;
opacity: 0.5;
background: black;
z-index: -1;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
.dialog-box {
border: solid #999 1px;
background: white;
min-width: 230px;
z-index: 80000;
}
.dialog-box .body, .dialog-box .buttons {
padding: 5px;
}
static/june_2007_style/panel_layout.css.tmpl
+37 -35
View File
@@ -13,8 +13,11 @@ body
}
#background
{
position: absolute;
background: ${layout_bg};
z-index: -1;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
@@ -141,7 +144,7 @@ table.column-layout
height: 100%;
}
div.unified-panel-header {
.unified-panel-header {
height: 2em;
z-index: 1000;
background: ${panel_header_bg_bottom};
@@ -157,7 +160,7 @@ div.unified-panel-header {
font-weight: bold;
}
div.unified-panel-header-inner {
.unified-panel-header-inner {
padding-top: 0.45em;
}
@@ -173,37 +176,6 @@ div.unified-panel-body {
margin-top: 1px;
}
.dialog-wrapper {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 30000;
}
.dialog-box {
top: 80px;
position: fixed;
border: solid ${layout_border} 1px;
background: white;
min-width: 230px;
z-index: 80000;
}
.dialog-box .title, .dialog-box .body, .dialog-box .buttons {
padding: 5px;
}
.dialog-box .title {
height: 2em;
z-index: 1000;
background: ${panel_header_bg_bottom};
background-image: url(panel_header_bg.png);
background-position: top center;
background-repeat: repeat-x;
border-bottom: solid ${layout_border} 1px;
margin: 0;
padding: 0;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
}
.panel-header-button {
color: #333;
text-decoration: none;
@@ -271,12 +243,42 @@ div.popupmenu-item:hover {
top: 0; left: 0; width: 100%; height: 100%;
z-index: 20000;
}
#overlay-inner
{
#overlay-inner {
width: 100%; height: 100%;
background-color:#FFF;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
z-index: 20000;
}
.dialog-box-container {
position: relative;
margin-top: 80px;
margin-right: auto;
margin-left: auto;
}
.dialog-box-underlay {
position: absolute;
left: -1em;
right: -1em;
top: -1em;
bottom: -1em;
opacity: 0.5;
background: black;
z-index: -1;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
.dialog-box {
border: solid #999 1px;
background: white;
min-width: 230px;
z-index: 80000;
}
.dialog-box .body, .dialog-box .buttons {
padding: 5px;
}
static/scripts/galaxy.panels.js
+5 -5
View File
@@ -84,8 +84,8 @@ function make_left_panel( panel_el, center_el, border_el ) {
}
resize( x );
// Constrain helper position
ui.draggable.pos[0] = x;
ui.draggable.pos[1] = ui.options.co.top;
ui.position.left = x;
ui.position.top = ui.instance.originalPosition.top;
},
click: function() {
toggle();
@@ -151,7 +151,7 @@ function make_right_panel( panel_el, center_el, border_el ) {
function() { jq( this ).removeClass( "hover" ) }
).draggable( {
start: function( _, ui ) {
jq( '#DD-helper' ).show();
jq( '#DD-helper' ).show();
},
stop: function( _, ui ) {
x = ui.position.left;
@@ -181,8 +181,8 @@ function make_right_panel( panel_el, center_el, border_el ) {
}
resize( w - x - border_tweak );
// Constrain helper position
ui.draggable.pos[0] = x;
ui.draggable.pos[1] = ui.options.co.top;
ui.position.left = x;
ui.position.top = ui.instance.originalPosition.top;
}
}
).find( "div" ).show();
static/scripts/galaxy.workflow_editor.canvas.js
+25 -28
View File
@@ -81,18 +81,19 @@ $.extend( Connector.prototype, {
$(this.canvas).remove();
},
redraw : function () {
var canvas_container = $("#canvas-container");
if ( ! this.canvas ) {
this.canvas = document.createElement( "canvas" );
$("body").append( this.canvas );
canvas_container.append( $(this.canvas) );
if ( this.dragging ) { this.canvas.style.zIndex = "300" }
}
var relativeLeft = function( e ) { return $(e).offset().left - canvas_container.offset().left + canvas_container.scrollLeft(); }
var relativeTop = function( e ) { return $(e).offset().top - canvas_container.offset().top + canvas_container.scrollTop(); }
// Find the position of each handle
var o = $(this.handle1.element).offset();
var start_x = o.left + 5;
var start_y = o.top + 5;
var o = $(this.handle2.element).offset();
var end_x = o.left + 5;
var end_y = o.top + 5;
var start_x = relativeLeft( this.handle1.element ) + 5;
var start_y = relativeTop( this.handle1.element ) + 5;
var end_x = relativeLeft( this.handle2.element ) + 5;
var end_y = relativeTop( this.handle2.element ) + 5;
// Calculate canvas area
var canvas_extra = 100;
var canvas_min_x = Math.min( start_x, end_x );
@@ -109,11 +110,6 @@ $.extend( Connector.prototype, {
this.canvas.style.top = canvas_top + "px";
this.canvas.setAttribute( "width", canvas_width );
this.canvas.setAttribute( "height", canvas_height );
// HACK: Calling this again makes drawing work in Safari and I have
// no idea why. Need to figure out what this refreshes (some
// sort of side effect)
var o = $(this.handle1.element).offset()
var o = $(this.handle2.element).offset()
// Adjust points to be relative to the canvas
start_x -= canvas_left;
start_y -= canvas_top;
@@ -149,24 +145,25 @@ $.extend( Node.prototype, {
node = this;
$(elements).each( function() {
var terminal = this.terminal = new InputTerminal( this, types );
terminal.node = node;
terminal.name = name
terminal.node = node;
terminal.name = name
$(this).droppable( {
tolerance: 'intersect',
accept: function( draggable ) {
draggable = draggable.get( 0 );
return ( draggable.terminal ) && ( terminal.can_accept( draggable.terminal ) );
},
activeClass: 'input-terminal-active',
// hoverClass: 'input-terminal-active',
over: function( e, ui ) {
ui.helper.terminal.connectors[0].inner_color = "#BBFFBB";
ui.helper.get(0).terminal.connectors[0].inner_color = "#BBFFBB";
},
out: function( e, ui ) {
ui.helper.terminal.connectors[0].inner_color = "#EEEEEE";
ui.helper.get(0).terminal.connectors[0].inner_color = "#EEEEEE";
},
drop: function( e, ui ) {
var source = ui.draggable.element.terminal;
var target = ui.droppable.element.terminal;
var source = ui.draggable.get(0).terminal;
var target = ui.element.get(0).terminal;
var c = new Connector();
c.connect( source, target );
c.redraw();
@@ -187,7 +184,7 @@ $.extend( Node.prototype, {
// appendTo: "body",
// cursorAt: { top: 5, left: 5 },
helper: function () {
var h = $( '<div class="drag-terminal" style="position: absolute;"></div>' ).get(0);
var h = $( '<div class="drag-terminal" style="position: absolute;"></div>' ).appendTo( "#canvas-container" ).get(0);
h.terminal = new OutputTerminal( h );
// // Already a connector? Destroy... no wait, don't
// if ( this.terminal.connector ) {
@@ -200,7 +197,8 @@ $.extend( Node.prototype, {
return h;
},
drag: function ( e, options ) {
options.helper.terminal.redraw();
h = options.helper.get(0);
h.terminal.redraw();
},
stop: function( e, options ) {
this.drag_temp_connector.destroy();
@@ -397,7 +395,7 @@ function prebuild_node_for_tool( id, title_text ) {
function() { $(this).attr( 'src', "../images/delete_icon_dark.png" ) },
function() { $(this).attr( 'src', "../images/delete_icon.png" ) }
) );
f.appendTo( "body" );
f.appendTo( "#canvas-container" );
var width = f.width();
buttons.prependTo( title );
width += ( buttons.width() + 10 );
@@ -409,11 +407,10 @@ function prebuild_node_for_tool( id, title_text ) {
scroll: true,
scrollSensitivity: 10,
scrollSpeed: 20,
containment: $("#shim"),
// containment: $("#shim"),
// grow: true,
click: function() {
document.body.removeChild( this );
document.body.appendChild( this );
click: function( _, element ) {
(function(p) { p.removeChild( element ); p.appendChild( element ) })(element.parentNode)
workflow.activate_node( node );
},
start: function() {
@@ -425,9 +422,9 @@ function prebuild_node_for_tool( id, title_text ) {
this.terminal.redraw();
})
},
stop: function() {
document.body.removeChild( this );
document.body.appendChild( this );
stop: function( _, ui ) {
element = ui.element.get(0);
(function(p) { p.removeChild( element ); p.appendChild( element ) })(element.parentNode)
$(this).css( 'z-index', '100' );
$(this).find( ".terminal" ).each( function() {
this.terminal.redraw();
static/scripts/jquery.ui.js
+921 -730
View File
File diff suppressed because it is too large Load Diff
static/scripts/pack_scripts.py
+13 -3
View File
@@ -1,16 +1,26 @@
#!/usr/bin/env python
import sys
from glob import glob
from subprocess import call
from shutil import copyfile
from os import path
# Scripts that should not be packed
# Scripts that should not be packed -- just copied
do_not_pack = set( [ "ie_pngfix.js", "aflax.js" ] )
cmd = "java -jar ../../scripts/yuicompressor.jar --warn %(fname)s > packed/%(fname)s"
cmd = "java -jar ../../scripts/yuicompressor.jar --type js -v %(fname)s -o packed/%(fname)s"
for fname in glob( "*.js" ):
# If specific scripts specified on command line, just pack them, otherwise pack
# all.
if len( sys.argv ) > 1:
to_pack = sys.argv[1:]
else:
to_pack = glob( "*.js" )
for fname in to_pack:
d = dict( fname=fname )
print "%(fname)s --> packed/%(fname)s" % d
if fname in do_not_pack:
static/scripts/packed/galaxy.panels.js
+1 -1
View File
@@ -1 +1 @@
var hidden_width=7;var border_tweak=jQuery.browser.msie?14:9;var jq=jQuery;function ensure_dd_helper(){if(jq("#DD-helper").length==0){var A=jq("<div id='DD-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>");if(jq.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}}function make_left_panel(E,A,B){var D=false;var C=null;resize=function(F){var G=F;if(F<0){F=0}jq(E).css("width",F);jq(B).css("left",G);jq(A).css("left",F+7)};toggle=function(){if(D){jq(B).removeClass("hover");jq(B).animate({left:C},"fast");jq(E).css("left",-C).show().animate({"left":0},"fast",function(){resize(C);jq(B).removeClass("hidden")});D=false}else{C=jq(B).position().left;jq(A).css("left",hidden_width);jq(B).removeClass("hover");jq(E).animate({left:-C},"fast");jq(B).animate({left:-1},"fast",function(){jq(this).addClass("hidden")});D=true}};jq(B).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(F,G){jq("#DD-helper").show()},stop:function(F,G){jq("#DD-helper").hide();return false},drag:function(F,G){x=G.position.left;x=Math.min(400,Math.max(100,x));if(D){jq(E).css("left",0);jq(B).removeClass("hidden");D=false}resize(x);G.draggable.pos[0]=x;G.draggable.pos[1]=G.options.co.top},click:function(){toggle()}}).find("div").show()}function make_right_panel(A,E,G){var I=false;var F=false;var C=null;var D=function(J){jq(A).css("width",J);jq(E).css("right",J+9);jq(G).css("right",J).css("left","")};var H=function(){if(I){jq(G).removeClass("hover");jq(G).animate({right:C},"fast");jq(A).css("right",-C).show().animate({"right":0},"fast",function(){D(C);jq(G).removeClass("hidden")});I=false}else{C=jq(document).width()-jq(G).position().left-border_tweak;jq(E).css("right",hidden_width+1);jq(G).removeClass("hover");jq(A).animate({right:-C},"fast");jq(G).animate({right:-1},"fast",function(){jq(this).addClass("hidden")});I=true}F=false};var B=function(J){var K=jq(E).width()-(I?C:0);if(K<J){if(!I){H();F=true}}else{if(F){H();F=false}}};jq(G).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(J,K){jq("#DD-helper").show()},stop:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);D(w-x-border_tweak);jq("#DD-helper").hide();return false},click:function(){H()},drag:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(I){jq(A).css("right",0);jq(G).removeClass("hidden");I=false}D(w-x-border_tweak);K.draggable.pos[0]=x;K.draggable.pos[1]=K.options.co.top}}).find("div").show();return{handle_minwidth_hint:B}}
var hidden_width=7;var border_tweak=9;var jq=jQuery;function ensure_dd_helper(){if(jq("#DD-helper").length==0){var A=jq("<div id='DD-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>");if(jq.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}if(jq("#popup-helper").length==0){var A=jq("<div id='popup-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 15000;'></div>");if(jq.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}}function make_left_panel(E,A,B){var D=false;var C=null;resize=function(F){var G=F;if(F<0){F=0}jq(E).css("width",F);jq(B).css("left",G);jq(A).css("left",F+7);if(document.recalc){document.recalc()}};toggle=function(){if(D){jq(B).removeClass("hover");jq(B).animate({left:C},"fast");jq(E).css("left",-C).show().animate({left:0},"fast",function(){resize(C);jq(B).removeClass("hidden")});D=false}else{C=jq(B).position().left;jq(A).css("left",hidden_width);if(document.recalc){document.recalc()}jq(B).removeClass("hover");jq(E).animate({left:-C},"fast");jq(B).animate({left:-1},"fast",function(){jq(this).addClass("hidden")});D=true}};jq(B).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(F,G){jq("#DD-helper").show()},stop:function(F,G){jq("#DD-helper").hide();return false},drag:function(F,G){x=G.position.left;x=Math.min(400,Math.max(100,x));if(D){jq(E).css("left",0);jq(B).removeClass("hidden");D=false}resize(x);G.position.left=x;G.position.top=G.instance.originalPosition.top},click:function(){toggle()}}).find("div").show()}function make_right_panel(A,E,G){var I=false;var F=false;var C=null;var D=function(J){jq(A).css("width",J);jq(E).css("right",J+9);jq(G).css("right",J).css("left","");if(document.recalc){document.recalc()}};var H=function(){if(I){jq(G).removeClass("hover");jq(G).animate({right:C},"fast");jq(A).css("right",-C).show().animate({right:0},"fast",function(){D(C);jq(G).removeClass("hidden")});I=false}else{C=jq(document).width()-jq(G).position().left-border_tweak;jq(E).css("right",hidden_width+1);if(document.recalc){document.recalc()}jq(G).removeClass("hover");jq(A).animate({right:-C},"fast");jq(G).animate({right:-1},"fast",function(){jq(this).addClass("hidden")});I=true}F=false};var B=function(J){var K=jq(E).width()-(I?C:0);if(K<J){if(!I){H();F=true}}else{if(F){H();F=false}}};jq(G).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(J,K){jq("#DD-helper").show()},stop:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);D(w-x-border_tweak);jq("#DD-helper").hide();return false},click:function(){H()},drag:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(I){jq(A).css("right",0);jq(G).removeClass("hidden");I=false}D(w-x-border_tweak);K.position.left=x;K.position.top=K.instance.originalPosition.top}}).find("div").show();return{handle_minwidth_hint:B}}function make_popupmenu(D,B){var A=$("<div class='popupmenu'><div class='popupmenu-top'><div class='popupmenu-top-inner'/></div></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(){var F=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.top+$(D).height()+9,left:F.left+$(D).width()-$(A).width()})};$(D).click(E)};
static/scripts/packed/galaxy.workflow_editor.canvas.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/packed/jquery.ui.js
+1 -1
View File
File diff suppressed because one or more lines are too long
templates/base_panels.mako
+7 -5
View File
@@ -6,8 +6,8 @@
## Default stylesheets
<%def name="stylesheets()">
<link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/reset.css')}"></link>
<link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/panel_layout.css')}"></link>
<link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/reset.css')}" />
<link rel="stylesheet" type="text/css" href="${h.url_for('/static/style/panel_layout.css')}" />
</%def>
## Default javascripts
@@ -65,8 +65,10 @@
<div id="right">
${self.right_panel()}
</div>
## Scripts can be loaded later since they progressively add features to
## the panels, but do not change layout
${self.late_javascripts()}
## Allow other body level elements
${next.body()}
</body>
## Scripts can be loaded later since they progressively add features to
## the panels, but do not change layout
${self.late_javascripts()}
</html>
templates/workflow/editor.mako
+180 -79
View File
@@ -1,30 +1,41 @@
<%inherit file="/base_panels.mako"/>
<%def name="late_javascripts()">
## <script type="text/javascript" src="${h.url_for('/static/scripts/jquery.js')}"></script>
## <script type="text/javascript" src="${h.url_for('/static/scripts/jquery.dimensions.js')}"></script>
## <script type="text/javascript" src="${h.url_for('/static/scripts/jquery.ui.js')}"></script>
<script type='text/javascript' src="/static/scripts/galaxy.panels.js"> </script>
<script type="text/javascript">
ensure_dd_helper();
var lp = make_left_panel( $("#left"), $("#center"), $("#left-border" ) );
var rp = make_right_panel( $("#right"), $("#center"), $("#right-border" ) );
## handle_minwidth_hint = rp.handle_minwidth_hint;
</script>
</%def>
<%def name="javascripts()">
## ${parent.late_javascripts()}
## ${parent.javascripts()}
<script type='text/javascript' src="/static/scripts/jquery.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.dimensions.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.ui.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.fx.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.fx.drop.js"> </script>
## <script type='text/javascript' src="/static/scripts/jquery.fx.js"> </script>
## <script type='text/javascript' src="/static/scripts/jquery.fx.drop.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.form.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.json.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.center.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.corner.js"> </script>
<script type='text/javascript' src="/static/scripts/galaxy.panels.js"> </script>
<script type='text/javascript' src="/static/firebug/firebug.js"> </script>
## <script type='text/javascript' src="/static/scripts/jquery.center.js"> </script>
## <script type='text/javascript' src="/static/scripts/jquery.corner.js"> </script>
<script type='text/javascript'>
/* Dialog and menu handling tools to be moved to galaxy.layout.js */
function hide_modal() {
$("#overlay, .dialog-box" ).hide();
$(".dialog-box-container" ).fadeOut( function() { $("#overlay").hide(); } );
};
function show_modal( title, body, buttons ) {
$( ".dialog-box" ).find( ".title-content" ).html( title );
$( ".dialog-box" ).find( ".title" ).html( title );
var b = $( ".dialog-box" ).find( ".buttons" ).html( "" );
if ( buttons ) {
$.each( buttons, function( name, value ) {
@@ -40,35 +51,46 @@
}
$( ".dialog-box" ).find( ".body" ).html( body );
// $( "#overlay").show();
if ( ! $(".dialog-box").is( ":visible" ) ) {
$("#overlay, .dialog-box").show();
if ( ! $(".dialog-box-container").is( ":visible" ) ) {
$("#overlay").show();
$(".dialog-box-container").fadeIn()
} else {
$(".dialog-box").center( "horizontal" );
// $(".dialog-box").center( "horizontal" );
}
};
</script>
<script type='text/javascript' src="/static/scripts/galaxy.workflow_editor.canvas.js"> </script>
<script type='text/javascript'>
$( function() {
if( $.browser.mozilla ) {
$("body").addClass( "mozilla" );
}
// $.blockUI( "<b><img style='vertical-align: middle;' src='${h.url_for( '/static/style/data_running.gif' )}'/> Loading Galaxy Workflow Editor...</b>",
// { border: "solid #AAAA66 1px", background: "#FFFFCC", padding: "20px", width: "auto" } );
make_left_panel( $("#left"), $("#center"), $("#left-border" ) );
make_right_panel( $("#right"), $("#center"), $("#right-border" ) );
// Insert helper divs for panels and popups
$("<div id='DD-helper' style='background: white; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>")
.css("background", "transparent").appendTo("body").hide();
$("<div id='popup-helper' style='background: white; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 15000;'></div>")
.css("background", "transparent").appendTo("body").hide();
// Center the loading indicator
$(".dialog-box" ).center( "horizontal" );
// Initialize workflow state
reset();
// Shim (the background of the editor area) causes loss of focus
// $("#shim").click( workflow.clear_active_node ).hoverIntent( {
// over: function () { $("div.toolForm").fadeTo( "fast", 0.7 ) },
// out: function () { $("div.toolForm").fadeTo( "fast", 1.0 ) },
// interval: 300
// });
// Load the datatype info
$.getJSON( "${h.url_for( action='get_datatypes' )}", function( data ) {
populate_datatype_info( data );
// Load workflow definition
$.ajax( {
url: "${h.url_for( action='load_workflow' )}",
data: { id: "${trans.security.encode_id( workflow_id )}" },
dataType: 'json',
success: function( data ) {
reset();
workflow.from_simple( data );
hide_modal();
},
beforeSubmit: function( data ) {
show_modal( "Loading workflow", "progress" );
}
});
});
$(document).ajaxError( function ( e, x ) {
// console.error( "AJAX:", e, ", ", x );
@@ -113,19 +135,38 @@
});
});
});
var workflow = null;
function notify() {
// Global state for the whole workflow
function reset() {
if ( workflow ) {
workflow.remove_all();
}
workflow = new Workflow();
// Start at the middle of the canvas
$(window).scrollTop( 2500 );
$(window).scrollLeft( 2500 );
}
// Add a new step to the workflow by tool id
function add_node_for_tool( id, title ) {
node = prebuild_node_for_tool( id, title );
workflow.add_node( node );
workflow.activate_node( node );
$.ajax( {
url: "${h.url_for( action='load_workflow' )}",
data: { id: "${trans.security.encode_id( workflow_id )}" },
dataType: 'json',
success: function( data ) {
window.frames.canvas.reset();
workflow.from_simple( data );
hide_modal();
url: "${h.url_for( action='get_tool_info' )}",
data: { tool_id: id },
dataType: "json",
success: function( data ) {
node.init_field_data( data );
},
beforeSubmit: function( data ) {
show_modal( "Loading workflow", "progress" );
error: function( x, e ) {
var m = "error loading field data"
if ( x.status == 0 ) {
m += ", server unavailable"
}
node.error( m );
}
});
};
@@ -191,7 +232,7 @@
var form = body.find( "form" ).ajaxForm( {
dataType: 'json',
success: function( data ) {
window.frames.canvas.reset();
reset();
workflow.from_simple( data );
show_modal( "Workflow loaded", "Workflow loaded.", {
"Ok" : function () { hide_modal(); }
@@ -211,7 +252,7 @@
}
var clear_workflow = function () {
window.frames.canvas.reset();
reset();
hide_modal();
}
@@ -227,10 +268,6 @@
}
}
function add_node_for_tool( id, title ) {
window.frames.canvas.add_node_for_tool( id, title );
}
</script>
</%def>
@@ -242,6 +279,8 @@
<link href="${h.url_for('/static/style/base.css')}" rel="stylesheet" type="text/css" />
<style type="text/css">
body { margin: 0; padding: 0; overflow: hidden; }
/* Wider right panel */
#center { right: 309px; }
#right-border { right: 300px; }
@@ -314,48 +353,105 @@
overflow: auto;
}
canvas { position: absolute; z-index: 10; }
canvas.dragging { position: absolute; z-index: 1000; }
.input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; left: -16px; }
.output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')});; position: absolute; bottom: 0; right: -16px; }
.drag-terminal { position: absolute; z-index: 1500; width: 10px; height: 10px; background: red; }
.input-terminal-active { background: url(${h.url_for('/static/style/workflow_circle_green.png')}); }
## .input-terminal-hover { background: yellow; border: solid black 1px; }
.unselectable { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
img { border: 0; }
div.buttons img {
width: 16px; height: 16px;
cursor: pointer;
}
div.toolFormTitle {
cursor: move;
min-height: 16px;
}
div.titleRow {
font-weight: bold;
border-bottom: dotted gray 1px;
margin-bottom: 0.5em;
padding-bottom: 0.25em;
}
div.form-row {
position: relative;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
div.toolForm {
margin: 6px;
}
div.toolForm-active {
border: solid #8080FF 4px;
margin: 3px;
}
div.tool-node {
position: absolute;
}
div.tool-node-error div.toolFormTitle {
background: #FFCCCC;
border-color: #AA6666;
}
div.tool-node-error {
border-color: #AA6666;
}
#canvas-area {
position: absolute;
top: 0; left: 305px; bottom: 0; right: 0;
border: solid red 1px;
overflow: none;
}
.form-row {
}
.form-row-body {
}
.form-row-clear {
clear: both;
}
div.rule {
height: 0;
border: none;
border-bottom: dotted black 1px;
}
</style>
</%def>
<div id="error-display"></div>
<div id="overlay">
<div id="overlay-inner"></div>
<div class="dialog-box">
<div class="title">
<div class="center-block-outer">
<div class="center-block-inner">
<div class="title-content">Loading workflow editor...</div>
</div>
## Need a table here for centering in IE6
<table class="dialog-box-container" border="0" cellpadding="0" cellspacing="0"><tr><td>
<div style="position: relative;">
<div class="dialog-box">
<div class="unified-panel-header">
<div class="unified-panel-header-inner"><span class='title'>Loading workflow editor...</span></div>
</div>
<div class="body"><img src="${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}" /></div>
<div class="buttons" style="display: none;"></div>
</div>
<div class="body"><img src="${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}" /></div>
<div class="buttons" style="display: none;"></div>
<div class="underlay"></div>
</div>
</div>
<div id="templates" style="display: none">
<div id="load-dialog-form">
<form id="load-dialog-form-form" action="${h.url_for( action='load_workflow' )}" method="post">
<div class="form-row">
<label>Workflow name:</label>
<input name="workflow_name" type="text" focus="true" />
</div>
</form>
</div>
<div id="save-dialog-form">
<form id="save-dialog-form-form" action="${h.url_for( action='save_workflow' )}" method="post">
<div class="form-row">
<label>Workflow name:</label>
<input name="workflow_name" type="text" focus="true" />
</div>
</form>
<div class="dialog-box-underlay"></div>
</div>
</td></tr></table>
## <div id="overlay-inner"></div>
</div>
<%def name="masthead()">
<div style="float: right; color: black; padding: 3px;"><div class="warningmessagesmall" style="min-height: 15px;">Workflow support is currently in <b><i>beta</i></b></div></div>
<div style="float: right; color: black; padding: 3px;"><div class="warningmessagesmall" style="display: inline-block; min-height: 15px;">Workflow support is currently in <b><i>beta</i></b></div></div>
<div class="title"><b>Galaxy workflow editor</b></div>
</%def>
@@ -412,17 +508,22 @@
</%def>
<%def name="center_panel()">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner" style="float: right">
<div id="savebutton" class="button">Save</div>
<a id="savebutton" class="panel-header-button">Save</a>
</div>
<div class="unified-panel-header-inner">
Workflow canvas
</div>
</div>
<div class="unified-panel-body" style="">
<iframe name="canvas" width="100%" height="100%" frameborder="0" style="position: absolute;" src="${h.url_for( action='editor_canvas' )}"></iframe>
<div class="unified-panel-body">
<div id="canvas-container" style="width: 100%; height: 100%; position: absolute; overflow: scroll;">
<div style="height: 5000px; width: 5000px; background: white url(${h.url_for('/static/images/light_gray_grid.gif')}) repeat;"></div>
</div>
</div>
</%def>
<%def name="right_panel()">
templates/workflow/editor_canvas.mako
-163
View File
@@ -1,163 +0,0 @@
<html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="${h.url_for('/static/style/base.css')}" rel="stylesheet" type="text/css" />
<style>
* { z-index: 100;}
canvas { position: absolute; z-index: 10; }
canvas.dragging { position: absolute; z-index: 1000; }
.input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; left: -16px; }
.output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')});; position: absolute; bottom: 0; right: -16px; }
.drag-terminal { position: absolute; z-index: 1500; width: 10px; height: 10px; display: none; }
.input-terminal-active { background: url(${h.url_for('/static/style/workflow_circle_green.png')}); }
## .input-terminal-hover { background: yellow; border: solid black 1px; }
.unselectable { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
img { border: 0; }
</style>
<script type='text/javascript' src="/static/scripts/jquery.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.dimensions.js"> </script>
<script type='text/javascript' src="/static/scripts/jquery.ui.js"> </script>
<!-- <script type='text/javascript' src="/static/scripts/jquery.hoverIntent.js"> </script> -->
<script type='text/javascript' src="/static/scripts/galaxy.workflow_editor.canvas.js"> </script>
<script type='text/javascript'>
var workflow = null;
// Global state for the whole workflow
function reset() {
if ( workflow ) {
workflow.remove_all();
}
parent.workflow = workflow = new Workflow();
// Start at the middle of the canvas
$(window).scrollTop( 2500 );
$(window).scrollLeft( 2500 );
}
// Add a new step to the workflow by tool id
function add_node_for_tool( id, title ) {
node = prebuild_node_for_tool( id, title );
workflow.add_node( node );
workflow.activate_node( node );
$.ajax( {
url: "${h.url_for( action='get_tool_info' )}",
data: { tool_id: id },
dataType: "json",
success: function( data ) {
node.init_field_data( data );
},
error: function( x, e ) {
var m = "error loading field data"
if ( x.status == 0 ) {
m += ", server unavailable"
}
node.error( m );
}
});
};
$( function() {
// Initialize workflow state
reset();
// Shim (the background of the editor area) causes loss of focus
// $("#shim").click( workflow.clear_active_node ).hoverIntent( {
// over: function () { $("div.toolForm").fadeTo( "fast", 0.7 ) },
// out: function () { $("div.toolForm").fadeTo( "fast", 1.0 ) },
// interval: 300
// });
// Load the datatype info
$.getJSON( "${h.url_for( action='get_datatypes' )}", function( data ) {
populate_datatype_info( data );
if ( parent ) { parent.notify(); }
});
});
</script>
<style>
body {
margin: 0; padding: 0;
background: white url(${h.url_for('/static/images/light_gray_grid.gif')}) repeat;
}
div.buttons img {
width: 16px; height: 16px;
cursor: pointer;
}
div.toolFormTitle {
cursor: move;
min-height: 16px;
}
div.titleRow {
font-weight: bold;
border-bottom: dotted gray 1px;
margin-bottom: 0.5em;
padding-bottom: 0.25em;
}
div.form-row {
position: relative;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
div.toolForm {
margin: 6px;
}
div.toolForm-active {
border: solid #8080FF 4px;
margin: 3px;
}
div.tool-node {
position: absolute;
}
div.tool-node-error div.toolFormTitle {
background: #FFCCCC;
border-color: #AA6666;
}
div.tool-node-error {
border-color: #AA6666;
}
#canvas-area {
position: absolute;
top: 0; left: 305px; bottom: 0; right: 0;
border: solid red 1px;
overflow: none;
}
.form-row {
}
.form-row-body {
}
.form-row-clear {
clear: both;
}
div.rule {
height: 0;
border: none;
border-bottom: dotted black 1px;
}
</style>
</head>
<body>
<div id="shim" style="position: absolute; top: 0px; left: 0px; width: 5000px; height: 5000px;"></div>
</body>
</html>