From 2a2a8a89e502704bd708daf8a5ac830fa6e41433 Mon Sep 17 00:00:00 2001
From: Maciej Tronowski <mtro@man.poznan.pl>
Date: Mon, 23 Mar 2015 13:41:28 +0100
Subject: [PATCH] checkboxes for selecting multiple files

---
 filex/static/filex/filex.js          |   55 +++++++++++++++++++++++++++++++---
 filex/templates/filex/source.html    |    4 +++
 filex/templates/filex/source.js.html |   10 ++++++-
 qcg/static/qcg/main.css              |    4 +++
 4 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/filex/static/filex/filex.js b/filex/static/filex/filex.js
index e1dc50f..81b401c 100644
--- a/filex/static/filex/filex.js
+++ b/filex/static/filex/filex.js
@@ -15,6 +15,10 @@ $(function(){
     });
 
     Filex.File = OfflineModel.extend({
+        defaults: {
+            checked: false
+        },
+
         isDir: function() {
             return false;
         },
@@ -25,6 +29,10 @@ $(function(){
 
         isHidden: function() {
             return this.get('name')[0] == '.';
+        },
+
+        toggle: function() {
+            this.set('checked', !this.get('checked'));
         }
     });
 
@@ -113,12 +121,14 @@ $(function(){
         tagName:  'tr',
 
         events: {
-            'click .link': 'selected'
+            'click .link': 'selected',
+            'click input[type=checkbox]': 'toggle'
         },
 
         initialize: function(options) {
             this.view = options.view;
 
+            this.listenTo(this.model, 'change', this.render);
             this.listenTo(this.model, 'remove', this.remove);
             this.listenTo(this.model, 'hidden', this.toggleHidden);
         },
@@ -136,6 +146,7 @@ $(function(){
                 path: this.view.path.full(),
                 name: this.model.get('name')
             });
+            data['cid'] = this.model.cid;
 
             this.$el.html(this.template()(data));
             this.toggleHidden();
@@ -149,7 +160,17 @@ $(function(){
 
         selected: function(e) {
             e.preventDefault();
-            this.model.trigger(this.model.isDir() ? 'selected:dir' : 'selected:file', this.model);
+            if (this.model.isDir()) {
+                this.model.trigger('selected:dir', this.model);
+            }
+            else {
+                this.model.trigger('selected:file', this.model);
+                this.toggle();
+            }
+        },
+
+        toggle: function() {
+            this.model.toggle();
         }
     });
 
@@ -191,7 +212,8 @@ $(function(){
 
         events: {
             'change #show-hidden': 'toggleHidden',
-            'click #host-controls .view': 'hostEdit'
+            'click #host-controls .view': 'hostEdit',
+            'click #select-all': 'selectAll'
         },
 
         initialize: function(options) {
@@ -199,6 +221,7 @@ $(function(){
             this.$error = $('#error');
             this.$showHidden = $('#show-hidden');
             this.$host = $('#host-controls');
+            this.$selectAll = $('#select-all');
 
             this.host = options.host;
             this.path = new Filex.Path();
@@ -211,6 +234,7 @@ $(function(){
             this.listenTo(this.files, 'reset', this.resetFiles);
             this.listenTo(this.files, 'selected:dir', this.selectedDir);
             this.listenTo(this.files, 'selected:file', this.selectedFile);
+            this.listenTo(this.files, 'change:checked', this.updateSelectAll);
 
             // used in selectize callbacks
             var view = this,
@@ -258,8 +282,9 @@ $(function(){
         },
 
         render: function() {
+            this.updateSelectAll();
             this.$host.find('.view').text(this.host);
-            this.$noItems.toggle((this.showHidden() ? !Boolean(this.files.length) : !Boolean(this.files.visible().length)));
+            this.$noItems.toggle(!Boolean(this.visibleFiles().length));
             this.$error.hide();
         },
 
@@ -358,6 +383,28 @@ $(function(){
 
         idle: function() {
             this.$el.removeClass('busy');
+        },
+
+        visibleFiles: function() {
+            return this.showHidden() ? this.files.models : this.files.visible();
+        },
+
+        selectedFiles: function() {
+            return _.filter(this.visibleFiles(), function(item) {
+                return item.get('checked');
+            });
+        },
+
+        selectAll: function() {
+            var checked = this.$selectAll[0].checked;
+
+            _.each(this.visibleFiles(), function(item) {
+                item.set('checked', checked);
+            })
+        },
+
+        updateSelectAll: function() {
+            this.$selectAll.prop('checked', this.selectedFiles().length == this.visibleFiles().length);
         }
     });
 });
diff --git a/filex/templates/filex/source.html b/filex/templates/filex/source.html
index 3f49241..1558f0c 100644
--- a/filex/templates/filex/source.html
+++ b/filex/templates/filex/source.html
@@ -26,6 +26,10 @@
     <table class="table table-hover">
         <thead>
             <tr>
+                <th class="text-center" style="width: 40px">
+                    <label for="select-all" class="sr-only">Wybierz wszystkie pliki</label>
+                    <input id="select-all" type="checkbox" autocomplete="off">
+                </th>
                 <th style="width: 40px"></th>
                 <th>Nazwa</th>
                 <th style="width: 120px">Rozmiar</th>
diff --git a/filex/templates/filex/source.js.html b/filex/templates/filex/source.js.html
index 4942015..2b5c1ab 100644
--- a/filex/templates/filex/source.js.html
+++ b/filex/templates/filex/source.js.html
@@ -26,6 +26,10 @@
 </script>
 
 <script type="text/template" id="dir-template">
+    <td class="text-center">
+        <label for="dir-<%= cid %>" class="sr-only">Zaznacz katalog <%= name %></label>
+        <input id="dir-<%= cid %>" type="checkbox" autocomplete="off" <%= checked ? 'checked="checked"' : '' %>>
+    </td>
     <td class="text-center"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></td>
     <td><a class="link" href="#"><%= name %></a></td>
     <td class="text-right"><%= size %></td>
@@ -33,11 +37,15 @@
 </script>
 
 <script type="text/template" id="file-template">
+    <td class="text-center">
+        <label for="file-<%= cid %>" class="sr-only">Zaznacz plik <%= name %></label>
+        <input id="file-<%= cid %>" type="checkbox" autocomplete="off" <%= checked ? 'checked="checked"' : '' %>>
+    </td>
     <td class="text-center"><span class="glyphicon glyphicon-file" aria-hidden="true"></span></td>
     <td>
         <a href="{% url 'filex:download' %}?<%= url_params %>"
            class="btn btn-default btn-xs pull-right" title="Pobierz plik">
-            <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
+            <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
         </a>
         <a class="link" href="#"><%= name %></a>
     </td>
diff --git a/qcg/static/qcg/main.css b/qcg/static/qcg/main.css
index 20275ef..9af9836 100644
--- a/qcg/static/qcg/main.css
+++ b/qcg/static/qcg/main.css
@@ -82,6 +82,10 @@ textarea {
     position: relative;
 }
 
+#filex input[type=checkbox] {
+    margin: 0;
+}
+
 #host-controls .change {
     display: none;
 }
-- 
1.7.9.5