Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added alert dialog

  • Loading branch information...
commit 80c6bff7634e854cf6a1e3d7ef08d2462feeb82d 1 parent baec734
@uoksana uoksana authored
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();
+ });
+
+};
Please sign in to comment.
Something went wrong with that request. Please try again.