[galaxy-commits] commit/galaxy-central: jgoecks: Trackster: refactor action icon creation and initialization.

23 Nov 2011

1 new commit in galaxy-central:


https://bitbucket.org/galaxy/galaxy-central/changeset/856aac70b018/
changeset:   856aac70b018
user:        jgoecks
date:        2011-11-23 22:11:39
summary:     Trackster: refactor action icon creation and initialization.
affected #:  1 file

diff -r 255f4bde822b4b9b36c1a9074cc6063a47127ff2 -r 856aac70b018de6a748cf49355677d4dbe27ddf6 static/scripts/trackster.js

--- a/static/scripts/trackster.js
+++ b/static/scripts/trackster.js
@@ -677,6 +677,7 @@
     this.prefs = this.config.values;
     this.drag_handle_class = drag_handle_class;
     this.is_overview = false;
+    this.action_icons = {};
     
     // FIXME: this should be a saved setting
     this.content_visible = true;
@@ -688,8 +689,10 @@
     if (this.header_div) { 
         this.container_div.append(this.header_div);
         
-        this.icons_div = this.build_icons_div().hide();
-        this.header_div.append(this.icons_div);
+        this.icons_div = $("<div/>").css("float", "left").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(); } );
@@ -706,6 +709,64 @@
     }
 };
 
+Drawable.prototype.action_icons_def = [
+    // Hide/show drawable content.
+    {
+        name: "toggle_icon",
+        title: "Hide/show content",
+        css_class: "toggle",
+        on_click_fn: function(drawable) {
+            if ( drawable.content_visible ) {
+                drawable.action_icons.toggle_icon.addClass("toggle-expand").removeClass("toggle");
+                drawable.hide_contents();
+                drawable.content_visible = false;
+            } else {
+                drawable.action_icons.toggle_icon.addClass("toggle").removeClass("toggle-expand");
+                drawable.content_visible = true;
+                drawable.show_contents();
+            }
+        }
+    },
+    // Edit settings.
+    {
+        name: "settings_icon",
+        title: "Edit settings",
+        css_class: "settings-icon",
+        on_click_fn: function(drawable) {
+            var cancel_fn = function() { hide_modal(); $(window).unbind("keypress.check_enter_esc"); },
+                ok_fn = function() { 
+                    drawable.config.update_from_form( $(".dialog-box") );
+                    hide_modal(); 
+                    $(window).unbind("keypress.check_enter_esc"); 
+                },
+                check_enter_esc = function(e) {
+                    if ((e.keyCode || e.which) === 27) { // Escape key
+                        cancel_fn();
+                    } else if ((e.keyCode || e.which) === 13) { // Enter key
+                        ok_fn();
+                    }
+                };
+
+            $(window).bind("keypress.check_enter_esc", check_enter_esc);        
+            show_modal("Configure", drawable.config.build_form(), {
+                "Cancel": cancel_fn,
+                "OK": ok_fn
+            });
+        }
+    },
+    // Remove.
+    {
+        name: "remove_icon",
+        title: "Remove",
+        css_class: "remove-icon",
+        on_click_fn: function(drawable) {
+            // Tipsy for remove icon must be deleted when drawable is deleted.
+            $(".tipsy").remove();
+            drawable.remove();
+        }
+    }
+];
+
 extend(Drawable.prototype, {
     init: function() {},
     request_draw: function() {},
@@ -749,9 +810,27 @@
      */
     build_header_div: function() {},
     /**
-     * Build drawable's icons div.
+     * Add an action icon to this object. Appends icon unless prepend flag is specified.
      */
-    build_icons_div: function() {},
+    add_action_icon: function(name, title, css_class, on_click_fn, prepend) {
+        var drawable = this;
+        this.action_icons[name] = $("<a/>").attr("href", "javascript:void(0);").attr("title", title)
+                                           .addClass("icon-button").addClass(css_class).tipsy( {gravity: 's'} )
+                                           .click( function() { on_click_fn(drawable); } )
+                                           .appendTo(this.icons_div);
+    },
+    /**
+     * 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);
+        }
+    },
     /**
      * Update icons.
      */
@@ -880,65 +959,6 @@
         this.name_div = $("<div/>").addClass("track-name").text(this.name).appendTo(header_div);
         return header_div;
     },
-    build_icons_div: function() {
-        var icons_div = $("<div/>").css("float", "left");
-
-        this.toggle_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Hide/show group content")
-                                    .addClass("icon-button toggle").tipsy( {gravity: 's'} )
-                                    .appendTo(icons_div);
-        this.settings_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Edit settings")
-                                      .addClass("icon-button settings-icon").tipsy( {gravity: 's'} )
-                                      .appendTo(icons_div);
-        this.remove_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Remove")
-                                    .addClass("icon-button remove-icon").tipsy( {gravity: 's'} )
-                                    .appendTo(icons_div);
-        var group = this;
-
-        // Toggle icon hides or shows the group content.
-        this.toggle_icon.click( function() {
-            if ( group.content_visible ) {
-                group.toggle_icon.addClass("toggle-expand").removeClass("toggle");
-                group.hide_contents();
-                group.content_visible = false;
-            } else {
-                group.toggle_icon.addClass("toggle").removeClass("toggle-expand");
-                group.content_visible = true;
-                group.show_contents();
-            }
-        });
-
-        // Clicking on settings icon opens group config.
-        this.settings_icon.click( function() {
-            var cancel_fn = function() { hide_modal(); $(window).unbind("keypress.check_enter_esc"); },
-                ok_fn = function() { 
-                    group.config.update_from_form( $(".dialog-box") );
-                    hide_modal(); 
-                    $(window).unbind("keypress.check_enter_esc"); 
-                },
-                check_enter_esc = function(e) {
-                    if ((e.keyCode || e.which) === 27) { // Escape key
-                        cancel_fn();
-                    } else if ((e.keyCode || e.which) === 13) { // Enter key
-                        ok_fn();
-                    }
-                };
-
-            $(window).bind("keypress.check_enter_esc", check_enter_esc);        
-            show_modal("Configure Group", group.config.build_form(), {
-                "Cancel": cancel_fn,
-                "OK": ok_fn
-            });
-        });
-        
-        // Clicking on remove icon removes group.
-        this.remove_icon.click( function() {
-            // Tipsy for remove icon must be deleted when group is deleted.
-            $(".tipsy").remove();
-            group.remove();
-        });
-        
-        return icons_div;        
-    },
     hide_contents : function () {
         this.content_div.hide();
     },
@@ -2493,7 +2513,64 @@
     this.content_div = $("<div class='track-content'>").appendTo(this.container_div);
     this.container.content_div.append(this.container_div);
 };
+
 extend(Track.prototype, Drawable.prototype, {
+    action_icons_def: [
+        // Change track mode.
+        {
+            name: "mode_icon",
+            title: "Set display mode",
+            css_class: "chevron-expand",
+            on_click_fn: function() {}
+        },
+        // Hide/show content.
+        Drawable.prototype.action_icons_def[0],
+        // Set track as overview.
+        {
+            name: "overview_icon",
+            title: "Set as overview",
+            css_class: "overview-icon",
+            on_click_fn: function() {
+                track.view.set_overview(track);
+            }
+        },
+        // Edit config.
+        Drawable.prototype.action_icons_def[1],
+        // Toggle track filters.
+        {
+            name: "filters_icon",
+            title: "Filters",
+            css_class: "filters-icon",
+            on_click_fn: function(track) {
+                // TODO: update tipsy text.            
+                track.filters_div.toggle();
+                track.filters_manager.reset_filters();
+            }
+        },
+        // Toggle track tool.
+        {
+            name: "tools_icon",
+            title: "Tools",
+            css_class: "tools-icon",
+            on_click_fn: function(track) {
+                // TODO: update tipsy text.
+
+                track.dynamic_tool_div.toggle();
+
+                // Update track name.
+                if (track.dynamic_tool_div.is(":visible")) {
+                    track.set_name(track.name + track.tool_region_and_parameters_str());
+                }
+                else {
+                    track.revert_name();
+                }
+                // HACK: name change modifies icon placement, which leaves tooltip incorrectly placed.
+                $(".tipsy").remove();
+            }
+        },
+        // Remove track.
+        Drawable.prototype.action_icons_def[2]
+    ],
     build_container_div: function () {
         return $("<div/>").addClass('track').attr("id", "track_" + this.id).css("position", "relative");
     },
@@ -2504,38 +2581,17 @@
                         .attr( "id", this.name.replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() );
         return header_div;
     },
-    build_icons_div: function() {
-        var icons_div = $("<div/>").css("float", "left");
-
-        // Track icons.
-        this.mode_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Set display mode")
-                                  .addClass("icon-button chevron-expand").tipsy( {gravity: 's'} ).appendTo(icons_div);
-        this.toggle_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Hide/show track content")
-                                    .addClass("icon-button toggle").tipsy( {gravity: 's'} )
-                                    .appendTo(icons_div);
-        this.settings_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Edit settings")
-                                      .addClass("icon-button settings-icon").tipsy( {gravity: 's'} )
-                                      .appendTo(icons_div);
-        this.overview_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Set as overview")
-                                      .addClass("icon-button overview-icon").tipsy( {gravity: 's'} )
-                                      .appendTo(icons_div);
-        this.filters_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Filters")
-                                     .addClass("icon-button filters-icon").tipsy( {gravity: 's'} )
-                                     .appendTo(icons_div).hide();
-        this.tools_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Tools")
-                                   .addClass("icon-button tools-icon").tipsy( {gravity: 's'} )
-                                   .appendTo(icons_div).hide();
-        this.remove_icon = $("<a/>").attr("href", "javascript:void(0);").attr("title", "Remove")
-                                    .addClass("icon-button remove-icon").tipsy( {gravity: 's'} )
-                                    .appendTo(icons_div);
+    build_action_icons: function() {
+        Drawable.prototype.build_action_icons.call(this, this.action_icons_def);
+        
+        // Set up behavior for modes popup.
         var track = this;
-
-        // Set up behavior for modes popup.
         if (track.display_modes !== undefined) {
             var init_mode = (track.config && track.config.values['mode'] ? 
                              track.config.values['mode'] : track.display_modes[0]);
             track.mode = init_mode;
-            this.mode_icon.attr("title", "Set display mode (now: " + track.mode + ")");
+            
+            this.action_icons.mode_icon.attr("title", "Set display mode (now: " + track.mode + ")");
 
             var mode_mapping = {};
             for (var i = 0, len = track.display_modes.length; i < len; i++) {
@@ -2550,79 +2606,8 @@
                 }(mode);
             }
 
-            make_popupmenu(this.mode_icon, mode_mapping);
+            make_popupmenu(this.action_icons.mode_icon, mode_mapping);
         }
-
-        // Toggle icon hides or shows the track content.
-        this.toggle_icon.click( function() {
-            if ( track.content_visible ) {
-                track.toggle_icon.addClass("toggle-expand").removeClass("toggle");
-                track.hide_contents();
-                track.content_visible = false;
-            } else {
-                track.toggle_icon.addClass("toggle").removeClass("toggle-expand");
-                track.content_visible = true;
-                track.show_contents();
-            }
-        });
-
-        // Clicking on settings icon opens track config.
-        this.settings_icon.click( function() {
-            var cancel_fn = function() { hide_modal(); $(window).unbind("keypress.check_enter_esc"); },
-                ok_fn = function() { 
-                    track.config.update_from_form( $(".dialog-box") );
-                    hide_modal(); 
-                    $(window).unbind("keypress.check_enter_esc"); 
-                },
-                check_enter_esc = function(e) {
-                    if ((e.keyCode || e.which) === 27) { // Escape key
-                        cancel_fn();
-                    } else if ((e.keyCode || e.which) === 13) { // Enter key
-                        ok_fn();
-                    }
-                };
-
-            $(window).bind("keypress.check_enter_esc", check_enter_esc);        
-            show_modal("Configure Track", track.config.build_form(), {
-                "Cancel": cancel_fn,
-                "OK": ok_fn
-            });
-        });
-
-        this.overview_icon.click( function() {
-            track.view.set_overview(track);
-        });
-
-        this.filters_icon.click( function() {
-            // TODO: update tipsy text.            
-            track.filters_div.toggle();
-            track.filters_manager.reset_filters();
-        });
-
-        this.tools_icon.click( function() {
-            // TODO: update tipsy text.
-
-            track.dynamic_tool_div.toggle();
-
-            // Update track name.
-            if (track.dynamic_tool_div.is(":visible")) {
-                track.set_name(track.name + track.tool_region_and_parameters_str());
-            }
-            else {
-                track.revert_name();
-            }
-            // HACK: name change modifies icon placement, which leaves tooltip incorrectly placed.
-            $(".tipsy").remove();
-        });
-
-        // Clicking on remove icon removes track.
-        this.remove_icon.click( function() {
-            // Tipsy for remove icon must be deleted when track is deleted.
-            $(".tipsy").remove();
-            track.remove();
-        });
-        
-        return icons_div;  
     },
     /**
      * Hide any elements that are part of the tracks contents area. Should
@@ -2808,7 +2793,7 @@
         track.config.values['mode'] = name;
         track.tile_cache.clear();
         track.request_draw();
-        this.mode_icon.attr("title", "Set display mode (now: " + track.mode + ")");
+        this.action_icons.mode_icon.attr("title", "Set display mode (now: " + track.mode + ")");
         return track;
      },
     /**
@@ -2821,20 +2806,20 @@
         // Show/hide filter icon.
         //
         if (track.filters_available > 0) {
-            track.filters_icon.show();
+            track.action_icons.filters_icon.show();
         }
         else {
-            track.filters_icon.hide();
+            track.action_icons.filters_icon.hide();
         }
         
         //
         // Show/hide tool icon.
         //
         if (track.tool) {
-            track.tools_icon.show();
+            track.action_icons.tools_icon.show();
         }
         else {
-            track.tools_icon.hide();
+            track.action_icons.tools_icon.hide();
         }
                         
         //
@@ -3506,7 +3491,7 @@
             } else if ( mode == "summary_tree" ) {
                 mode = "coverage histogram";
             }
-            this.mode_icon.attr("title", "Set display mode (now: Auto/" + mode + ")");
+            this.action_icons.mode_icon.attr("title", "Set display mode (now: Auto/" + mode + ")");
         }
     },
     /**

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.

    

[galaxy-commits] commit/galaxy-central: jgoecks: Trackster: refactor action icon creation and initialization.

Bitbucket