Client build system: add 'grunt watch' command: automatically copies files from client/galaxy/scripts/ to static/scripts when they change in client/galaxy/scripts; add some missing files and pack scripts

client/GruntFile.js

@@ -2,8 +2,10 @@ module.exports = function(grunt) {
 
   // Project configuration.
   grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
+    pkg: grunt.file.readJSON( 'package.json' ),
 
+    // default task
+    // use 'grunt copy' to copy the entire <galaxy>/client/galaxy/scripts dir into <galaxy>/static/scripts
     copy: {
       main: {
         expand: true,
@@ -11,11 +13,18 @@ module.exports = function(grunt) {
         src: '**',
         dest: '../static/scripts/'
       }
-    }
+    },
 
+    // use 'grunt watch' (from a new tab in your terminal) to have grunt re-copy changed files automatically
+    watch: {
+        // watch for changes in the src dir
+        files: [ 'galaxy/scripts/**' ],
+        tasks: [ 'default' ]
+    }
   });
 
-  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks( 'grunt-contrib-watch' );
+  grunt.loadNpmTasks( 'grunt-contrib-copy');
 
-  grunt.registerTask('default', ['copy']);
+  grunt.registerTask( 'default', [ 'copy' ] );
 };

client/package.json

@@ -6,6 +6,8 @@
     "galaxy"
   ],
   "devDependencies": {
-    "grunt-contrib-copy": "^0.5.0"
+    "grunt": "^0.4.5",
+    "grunt-contrib-copy": "^0.5.0",
+    "grunt-contrib-watch": "^0.6.1"
   }
 }

static/scripts/mvc/ui/ui-checkbox.js

@@ -0,0 +1,91 @@
+// dependencies
+define(['utils/utils'], function(Utils) {
+
+// plugin
+var View = Backbone.View.extend({
+    // options
+    optionsDefault: {
+        value           : '',
+        visible         : true,
+        cls             : '',
+        data            : [],
+        id              : Utils.uuid()
+    },
+    
+    // initialize
+    initialize : function(options) {
+        // configure options
+        this.options = Utils.merge(options, this.optionsDefault);
+            
+        // create new element
+        this.setElement(this._template(this.options));
+        
+        // hide input field
+        if (!this.options.visible) {
+            this.$el.hide();
+        }
+        
+        // set initial value
+        if (this.options.value) {
+            this.value(this.options.value);
+        }
+        
+        // current value
+        this.current = this.options.value;
+        
+        // onchange event handler. fires on user activity.
+        var self = this;
+        this.$el.find('input').on('change', function() {        
+            self.value(self._getValue());
+        });
+    },
+    
+    // value
+    value : function (new_val) {
+        // get current value
+        var before = this.current;
+        
+        // set new value
+        if (new_val !== undefined) {
+            this.$el.find('label').removeClass('active');
+            this.$el.find('[value="' + new_val + '"]').closest('label').addClass('active');
+            this.current = new_val;
+        }
+
+        // check value
+        var after = this.current;
+        if (after != before && this.options.onchange) {
+            this.options.onchange(this.current);
+        }
+
+        // get and return value
+        return this.current;
+    },
+    
+    // get value
+    _getValue: function() {
+        var selected = this.$el.find(':checked');
+        var value = null;
+        if (selected.length > 0) {
+            value = selected.val();
+        }
+        return value;
+    },
+    
+    // element
+    _template: function(options) {
+        var tmpl =  '<div class="ui-checkbox">';
+        for (key in options.data) {
+            var pair = options.data[key];
+            tmpl +=     '<input type="checkbox" name="' + options.id + '" value="' + pair.value + '" selected>' + pair.label + '<br>';
+        }
+        tmpl +=     '</div>';
+        return tmpl;
+    }
+});
+
+return {
+    View : View
+};
+
+});

static/scripts/mvc/ui/ui-radiobutton.js

@@ -0,0 +1,93 @@
+// dependencies
+define(['utils/utils'], function(Utils) {
+
+// plugin
+var View = Backbone.View.extend({
+    // options
+    optionsDefault: {
+        value           : '',
+        visible         : true,
+        cls             : '',
+        data            : [],
+        id              : Utils.uuid()
+    },
+    
+    // initialize
+    initialize : function(options) {
+        // configure options
+        this.options = Utils.merge(options, this.optionsDefault);
+            
+        // create new element
+        this.setElement(this._template(this.options));
+        
+        // hide input field
+        if (!this.options.visible) {
+            this.$el.hide();
+        }
+        
+        // set initial value
+        if (this.options.value) {
+            this.value(this.options.value);
+        }
+        
+        // current value
+        this.current = this.options.value;
+        
+        // onchange event handler. fires on user activity.
+        var self = this;
+        this.$el.find('input').on('change', function() {        
+            self.value(self._getValue());
+        });
+    },
+    
+    // value
+    value : function (new_val) {
+        // get current value
+        var before = this.current;
+        
+        // set new value
+        if (new_val !== undefined) {
+            this.$el.find('label').removeClass('active');
+            this.$el.find('[value="' + new_val + '"]').closest('label').addClass('active');
+            this.current = new_val;
+        }
+
+        // check value
+        var after = this.current;
+        if (after != before && this.options.onchange) {
+            this.options.onchange(this.current);
+        }
+
+        // get and return value
+        return this.current;
+    },
+    
+    // get value
+    _getValue: function() {
+        var selected = this.$el.find(':checked');
+        var value = null;
+        if (selected.length > 0) {
+            value = selected.val();
+        }
+        return value;
+    },
+    
+    // element
+    _template: function(options) {
+        var tmpl =  '<div class="btn-group ui-radiobutton" data-toggle="buttons">';
+        for (key in options.data) {
+            var pair = options.data[key];
+            tmpl +=     '<label class="btn btn-default">' +
+                            '<input type="radio" name="' + options.id + '" value="' + pair.value + '" selected>' + pair.label +
+                        '</label>';
+        }
+        tmpl +=     '</div>';
+        return tmpl;
+    }
+});
+
+return {
+    View : View
+};
+
+});

static/scripts/packed/mvc/ui/ui-checkbox.js

@@ -0,0 +1 @@
+define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{value:"",visible:true,cls:"",data:[],id:a.uuid()},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));if(!this.options.visible){this.$el.hide()}if(this.options.value){this.value(this.options.value)}this.current=this.options.value;var c=this;this.$el.find("input").on("change",function(){c.value(c._getValue())})},value:function(c){var d=this.current;if(c!==undefined){this.$el.find("label").removeClass("active");this.$el.find('[value="'+c+'"]').closest("label").addClass("active");this.current=c}var e=this.current;if(e!=d&&this.options.onchange){this.options.onchange(this.current)}return this.current},_getValue:function(){var c=this.$el.find(":checked");var d=null;if(c.length>0){d=c.val()}return d},_template:function(d){var c='<div class="ui-checkbox">';for(key in d.data){var e=d.data[key];c+='<input type="checkbox" name="'+d.id+'" value="'+e.value+'" selected>'+e.label+"<br>"}c+="</div>";return c}});return{View:b}});

static/scripts/packed/mvc/ui/ui-radiobutton.js

@@ -0,0 +1 @@
+define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{value:"",visible:true,cls:"",data:[],id:a.uuid()},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));if(!this.options.visible){this.$el.hide()}if(this.options.value){this.value(this.options.value)}this.current=this.options.value;var c=this;this.$el.find("input").on("change",function(){c.value(c._getValue())})},value:function(c){var d=this.current;if(c!==undefined){this.$el.find("label").removeClass("active");this.$el.find('[value="'+c+'"]').closest("label").addClass("active");this.current=c}var e=this.current;if(e!=d&&this.options.onchange){this.options.onchange(this.current)}return this.current},_getValue:function(){var c=this.$el.find(":checked");var d=null;if(c.length>0){d=c.val()}return d},_template:function(d){var c='<div class="btn-group ui-radiobutton" data-toggle="buttons">';for(key in d.data){var e=d.data[key];c+='<label class="btn btn-default"><input type="radio" name="'+d.id+'" value="'+e.value+'" selected>'+e.label+"</label>"}c+="</div>";return c}});return{View:b}});