Add alert dialog that is similar confirmation dialog but ok and cancel buttons are optional and displayed only when declared. Issue #41

Makefile

@@ -3,6 +3,7 @@ COMPONENTS = emitter \
   dialog \
   overlay \
   confirmation \
+  alert \
   color-picker \
   notification \
   split-button \

build/ui.css

@@ -110,6 +110,16 @@
   text-align: right;
   background: #fafafa;
   box-shadow: inset 0 1px 0 white;
+}.alert .actions {
+  border-top: 1px solid #eee;
+  padding: 5px;
+  text-align: right;
+  background: #fafafa;
+  box-shadow: inset 0 1px 0 white;
+}
+
+.alert .hide {
+    display: none
 }.color-picker canvas {
   border: 1px solid #888;
 }

build/ui.js

@@ -574,6 +574,147 @@ Confirmation.prototype.render = function(options){
 })(ui, "<div class=\"actions\">\n  <button class=\"cancel\">Cancel</button>\n  <button class=\"ok main\">Ok</button>\n</div>");
 ;(function(exports, html){
 
+/**
+ * Expose `Alert`.
+ */
+
+exports.Alert = Alert;
+
+/**
+ * Return a new `Alert` dialog with the given
+ * `title` and `msg`.
+ *
+ * @param {String} title or msg
+ * @param {String} msg
+ * @return {Dialog}
+ * @api public
+ */
+
+exports.alert = function(title, msg){
+  switch (arguments.length) {
+    case 2:
+      return new Alert({ title: title, message: msg });
+    case 1:
+      return new Alert({ message: title });
+  }
+};
+
+/**
+ * Initialize a new `Alert` dialog.
+ *
+ * Options:
+ *
+ *    - `title` dialog title
+ *    - `message` a message to display
+ *
+ * Emits:
+ *
+ *    - `cancel` the user pressed cancel or closed the dialog
+ *    - `ok` the user clicked ok
+ *    - `show` when visible
+ *    - `hide` when hidden
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+function Alert(options) {
+  ui.Dialog.call(this, options);
+};
+
+/**
+ * Inherit from `Dialog.prototype`.
+ */
+
+Alert.prototype = new ui.Dialog;
+
+/**
+ * Change "cancel" button `text`.
+ *
+ * @param {String} text
+ * @return {Alert}
+ * @api public
+ */
+
+Alert.prototype.cancel = function(text){
+  var cancel = this.el.find('.cancel');
+  cancel.text(text);
+  cancel.removeClass('hide');
+  return this;
+};
+
+/**
+ * Change "ok" button `text`.
+ *
+ * @param {String} text
+ * @return {Alert}
+ * @api public
+ */
+
+Alert.prototype.ok = function(text){
+  var ok = this.el.find('.ok');
+  ok.text(text);
+  ok.removeClass('hide');
+  return this;
+};
+
+/**
+ * Show the confirmation dialog and invoke `fn(ok)`.
+ *
+ * @param {Function} fn
+ * @return {Alert} for chaining
+ * @api public
+ */
+
+Alert.prototype.show = function(fn){
+  ui.Dialog.prototype.show.call(this);
+  this.el.find('.ok').focus();
+  this.callback = fn || function(){};
+  return this;
+};
+
+/**
+ * Render with the given `options`.
+ *
+ * Emits "cancel" event.
+ * Emits "ok" event.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Alert.prototype.render = function(options){
+  ui.Dialog.prototype.render.call(this, options);
+  var self = this
+    , actions = $(html);
+
+  this.el.addClass('alert');
+  this.el.append(actions);
+
+  this.on('close', function(){
+    self.emit('cancel');
+    self.callback(false);
+  });
+
+  actions.find('.cancel').click(function(e){
+    e.preventDefault();
+    self.emit('cancel');
+    self.callback(false);
+    self.hide();
+  });
+
+  actions.find('.ok').click(function(e){
+    e.preventDefault();
+    self.emit('ok');
+    self.callback(true);
+    self.hide();
+  });
+
+};
+
+})(ui, "<div class=\"actions\">\n  <button class=\"cancel hide\">Cancel</button>\n  <button class=\"ok main hide\">Ok</button>\n</div>");
+;(function(exports, html){
+
 /**
  * Expose `ColorPicker`.
  */
@@ -599,6 +740,7 @@ function rgba(r,g,b,a) {
 /**
  * Mouse position util.
  */
+
 function localPos(e) {
   var offset = $(e.target).offset();
   return {

lib/components/alert/alert.css

@@ -0,0 +1,11 @@
+.alert .actions {
+  border-top: 1px solid #eee;
+  padding: 5px;
+  text-align: right;
+  background: #fafafa;
+  box-shadow: inset 0 1px 0 white;
+}
+
+.alert .hide {
+    display: none
+}

lib/components/alert/alert.html

@@ -0,0 +1,4 @@
+<div class="actions">
+  <button class="cancel hide">Cancel</button>
+  <button class="ok main hide">Ok</button>
+</div>

lib/components/alert/alert.js

@@ -0,0 +1,138 @@
+
+/**
+ * Expose `Alert`.
+ */
+
+exports.Alert = Alert;
+
+/**
+ * Return a new `Alert` dialog with the given
+ * `title` and `msg`.
+ *
+ * @param {String} title or msg
+ * @param {String} msg
+ * @return {Dialog}
+ * @api public
+ */
+
+exports.alert = function(title, msg){
+  switch (arguments.length) {
+    case 2:
+      return new Alert({ title: title, message: msg });
+    case 1:
+      return new Alert({ message: title });
+  }
+};
+
+/**
+ * Initialize a new `Alert` dialog.
+ *
+ * Options:
+ *
+ *    - `title` dialog title
+ *    - `message` a message to display
+ *
+ * Emits:
+ *
+ *    - `cancel` the user pressed cancel or closed the dialog
+ *    - `ok` the user clicked ok
+ *    - `show` when visible
+ *    - `hide` when hidden
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+function Alert(options) {
+  ui.Dialog.call(this, options);
+};
+
+/**
+ * Inherit from `Dialog.prototype`.
+ */
+
+Alert.prototype = new ui.Dialog;
+
+/**
+ * Change "cancel" button `text`.
+ *
+ * @param {String} text
+ * @return {Alert}
+ * @api public
+ */
+
+Alert.prototype.cancel = function(text){
+  var cancel = this.el.find('.cancel');
+  cancel.text(text);
+  cancel.removeClass('hide');
+  return this;
+};
+
+/**
+ * Change "ok" button `text`.
+ *
+ * @param {String} text
+ * @return {Alert}
+ * @api public
+ */
+
+Alert.prototype.ok = function(text){
+  var ok = this.el.find('.ok');
+  ok.text(text);
+  ok.removeClass('hide');
+  return this;
+};
+
+/**
+ * Show the confirmation dialog and invoke `fn(ok)`.
+ *
+ * @param {Function} fn
+ * @return {Alert} for chaining
+ * @api public
+ */
+
+Alert.prototype.show = function(fn){
+  ui.Dialog.prototype.show.call(this);
+  this.el.find('.ok').focus();
+  this.callback = fn || function(){};
+  return this;
+};
+
+/**
+ * Render with the given `options`.
+ *
+ * Emits "cancel" event.
+ * Emits "ok" event.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Alert.prototype.render = function(options){
+  ui.Dialog.prototype.render.call(this, options);
+  var self = this
+    , actions = $(html);
+
+  this.el.addClass('alert');
+  this.el.append(actions);
+
+  this.on('close', function(){
+    self.emit('cancel');
+    self.callback(false);
+  });
+
+  actions.find('.cancel').click(function(e){
+    e.preventDefault();
+    self.emit('cancel');
+    self.callback(false);
+    self.hide();
+  });
+
+  actions.find('.ok').click(function(e){
+    e.preventDefault();
+    self.emit('ok');
+    self.callback(true);
+    self.hide();
+  });
+
+};