Client build: remove ui.js; modularize icon button from ui.js

client/galaxy/scripts/mvc/data.js

@@ -1,5 +1,5 @@
 // Additional dependencies: jQuery, underscore.
-define(['mvc/ui/ui-modal', 'mvc/ui/ui-frames'], function(Modal, Frames) {
+define(['mvc/ui/ui-modal', 'mvc/ui/ui-frames', 'mvc/ui/icon-button'], function(Modal, Frames, mod_icon_btn) {
 
 /**
  * Dataset metedata.
@@ -447,8 +447,8 @@ var TabularButtonTracksterView = Backbone.View.extend({
         }
 
         // create the icon
-        var btn_viz = new IconButtonView({
+        var btn_viz = new mod_icon_btn.IconButtonView({
-            model : new IconButton({
+            model : new mod_icon_btn.IconButton({
                 title       : 'Visualize',
                 icon_class  : 'chart_curve',
                 id          : 'btn_viz'

client/galaxy/scripts/mvc/ui/icon-button.js

@@ -1,7 +1,8 @@
-/**
+define([
- * functions for creating major ui elements
+    //jquery
- */
+    //backbone
-
+], function(){
+//=============================================================================
 /**
  * backbone model for icon buttons
  */
@@ -35,7 +36,7 @@ var IconButtonView = Backbone.View.extend({
     render : function( ){
         // hide tooltip
         this.$el.tooltip( 'hide' );
-        
+
         var new_elem = this.template( this.model.toJSON() );
         // configure tooltip
         new_elem.tooltip( this.model.get( 'tooltip_config' ));
@@ -43,11 +44,11 @@ var IconButtonView = Backbone.View.extend({
         this.setElement( new_elem );
         return this;
     },
-    
+
     events : {
         'click' : 'click'
     },
-    
+
     click : function( event ){
         // if on_click pass to that function
         if( _.isFunction( this.model.get( 'on_click' ) ) ){
@@ -57,28 +58,28 @@ var IconButtonView = Backbone.View.extend({
         // otherwise, bubble up ( to href or whatever )
         return true;
     },
-    
+
     // generate html element
     template: function( options ){
         var buffer = 'title="' + options.title + '" class="icon-button';
-    
+
         if( options.is_menu_button ){
             buffer += ' menu-button';
         }
-        
+
         buffer += ' ' + options.icon_class;
-    
+
         if( !options.enabled ){
             buffer += '_disabled';
         }
-        
+
         // close class tag
         buffer += '"';
-    
+
         if( options.id ){
             buffer += ' id="' + options.id + '"';
         }
-        
+
         buffer += ' href="' + options.href + '"';
         // add target for href
         if( options.target ){
@@ -88,14 +89,14 @@ var IconButtonView = Backbone.View.extend({
         if( !options.visible ){
             buffer += ' style="display: none;"';
         }
-    
+
         // enabled/disabled
         if ( options.enabled ){
             buffer = '<a ' + buffer + '/>';
         } else {
             buffer = '<span ' + buffer + '/>';
         }
-            
+
         // return element
         return $( buffer );
     }
@@ -117,7 +118,7 @@ var IconButtonMenuView = Backbone.View.extend({
     initialize: function(){
         this.render();
     },
-    
+
     render: function(){
         // initialize icon buttons
         var self = this;
@@ -142,7 +143,7 @@ var IconButtonMenuView = Backbone.View.extend({
                 make_popupmenu(elt, menu_options);
             }
         });
-        
+
         // return
         return this;
     }
@@ -160,12 +161,23 @@ var create_icon_buttons_menu = function(config, global_config)
     if (!global_config) global_config = {};
 
     // create and initialize menu
-    var buttons = new IconButtonCollection( 
+    var buttons = new IconButtonCollection(
         _.map(config, function(button_config){
             return new IconButton(_.extend(button_config, global_config));
         })
     );
-    
+
     // return menu
     return new IconButtonMenuView( {collection: buttons} );
 };
+
+
+//=============================================================================
+    return {
+        IconButton              : IconButton,
+        IconButtonView          : IconButtonView,
+        IconButtonCollection    : IconButtonCollection,
+        IconButtonMenuView      : IconButtonMenuView,
+        create_icon_buttons_menu: create_icon_buttons_menu
+    };
+})

client/galaxy/scripts/viz/circster.js

@@ -2,8 +2,9 @@
 require(
 [
     'utils/utils',
+    'mvc/ui/icon-button',
     'libs/farbtastic',
-], function(mod_utils)
+], function(mod_utils, mod_icon_btn)
 {
     // load css
     mod_utils.cssLoadFile("static/style/circster.css");
@@ -1075,7 +1076,7 @@ var Circster = Backbone.View.extend(
         $('#center .unified-panel-header-inner').append(galaxy_config.app.viz_config.title + " " + galaxy_config.app.viz_config.dbkey);
     
         // setup menu
-        var menu = create_icon_buttons_menu([
+        var menu = mod_icon_btn.create_icon_buttons_menu([
         {
             icon_class: 'plus-button', title: 'Add tracks', on_click: function()
             {

client/galaxy/scripts/viz/phyloviz.js

@@ -1,4 +1,9 @@
-define(['libs/d3', 'viz/visualization', 'mvc/data'], function(d3, visualization_mod, data_mod) {
+define([
+    'libs/d3',
+    'viz/visualization',
+    'mvc/data',
+    'mvc/ui/icon-button'
+], function(d3, visualization_mod, data_mod, mod_icon_btn) {
 
 /**
  * Base class of any menus that takes in user interaction. Contains checking methods.
@@ -720,7 +725,7 @@ var HeaderButtons = Backbone.View.extend({
     initRightHeaderBtns : function(){
         var self = this;
 
-        rightMenu = create_icon_buttons_menu([
+        rightMenu = mod_icon_btn.create_icon_buttons_menu([
             { icon_class: 'gear', title: 'PhyloViz Settings', on_click: function(){
                 $("#SettingsMenu").show();
                 self.settingsMenu.updateUI();
@@ -748,7 +753,7 @@ var HeaderButtons = Backbone.View.extend({
 
     initNavBtns: function() {
         var self = this,
-            navMenu = create_icon_buttons_menu([
+            navMenu = mod_icon_btn.create_icon_buttons_menu([
                 { icon_class: 'zoom-in', title: 'Zoom in', on_click: function() {
                     self.phylovizView.zoomAndPan({ zoom : "+"});
                 } },

client/galaxy/scripts/viz/sweepster.js

@@ -3,8 +3,8 @@
  * genomic visualization.
  */
 
-define(["libs/underscore", "libs/d3", "viz/trackster/util", "viz/visualization", "viz/trackster/tracks", "mvc/tools", "mvc/data", "utils/config"], 
+define(["libs/underscore", "libs/d3", "viz/trackster/util", "viz/visualization", "viz/trackster/tracks", "mvc/tools", "mvc/data", "utils/config", "mvc/ui/icon-button"],
-       function(_, d3, util, visualization, tracks, tools, data, config) {
+       function(_, d3, util, visualization, tracks, tools, data, config, mod_icon_btn) {
 
 /**
  * A collection of tool input settings. Object is useful for keeping a list of settings 
@@ -375,7 +375,7 @@ var SweepsterTrackView = Backbone.View.extend({
                 settings_div.toggle();
                 self.trigger('run_on_dataset', settings);
             });
-        var icon_menu = create_icon_buttons_menu([
+        var icon_menu = mod_icon_btn.create_icon_buttons_menu([
             {
                 title: 'Settings',
                 icon_class: 'gear track-settings',
@@ -486,7 +486,7 @@ var ToolInputValOrSweepView = Backbone.View.extend({
 
         // Add buttons for adding/removing parameter.
         var self = this,
-            menu = create_icon_buttons_menu([
+            menu = mod_icon_btn.create_icon_buttons_menu([
             {
                 title: 'Add parameter to tree',
                 icon_class: 'plus-button',
@@ -723,7 +723,7 @@ var SweepsterVisualizationView = Backbone.View.extend({
 
         // Help includes text and a close button.
         var help_div = $(this.helpText).addClass('help'),
-            close_button = create_icon_buttons_menu([
+            close_button = mod_icon_btn.create_icon_buttons_menu([
             {
                 title: 'Close',
                 icon_class: 'cross-circle',
@@ -745,7 +745,7 @@ var SweepsterVisualizationView = Backbone.View.extend({
         this.handle_node_clicks();
 
         // Set up visualization menu.
-        var menu = create_icon_buttons_menu(
+        var menu = mod_icon_btn.create_icon_buttons_menu(
             [
                 // Save.
                 /*
@@ -939,4 +939,4 @@ return {
     SweepsterVisualizationView: SweepsterVisualizationView
 };
 
-});
+});

client/galaxy/scripts/viz/trackster.js

@@ -12,6 +12,7 @@ require(
 [
     // load js libraries
     'utils/utils',
+    'mvc/ui/icon-button',
     'libs/jquery/jquery.event.drag',
     'libs/jquery/jquery.event.hover',
     'libs/jquery/jquery.mousewheel',
@@ -21,7 +22,7 @@ require(
     'libs/jquery/jquery.form',
     'libs/jquery/jquery.rating',
     'mvc/ui'
-], function(mod_utils)
+], function(mod_utils, mod_icon_btn)
 {
     // load css
     mod_utils.cssLoadFile("static/style/jquery.rating.css");
@@ -101,7 +102,7 @@ var TracksterUI = base.Base.extend({
      */ 
     createButtonMenu: function() {
         var self = this,
-            menu = create_icon_buttons_menu([
+            menu = mod_icon_btn.create_icon_buttons_menu([
             { icon_class: 'plus-button', title: 'Add tracks', on_click: function() { 
                 visualization.select_datasets(galaxy_config.root + "visualization/list_current_history_datasets", galaxy_config.root + "api/datasets", { 'f-dbkey': view.dbkey }, 
                 function(new_tracks) {
@@ -571,4 +572,4 @@ return {
     GalaxyApp : TracksterView
 };
 
-});
+});

static/scripts/mvc/data.js

@@ -1,5 +1,5 @@
 // Additional dependencies: jQuery, underscore.
-define(['mvc/ui/ui-modal', 'mvc/ui/ui-frames'], function(Modal, Frames) {
+define(['mvc/ui/ui-modal', 'mvc/ui/ui-frames', 'mvc/ui/icon-button'], function(Modal, Frames, mod_icon_btn) {
 
 /**
  * Dataset metedata.
@@ -447,8 +447,8 @@ var TabularButtonTracksterView = Backbone.View.extend({
         }
 
         // create the icon
-        var btn_viz = new IconButtonView({
+        var btn_viz = new mod_icon_btn.IconButtonView({
-            model : new IconButton({
+            model : new mod_icon_btn.IconButton({
                 title       : 'Visualize',
                 icon_class  : 'chart_curve',
                 id          : 'btn_viz'

static/scripts/mvc/ui/icon-button.js

@@ -1,7 +1,8 @@
-/**
+define([
- * functions for creating major ui elements
+    //jquery
- */
+    //backbone
-
+], function(){
+//=============================================================================
 /**
  * backbone model for icon buttons
  */
@@ -35,7 +36,7 @@ var IconButtonView = Backbone.View.extend({
     render : function( ){
         // hide tooltip
         this.$el.tooltip( 'hide' );
-        
+
         var new_elem = this.template( this.model.toJSON() );
         // configure tooltip
         new_elem.tooltip( this.model.get( 'tooltip_config' ));
@@ -43,11 +44,11 @@ var IconButtonView = Backbone.View.extend({
         this.setElement( new_elem );
         return this;
     },
-    
+
     events : {
         'click' : 'click'
     },
-    
+
     click : function( event ){
         // if on_click pass to that function
         if( _.isFunction( this.model.get( 'on_click' ) ) ){
@@ -57,28 +58,28 @@ var IconButtonView = Backbone.View.extend({
         // otherwise, bubble up ( to href or whatever )
         return true;
     },
-    
+
     // generate html element
     template: function( options ){
         var buffer = 'title="' + options.title + '" class="icon-button';
-    
+
         if( options.is_menu_button ){
             buffer += ' menu-button';
         }
-        
+
         buffer += ' ' + options.icon_class;
-    
+
         if( !options.enabled ){
             buffer += '_disabled';
         }
-        
+
         // close class tag
         buffer += '"';
-    
+
         if( options.id ){
             buffer += ' id="' + options.id + '"';
         }
-        
+
         buffer += ' href="' + options.href + '"';
         // add target for href
         if( options.target ){
@@ -88,14 +89,14 @@ var IconButtonView = Backbone.View.extend({
         if( !options.visible ){
             buffer += ' style="display: none;"';
         }
-    
+
         // enabled/disabled
         if ( options.enabled ){
             buffer = '<a ' + buffer + '/>';
         } else {
             buffer = '<span ' + buffer + '/>';
         }
-            
+
         // return element
         return $( buffer );
     }
@@ -117,7 +118,7 @@ var IconButtonMenuView = Backbone.View.extend({
     initialize: function(){
         this.render();
     },
-    
+
     render: function(){
         // initialize icon buttons
         var self = this;
@@ -142,7 +143,7 @@ var IconButtonMenuView = Backbone.View.extend({
                 make_popupmenu(elt, menu_options);
             }
         });
-        
+
         // return
         return this;
     }
@@ -160,12 +161,23 @@ var create_icon_buttons_menu = function(config, global_config)
     if (!global_config) global_config = {};
 
     // create and initialize menu
-    var buttons = new IconButtonCollection( 
+    var buttons = new IconButtonCollection(
         _.map(config, function(button_config){
             return new IconButton(_.extend(button_config, global_config));
         })
     );
-    
+
     // return menu
     return new IconButtonMenuView( {collection: buttons} );
 };
+
+
+//=============================================================================
+    return {
+        IconButton              : IconButton,
+        IconButtonView          : IconButtonView,
+        IconButtonCollection    : IconButtonCollection,
+        IconButtonMenuView      : IconButtonMenuView,
+        create_icon_buttons_menu: create_icon_buttons_menu
+    };
+})

static/scripts/packed/mvc/ui.js

@@ -1 +0,0 @@
-var IconButton=Backbone.Model.extend({defaults:{title:"",icon_class:"",on_click:null,menu_options:null,is_menu_button:true,id:null,href:null,target:null,enabled:true,visible:true,tooltip_config:{}}});var IconButtonView=Backbone.View.extend({initialize:function(){this.model.attributes.tooltip_config={placement:"bottom"};this.model.bind("change",this.render,this)},render:function(){this.$el.tooltip("hide");var a=this.template(this.model.toJSON());a.tooltip(this.model.get("tooltip_config"));this.$el.replaceWith(a);this.setElement(a);return this},events:{click:"click"},click:function(a){if(_.isFunction(this.model.get("on_click"))){this.model.get("on_click")(a);return false}return true},template:function(b){var a='title="'+b.title+'" class="icon-button';if(b.is_menu_button){a+=" menu-button"}a+=" "+b.icon_class;if(!b.enabled){a+="_disabled"}a+='"';if(b.id){a+=' id="'+b.id+'"'}a+=' href="'+b.href+'"';if(b.target){a+=' target="'+b.target+'"'}if(!b.visible){a+=' style="display: none;"'}if(b.enabled){a="<a "+a+"/>"}else{a="<span "+a+"/>"}return $(a)}});var IconButtonCollection=Backbone.Collection.extend({model:IconButton});var IconButtonMenuView=Backbone.View.extend({tagName:"div",initialize:function(){this.render()},render:function(){var a=this;this.collection.each(function(d){var b=$("<a/>").attr("href","javascript:void(0)").attr("title",d.attributes.title).addClass("icon-button menu-button").addClass(d.attributes.icon_class).appendTo(a.$el).click(d.attributes.on_click);if(d.attributes.tooltip_config){b.tooltip(d.attributes.tooltip_config)}var c=d.get("options");if(c){make_popupmenu(b,c)}});return this}});var create_icon_buttons_menu=function(b,a){if(!a){a={}}var c=new IconButtonCollection(_.map(b,function(d){return new IconButton(_.extend(d,a))}));return new IconButtonMenuView({collection:c})};

static/scripts/packed/mvc/ui/icon-button.js

@@ -0,0 +1 @@
+define([],function(){var e=Backbone.Model.extend({defaults:{title:"",icon_class:"",on_click:null,menu_options:null,is_menu_button:true,id:null,href:null,target:null,enabled:true,visible:true,tooltip_config:{}}});var d=Backbone.View.extend({initialize:function(){this.model.attributes.tooltip_config={placement:"bottom"};this.model.bind("change",this.render,this)},render:function(){this.$el.tooltip("hide");var f=this.template(this.model.toJSON());f.tooltip(this.model.get("tooltip_config"));this.$el.replaceWith(f);this.setElement(f);return this},events:{click:"click"},click:function(f){if(_.isFunction(this.model.get("on_click"))){this.model.get("on_click")(f);return false}return true},template:function(g){var f='title="'+g.title+'" class="icon-button';if(g.is_menu_button){f+=" menu-button"}f+=" "+g.icon_class;if(!g.enabled){f+="_disabled"}f+='"';if(g.id){f+=' id="'+g.id+'"'}f+=' href="'+g.href+'"';if(g.target){f+=' target="'+g.target+'"'}if(!g.visible){f+=' style="display: none;"'}if(g.enabled){f="<a "+f+"/>"}else{f="<span "+f+"/>"}return $(f)}});var a=Backbone.Collection.extend({model:e});var b=Backbone.View.extend({tagName:"div",initialize:function(){this.render()},render:function(){var f=this;this.collection.each(function(i){var g=$("<a/>").attr("href","javascript:void(0)").attr("title",i.attributes.title).addClass("icon-button menu-button").addClass(i.attributes.icon_class).appendTo(f.$el).click(i.attributes.on_click);if(i.attributes.tooltip_config){g.tooltip(i.attributes.tooltip_config)}var h=i.get("options");if(h){make_popupmenu(g,h)}});return this}});var c=function(g,f){if(!f){f={}}var h=new a(_.map(g,function(i){return new e(_.extend(i,f))}));return new b({collection:h})};return{IconButton:e,IconButtonView:d,IconButtonCollection:a,IconButtonMenuView:b,create_icon_buttons_menu:c}});

static/scripts/viz/circster.js

@@ -2,8 +2,9 @@
 require(
 [
     'utils/utils',
+    'mvc/ui/icon-button',
     'libs/farbtastic',
-], function(mod_utils)
+], function(mod_utils, mod_icon_btn)
 {
     // load css
     mod_utils.cssLoadFile("static/style/circster.css");
@@ -1075,7 +1076,7 @@ var Circster = Backbone.View.extend(
         $('#center .unified-panel-header-inner').append(galaxy_config.app.viz_config.title + " " + galaxy_config.app.viz_config.dbkey);
     
         // setup menu
-        var menu = create_icon_buttons_menu([
+        var menu = mod_icon_btn.create_icon_buttons_menu([
         {
             icon_class: 'plus-button', title: 'Add tracks', on_click: function()
             {

static/scripts/viz/phyloviz.js

@@ -1,4 +1,9 @@
-define(['libs/d3', 'viz/visualization', 'mvc/data'], function(d3, visualization_mod, data_mod) {
+define([
+    'libs/d3',
+    'viz/visualization',
+    'mvc/data',
+    'mvc/ui/icon-button'
+], function(d3, visualization_mod, data_mod, mod_icon_btn) {
 
 /**
  * Base class of any menus that takes in user interaction. Contains checking methods.
@@ -720,7 +725,7 @@ var HeaderButtons = Backbone.View.extend({
     initRightHeaderBtns : function(){
         var self = this;
 
-        rightMenu = create_icon_buttons_menu([
+        rightMenu = mod_icon_btn.create_icon_buttons_menu([
             { icon_class: 'gear', title: 'PhyloViz Settings', on_click: function(){
                 $("#SettingsMenu").show();
                 self.settingsMenu.updateUI();
@@ -748,7 +753,7 @@ var HeaderButtons = Backbone.View.extend({
 
     initNavBtns: function() {
         var self = this,
-            navMenu = create_icon_buttons_menu([
+            navMenu = mod_icon_btn.create_icon_buttons_menu([
                 { icon_class: 'zoom-in', title: 'Zoom in', on_click: function() {
                     self.phylovizView.zoomAndPan({ zoom : "+"});
                 } },

static/scripts/viz/sweepster.js

@@ -3,8 +3,8 @@
  * genomic visualization.
  */
 
-define(["libs/underscore", "libs/d3", "viz/trackster/util", "viz/visualization", "viz/trackster/tracks", "mvc/tools", "mvc/data", "utils/config"], 
+define(["libs/underscore", "libs/d3", "viz/trackster/util", "viz/visualization", "viz/trackster/tracks", "mvc/tools", "mvc/data", "utils/config", "mvc/ui/icon-button"],
-       function(_, d3, util, visualization, tracks, tools, data, config) {
+       function(_, d3, util, visualization, tracks, tools, data, config, mod_icon_btn) {
 
 /**
  * A collection of tool input settings. Object is useful for keeping a list of settings 
@@ -375,7 +375,7 @@ var SweepsterTrackView = Backbone.View.extend({
                 settings_div.toggle();
                 self.trigger('run_on_dataset', settings);
             });
-        var icon_menu = create_icon_buttons_menu([
+        var icon_menu = mod_icon_btn.create_icon_buttons_menu([
             {
                 title: 'Settings',
                 icon_class: 'gear track-settings',
@@ -486,7 +486,7 @@ var ToolInputValOrSweepView = Backbone.View.extend({
 
         // Add buttons for adding/removing parameter.
         var self = this,
-            menu = create_icon_buttons_menu([
+            menu = mod_icon_btn.create_icon_buttons_menu([
             {
                 title: 'Add parameter to tree',
                 icon_class: 'plus-button',
@@ -723,7 +723,7 @@ var SweepsterVisualizationView = Backbone.View.extend({
 
         // Help includes text and a close button.
         var help_div = $(this.helpText).addClass('help'),
-            close_button = create_icon_buttons_menu([
+            close_button = mod_icon_btn.create_icon_buttons_menu([
             {
                 title: 'Close',
                 icon_class: 'cross-circle',
@@ -745,7 +745,7 @@ var SweepsterVisualizationView = Backbone.View.extend({
         this.handle_node_clicks();
 
         // Set up visualization menu.
-        var menu = create_icon_buttons_menu(
+        var menu = mod_icon_btn.create_icon_buttons_menu(
             [
                 // Save.
                 /*
@@ -939,4 +939,4 @@ return {
     SweepsterVisualizationView: SweepsterVisualizationView
 };
 
-});
+});

static/scripts/viz/trackster.js

@@ -12,6 +12,7 @@ require(
 [
     // load js libraries
     'utils/utils',
+    'mvc/ui/icon-button',
     'libs/jquery/jquery.event.drag',
     'libs/jquery/jquery.event.hover',
     'libs/jquery/jquery.mousewheel',
@@ -21,7 +22,7 @@ require(
     'libs/jquery/jquery.form',
     'libs/jquery/jquery.rating',
     'mvc/ui'
-], function(mod_utils)
+], function(mod_utils, mod_icon_btn)
 {
     // load css
     mod_utils.cssLoadFile("static/style/jquery.rating.css");
@@ -101,7 +102,7 @@ var TracksterUI = base.Base.extend({
      */ 
     createButtonMenu: function() {
         var self = this,
-            menu = create_icon_buttons_menu([
+            menu = mod_icon_btn.create_icon_buttons_menu([
             { icon_class: 'plus-button', title: 'Add tracks', on_click: function() { 
                 visualization.select_datasets(galaxy_config.root + "visualization/list_current_history_datasets", galaxy_config.root + "api/datasets", { 'f-dbkey': view.dbkey }, 
                 function(new_tracks) {
@@ -571,4 +572,4 @@ return {
     GalaxyApp : TracksterView
 };
 
-});
+});