1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
BlazeComponent.extendComponent({
template: function() {
return 'list';
},
// Proxies
openForm: function(options) {
this.componentChildren('listBody')[0].openForm(options);
},
onCreated: function() {
this.newCardFormIsVisible = new ReactiveVar(true);
},
// 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. And dragula is not
// powerful enough for our use casesShould we “simply” write the drag&drop
// code ourselves?
onRendered: function() {
var self = this;
if (! Meteor.userId() || ! Meteor.user().isBoardMember())
return;
var boardComponent = self.componentParent();
var itemsSelector = '.js-minicard:not(.placeholder, .hide, .js-composer)';
var $cards = self.$('.js-minicards');
$cards.sortable({
connectWith: '.js-minicards',
tolerance: 'pointer',
appendTo: '.js-lists',
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-wrapper placeholder',
start: function(evt, ui) {
ui.placeholder.height(ui.helper.height());
EscapeActions.executeLowerThan('popup');
boardComponent.setIsDragging(true);
},
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 listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
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);
}
});
// We want to re-run this function any time a card is added.
self.autorun(function() {
var currentBoardId = Tracker.nonreactive(function() {
return Session.get('currentBoard');
});
Cards.find({ boardId: currentBoardId }).fetch();
Tracker.afterFlush(function() {
$cards.find(itemsSelector).droppable({
hoverClass: 'draggable-hover-card',
accept: '.js-member,.js-label',
drop: function(event, ui) {
var cardId = Blaze.getData(this)._id;
var addToSet;
if (ui.draggable.hasClass('js-member')) {
var memberId = Blaze.getData(ui.draggable.get(0)).userId;
addToSet = { members: memberId };
} else {
var labelId = Blaze.getData(ui.draggable.get(0))._id;
addToSet = { labelIds: labelId };
}
Cards.update(cardId, { $addToSet: addToSet });
}
});
});
});
}
}).register('list');
|
