sugested fix for issue #881

client/components/cards/checklists.jade

@@ -1,8 +1,14 @@
 template(name="checklists")
   h2 {{_ 'checklists'}}
+  if deleteDialog
+    .board-overlay#card-details-overlay
+    +checklistDeleteDialog(checklist = checklistToDelete)
+
+
   .card-checklist-items
     each checklist in currentCard.checklists
-      +checklistDetail(checklist = checklist)
+      +checklistDetail(checklist=checklist)
+
   if canModifyCard
     +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
       +addChecklistItemForm
@@ -18,7 +24,8 @@ template(name="checklistDetail")
     .checklist-title
       .checkbox.fa.fa-check-square-o
       if canModifyCard
-        a.js-delete-checklist {{_ "delete"}}...
+        a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
+
       span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
       if canModifyCard
         h2.title.js-open-inlined-form.is-editable  {{checklist.title}}
@@ -26,6 +33,18 @@ template(name="checklistDetail")
         h2.title  {{checklist.title}}
   +checklistItems(checklist = checklist)
 
+template(name="checklistDeleteDialog")
+  .js-confirm-checklist-delete
+    p
+      i(class="fa fa-exclamation-triangle" aria-hidden="true")
+    p
+      | Are you sure you want to delete
+      span {{checklist.title}}
+      | ?
+    .js-checklist-delete-buttons
+      button.confirm-checklist-delete(type="button") {{_ 'delete'}}
+      button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}}
+
 template(name="addChecklistItemForm")
   textarea.js-add-checklist-item(rows='1' autofocus)
   .edit-controls.clearfix

client/components/cards/checklists.js

@@ -64,6 +64,7 @@ Template.checklists.onRendered(function () {
 });
 
 BlazeComponent.extendComponent({
+
   addChecklist(event) {
     event.preventDefault();
     const textarea = this.find('textarea.js-add-checklist-item');
@@ -99,6 +100,30 @@ 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);
+    }
+  },
+
+  deleteDialog() {
+    return this.toggleDeleteDialog.get();
+  },
+
+  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');
@@ -107,10 +132,6 @@ BlazeComponent.extendComponent({
     checklist.setTitle(title);
   },
 
-  canModifyCard() {
-    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
-  },
-
   editChecklistItem(event) {
     event.preventDefault();
 
@@ -121,19 +142,9 @@ BlazeComponent.extendComponent({
     checklist.editItem(itemId, title);
   },
 
-  deleteItem() {
+  onCreated() {
-    const checklist = this.currentData().checklist;
+    this.toggleDeleteDialog = new ReactiveVar(false);
-    const item = this.currentData().item;
+    this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template
-    if (checklist && item && item._id) {
-      checklist.removeItem(item._id);
-    }
-  },
-
-  deleteChecklist() {
-    const checklist = this.currentData().checklist;
-    if (checklist && checklist._id) {
-      Checklists.remove(checklist._id);
-    }
   },
 
   pressKey(event) {
@@ -146,18 +157,61 @@ 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 });
+});
+
+BlazeComponent.extendComponent({
+  events() {
+    const handlers = {
+      'click .confirm-checklist-delete'() {
+        console.log(this.scrollState)
+      },
+    }
+
+    return [ handlers ];
+  }
+}).register('checklistDeleteDialog');
 Template.itemDetail.helpers({
   canModifyCard() {
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();

client/components/cards/checklists.styl

@@ -38,6 +38,45 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   .js-delete-checklist
     @extends .delete-text
 
+
+.js-confirm-checklist-delete
+  background-color: darken(white, 3%)
+  position: absolute
+  float: left;
+  width: 60%
+  margin-top: 0
+  margin-left: 16%
+  padding-bottom: 2%
+  z-index: 17
+  border-radius: 3px
+
+  p
+    position: relative
+    margin-top: 3%
+    width: 100%
+    text-align: center
+
+    span
+      font-weight: bold
+
+    i
+      font-size: 2em
+
+  .js-checklist-delete-buttons
+    position: relative
+    padding: left 2% right 2%
+    .confirm-checklist-delete
+      margin-left: 16%
+      float: left
+    .toggle-delete-checklist-dialog
+      margin-right: 16%
+      float: right
+
+#card-details-overlay
+  top: 0
+  bottom: -600px
+  right: 0
+
 .checklist-items
   margin: 0 0 0.5em 1.33em