From 80c6bff7634e854cf6a1e3d7ef08d2462feeb82d Mon Sep 17 00:00:00 2001 From: Utyasheva Oksana Date: Fri, 13 Apr 2012 11:16:25 +0600 Subject: [PATCH] added alert dialog --- Makefile | 1 + build/ui.css | 10 +++ build/ui.js | 142 ++++++++++++++++++++++++++++++++ lib/components/alert/alert.css | 11 +++ lib/components/alert/alert.html | 4 + lib/components/alert/alert.js | 138 +++++++++++++++++++++++++++++++ 6 files changed, 306 insertions(+) create mode 100644 lib/components/alert/alert.css create mode 100644 lib/components/alert/alert.html create mode 100644 lib/components/alert/alert.js diff --git a/Makefile b/Makefile index a8180c2..fa03dec 100644 --- a/Makefile +++ b/Makefile @@ -3,6 +3,7 @@ COMPONENTS = emitter \ dialog \ overlay \ confirmation \ + alert \ color-picker \ notification \ split-button \ diff --git a/build/ui.css b/build/ui.css index b9a7c49..e452279 100644 --- a/build/ui.css +++ b/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; } diff --git a/build/ui.js b/build/ui.js index 3fa754d..2740fc7 100644 --- a/build/ui.js +++ b/build/ui.js @@ -574,6 +574,147 @@ Confirmation.prototype.render = function(options){ })(ui, "
\n \n \n
"); ;(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, "
\n \n \n
"); +;(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 { diff --git a/lib/components/alert/alert.css b/lib/components/alert/alert.css new file mode 100644 index 0000000..da4a240 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/lib/components/alert/alert.html b/lib/components/alert/alert.html new file mode 100644 index 0000000..65a1517 --- /dev/null +++ b/lib/components/alert/alert.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/lib/components/alert/alert.js b/lib/components/alert/alert.js new file mode 100644 index 0000000..f16697a --- /dev/null +++ b/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(); + }); + +};