mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Create ui.js for generic UI Backbone functionality and add models & views to display icon menus. Use new functionality for visualization menu.
This commit is contained in:
Jeremy Goecks
@@ -79,17 +79,19 @@ input{font:10px verdana;}
|
||||
.filters-icon{background:transparent url(../images/fugue/ui-slider-050-bw.png) no-repeat;}
|
||||
.filters-icon:hover{background:transparent url(../images/fugue/ui-slider-050.png) no-repeat;}
|
||||
.remove-icon,.overview-close{background:transparent url(../images/fugue/cross-small-bw.png) no-repeat;}
|
||||
.remove-icon:hover,.overview-close:hover{background:transparent url(../images/fugue/cross-circle.png) no-repeat;}
|
||||
#close-icon{background:transparent url(../images/fugue/cross-circle-bw.png) no-repeat;margin-right:0px;}
|
||||
#close-icon:hover{background:transparent url(../images/fugue/cross-circle.png) no-repeat;}
|
||||
#add-tracks-icon{background:transparent url(../images/fugue/plus-button-bw.png) no-repeat;}
|
||||
#add-tracks-icon:hover{background:transparent url(../images/fugue/plus-button.png) no-repeat;}
|
||||
#add-group-icon{background:transparent url(../images/fugue/block--plus-bw.png) no-repeat;}
|
||||
#add-group-icon:hover{background:transparent url(../images/fugue/block--plus.png) no-repeat;}
|
||||
#bookmarks-icon{background:transparent url(../images/fugue/bookmarks-bw.png) no-repeat;}
|
||||
#bookmarks-icon:hover{background:transparent url(../images/fugue/bookmarks.png) no-repeat;}
|
||||
#save-icon{background:transparent url(../images/fugue/disk--arrow-bw.png) no-repeat;}
|
||||
#save-icon:hover{background:transparent url(../images/fugue/disk--arrow.png) no-repeat;}
|
||||
.icon-button.remove-icon:hover,.overview-close:hover{background:transparent url(../images/fugue/cross-circle.png) no-repeat;}
|
||||
.icon-button.cross-circle{background:transparent url(../images/fugue/cross-circle-bw.png) no-repeat;margin-right:0px;}
|
||||
.icon-button.cross-circle:hover{background:transparent url(../images/fugue/cross-circle.png) no-repeat;}
|
||||
.icon-button.plus-button{background:transparent url(../images/fugue/plus-button-bw.png) no-repeat;}
|
||||
.icon-button.plus-button:hover{background:transparent url(../images/fugue/plus-button.png) no-repeat;}
|
||||
.icon-button.block--plus{background:transparent url(../images/fugue/block--plus-bw.png) no-repeat;}
|
||||
.icon-button.block--plus:hover{background:transparent url(../images/fugue/block--plus.png) no-repeat;}
|
||||
.icon-button.bookmarks{background:transparent url(../images/fugue/bookmarks-bw.png) no-repeat;}
|
||||
.icon-button.bookmarks:hover{background:transparent url(../images/fugue/bookmarks.png) no-repeat;}
|
||||
.icon-button.toolbox{background:transparent url(../images/fugue/toolbox-bw.png) no-repeat;}
|
||||
.icon-button.toolbox:hover{background:transparent url(../images/fugue/toolbox.png) no-repeat;}
|
||||
.icon-button.disk--arrow{background:transparent url(../images/fugue/disk--arrow-bw.png) no-repeat;}
|
||||
.icon-button.disk--arrow:hover{background:transparent url(../images/fugue/disk--arrow.png) no-repeat;}
|
||||
.child-track-icon{background:url('../images/fugue/arrow-000-small-bw.png') no-repeat;width:30px;cursor:move;}
|
||||
.track-resize{background:white url('../images/visualization/draggable_vertical.png') no-repeat top center;position:absolute;right:3px;bottom:-4px;width:14px;height:7px;border:solid #999 1px;z-index:100;}
|
||||
.bookmark{background:white;border:solid #999 1px;border-right:none;margin:0.5em;margin-right:0;padding:0.5em;}
|
||||
|
||||
@@ -390,37 +390,43 @@ input {
|
||||
.remove-icon, .overview-close {
|
||||
background: transparent url(../images/fugue/cross-small-bw.png) no-repeat;
|
||||
}
|
||||
.remove-icon:hover, .overview-close:hover {
|
||||
.icon-button.remove-icon:hover, .overview-close:hover {
|
||||
background: transparent url(../images/fugue/cross-circle.png) no-repeat;
|
||||
}
|
||||
#close-icon {
|
||||
.icon-button.cross-circle {
|
||||
background: transparent url(../images/fugue/cross-circle-bw.png) no-repeat;margin-right:0px;
|
||||
}
|
||||
#close-icon:hover {
|
||||
.icon-button.cross-circle:hover {
|
||||
background: transparent url(../images/fugue/cross-circle.png) no-repeat;
|
||||
}
|
||||
#add-tracks-icon {
|
||||
.icon-button.plus-button {
|
||||
background: transparent url(../images/fugue/plus-button-bw.png) no-repeat;
|
||||
}
|
||||
#add-tracks-icon:hover {
|
||||
.icon-button.plus-button:hover {
|
||||
background: transparent url(../images/fugue/plus-button.png) no-repeat;
|
||||
}
|
||||
#add-group-icon {
|
||||
.icon-button.block--plus {
|
||||
background: transparent url(../images/fugue/block--plus-bw.png) no-repeat;
|
||||
}
|
||||
#add-group-icon:hover {
|
||||
.icon-button.block--plus:hover {
|
||||
background: transparent url(../images/fugue/block--plus.png) no-repeat;
|
||||
}
|
||||
#bookmarks-icon {
|
||||
.icon-button.bookmarks {
|
||||
background: transparent url(../images/fugue/bookmarks-bw.png) no-repeat;
|
||||
}
|
||||
#bookmarks-icon:hover {
|
||||
.icon-button.bookmarks:hover {
|
||||
background: transparent url(../images/fugue/bookmarks.png) no-repeat;
|
||||
}
|
||||
#save-icon {
|
||||
.icon-button.toolbox {
|
||||
background: transparent url(../images/fugue/toolbox-bw.png) no-repeat;
|
||||
}
|
||||
.icon-button.toolbox:hover {
|
||||
background: transparent url(../images/fugue/toolbox.png) no-repeat;
|
||||
}
|
||||
.icon-button.disk--arrow {
|
||||
background: transparent url(../images/fugue/disk--arrow-bw.png) no-repeat;
|
||||
}
|
||||
#save-icon:hover {
|
||||
.icon-button.disk--arrow:hover {
|
||||
background: transparent url(../images/fugue/disk--arrow.png) no-repeat;
|
||||
}
|
||||
.child-track-icon {
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Utility models and views for Galaxy objects.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Clickable button represented as an icon.
|
||||
*/
|
||||
var IconButton = Backbone.Model.extend({
|
||||
defaults: {
|
||||
title: "",
|
||||
icon_class: "",
|
||||
on_click: null
|
||||
}
|
||||
});
|
||||
|
||||
var IconButtonCollection = Backbone.Collection.extend({
|
||||
model: IconButton
|
||||
});
|
||||
|
||||
/**
|
||||
* A single icon button.
|
||||
*/
|
||||
var IconButtonView = Backbone.View.extend({
|
||||
tagName: 'a',
|
||||
className: 'icon-button menu-button',
|
||||
|
||||
events: {
|
||||
'click': 'on_click'
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.attr('href', 'javascript:void(0)')
|
||||
.attr('title', this.model.attributes.title)
|
||||
.addClass(this.model.attributes.icon_class);
|
||||
return this;
|
||||
},
|
||||
|
||||
on_click: function() {
|
||||
this.model.attributes.on_click();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Menu with multiple icon buttons.
|
||||
*/
|
||||
var IconButtonMenuView = Backbone.View.extend({
|
||||
tagName: 'div',
|
||||
|
||||
render: function() {
|
||||
var self = this;
|
||||
this.collection.each(function(icon_button) {
|
||||
var view = new IconButtonView({model: icon_button});
|
||||
view.render();
|
||||
self.$el.append(view.$el);
|
||||
});
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
var Grid = Backbone.Collection.extend({
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
var GridView = Backbone.View.extend({
|
||||
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
var IconButton=Backbone.Model.extend({defaults:{title:"",icon_class:"",on_click:null}});var IconButtonCollection=Backbone.Collection.extend({model:IconButton});var IconButtonView=Backbone.View.extend({tagName:"a",className:"icon-button menu-button",events:{click:"on_click"},render:function(){this.$el.attr("href","javascript:void(0)").attr("title",this.model.attributes.title).addClass(this.model.attributes.icon_class);return this},on_click:function(){this.model.attributes.on_click()}});var IconButtonMenuView=Backbone.View.extend({tagName:"div",render:function(){var a=this;this.collection.each(function(c){var b=new IconButtonView({model:c});b.render();a.$el.append(b.$el)});return this}});var Grid=Backbone.Collection.extend({});var GridView=Backbone.View.extend({});
|
||||
+1
-1
@@ -26,7 +26,7 @@
|
||||
## <!--[if lt IE 7]>
|
||||
## <script type='text/javascript' src="/static/scripts/IE7.js"> </script>
|
||||
## <![endif]-->
|
||||
${h.js( "jquery", "galaxy.base", "libs/underscore", "libs/backbone", "libs/handlebars.runtime" )}
|
||||
${h.js( "jquery", "galaxy.base", "libs/underscore", "libs/backbone", "libs/handlebars.runtime", "backbone/ui" )}
|
||||
</%def>
|
||||
|
||||
## Additional metas can be defined by templates inheriting from this one.
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<script type="text/javascript">
|
||||
var image_path = '${h.url_for("/static/images")}';
|
||||
</script>
|
||||
${h.js( 'jquery' )}
|
||||
${h.js( 'jquery', 'libs/underscore', 'libs/backbone', 'libs/handlebars.runtime', 'backbone/ui' )}
|
||||
</%def>
|
||||
|
||||
## Default late-load javascripts
|
||||
|
||||
@@ -157,6 +157,81 @@ ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.e
|
||||
};
|
||||
|
||||
$(function() {
|
||||
// Create and initialize menu.
|
||||
var
|
||||
|
||||
buttons = new IconButtonCollection([
|
||||
new IconButton({icon_class: 'plus-button', title: 'Add tracks', on_click: function() { add_tracks(); } }),
|
||||
new IconButton({icon_class: 'block--plus', title: 'Add group', on_click: function() {
|
||||
view.add_drawable( new DrawableGroup(view, view, { name: "New Group" }) );
|
||||
} }),
|
||||
/*
|
||||
new IconButton({icon_class: 'toolbox', title: 'Use tools', on_click: function() {
|
||||
console.log("toolbox!")
|
||||
} }),
|
||||
*/
|
||||
new IconButton({icon_class: 'bookmarks', title: 'Bookmarks', on_click: function() {
|
||||
// HACK -- use style to determine if panel is hidden and hide/show accordingly.
|
||||
parent.force_right_panel(($("div#right").css("right") == "0px" ? "hide" : "show"));
|
||||
} }),
|
||||
new IconButton({icon_class: 'disk--arrow', title: 'Save', on_click: function() {
|
||||
// Show saving dialog box
|
||||
show_modal("Saving...", "progress");
|
||||
|
||||
// Save bookmarks.
|
||||
var bookmarks = [];
|
||||
$(".bookmark").each(function() {
|
||||
bookmarks[bookmarks.length] = {
|
||||
position: $(this).children(".position").text(),
|
||||
annotation: $(this).children(".annotation").text()
|
||||
};
|
||||
});
|
||||
|
||||
// FIXME: give unique IDs to Drawables and save overview as ID.
|
||||
var overview_track_name = (view.overview_drawable ? view.overview_drawable.name : null);
|
||||
var payload = {
|
||||
'view': view.to_dict(),
|
||||
'viewport': { 'chrom': view.chrom, 'start': view.low , 'end': view.high, 'overview': overview_track_name },
|
||||
'bookmarks': bookmarks
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: "${h.url_for( action='save' )}",
|
||||
type: "POST",
|
||||
data: {
|
||||
'vis_id': view.vis_id,
|
||||
'title': view.name,
|
||||
'dbkey': view.dbkey,
|
||||
'payload': JSON.stringify(payload)
|
||||
},
|
||||
dataType: "json",
|
||||
success: function(vis_info) {
|
||||
hide_modal();
|
||||
view.vis_id = vis_info.vis_id;
|
||||
view.has_changes = false;
|
||||
|
||||
// Needed to set URL when first saving a visualization.
|
||||
window.history.pushState({}, "", vis_info.url);
|
||||
},
|
||||
error: function() {
|
||||
show_modal( "Could Not Save", "Could not save visualization. Please try again later.",
|
||||
{ "Close" : hide_modal } );
|
||||
}
|
||||
});
|
||||
} }),
|
||||
new IconButton({icon_class: 'cross-circle', title: 'Close', on_click: function() {
|
||||
window.location = "${h.url_for( controller='visualization', action='list' )}";
|
||||
} })
|
||||
]),
|
||||
|
||||
menu = new IconButtonMenuView({
|
||||
collection: buttons
|
||||
});
|
||||
|
||||
menu.render();
|
||||
menu.$el.attr("style", "float: right");
|
||||
$("#center .unified-panel-header-inner").append(menu.$el);
|
||||
|
||||
// Manual tipsy config because default gravity is S and cannot be changed.
|
||||
$(".menu-button").tipsy( {gravity: 'n'} );
|
||||
|
||||
@@ -229,67 +304,7 @@ ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.e
|
||||
//
|
||||
// Initialize icons.
|
||||
//
|
||||
$("#add-tracks-icon").click( function() { add_tracks(); } );
|
||||
|
||||
$("#add-group-icon").click( function() {
|
||||
view.add_drawable( new DrawableGroup(view, view, { name: "New Group" }) );
|
||||
});
|
||||
|
||||
$("#save-icon").click( function() {
|
||||
// Show saving dialog box
|
||||
show_modal("Saving...", "progress");
|
||||
|
||||
// Save bookmarks.
|
||||
var bookmarks = [];
|
||||
$(".bookmark").each(function() {
|
||||
bookmarks[bookmarks.length] = {
|
||||
position: $(this).children(".position").text(),
|
||||
annotation: $(this).children(".annotation").text()
|
||||
};
|
||||
});
|
||||
|
||||
// FIXME: give unique IDs to Drawables and save overview as ID.
|
||||
var overview_track_name = (view.overview_drawable ? view.overview_drawable.name : null);
|
||||
var payload = {
|
||||
'view': view.to_dict(),
|
||||
'viewport': { 'chrom': view.chrom, 'start': view.low , 'end': view.high, 'overview': overview_track_name },
|
||||
'bookmarks': bookmarks
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: "${h.url_for( action='save' )}",
|
||||
type: "POST",
|
||||
data: {
|
||||
'vis_id': view.vis_id,
|
||||
'title': view.name,
|
||||
'dbkey': view.dbkey,
|
||||
'payload': JSON.stringify(payload)
|
||||
},
|
||||
dataType: "json",
|
||||
success: function(vis_info) {
|
||||
hide_modal();
|
||||
view.vis_id = vis_info.vis_id;
|
||||
view.has_changes = false;
|
||||
|
||||
// Needed to set URL when first saving a visualization.
|
||||
window.history.pushState({}, "", vis_info.url);
|
||||
},
|
||||
error: function() {
|
||||
show_modal( "Could Not Save", "Could not save visualization. Please try again later.",
|
||||
{ "Close" : hide_modal } );
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#bookmarks-icon").click( function() {
|
||||
// HACK -- use style to determine if panel is hidden and hide/show accordingly.
|
||||
parent.force_right_panel(($("div#right").css("right") == "0px" ? "hide" : "show"));
|
||||
});
|
||||
|
||||
$("#close-icon").click( function() {
|
||||
window.location = "${h.url_for( controller='visualization', action='list' )}";
|
||||
});
|
||||
|
||||
$("#add-bookmark-button").click(function() {
|
||||
// Add new bookmark.
|
||||
var position = view.chrom + ":" + view.low + "-" + view.high,
|
||||
@@ -315,13 +330,6 @@ ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.e
|
||||
<div class="unified-panel-header" unselectable="on">
|
||||
<div class="unified-panel-header-inner">
|
||||
<div style="float:left;" id="title"></div>
|
||||
<div style="float: right">
|
||||
<a id="add-tracks-icon" class='icon-button menu-button' href="javascript:void(0);" title="Add tracks"></a>
|
||||
<a id="add-group-icon" class='icon-button menu-button' href="javascript:void(0);" title="Add new group"></a>
|
||||
<a id="bookmarks-icon" class='icon-button menu-button' href="javascript:void(0);" title="Bookmarks"></a>
|
||||
<a id="save-icon" class='icon-button menu-button' href="javascript:void(0);" title="Save"></a>
|
||||
<a id="close-icon" class='icon-button menu-button' href="javascript:void(0);" title="Close"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user