diff options
Diffstat (limited to 'client/components/cards/checklists.js')
-rw-r--r-- | client/components/cards/checklists.js | 75 |
1 files changed, 57 insertions, 18 deletions
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index ba3384a9..1cd77c9f 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -66,6 +66,7 @@ Template.checklists.onRendered(function () { }); BlazeComponent.extendComponent({ + addChecklist(event) { event.preventDefault(); const textarea = this.find('textarea.js-add-checklist-item'); @@ -101,6 +102,26 @@ BlazeComponent.extendComponent({ textarea.focus(); }, + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, + + deleteChecklist() { + const checklist = this.currentData().checklist; + if (checklist && checklist._id) { + Checklists.remove(checklist._id); + this.toggleDeleteDialog.set(false); + } + }, + + deleteItem() { + const checklist = this.currentData().checklist; + const item = this.currentData().item; + if (checklist && item && item._id) { + checklist.removeItem(item._id); + } + }, + editChecklist(event) { event.preventDefault(); const textarea = this.find('textarea.js-edit-checklist-item'); @@ -109,10 +130,6 @@ BlazeComponent.extendComponent({ checklist.setTitle(title); }, - canModifyCard() { - return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); - }, - editChecklistItem(event) { event.preventDefault(); @@ -123,19 +140,9 @@ BlazeComponent.extendComponent({ checklist.editItem(itemId, title); }, - deleteItem() { - const checklist = this.currentData().checklist; - const item = this.currentData().item; - if (checklist && item && item._id) { - checklist.removeItem(item._id); - } - }, - - deleteChecklist() { - const checklist = this.currentData().checklist; - if (checklist && checklist._id) { - Checklists.remove(checklist._id); - } + onCreated() { + this.toggleDeleteDialog = new ReactiveVar(false); + this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template }, pressKey(event) { @@ -148,18 +155,50 @@ BlazeComponent.extendComponent({ }, events() { + const events = { + 'click .toggle-delete-checklist-dialog'(event) { + if($(event.target).hasClass('js-delete-checklist')){ + this.checklistToDelete = this.currentData().checklist; //Store data context + } + this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get()); + }, + }; + return [{ + ...events, 'submit .js-add-checklist': this.addChecklist, 'submit .js-edit-checklist-title': this.editChecklist, 'submit .js-add-checklist-item': this.addChecklistItem, 'submit .js-edit-checklist-item': this.editChecklistItem, 'click .js-delete-checklist-item': this.deleteItem, - 'click .js-delete-checklist': this.deleteChecklist, + 'click .confirm-checklist-delete': this.deleteChecklist, keydown: this.pressKey, }]; }, }).register('checklists'); +Template.checklistDeleteDialog.onCreated(() => { + const $cardDetails = this.$('.card-details'); + this.scrollState = { position: $cardDetails.scrollTop(), //save current scroll position + top: false, //required for smooth scroll animation + }; + //Callback's purpose is to only prevent scrolling after animation is complete + $cardDetails.animate({ scrollTop: 0 }, 500, () => { this.scrollState.top = true; }); + + //Prevent scrolling while dialog is open + $cardDetails.on('scroll', () => { + if(this.scrollState.top) { //If it's already in position, keep it there. Otherwise let animation scroll + $cardDetails.scrollTop(0); + } + }); +}); + +Template.checklistDeleteDialog.onDestroyed(() => { + const $cardDetails = this.$('.card-details'); + $cardDetails.off('scroll'); //Reactivate scrolling + $cardDetails.animate( { scrollTop: this.scrollState.position }); +}); + Template.itemDetail.helpers({ canModifyCard() { return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); |