details: http://www.bx.psu.edu/hg/galaxy/rev/1fc06b260097 changeset: 3363:1fc06b260097 user: Kanwei Li <kanwei@gmail.com> date: Wed Feb 10 12:17:38 2010 -0500 description: trackster: - Refactor element creation code - Can delete tracks - Can reorder tracks diffstat: static/june_2007_style/history.css.tmpl | 2 +- static/scripts/trackster.js | 19 ++++++++++-- templates/tracks/browser.mako | 49 ++++++++++++++++---------------- 3 files changed, 41 insertions(+), 29 deletions(-) diffs (142 lines): diff -r 445986a09dbb -r 1fc06b260097 static/june_2007_style/history.css.tmpl --- a/static/june_2007_style/history.css.tmpl Tue Feb 09 15:05:39 2010 -0500 +++ b/static/june_2007_style/history.css.tmpl Wed Feb 10 12:17:38 2010 -0500 @@ -19,7 +19,7 @@ margin: 5px 0 5px 0; } -## Default history item appearend +## Default history item appearance div.historyItem { margin: 5px -5px 5px 0px; padding: 5px 11px 5px 5px; diff -r 445986a09dbb -r 1fc06b260097 static/scripts/trackster.js --- a/static/scripts/trackster.js Tue Feb 09 15:05:39 2010 -0500 +++ b/static/scripts/trackster.js Wed Feb 10 12:17:38 2010 -0500 @@ -89,21 +89,34 @@ this.center = (this.max_high - this.max_low) / 2; this.zoom_factor = 3; this.zoom_level = 0; + this.track_id_counter = 0; }; $.extend( View.prototype, { add_track: function ( track ) { track.view = this; + track.track_id = this.track_id_counter; this.tracks.push( track ); if (track.init) { track.init(); } + track.container_div.attr('id', 'track_' + track.track_id); + this.track_id_counter += 1; }, add_label_track: function ( label_track ) { label_track.view = this; this.label_tracks.push( label_track ); }, remove_track: function( track ) { + track.container_div.fadeOut('slow', function() { $(this).remove(); }); delete this.tracks[track]; }, update_options: function() { + var sorted = $("ul#sortable-ul").sortable('toArray'); + var payload = []; + + var divs = $("#viewport > div").sort(function (a, b) { + return sorted.indexOf( $(a).attr('id') ) > sorted.indexOf( $(b).attr('id') ); + }); + $("#viewport > div").remove(); + $("#viewport").html(divs); for (var track_id in view.tracks) { var track = view.tracks[track_id]; if (track.update_options) { @@ -177,13 +190,13 @@ var Track = function ( name, parent_element ) { this.name = name; this.parent_element = parent_element; - this.make_container(); + this.init_global(); }; $.extend( Track.prototype, { - make_container: function () { + init_global: function () { this.header_div = $("<div class='track-header'>").text( this.name ); this.content_div = $("<div class='track-content'>"); - this.container_div = $("<div class='track'></div>").append( this.header_div ).append( this.content_div ); + this.container_div = $("<div></div>").addClass('track').append( this.header_div ).append( this.content_div ); this.parent_element.append( this.container_div ); } }); diff -r 445986a09dbb -r 1fc06b260097 templates/tracks/browser.mako --- a/templates/tracks/browser.mako Tue Feb 09 15:05:39 2010 -0500 +++ b/templates/tracks/browser.mako Wed Feb 10 12:17:38 2010 -0500 @@ -25,15 +25,6 @@ margin: 5px 0; background: #eee; } - .delete-button { - background: transparent url(history-buttons.png) no-repeat scroll 0 -104px; - height: 20px; - width: 20px; - } - .delete-button:hover { - background-position: 0 -130px; - } - </style> </%def> @@ -231,7 +222,6 @@ }); }); - hide_modal(); }, "Cancel": function() { @@ -307,23 +297,32 @@ function sidebar_box(track) { if (!track.hidden) { - var track_id = view.tracks.length -1; // Track was just added to view, so index is current length -1 - var label = $('<label for="track_' + track_id + 'title">' + track.name + '</label>'); - var title = $('<div class="historyItemTitle"></div>'); - var del_icon = $('<a style="display:block; float:right" href="#" class="icon-button delete" />'); - var body = $('<div class="historyItemBody"></div>'); - // var checkbox = $('<input type="checkbox" checked="checked"></input>').attr("id", "track_" + track_id + "title"); - var li = $('<li class="sortable"></li>').attr("id", "track_" + track_id); - var div = $('<div class="historyItemContainer historyItem"></div>'); - del_icon.prependTo(title); - label.appendTo(title); - // checkbox.prependTo(title); + var track_id = track.track_id, + label = $('<label for="track_' + track_id + 'title">' + track.name + '</label>'), + title = $('<div class="historyItemTitle"></div>'), + del_icon = $('<a style="display:block; float:right" href="#" class="icon-button delete" />'), + edit_icon = $('<a style="display:block; float:right" href="#" class="icon-button edit" />'), + body = $('<div class="historyItemBody"></div>'), + checkbox = $('<input type="checkbox" checked="checked"></input>').attr("id", "track_" + track_id + "title"), + li = $('<li class="sortable"></li>').attr("id", "track_" + track_id), + div = $('<div class="historyItemContainer historyItem"></div>'), + editable = $('<div style="display:none"></div>'); + + edit_icon.bind("click", function() { + editable.toggle(); + }); + + del_icon.bind("click", function() { + li.fadeOut('slow', function() { $(this).remove(); }); + view.remove_track(track); + view.update_options(); + }); + + title.append(label).append(del_icon).append(edit_icon); if (track.gen_options) { - body.append(track.gen_options(track_id)); + editable.append(track.gen_options(track_id)).appendTo(body); } - title.prependTo(div); - body.appendTo(div); - li.append(div); + div.append(title).append(body).appendTo(li) $("ul#sortable-ul").append(li); } };