Fix 'Delete messages'

Replaces window.confirm with generic promise-based confirmation dialog
functionality available to all views.

// FREEBIE

background.html

@@ -48,6 +48,13 @@
           </form>
       </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
+    <div class='message'>{{ message }}</div>
+    <div class='buttons'>
+      <button class='cancel'>Cancel</button>
+      <button class='ok'>OK</button>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='attachment-preview'>
         <img src="{{ source }}" class="preview" />
         <div class="close">x</div>
@@ -266,6 +273,7 @@
   <script type="text/javascript" src="js/views/new_conversation_view.js"></script>
   <script type="text/javascript" src="js/views/window_controls_view.js"></script>
   <script type="text/javascript" src="js/views/inbox_view.js"></script>
+  <script type="text/javascript" src="js/views/confirmation_dialog_view.js"></script>
 
   <script type="text/javascript" src="js/bimap.js"></script>
   <script type="text/javascript" src="js/panel_controller.js"></script>

js/views/confirmation_dialog_view.js

@@ -0,0 +1,45 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.ConfirmationDialogView = Whisper.View.extend({
+        className: 'confirmation-dialog',
+        template: $('#confirmation-dialog').html(),
+        initialize: function(options) {
+            this.message = options.message;
+            this.resolve = options.resolve;
+            this.reject = options.reject;
+            this.render();
+        },
+        events: {
+          'click .ok': 'ok',
+          'click .cancel': 'cancel',
+        },
+        render_attributes: function() {
+            return { message: this.message };
+        },
+        ok: function() {
+          this.remove();
+          this.resolve();
+        },
+        cancel: function() {
+          this.remove();
+          this.reject();
+        }
+    });
+})();

js/views/conversation_view.js

@@ -143,9 +143,9 @@
         },
 
         destroyMessages: function(e) {
-            if (confirm("Permanently delete this conversation?")) {
+            this.confirm("Permanently delete this conversation?").then(function() {
                 this.model.destroyMessages();
-            }
+            }.bind(this));
             this.$('.menu-list').hide();
         },
 

js/views/whisper_view.js

@@ -37,6 +37,16 @@
             this.$el.html(Mustache.render(template, attrs, partials));
             return this;
         },
-        avatar_template: $('#avatar').html()
+        avatar_template: $('#avatar').html(),
+        confirm: function(message) {
+            return new Promise(function(resolve, reject) {
+                var dialog = new Whisper.ConfirmationDialogView({
+                    message: message,
+                    resolve: resolve,
+                    reject: reject
+                });
+                this.$el.append(dialog.el);
+            }.bind(this));
+        }
     });
 })();

stylesheets/_conversation.scss

@@ -374,4 +374,17 @@
   border-radius: 20px;
   font-size: small;
 }
+.confirmation-dialog {
+    position: absolute;
+    top: $header-height;
+    padding: 1em;
+    background: white;
+    border: solid 2px $blue;
+
+    .message { text-align: center; }
 
+    button {
+      float: right;
+      margin-left: 10px;
+    }
+}

stylesheets/manifest.css

@@ -647,4 +647,16 @@ input.search {
   border-radius: 20px;
   font-size: small; }
 
+.confirmation-dialog {
+  position: absolute;
+  top: 36px;
+  padding: 1em;
+  background: white;
+  border: solid 2px #2090ea; }
+  .confirmation-dialog .message {
+    text-align: center; }
+  .confirmation-dialog button {
+    float: right;
+    margin-left: 10px; }
+
 /*# sourceMappingURL=manifest.css.map */