Fix drag and drop issues when re-enter board

This commit is contained in:
Andrés Manelli 2018-03-16 22:13:40 -03:00
parent 0495e61c28
commit 5b0f7f8aef
3 changed files with 136 additions and 127 deletions

View file

@ -19,85 +19,11 @@ BlazeComponent.extendComponent({
// comment below provides further details.
onRendered() {
const boardComponent = this.parentComponent().parentComponent();
const $listsDom = boardComponent.$('.js-lists');
if (!Session.get('currentCard')) {
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());
}
});
// If there is no data in the board (ie, no lists) we autofocus the list
// creation form by clicking on the corresponding element.
const currentBoard = Boards.findOne(Session.get('currentBoard'));
if (userIsMember() && currentBoard.lists().count() === 0) {
boardComponent.openNewListForm();
}
const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
const $cards = this.$('.js-minicards');
$cards.sortable({