summaryrefslogtreecommitdiffstats
path: root/client/components/swimlanes/swimlanes.js
diff options
context:
space:
mode:
authorAndrés Manelli <andresmanelli@gmail.com>2018-03-31 13:19:14 -0300
committerAndrés Manelli <andresmanelli@gmail.com>2018-03-31 13:19:14 -0300
commit679e50af6449a680f958256570e8b9f1944a3a92 (patch)
treeac322f2b16c7e7806326d3bcb6f80000984ec854 /client/components/swimlanes/swimlanes.js
parent2e8f8924dd0d985ae4634450cfbef04e88e5d954 (diff)
downloadwekan-679e50af6449a680f958256570e8b9f1944a3a92.tar.gz
wekan-679e50af6449a680f958256570e8b9f1944a3a92.tar.bz2
wekan-679e50af6449a680f958256570e8b9f1944a3a92.zip
Fix drag in lists view
Diffstat (limited to 'client/components/swimlanes/swimlanes.js')
-rw-r--r--client/components/swimlanes/swimlanes.js172
1 files changed, 98 insertions, 74 deletions
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index 3dd7f208..4f6bcf76 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@@ -1,5 +1,85 @@
const { calculateIndex } = Utils;
+function currentCardIsInThisList(listId, swimlaneId) {
+ const currentCard = Cards.findOne(Session.get('currentCard'));
+ const currentBoardId = Session.get('currentBoard');
+ const board = Boards.findOne(currentBoardId);
+ if (board.view === 'board-view-lists')
+ return currentCard && currentCard.listId === listId;
+ else if (board.view === 'board-view-swimlanes')
+ return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
+ else
+ return false;
+};
+
+function initSortable(boardComponent, $listsDom) {
+ // We want to animate the card details window closing. We rely on CSS
+ // transition for the actual animation.
+ $listsDom._uihooks = {
+ removeElement(node) {
+ const removeNode = _.once(() => {
+ node.parentNode.removeChild(node);
+ });
+ if ($(node).hasClass('js-card-details')) {
+ $(node).css({
+ flexBasis: 0,
+ padding: 0,
+ });
+ $listsDom.one(CSSEvents.transitionend, removeNode);
+ } else {
+ removeNode();
+ }
+ },
+ };
+
+ $listsDom.sortable({
+ tolerance: 'pointer',
+ helper: 'clone',
+ handle: '.js-list-header',
+ items: '.js-list:not(.js-list-composer)',
+ placeholder: 'list placeholder',
+ distance: 7,
+ start(evt, ui) {
+ ui.placeholder.height(ui.helper.height());
+ EscapeActions.executeUpTo('popup-close');
+ boardComponent.setIsDragging(true);
+ },
+ stop(evt, ui) {
+ // To attribute the new index number, we need to get the DOM element
+ // of the previous and the following card -- if any.
+ const prevListDom = ui.item.prev('.js-list').get(0);
+ const nextListDom = ui.item.next('.js-list').get(0);
+ const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
+
+ $listsDom.sortable('cancel');
+ const listDomElement = ui.item.get(0);
+ const list = Blaze.getData(listDomElement);
+
+ Lists.update(list._id, {
+ $set: {
+ sort: sortIndex.base,
+ },
+ });
+
+ boardComponent.setIsDragging(false);
+ },
+ });
+
+ function userIsMember() {
+ return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+ }
+
+ // Disable drag-dropping while in multi-selection mode, or if the current user
+ // is not a board member
+ boardComponent.autorun(() => {
+ const $listDom = $listsDom;
+ if ($listDom.data('sortable')) {
+ $listsDom.sortable('option', 'disabled',
+ MultiSelection.isActive() || !userIsMember());
+ }
+ });
+};
+
BlazeComponent.extendComponent({
onRendered() {
const boardComponent = this.parentComponent();
@@ -9,71 +89,7 @@ BlazeComponent.extendComponent({
boardComponent.scrollLeft();
}
- // We want to animate the card details window closing. We rely on CSS
- // transition for the actual animation.
- $listsDom._uihooks = {
- removeElement(node) {
- const removeNode = _.once(() => {
- node.parentNode.removeChild(node);
- });
- if ($(node).hasClass('js-card-details')) {
- $(node).css({
- flexBasis: 0,
- padding: 0,
- });
- $listsDom.one(CSSEvents.transitionend, removeNode);
- } else {
- removeNode();
- }
- },
- };
-
- $listsDom.sortable({
- tolerance: 'pointer',
- helper: 'clone',
- handle: '.js-list-header',
- items: '.js-list:not(.js-list-composer)',
- placeholder: 'list placeholder',
- distance: 7,
- start(evt, ui) {
- ui.placeholder.height(ui.helper.height());
- EscapeActions.executeUpTo('popup-close');
- boardComponent.setIsDragging(true);
- },
- stop(evt, ui) {
- // To attribute the new index number, we need to get the DOM element
- // of the previous and the following card -- if any.
- const prevListDom = ui.item.prev('.js-list').get(0);
- const nextListDom = ui.item.next('.js-list').get(0);
- const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
-
- $listsDom.sortable('cancel');
- const listDomElement = ui.item.get(0);
- const list = Blaze.getData(listDomElement);
-
- Lists.update(list._id, {
- $set: {
- sort: sortIndex.base,
- },
- });
-
- boardComponent.setIsDragging(false);
- },
- });
-
- function userIsMember() {
- return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
- }
-
- // Disable drag-dropping while in multi-selection mode, or if the current user
- // is not a board member
- boardComponent.autorun(() => {
- const $listDom = $listsDom;
- if ($listDom.data('sortable')) {
- $listsDom.sortable('option', 'disabled',
- MultiSelection.isActive() || !userIsMember());
- }
- });
+ initSortable(boardComponent, $listsDom);
},
onCreated() {
this.draggingActive = new ReactiveVar(false);
@@ -87,15 +103,7 @@ BlazeComponent.extendComponent({
},
currentCardIsInThisList(listId, swimlaneId) {
- const currentCard = Cards.findOne(Session.get('currentCard'));
- const currentBoardId = Session.get('currentBoard');
- const board = Boards.findOne(currentBoardId);
- if (board.view === 'board-view-lists')
- return currentCard && currentCard.listId === listId;
- else if (board.view === 'board-view-swimlanes')
- return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
- else
- return false;
+ return currentCardIsInThisList(listId, swimlaneId);
},
events() {
@@ -210,3 +218,19 @@ Template.swimlane.helpers({
return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
},
});
+
+BlazeComponent.extendComponent({
+ currentCardIsInThisList(listId, swimlaneId) {
+ return currentCardIsInThisList(listId, swimlaneId);
+ },
+ onRendered() {
+ const boardComponent = this.parentComponent();
+ const $listsDom = this.$('.js-lists');
+
+ if (!Session.get('currentCard')) {
+ boardComponent.scrollLeft();
+ }
+
+ initSortable(boardComponent, $listsDom);
+ },
+}).register('listsGroup');