1 files changed, 81 insertions, 0 deletions
diff --git a/client/components/lists/main.js b/client/components/lists/main.js
new file mode 100644
index 00000000..3d458055
--- /dev/null
+++ b/client/components/lists/main.js
@@ -0,0 +1,81 @@
+ListComponent = BlazeComponent.extendComponent({
+  template: function() {
+    return 'list';
+  },
+
+  openForm: function(options) {
+    options = options || {};
+    options.position = options.position || 'top';
+
+    var listComponent = this.componentChildren('listBody')[0];
+    var forms = listComponent.componentChildren('inlinedForm');
+
+    if (options.position === 'top') {
+      forms[0].open();
+    } else {
+      forms[forms.length - 1].open();
+    }
+  },
+
+  // XXX The jQuery UI sortable plugin is far from ideal here. First we include
+  // all jQuery components but only use one. Second, it modifies the DOM itself,
+  // resulting in Blaze abandoning reactive update of the nodes that have been
+  // moved which result in bugs if multiple users use the board in real time.
+  // I tried sortable:sortable but that was not better. Should we “simply” write
+  // the drag&drop code ourselves?
+  onRendered: function() {
+    if (Meteor.user().isBoardMember()) {
+      var $cards = this.$('.js-minicards');
+      $cards.sortable({
+        connectWith: ".js-minicards",
+        tolerance: 'pointer',
+        appendTo: '.js-lists',
+        helper: "clone",
+        items: '.js-minicard:not(.placeholder, .hide, .js-composer)',
+        placeholder: 'minicard placeholder',
+        start: function (event, ui) {
+          $('.minicard.placeholder').height(ui.item.height());
+          Popup.close();
+        },
+        stop: function(event, 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
+            }
+          });
+        }
+      }).disableSelection();
+
+      Utils.liveEvent('mouseover', function($el) {
+        $el.find('.js-member-droppable').droppable({
+          hoverClass: "draggable-hover-card",
+          accept: '.js-member',
+          drop: function(event, ui) {
+            var memberId = Blaze.getData(ui.draggable.get(0)).userId;
+            var cardId = Blaze.getData(this)._id;
+            Cards.update(cardId, {$addToSet: {members: memberId}});
+          }
+        });
+
+        $el.find('.js-member-droppable').droppable({
+          hoverClass: "draggable-hover-card",
+          accept: '.js-label',
+          drop: function(event, ui) {
+            var labelId = Blaze.getData(ui.draggable.get(0))._id;
+            var cardId = Blaze.getData(this)._id;
+            Cards.update(cardId, {$addToSet: {labelIds: labelId}});
+          }
+        });
+      });
+    }
+  }
+}).register('list');