Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Open
wants to merge 1 commit into from

1 participant

@uoksana

No description provided.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 13, 2012
  1. @uoksana

    added alert dialog

    uoksana authored
This page is out of date. Refresh to see the latest.
View
1  Makefile
@@ -3,6 +3,7 @@ COMPONENTS = emitter \
dialog \
overlay \
confirmation \
+ alert \
color-picker \
notification \
split-button \
View
10 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;
}
View
142 build/ui.js
@@ -575,6 +575,147 @@ Confirmation.prototype.render = function(options){
;(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 {
View
11 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
+}
View
4 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>
View
138 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();
+ });
+
+};
Something went wrong with that request. Please try again.