Implement multi-selection

The UI and the internal APIs are still rough around the edges but the
feature is basically working. You can now select multiple cards and
move them together or (un|)assign them a label.

6 files changed, 67 insertions, 40 deletions

diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade
index 3e769206..3e780850 100644
--- a/client/components/lists/body.jade
+++ b/client/components/lists/body.jade
@@ -10,13 +10,12 @@ template(name="listBody")
         +inlinedForm(autoclose=false position="bottom")
           +addCardForm(listId=_id position="bottom")
         else
-          if newCardFormIsVisible.get
-            a.open-card-composer.js-open-inlined-form
-              i.fa.fa-plus
-              | {{_ 'add-card'}}
+          a.open-minicard-composer.js-open-inlined-form
+            i.fa.fa-plus
+            | {{_ 'add-card'}}
 
 template(name="addCardForm")
-  .minicard.js-composer
+  .minicard.minicard-composer.js-composer
     .minicard-labels.js-minicard-composer-labels
     .minicard-details.clearfix
       textarea.minicard-composer-textarea.js-card-title(autofocus)
diff --git a/client/components/lists/body.js b/client/components/lists/body.js
index 8400af96..04f122cb 100644
--- a/client/components/lists/body.js
+++ b/client/components/lists/body.js
@@ -34,18 +34,17 @@ BlazeComponent.extendComponent({
     }
 
     if ($.trim(title)) {
-      Cards.insert({
+      var _id = Cards.insert({
         title: title,
         listId: this.data()._id,
         boardId: this.data().board()._id,
         sort: sortIndex
-      }, function(err, _id) {
-        // In case the filter is active we need to add the newly inserted card
-        // in the list of exceptions -- cards that are not filtered. Otherwise
-        // the card will disappear instantly.
-        // See https://github.com/libreboard/libreboard/issues/80
-        Filter.addException(_id);
       });
+      // In case the filter is active we need to add the newly inserted card in
+      // the list of exceptions -- cards that are not filtered. Otherwise the
+      // card will disappear instantly.
+      // See https://github.com/libreboard/libreboard/issues/80
+      Filter.addException(_id);
 
       // We keep the form opened, empty it, and scroll to it.
       textarea.val('').focus();
@@ -55,10 +54,6 @@ BlazeComponent.extendComponent({
     }
   },
 
-  showNewCardForm: function(value) {
-    this.newCardFormIsVisible.set(value);
-  },
-
   scrollToBottom: function() {
     var container = this.firstNode();
     $(container).animate({
@@ -66,14 +61,10 @@ BlazeComponent.extendComponent({
     });
   },
 
-  onCreated: function() {
-    this.newCardFormIsVisible = new ReactiveVar(true);
-  },
-
   events: function() {
     return [{
       submit: this.addCard,
-      'click .open-card-composer': this.scrollToBottom
+      'click .open-minicard-composer': this.scrollToBottom
     }];
   }
 }).register('listBody');
diff --git a/client/components/lists/main.js b/client/components/lists/main.js
index beae784d..bcdba7c4 100644
--- a/client/components/lists/main.js
+++ b/client/components/lists/main.js
@@ -8,10 +8,6 @@ BlazeComponent.extendComponent({
     this.componentChildren('listBody')[0].openForm(options);
   },
 
-  showNewCardForm: function(value) {
-    this.componentChildren('listBody')[0].showNewCardForm(value);
-  },
-
   onCreated: function() {
     this.newCardFormIsVisible = new ReactiveVar(true);
   },
@@ -35,30 +31,59 @@ BlazeComponent.extendComponent({
       connectWith: '.js-minicards',
       tolerance: 'pointer',
       appendTo: '.js-lists',
-      helper: 'clone',
+      helper: function(evt, item) {
+        var helper = item.clone();
+        if (MultiSelection.isActive()) {
+          var andNOthers = $cards.find('.js-minicard.is-checked').length - 1;
+          if (andNOthers > 0) {
+            helper.append($(Blaze.toHTML(HTML.DIV(
+              // XXX Super bad class name
+              {'class': 'and-n-other'},
+              // XXX Need to translate
+              'and ' + andNOthers + ' other cards.'
+            ))));
+          }
+        }
+        return helper;
+      },
       items: itemsSelector,
-      placeholder: 'minicard placeholder',
-      start: function(event, ui) {
+      placeholder: 'minicard-wrapper placeholder',
+      start: function(evt, ui) {
         ui.placeholder.height(ui.helper.height());
-        Popup.close();
-        boardComponent.showNewCardForms(false);
+        EscapeActions.executeLowerThan('popup');
+        boardComponent.setIsDragging(true);
       },
-      stop: function(event, ui) {
+      stop: function(evt, ui) {
         // To attribute the new index number, we need to get the dom element
         // of the previous and the following card -- if any.
         var cardDomElement = ui.item.get(0);
         var prevCardDomElement = ui.item.prev('.js-minicard').get(0);
         var nextCardDomElement = ui.item.next('.js-minicard').get(0);
         var sort = Utils.getSortIndex(prevCardDomElement, nextCardDomElement);
-        var cardId = Blaze.getData(cardDomElement)._id;
         var listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
-        Cards.update(cardId, {
-          $set: {
-            listId: listId,
-            sort: sort
-          }
-        });
-        boardComponent.showNewCardForms(true);
+
+        if (MultiSelection.isActive()) {
+          Cards.find(MultiSelection.getMongoSelector()).forEach(function(c) {
+            Cards.update(c._id, {
+              $set: {
+                listId: listId,
+                sort: sort
+              }
+            });
+          });
+        } else {
+          var cardId = Blaze.getData(cardDomElement)._id;
+          Cards.update(cardId, {
+            $set: {
+              listId: listId,
+              // XXX Using the same sort index for multiple cards is
+              // unacceptable. Keep that only until we figure out if we want to
+              // refactor the whole sorting mecanism or do something more basic.
+              sort: sort
+            }
+          });
+        }
+        boardComponent.setIsDragging(false);
       }
     });
 
diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl
index 47dfcf28..3e51ac08 100644
--- a/client/components/lists/main.styl
+++ b/client/components/lists/main.styl
@@ -93,10 +93,13 @@
   overflow-y: auto
   padding: 5px 11px
 
+  .minicards form
+    margin-bottom: 9px
+
   .ps-scrollbar-y-rail
     transform: translateX(2px)
 
-.open-card-composer
+.open-minicard-composer
   border-radius: 2px
   color: #8c8c8c
   display: block
diff --git a/client/components/lists/menu.jade b/client/components/lists/menu.jade
index ff7820a4..052f064c 100644
--- a/client/components/lists/menu.jade
+++ b/client/components/lists/menu.jade
@@ -5,6 +5,7 @@ template(name="listActionPopup")
   if cards.count
     hr
     ul.pop-over-list
+      li: a.js-select-cards {{_ 'list-select-cards'}}
       li: a.js-move-cards {{_ 'list-move-cards'}}
       li: a.js-archive-cards {{_ 'list-archive-cards'}}
   hr
diff --git a/client/components/lists/menu.js b/client/components/lists/menu.js
index f2abd3bf..dda1270c 100644
--- a/client/components/lists/menu.js
+++ b/client/components/lists/menu.js
@@ -6,6 +6,14 @@ Template.listActionPopup.events({
     Popup.close();
   },
   'click .js-list-subscribe': function() {},
+  'click .js-select-cards': function() {
+    var cardIds = Cards.find(
+      {listId: this._id},
+      {fields: { _id: 1 }}
+    ).map(function(card) { return card._id; });
+    MultiSelection.add(cardIds);
+    Popup.close();
+  },
   'click .js-move-cards': Popup.open('listMoveCards'),
   'click .js-archive-cards': Popup.afterConfirm('listArchiveCards', function() {
     Cards.find({listId: this._id}).forEach(function(card) {