Added: Dialog escape support. Closes visionmedia#36

5apps · Feb 23, 2012 · ac01c85 · ac01c85
1 parent 8ce09f1
commit ac01c85
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/build/ui.js b/build/ui.js
@@ -260,6 +260,21 @@ Dialog.prototype.overlay = function(){
   return this;
 };
 
+/**
+ * Close the dialog when the escape key is pressed.
+ *
+ * @api private
+ */
+
+Dialog.prototype.escapable = function(){
+  var self = this;
+  $(document).bind('keydown.dialog', function(e){
+    if (27 != e.which) return;
+    $(this).unbind('keydown.dialog');
+    self.hide();
+  });
+};
+
 /**
  * Show the dialog.
  *
@@ -270,11 +285,18 @@ Dialog.prototype.overlay = function(){
  */
 
 Dialog.prototype.show = function(){
+  var overlay = this._overlay;
+
   this.emit('show');
-  if (this._overlay) {
-    this._overlay.show();
+
+  if (overlay) {
+    overlay.show();
     this.el.addClass('modal');
   }
+
+  // escape
+  if (!overlay || overlay.closable) this.escapable();
+
   this.el.appendTo('body');
   this.el.css({ marginLeft: -(this.el.width() / 2) + 'px' });
   return this;
@@ -534,13 +556,15 @@ Confirmation.prototype.render = function(options){
     self.callback(false);
   });
 
-  actions.find('.cancel').click(function(){
+  actions.find('.cancel').click(function(e){
+    e.preventDefault();
     self.emit('cancel');
     self.callback(false);
     self.hide();
   });
 
-  actions.find('.ok').click(function(){
+  actions.find('.ok').click(function(e){
+    e.preventDefault();
     self.emit('ok');
     self.callback(true);
     self.hide();

diff --git a/lib/components/confirmation/confirmation.js b/lib/components/confirmation/confirmation.js
@@ -117,13 +117,15 @@ Confirmation.prototype.render = function(options){
     self.callback(false);
   });
 
-  actions.find('.cancel').click(function(){
+  actions.find('.cancel').click(function(e){
+    e.preventDefault();
     self.emit('cancel');
     self.callback(false);
     self.hide();
   });
 
-  actions.find('.ok').click(function(){
+  actions.find('.ok').click(function(e){
+    e.preventDefault();
     self.emit('ok');
     self.callback(true);
     self.hide();

diff --git a/lib/components/dialog/dialog.js b/lib/components/dialog/dialog.js
@@ -154,6 +154,21 @@ Dialog.prototype.overlay = function(){
   return this;
 };
 
+/**
+ * Close the dialog when the escape key is pressed.
+ *
+ * @api private
+ */
+
+Dialog.prototype.escapable = function(){
+  var self = this;
+  $(document).bind('keydown.dialog', function(e){
+    if (27 != e.which) return;
+    $(this).unbind('keydown.dialog');
+    self.hide();
+  });
+};
+
 /**
  * Show the dialog.
  *
@@ -164,11 +179,18 @@ Dialog.prototype.overlay = function(){
  */
 
 Dialog.prototype.show = function(){
+  var overlay = this._overlay;
+
   this.emit('show');
-  if (this._overlay) {
-    this._overlay.show();
+
+  if (overlay) {
+    overlay.show();
     this.el.addClass('modal');
   }
+
+  // escape
+  if (!overlay || overlay.closable) this.escapable();
+
   this.el.appendTo('body');
   this.el.css({ marginLeft: -(this.el.width() / 2) + 'px' });
   return this;