4 new commits in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/a89cb141be4e/ Changeset: a89cb141be4e User: jgoecks Date: 2014-07-08 22:16:36 Summary: Trackster: add Backbone view for track header. Affected #: 1 file diff -r 558e521c3934f3b02c0fa31a8b93803d08aabf22 -r a89cb141be4e7e138f436e0dabd9efa96a6a25ab static/scripts/viz/trackster/tracks.js --- a/static/scripts/viz/trackster/tracks.js +++ b/static/scripts/viz/trackster/tracks.js @@ -177,6 +177,30 @@ return Math.round(num * val) / val; } + +/** + * View for track/group header. + */ +var TrackHeaderView = Backbone.View.extend({ + className: 'track-header', + + initialize: function() { + // Watch and update name changes. + this.model.config.get('name').on('change:value', this.update_name, this); + this.render(); + }, + + render: function() { + this.$el.append($("<div/>").addClass(this.model.drag_handle_class)); + this.$el.append($("<div/>").addClass("track-name") + .text(this.model.config.get_value('name'))); + }, + + update_name: function() { + this.$el.find('.track-name').text(this.model.config.get_value('name')); + } +}); + /** * Drawables hierarchy: * @@ -327,7 +351,6 @@ set_name: function(new_name) { this.old_name = this.config.get_value('name'); this.config.set_value('name', new_name); - this.name_div.text(new_name); }, /** @@ -659,10 +682,10 @@ }, build_header_div: function() { - var header_div = $("<div/>").addClass("track-header"); - header_div.append($("<div/>").addClass(this.drag_handle_class)); - this.name_div = $("<div/>").addClass("track-name").text(this.config.get_value('name')).appendTo(header_div); - return header_div; + var header_view = new TrackHeaderView({ + model: this + }); + return header_view.$el; }, hide_contents: function () { @@ -2325,11 +2348,10 @@ }, build_header_div: function() { - var header_div = $("<div class='track-header'/>"); - if (this.view.editor) { this.drag_div = $("<div/>").addClass(this.drag_handle_class).appendTo(header_div); } - this.name_div = $("<div/>").addClass("track-name").appendTo(header_div).text(this.config.get_value('name')) - .attr( "id", this.config.get_value('name').replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() ); - return header_div; + var header_view = new TrackHeaderView({ + model: this + }); + return header_view.$el; }, /** https://bitbucket.org/galaxy/galaxy-central/commits/4ed4088326ec/ Changeset: 4ed4088326ec User: jgoecks Date: 2014-07-08 22:36:23 Summary: Trackster: clean up logic for creating track headers. Affected #: 2 files diff -r a89cb141be4e7e138f436e0dabd9efa96a6a25ab -r 4ed4088326ec129519ee11f71b308c9e329ad3bd static/scripts/viz/trackster/tracks.js --- a/static/scripts/viz/trackster/tracks.js +++ b/static/scripts/viz/trackster/tracks.js @@ -243,9 +243,16 @@ // Build Drawable HTML and behaviors. this.container_div = this.build_container_div(); - this.header_div = this.build_header_div(); - - if (this.header_div) { + this.header_div = null; + + // Use opt-out policy on header creation because this is the more frequent approach: + // unless flag set, create header. + if (obj_dict.header !== false) { + var header_view = new TrackHeaderView({ + model: this + }); + + this.header_div = header_view.$el; this.container_div.append(this.header_div); // Icons container. @@ -384,11 +391,6 @@ build_container_div: function() {}, /** - * Build drawable's header div. - */ - build_header_div: function() {}, - - /** * Add an action icon to this object. Appends icon unless prepend flag is specified. */ add_action_icon: function(name, title, css_class, on_click_fn, prepend, hide) { @@ -681,13 +683,6 @@ return container_div; }, - build_header_div: function() { - var header_view = new TrackHeaderView({ - model: this - }); - return header_view.$el; - }, - hide_contents: function () { this.tiles_div.hide(); }, @@ -2347,13 +2342,6 @@ return $("<div/>").addClass('track').attr("id", "track_" + this.id); }, - build_header_div: function() { - var header_view = new TrackHeaderView({ - model: this - }); - return header_view.$el; - }, - /** * Set track's dataset. */ @@ -3348,15 +3336,13 @@ }); var LabelTrack = function (view, container) { - var obj_dict = { - resize: false - }; - Track.call(this, view, container, obj_dict); + Track.call(this, view, container, { + resize: false, + header: false + }); this.container_div.addClass( "label-track" ); }; extend(LabelTrack.prototype, Track.prototype, { - build_header_div: function() {}, - init: function() { // Enable by default because there should always be data when drawing track. this.enabled = true; @@ -3618,7 +3604,7 @@ * Displays reference genome data. */ var ReferenceTrack = function (view) { - TiledTrack.call(this, view, { content_div: view.top_labeltrack }, { resize: false }); + TiledTrack.call(this, view, { content_div: view.top_labeltrack }, { resize: false, header: false }); // Use offset to ensure that bases at tile edges are drawn. this.left_offset = view.canvas_manager.char_width_px; @@ -3636,8 +3622,6 @@ { key: 'height', type: 'int', default_value: 13, hidden: true } ] ), - build_header_div: function() {}, - init: function() { this.data_manager.clear(); // Enable by default because there should always be data when drawing track. diff -r a89cb141be4e7e138f436e0dabd9efa96a6a25ab -r 4ed4088326ec129519ee11f71b308c9e329ad3bd static/scripts/viz/trackster_ui.js --- a/static/scripts/viz/trackster_ui.js +++ b/static/scripts/viz/trackster_ui.js @@ -225,7 +225,7 @@ // Create view. var self = this, - view = new tracks.TracksterView(view_config); + view = new tracks.TracksterView(_.extend(view_config, {header: false})); view.editor = true; $.when( view.load_chroms_deferred ).then(function(chrom_info) { // Viewport config. https://bitbucket.org/galaxy/galaxy-central/commits/28470b4c9f5f/ Changeset: 28470b4c9f5f User: jgoecks Date: 2014-07-08 23:10:58 Summary: Trackster: move icon rendering into Backbone view. Affected #: 1 file diff -r 4ed4088326ec129519ee11f71b308c9e329ad3bd -r 28470b4c9f5ffc52bdad71c24c754af615cd283c static/scripts/viz/trackster/tracks.js --- a/static/scripts/viz/trackster/tracks.js +++ b/static/scripts/viz/trackster/tracks.js @@ -194,10 +194,82 @@ this.$el.append($("<div/>").addClass(this.model.drag_handle_class)); this.$el.append($("<div/>").addClass("track-name") .text(this.model.config.get_value('name'))); + + // Icons container. + this.action_icons = {}; + this.render_action_icons(); + + this.$el.append( $("<div style='clear: both'/>") ); + + // Suppress double clicks in header so that they do not impact viz under header. + this.$el.dblclick( function(e) { e.stopPropagation(); } ); + + // Needed for floating elts in header. + $("<div style='clear: both'/>").appendTo(this.container_div); }, update_name: function() { this.$el.find('.track-name').text(this.model.config.get_value('name')); + }, + + render_action_icons: function() { + var self = this; + this.icons_div = $("<div/>").addClass('track-icons').hide().appendTo(this.$el); + _.each(this.model.action_icons_def, function(icon_dict) { + self.add_action_icon(icon_dict.name, icon_dict.title, icon_dict.css_class, + icon_dict.on_click_fn, icon_dict.prepend, icon_dict.hide); + }); + + // Set up behavior for modes popup. + this.set_display_modes(this.model.display_modes); + }, + + /** + * Add an action icon to this object. Appends icon unless prepend flag is specified. + */ + add_action_icon: function(name, title, css_class, on_click_fn, prepend, hide) { + var self = this; + this.action_icons[name] = $("<a/>").attr("title", title) + .addClass("icon-button").addClass(css_class).tooltip() + .click( function() { on_click_fn(self.model); } ) + .appendTo(this.icons_div); + if (hide) { + this.action_icons[name].hide(); + } + }, + + /** + * Set track's modes and update mode icon popup. + */ + set_display_modes: function(new_modes, init_mode) { + if (!new_modes) { return; } + + // HACK: move this out of view and into track. + + // Set modes, init mode. + this.model.display_modes = new_modes; + this.model.mode = (init_mode || this.model.config.get_value('mode') || this.model.display_modes[0]); + + this.action_icons.mode_icon.attr("title", "Set display mode (now: " + this.mode + ")"); + + // Setup popup menu for changing modes. + var self = this, + track = this.model, + mode_mapping = {}; + for (var i = 0, len = track.display_modes.length; i < len; i++) { + var mode = track.display_modes[i]; + mode_mapping[mode] = function(mode) { + return function() { + track.change_mode(mode); + // HACK: the popup menu messes with the track's hover event, so manually show/hide + // icons div for now. + //self.icons_div.show(); + //track.container_div.mouseleave(function() { track.icons_div.hide(); } ); + }; + }(mode); + } + + make_popupmenu(this.action_icons.mode_icon, mode_mapping); } }); @@ -254,24 +326,13 @@ this.header_div = header_view.$el; this.container_div.append(this.header_div); - - // Icons container. - this.icons_div = $("<div/>").addClass('track-icons').hide().appendTo(this.header_div); - this.build_action_icons(this.action_icons_def); - - this.header_div.append( $("<div style='clear: both'/>") ); - - // Suppress double clicks in header so that they do not impact viz. - this.header_div.dblclick( function(e) { e.stopPropagation(); } ); - + // Show icons when users is hovering over track. - var drawable = this; + var icons_div = header_view.icons_div; + this.action_icons = header_view.action_icons; this.container_div.hover( - function() { drawable.icons_div.show(); }, function() { drawable.icons_div.hide(); } + function() { icons_div.show(); }, function() { icons_div.hide(); } ); - - // Needed for floating elts in header. - $("<div style='clear: both'/>").appendTo(this.container_div); } }; @@ -389,33 +450,6 @@ * Build drawable's container div; this is the parent div for all drawable's elements. */ build_container_div: function() {}, - - /** - * Add an action icon to this object. Appends icon unless prepend flag is specified. - */ - add_action_icon: function(name, title, css_class, on_click_fn, prepend, hide) { - var drawable = this; - this.action_icons[name] = $("<a/>").attr("title", title) - .addClass("icon-button").addClass(css_class).tooltip() - .click( function() { on_click_fn(drawable); } ) - .appendTo(this.icons_div); - if (hide) { - this.action_icons[name].hide(); - } - }, - - /** - * Build drawable's icons div from object's icons_dict. - */ - build_action_icons: function(action_icons_def) { - // Create icons. - var icon_dict; - for (var i = 0; i < action_icons_def.length; i++) { - icon_dict = action_icons_def[i]; - this.add_action_icon(icon_dict.name, icon_dict.title, icon_dict.css_class, - icon_dict.on_click_fn, icon_dict.prepend, icon_dict.hide); - } - }, /** * Update icons. @@ -2395,46 +2429,6 @@ }, /** - * Set track's modes and update mode icon popup. - */ - set_display_modes: function(new_modes, init_mode) { - // Set modes, init mode. - this.display_modes = new_modes; - this.mode = (init_mode ? init_mode : - (this.config && this.config.get_value('mode') ? - this.config.get_value('mode') : this.display_modes[0]) - ); - - this.action_icons.mode_icon.attr("title", "Set display mode (now: " + this.mode + ")"); - - // Setup popup menu for changing modes. - var track = this, - mode_mapping = {}; - for (var i = 0, len = track.display_modes.length; i < len; i++) { - var mode = track.display_modes[i]; - mode_mapping[mode] = function(mode) { - return function() { - track.change_mode(mode); - // HACK: the popup menu messes with the track's hover event, so manually show/hide - // icons div for now. - track.icons_div.show(); - track.container_div.mouseleave(function() { track.icons_div.hide(); } ); }; - }(mode); - } - - make_popupmenu(this.action_icons.mode_icon, mode_mapping); - }, - - build_action_icons: function() { - Drawable.prototype.build_action_icons.call(this, this.action_icons_def); - - // Set up behavior for modes popup. - if (this.display_modes !== undefined) { - this.set_display_modes(this.display_modes); - } - }, - - /** * Hide any elements that are part of the tracks contents area. Should * remove as approprite, the track will be redrawn by show_contents. */ https://bitbucket.org/galaxy/galaxy-central/commits/f53d750acf55/ Changeset: f53d750acf55 User: jgoecks Date: 2014-07-08 23:26:29 Summary: Client-side viz framework: create viz_views.js for visualization view objects and add TrackHeaderView to viz_views. Affected #: 2 files diff -r 28470b4c9f5ffc52bdad71c24c754af615cd283c -r f53d750acf557eeb84fa62c4151074c5fe5b7039 static/scripts/viz/trackster/tracks.js --- a/static/scripts/viz/trackster/tracks.js +++ b/static/scripts/viz/trackster/tracks.js @@ -1,7 +1,7 @@ -define( ["libs/underscore", "viz/visualization", "viz/trackster/util", +define( ["libs/underscore", "viz/visualization", "viz/viz_views", "viz/trackster/util", "viz/trackster/slotting", "viz/trackster/painters", "viz/trackster/filters", "mvc/data", "mvc/tools", "utils/config" ], - function(_, visualization, util, slotting, painters, filters_mod, data, tools_mod, config_mod) { + function(_, visualization, viz_views, util, slotting, painters, filters_mod, data, tools_mod, config_mod) { var extend = _.extend; @@ -177,102 +177,6 @@ return Math.round(num * val) / val; } - -/** - * View for track/group header. - */ -var TrackHeaderView = Backbone.View.extend({ - className: 'track-header', - - initialize: function() { - // Watch and update name changes. - this.model.config.get('name').on('change:value', this.update_name, this); - this.render(); - }, - - render: function() { - this.$el.append($("<div/>").addClass(this.model.drag_handle_class)); - this.$el.append($("<div/>").addClass("track-name") - .text(this.model.config.get_value('name'))); - - // Icons container. - this.action_icons = {}; - this.render_action_icons(); - - this.$el.append( $("<div style='clear: both'/>") ); - - // Suppress double clicks in header so that they do not impact viz under header. - this.$el.dblclick( function(e) { e.stopPropagation(); } ); - - // Needed for floating elts in header. - $("<div style='clear: both'/>").appendTo(this.container_div); - }, - - update_name: function() { - this.$el.find('.track-name').text(this.model.config.get_value('name')); - }, - - render_action_icons: function() { - var self = this; - this.icons_div = $("<div/>").addClass('track-icons').hide().appendTo(this.$el); - _.each(this.model.action_icons_def, function(icon_dict) { - self.add_action_icon(icon_dict.name, icon_dict.title, icon_dict.css_class, - icon_dict.on_click_fn, icon_dict.prepend, icon_dict.hide); - }); - - // Set up behavior for modes popup. - this.set_display_modes(this.model.display_modes); - }, - - /** - * Add an action icon to this object. Appends icon unless prepend flag is specified. - */ - add_action_icon: function(name, title, css_class, on_click_fn, prepend, hide) { - var self = this; - this.action_icons[name] = $("<a/>").attr("title", title) - .addClass("icon-button").addClass(css_class).tooltip() - .click( function() { on_click_fn(self.model); } ) - .appendTo(this.icons_div); - if (hide) { - this.action_icons[name].hide(); - } - }, - - /** - * Set track's modes and update mode icon popup. - */ - set_display_modes: function(new_modes, init_mode) { - if (!new_modes) { return; } - - // HACK: move this out of view and into track. - - // Set modes, init mode. - this.model.display_modes = new_modes; - this.model.mode = (init_mode || this.model.config.get_value('mode') || this.model.display_modes[0]); - - this.action_icons.mode_icon.attr("title", "Set display mode (now: " + this.mode + ")"); - - // Setup popup menu for changing modes. - var self = this, - track = this.model, - mode_mapping = {}; - for (var i = 0, len = track.display_modes.length; i < len; i++) { - var mode = track.display_modes[i]; - mode_mapping[mode] = function(mode) { - return function() { - track.change_mode(mode); - // HACK: the popup menu messes with the track's hover event, so manually show/hide - // icons div for now. - //self.icons_div.show(); - //track.container_div.mouseleave(function() { track.icons_div.hide(); } ); - }; - }(mode); - } - - make_popupmenu(this.action_icons.mode_icon, mode_mapping); - } -}); - /** * Drawables hierarchy: * @@ -320,7 +224,7 @@ // Use opt-out policy on header creation because this is the more frequent approach: // unless flag set, create header. if (obj_dict.header !== false) { - var header_view = new TrackHeaderView({ + var header_view = new viz_views.TrackHeaderView({ model: this }); diff -r 28470b4c9f5ffc52bdad71c24c754af615cd283c -r f53d750acf557eeb84fa62c4151074c5fe5b7039 static/scripts/viz/viz_views.js --- /dev/null +++ b/static/scripts/viz/viz_views.js @@ -0,0 +1,102 @@ +define( ["libs/underscore"], function(_) { + +/** + * View for track/group header. + */ +var TrackHeaderView = Backbone.View.extend({ + className: 'track-header', + + initialize: function() { + // Watch and update name changes. + this.model.config.get('name').on('change:value', this.update_name, this); + this.render(); + }, + + render: function() { + this.$el.append($("<div/>").addClass(this.model.drag_handle_class)); + this.$el.append($("<div/>").addClass("track-name") + .text(this.model.config.get_value('name'))); + + // Icons container. + this.action_icons = {}; + this.render_action_icons(); + + this.$el.append( $("<div style='clear: both'/>") ); + + // Suppress double clicks in header so that they do not impact viz under header. + this.$el.dblclick( function(e) { e.stopPropagation(); } ); + + // Needed for floating elts in header. + $("<div style='clear: both'/>").appendTo(this.container_div); + }, + + update_name: function() { + this.$el.find('.track-name').text(this.model.config.get_value('name')); + }, + + render_action_icons: function() { + var self = this; + this.icons_div = $("<div/>").addClass('track-icons').hide().appendTo(this.$el); + _.each(this.model.action_icons_def, function(icon_dict) { + self.add_action_icon(icon_dict.name, icon_dict.title, icon_dict.css_class, + icon_dict.on_click_fn, icon_dict.prepend, icon_dict.hide); + }); + + // Set up behavior for modes popup. + this.set_display_modes(this.model.display_modes); + }, + + /** + * Add an action icon to this object. Appends icon unless prepend flag is specified. + */ + add_action_icon: function(name, title, css_class, on_click_fn, prepend, hide) { + var self = this; + this.action_icons[name] = $("<a/>").attr("title", title) + .addClass("icon-button").addClass(css_class).tooltip() + .click( function() { on_click_fn(self.model); } ) + .appendTo(this.icons_div); + if (hide) { + this.action_icons[name].hide(); + } + }, + + /** + * Set track's modes and update mode icon popup. + */ + set_display_modes: function(new_modes, init_mode) { + if (!new_modes) { return; } + + // HACK: move this out of view and into track. + + // Set modes, init mode. + this.model.display_modes = new_modes; + this.model.mode = (init_mode || this.model.config.get_value('mode') || this.model.display_modes[0]); + + this.action_icons.mode_icon.attr("title", "Set display mode (now: " + this.mode + ")"); + + // Setup popup menu for changing modes. + var self = this, + track = this.model, + mode_mapping = {}; + for (var i = 0, len = track.display_modes.length; i < len; i++) { + var mode = track.display_modes[i]; + mode_mapping[mode] = function(mode) { + return function() { + track.change_mode(mode); + // HACK: the popup menu messes with the track's hover event, so manually show/hide + // icons div for now. + //self.icons_div.show(); + //track.container_div.mouseleave(function() { track.icons_div.hide(); } ); + }; + }(mode); + } + + make_popupmenu(this.action_icons.mode_icon, mode_mapping); + } +}); + +return { + TrackHeaderView: TrackHeaderView +}; + +}); \ No newline at end of file Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.