[galaxy-commits] commit/galaxy-central: guerler: Upload: Cleanup ftp popup

23 Jan 2015

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/de9bd9d7d47b/
Changeset:   de9bd9d7d47b
User:        guerler
Date:        2015-01-23 20:11:24+00:00
Summary:     Upload: Cleanup ftp popup
Affected #:  3 files

diff -r 892da4d5dcc979919c82d4a57ce897d3e93278ce -r de9bd9d7d47bfcdf45f3f170be391874b79e738f client/galaxy/scripts/mvc/upload/upload-ftp.js

--- a/client/galaxy/scripts/mvc/upload/upload-ftp.js
+++ b/client/galaxy/scripts/mvc/upload/upload-ftp.js
@@ -6,7 +6,8 @@
     // options
     options: {
         class_add       : 'upload-icon-button fa fa-square-o',
-        class_remove    : 'upload-icon-button fa fa-check-square-o'
+        class_remove    : 'upload-icon-button fa fa-check-square-o',
+        class_partial   : 'upload-icon-button fa fa-minus-square-o'
     },
 
     // render
@@ -20,6 +21,9 @@
         // set template
         this.setElement(this._template());
 
+        // list of rows
+        this.rows = [];
+
         // load extension
         Utils.get({
             url     : galaxy_config.root + 'api/ftp_files',
@@ -35,7 +39,6 @@
 
     // fill table
     _fill: function(ftp_files) {
-        var self = this;
         if (ftp_files && ftp_files.length > 0) {
             // add table
             this.$el.find('#upload-ftp-content').html($(this._templateTable()));
@@ -43,7 +46,7 @@
             // add files to table
             var size = 0;
             for (key in ftp_files) {
-                this.add(ftp_files[key]);
+                this.rows.push(this._add(ftp_files[key]));
                 size += ftp_files[key].size;
             }
 
@@ -51,37 +54,23 @@
             this.$el.find('#upload-ftp-number').html(ftp_files.length + ' files');
             this.$el.find('#upload-ftp-disk').html(Utils.bytesToString (size, true));
 
-            var selectAll = this.$el.find('#selectAll');
-
-            // call method to determine and set selectAll status on loading
-            this._updateSelectAll(selectAll);
-
-            // selectAll checkbox has been clicked
-            selectAll.on('click', function() {
-                var checkboxes=$(this).parents().find('tr.upload-ftp-row>td>div');
-                var len = checkboxes.length;
-                $this = $(this);
-                var allChecked = !($this.hasClass('fa-check-square-o'));
-
-                // change state of the sub-checkboxes
-                for(i = 0; i < len; i++) {
-                    if(allChecked) {
-                        // all checkboxes should be checked
-                        if(checkboxes.eq(i).hasClass('fa-square-o')) {
-                            // if they are not checked, check them
-                            checkboxes.eq(i).trigger('updateUpBox');
-                        }
-                    } else {
-                        // no checkboxes should be checked
-                        if(checkboxes.eq(i).hasClass('fa-check-square-o')) {
-                            // if they are checked, uncheck them
-                            checkboxes.eq(i).trigger('updateUpBox');
-                        }
+            // add event handler to select/unselect all
+            this.$select_all = $('#upload-selectall');
+            this.$select_all.addClass(this.options.class_add);
+            var self = this;
+            this.$select_all.on('click', function() {
+                var add = self.$select_all.hasClass(self.options.class_add);
+                for (key in ftp_files) {
+                    var ftp_file = ftp_files[key];
+                    var model_index = self._find(ftp_file);
+                    if(!model_index && add || model_index && !add) {
+                        self.rows[key].trigger('click');
                     }
                 }
+            });
 
-                self._updateSelectAll(selectAll);
-            });
+            // refresh
+            self._refresh();
         } else {
             // add info
             this.$el.find('#upload-ftp-content').html($(this._templateInfo()));
@@ -92,7 +81,7 @@
     },
 
     // add
-    add: function(ftp_file) {
+    _add: function(ftp_file) {
         // link this
         var self = this;
 
@@ -116,8 +105,8 @@
         // add icon class
         $icon.addClass(icon_class);
 
-        // add files to the uploadbox
-        $it.on('updateUpBox', function() {
+        // click to add ftp files
+        $it.on('click', function() {
             // find model
             var model_index = self._find(ftp_file);
 
@@ -133,67 +122,51 @@
                     size        : ftp_file.size,
                     path        : ftp_file.path
                 }]);
-
+                
                 // add new icon class
                 $icon.addClass(self.options.class_remove);
             } else {
                 // remove
                 self.app.collection.remove(model_index);
-
+                
                 // add new icon class
                 $icon.addClass(self.options.class_add);
             }
+
+            // update select all checkbox
+            self._refresh();
         });
 
-        // click to add ftp files
-        $it.on('click', function() {
-            //trigger my new event
-            $icon.trigger('updateUpBox');
-
-            // click to add ftp files
-            // modify selectAll box based on number of checkboxes checked
-            var selectBox=$icon.parents().find('#selectAll');
-            // determine and set state of selectAll after sub-checkbox clicked
-            self._updateSelectAll(selectBox);
-        });
+        // return dom handler
+        return $it;
     },
 
-    _updateSelectAll: function(selectBox) {
-        // array of all checkboxes
-        var checkboxes=selectBox.parents().find('tr.upload-ftp-row>td>div');
-        // array of only checked checkboxes
-        var checkedCheckboxes=selectBox.parents().find('tr.upload-ftp-row>td>div.fa-check-square-o');
-        var lenAll = checkboxes.length;
-        var lenChecked = checkedCheckboxes.length;
-
-        // determine which state the selectAll checkbox needs to be and setting it
-        if(lenChecked > 0 && lenChecked !== lenAll) {
-            // indeterminate state
-            selectBox.removeClass('fa-square-o fa-check-square-o');
-            selectBox.addClass('fa-minus-square-o');
-        } else if(lenChecked === lenAll) {
-            // checked state
-            selectBox.removeClass('fa-square-o fa-minus-square-o');
-            selectBox.addClass('fa-check-square-o');
-        } else if(lenChecked === 0) {
-            // unchecked state
-            selectBox.removeClass('fa-check-square-o fa-minus-square-o');
-            selectBox.addClass('fa-square-o');
+    // refresh
+    _refresh: function() {
+        var filtered = this.app.collection.where({file_mode : 'ftp'});
+        this.$select_all.removeClass();
+        if (filtered.length == 0) {
+            this.$select_all.addClass(this.options.class_add);
+        } else {
+            if (filtered.length == this.rows.length) {
+                this.$select_all.addClass(this.options.class_remove);
+            } else {
+                this.$select_all.addClass(this.options.class_partial);
+            }
         }
     },
 
     // get model index
     _find: function(ftp_file) {
-        // check if exists already
-        var filtered = this.app.collection.where({file_path : ftp_file.path});
-        var model_index = null;
-        for (var key in filtered) {
-            var item = filtered[key];
-            if (item.get('status') == 'init' && item.get('file_mode') == 'ftp') {
-                model_index = item.get('id');
-            }
+        var item = this.app.collection.findWhere({
+            file_path   : ftp_file.path,
+            status      : 'init',
+            file_mode   : 'ftp'
+        });
+        if (item) {
+            return item.get('id');
         }
-        return model_index;
+        return null;
     },
 
     // template row
@@ -218,7 +191,7 @@
                 '<table class="grid" style="float: left;">' +
                     '<thead>' +
                         '<tr>' +
-                            '<th><div id="selectAll" class="upload-icon-button fa fa-square-o" ></th>' +
+                            '<th><div id="upload-selectall"></th>' +
                             '<th>Name</th>' +
                             '<th>Size</th>' +
                             '<th>Created</th>' +
@@ -243,7 +216,6 @@
                     '<div id="upload-ftp-content"></div>' +
                 '<div>';
     }
-
 });
 
 });

diff -r 892da4d5dcc979919c82d4a57ce897d3e93278ce -r de9bd9d7d47bfcdf45f3f170be391874b79e738f static/scripts/mvc/upload/upload-ftp.js
--- a/static/scripts/mvc/upload/upload-ftp.js
+++ b/static/scripts/mvc/upload/upload-ftp.js
@@ -6,7 +6,8 @@
     // options
     options: {
         class_add       : 'upload-icon-button fa fa-square-o',
-        class_remove    : 'upload-icon-button fa fa-check-square-o'
+        class_remove    : 'upload-icon-button fa fa-check-square-o',
+        class_partial   : 'upload-icon-button fa fa-minus-square-o'
     },
 
     // render
@@ -20,6 +21,9 @@
         // set template
         this.setElement(this._template());
 
+        // list of rows
+        this.rows = [];
+
         // load extension
         Utils.get({
             url     : galaxy_config.root + 'api/ftp_files',
@@ -35,7 +39,6 @@
 
     // fill table
     _fill: function(ftp_files) {
-        var self = this;
         if (ftp_files && ftp_files.length > 0) {
             // add table
             this.$el.find('#upload-ftp-content').html($(this._templateTable()));
@@ -43,7 +46,7 @@
             // add files to table
             var size = 0;
             for (key in ftp_files) {
-                this.add(ftp_files[key]);
+                this.rows.push(this._add(ftp_files[key]));
                 size += ftp_files[key].size;
             }
 
@@ -51,37 +54,23 @@
             this.$el.find('#upload-ftp-number').html(ftp_files.length + ' files');
             this.$el.find('#upload-ftp-disk').html(Utils.bytesToString (size, true));
 
-            var selectAll = this.$el.find('#selectAll');
-
-            // call method to determine and set selectAll status on loading
-            this._updateSelectAll(selectAll);
-
-            // selectAll checkbox has been clicked
-            selectAll.on('click', function() {
-                var checkboxes=$(this).parents().find('tr.upload-ftp-row>td>div');
-                var len = checkboxes.length;
-                $this = $(this);
-                var allChecked = !($this.hasClass('fa-check-square-o'));
-
-                // change state of the sub-checkboxes
-                for(i = 0; i < len; i++) {
-                    if(allChecked) {
-                        // all checkboxes should be checked
-                        if(checkboxes.eq(i).hasClass('fa-square-o')) {
-                            // if they are not checked, check them
-                            checkboxes.eq(i).trigger('updateUpBox');
-                        }
-                    } else {
-                        // no checkboxes should be checked
-                        if(checkboxes.eq(i).hasClass('fa-check-square-o')) {
-                            // if they are checked, uncheck them
-                            checkboxes.eq(i).trigger('updateUpBox');
-                        }
+            // add event handler to select/unselect all
+            this.$select_all = $('#upload-selectall');
+            this.$select_all.addClass(this.options.class_add);
+            var self = this;
+            this.$select_all.on('click', function() {
+                var add = self.$select_all.hasClass(self.options.class_add);
+                for (key in ftp_files) {
+                    var ftp_file = ftp_files[key];
+                    var model_index = self._find(ftp_file);
+                    if(!model_index && add || model_index && !add) {
+                        self.rows[key].trigger('click');
                     }
                 }
+            });
 
-                self._updateSelectAll(selectAll);
-            });
+            // refresh
+            self._refresh();
         } else {
             // add info
             this.$el.find('#upload-ftp-content').html($(this._templateInfo()));
@@ -92,7 +81,7 @@
     },
 
     // add
-    add: function(ftp_file) {
+    _add: function(ftp_file) {
         // link this
         var self = this;
 
@@ -116,8 +105,8 @@
         // add icon class
         $icon.addClass(icon_class);
 
-        // add files to the uploadbox
-        $it.on('updateUpBox', function() {
+        // click to add ftp files
+        $it.on('click', function() {
             // find model
             var model_index = self._find(ftp_file);
 
@@ -133,67 +122,51 @@
                     size        : ftp_file.size,
                     path        : ftp_file.path
                 }]);
-
+                
                 // add new icon class
                 $icon.addClass(self.options.class_remove);
             } else {
                 // remove
                 self.app.collection.remove(model_index);
-
+                
                 // add new icon class
                 $icon.addClass(self.options.class_add);
             }
+
+            // update select all checkbox
+            self._refresh();
         });
 
-        // click to add ftp files
-        $it.on('click', function() {
-            //trigger my new event
-            $icon.trigger('updateUpBox');
-
-            // click to add ftp files
-            // modify selectAll box based on number of checkboxes checked
-            var selectBox=$icon.parents().find('#selectAll');
-            // determine and set state of selectAll after sub-checkbox clicked
-            self._updateSelectAll(selectBox);
-        });
+        // return dom handler
+        return $it;
     },
 
-    _updateSelectAll: function(selectBox) {
-        // array of all checkboxes
-        var checkboxes=selectBox.parents().find('tr.upload-ftp-row>td>div');
-        // array of only checked checkboxes
-        var checkedCheckboxes=selectBox.parents().find('tr.upload-ftp-row>td>div.fa-check-square-o');
-        var lenAll = checkboxes.length;
-        var lenChecked = checkedCheckboxes.length;
-
-        // determine which state the selectAll checkbox needs to be and setting it
-        if(lenChecked > 0 && lenChecked !== lenAll) {
-            // indeterminate state
-            selectBox.removeClass('fa-square-o fa-check-square-o');
-            selectBox.addClass('fa-minus-square-o');
-        } else if(lenChecked === lenAll) {
-            // checked state
-            selectBox.removeClass('fa-square-o fa-minus-square-o');
-            selectBox.addClass('fa-check-square-o');
-        } else if(lenChecked === 0) {
-            // unchecked state
-            selectBox.removeClass('fa-check-square-o fa-minus-square-o');
-            selectBox.addClass('fa-square-o');
+    // refresh
+    _refresh: function() {
+        var filtered = this.app.collection.where({file_mode : 'ftp'});
+        this.$select_all.removeClass();
+        if (filtered.length == 0) {
+            this.$select_all.addClass(this.options.class_add);
+        } else {
+            if (filtered.length == this.rows.length) {
+                this.$select_all.addClass(this.options.class_remove);
+            } else {
+                this.$select_all.addClass(this.options.class_partial);
+            }
         }
     },
 
     // get model index
     _find: function(ftp_file) {
-        // check if exists already
-        var filtered = this.app.collection.where({file_path : ftp_file.path});
-        var model_index = null;
-        for (var key in filtered) {
-            var item = filtered[key];
-            if (item.get('status') == 'init' && item.get('file_mode') == 'ftp') {
-                model_index = item.get('id');
-            }
+        var item = this.app.collection.findWhere({
+            file_path   : ftp_file.path,
+            status      : 'init',
+            file_mode   : 'ftp'
+        });
+        if (item) {
+            return item.get('id');
         }
-        return model_index;
+        return null;
     },
 
     // template row
@@ -218,7 +191,7 @@
                 '<table class="grid" style="float: left;">' +
                     '<thead>' +
                         '<tr>' +
-                            '<th><div id="selectAll" class="upload-icon-button fa fa-square-o" ></th>' +
+                            '<th><div id="upload-selectall"></th>' +
                             '<th>Name</th>' +
                             '<th>Size</th>' +
                             '<th>Created</th>' +
@@ -243,7 +216,6 @@
                     '<div id="upload-ftp-content"></div>' +
                 '<div>';
     }
-
 });
 
 });

diff -r 892da4d5dcc979919c82d4a57ce897d3e93278ce -r de9bd9d7d47bfcdf45f3f170be391874b79e738f static/scripts/packed/mvc/upload/upload-ftp.js
--- a/static/scripts/packed/mvc/upload/upload-ftp.js
+++ b/static/scripts/packed/mvc/upload/upload-ftp.js
@@ -1,1 +1,1 @@
-define(["utils/utils"],function(a){return Backbone.View.extend({options:{class_add:"upload-icon-button fa fa-square-o",class_remove:"upload-icon-button fa fa-check-square-o"},initialize:function(c){this.app=c;var b=this;this.setElement(this._template());a.get({url:galaxy_config.root+"api/ftp_files",success:function(d){b._fill(d)},error:function(){b._fill()}})},events:{mousedown:function(b){b.preventDefault()}},_fill:function(d){var b=this;if(d&&d.length>0){this.$el.find("#upload-ftp-content").html($(this._templateTable()));var c=0;for(key in d){this.add(d[key]);c+=d[key].size}this.$el.find("#upload-ftp-number").html(d.length+" files");this.$el.find("#upload-ftp-disk").html(a.bytesToString(c,true));var e=this.$el.find("#selectAll");this._updateSelectAll(e);e.on("click",function(){var h=$(this).parents().find("tr.upload-ftp-row>td>div");var g=h.length;$this=$(this);var f=!($this.hasClass("fa-check-square-o"));for(i=0;i<g;i++){if(f){if(h.eq(i).hasClass("fa-square-o")){h.eq(i).trigger("updateUpBox")}}else{if(h.eq(i).hasClass("fa-check-square-o")){h.eq(i).trigger("updateUpBox")}}}b._updateSelectAll(e)})}else{this.$el.find("#upload-ftp-content").html($(this._templateInfo()))}this.$el.find("#upload-ftp-wait").hide()},add:function(f){var d=this;var e=$(this._templateRow(f));var b=e.find(".icon");$(this.el).find("tbody").append(e);var c="";if(this._find(f)){c=this.options.class_remove}else{c=this.options.class_add}b.addClass(c);e.on("updateUpBox",function(){var g=d._find(f);b.removeClass();if(!g){d.app.uploadbox.add([{mode:"ftp",name:f.path,size:f.size,path:f.path}]);b.addClass(d.options.class_remove)}else{d.app.collection.remove(g);b.addClass(d.options.class_add)}});e.on("click",function(){b.trigger("updateUpBox");var g=b.parents().find("#selectAll");d._updateSelectAll(g)})},_updateSelectAll:function(e){var d=e.parents().find("tr.upload-ftp-row>td>div");var f=e.parents().find("tr.upload-ftp-row>td>div.fa-check-square-o");var c=d.length;var b=f.length;if(b>0&&b!==c){e.removeClass("fa-square-o fa-check-square-o");e.addClass("fa-minus-square-o")}else{if(b===c){e.removeClass("fa-square-o fa-minus-square-o");e.addClass("fa-check-square-o")}else{if(b===0){e.removeClass("fa-check-square-o fa-minus-square-o");e.addClass("fa-square-o")}}}},_find:function(f){var c=this.app.collection.where({file_path:f.path});var b=null;for(var d in c){var e=c[d];if(e.get("status")=="init"&&e.get("file_mode")=="ftp"){b=e.get("id")}}return b},_templateRow:function(b){return'<tr class="upload-ftp-row" style="cursor: pointer;"><td><div class="icon"/></td><td style="width: 200px"><p style="width: inherit; word-wrap: break-word;">'+b.path+'</p></td><td style="white-space: nowrap;">'+a.bytesToString(b.size)+'</td><td style="white-space: nowrap;">'+b.ctime+"</td></tr>"},_templateTable:function(){return'<span style="whitespace: nowrap; float: left;">Available files: </span><span style="whitespace: nowrap; float: right;"><span class="upload-icon fa fa-file-text-o"/><span id="upload-ftp-number"/>  <span class="upload-icon fa fa-hdd-o"/><span id="upload-ftp-disk"/></span><table class="grid" style="float: left;"><thead><tr><th><div id="selectAll" class="upload-icon-button fa fa-square-o" ></th><th>Name</th><th>Size</th><th>Created</th></tr></thead><tbody></tbody></table>'},_templateInfo:function(){return'<div class="upload-ftp-warning warningmessage">Your FTP directory does not contain any files.</div>'},_template:function(){return'<div class="upload-ftp"><div id="upload-ftp-wait" class="upload-ftp-wait fa fa-spinner fa-spin"/><div class="upload-ftp-help">This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at <strong>'+this.app.options.ftp_upload_site+'</strong> using your Galaxy credentials (email address and password).</div><div id="upload-ftp-content"></div><div>'}})});
\ No newline at end of file
+define(["utils/utils"],function(a){return Backbone.View.extend({options:{class_add:"upload-icon-button fa fa-square-o",class_remove:"upload-icon-button fa fa-check-square-o",class_partial:"upload-icon-button fa fa-minus-square-o"},initialize:function(c){this.app=c;var b=this;this.setElement(this._template());this.rows=[];a.get({url:galaxy_config.root+"api/ftp_files",success:function(d){b._fill(d)},error:function(){b._fill()}})},events:{mousedown:function(b){b.preventDefault()}},_fill:function(d){if(d&&d.length>0){this.$el.find("#upload-ftp-content").html($(this._templateTable()));var c=0;for(key in d){this.rows.push(this._add(d[key]));c+=d[key].size}this.$el.find("#upload-ftp-number").html(d.length+" files");this.$el.find("#upload-ftp-disk").html(a.bytesToString(c,true));this.$select_all=$("#upload-selectall");this.$select_all.addClass(this.options.class_add);var b=this;this.$select_all.on("click",function(){var g=b.$select_all.hasClass(b.options.class_add);for(key in d){var f=d[key];var e=b._find(f);if(!e&&g||e&&!g){b.rows[key].trigger("click")}}});b._refresh()}else{this.$el.find("#upload-ftp-content").html($(this._templateInfo()))}this.$el.find("#upload-ftp-wait").hide()},_add:function(f){var d=this;var e=$(this._templateRow(f));var b=e.find(".icon");$(this.el).find("tbody").append(e);var c="";if(this._find(f)){c=this.options.class_remove}else{c=this.options.class_add}b.addClass(c);e.on("click",function(){var g=d._find(f);b.removeClass();if(!g){d.app.uploadbox.add([{mode:"ftp",name:f.path,size:f.size,path:f.path}]);b.addClass(d.options.class_remove)}else{d.app.collection.remove(g);b.addClass(d.options.class_add)}d._refresh()});return e},_refresh:function(){var b=this.app.collection.where({file_mode:"ftp"});this.$select_all.removeClass();if(b.length==0){this.$select_all.addClass(this.options.class_add)}else{if(b.length==this.rows.length){this.$select_all.addClass(this.options.class_remove)}else{this.$select_all.addClass(this.options.class_partial)}}},_find:function(c){var b=this.app.collection.findWhere({file_path:c.path,status:"init",file_mode:"ftp"});if(b){return b.get("id")}return null},_templateRow:function(b){return'<tr class="upload-ftp-row" style="cursor: pointer;"><td><div class="icon"/></td><td style="width: 200px"><p style="width: inherit; word-wrap: break-word;">'+b.path+'</p></td><td style="white-space: nowrap;">'+a.bytesToString(b.size)+'</td><td style="white-space: nowrap;">'+b.ctime+"</td></tr>"},_templateTable:function(){return'<span style="whitespace: nowrap; float: left;">Available files: </span><span style="whitespace: nowrap; float: right;"><span class="upload-icon fa fa-file-text-o"/><span id="upload-ftp-number"/>  <span class="upload-icon fa fa-hdd-o"/><span id="upload-ftp-disk"/></span><table class="grid" style="float: left;"><thead><tr><th><div id="upload-selectall"></th><th>Name</th><th>Size</th><th>Created</th></tr></thead><tbody></tbody></table>'},_templateInfo:function(){return'<div class="upload-ftp-warning warningmessage">Your FTP directory does not contain any files.</div>'},_template:function(){return'<div class="upload-ftp"><div id="upload-ftp-wait" class="upload-ftp-wait fa fa-spinner fa-spin"/><div class="upload-ftp-help">This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at <strong>'+this.app.options.ftp_upload_site+'</strong> using your Galaxy credentials (email address and password).</div><div id="upload-ftp-content"></div><div>'}})});
\ 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.

    

[galaxy-commits] commit/galaxy-central: guerler: Upload: Cleanup ftp popup

commits-noreply＠bitbucket.org