Permalink
Browse files

started notifications

  • Loading branch information...
1 parent a553b92 commit c6328acae6656f6650fb799f6338cdaa6b39874a @tj tj committed Dec 3, 2011
View
1 Makefile
@@ -4,6 +4,7 @@ COMPONENTS = emitter \
overlay \
confirmation \
color-picker \
+ notification \
card
ui:
View
81 build/ui.css
@@ -141,6 +141,87 @@
cursor: crosshair;
}
+#notifications {
+ position: fixed;
+ top: 10px;
+ right: 15px;
+}
+
+#notifications li {
+ margin-bottom: 10px;
+ list-style: none;
+}
+
+.notification {
+ position: relative;
+ max-width: 600px;
+ min-width: 250px;
+ border: 1px solid #eee;
+ border-bottom-color: #cacaca;
+ -webkit-border-radius: 3px;
+ -webkit-box-shadow: 0 1px 4px 0 #ddd;
+ background: white;
+ z-index: 100;
+}
+
+.notification .content {
+ padding: 15px 20px;
+}
+
+.notification h1 {
+ margin: 0 0 5px 0;
+ font-size: 16px;
+ font-weight: normal;
+}
+
+.notification p {
+ margin: 0;
+ padding: 0;
+ font-size: .9em;
+}
+
+/* close */
+
+.notification .close {
+ position: absolute;
+ top: 5px;
+ right: 10px;
+ text-decoration: none;
+ color: #888;
+ display: none;
+}
+
+/* slide */
+
+.notification.slide {
+ -webkit-transition: opacity 300ms, top 300ms;
+}
+
+.notification.slide.hide {
+ opacity: 0;
+ top: -500px;
+}
+
+/* fade */
+
+.notification.fade {
+ -webkit-transition: opacity 300ms;
+}
+
+.notification.fade.hide {
+ opacity: 0;
+}
+
+/* scale */
+
+.notification.scale {
+ -webkit-transition: -webkit-transform 300ms;
+ -webkit-transform: scale(1);
+}
+
+.notification.scale.hide {
+ -webkit-transform: scale(0);
+}
/* from: http://desandro.github.com/3d-webkit-transforms */
.card {
View
180 build/ui.js
@@ -825,6 +825,186 @@ ColorPicker.prototype.renderMain = function(options){
;(function(exports, html){
/**
+ * Notification list.
+ */
+
+var list;
+
+/**
+ * Expose `Notification`.
+ */
+
+exports.Notification = Notification;
+
+// list
+
+$(function(){
+ list = $('<ul id="notifications">');
+ list.appendTo('body');
+})
+
+/**
+ * Return a new `Notification` with the given
+ * (optional) `title` and `msg`.
+ *
+ * @param {String} title or msg
+ * @param {String} msg
+ * @return {Dialog}
+ * @api public
+ */
+
+exports.notify = function(title, msg){
+ switch (arguments.length) {
+ case 2:
+ return new Notification({ title: title, message: msg })
+ .show();
+ case 1:
+ return new Notification({ message: title })
+ .show();
+ }
+};
+
+/**
+ * Initialize a new `Notification`.
+ *
+ * Options:
+ *
+ * - `title` dialog title
+ * - `message` a message to display
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+function Notification(options) {
+ options = options || {};
+ this.template = html;
+ this.el = $(this.template);
+ this.render(options);
+ if (Notification.effect) this.effect(Notification.effect);
+};
+
+
+/**
+ * Render with the given `options`.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Notification.prototype.render = function(options){
+ var el = this.el
+ , title = options.title
+ , msg = options.message
+ , self = this;
+
+ el.find('.close').click(function(){
+ self.emit('close');
+ self.hide();
+ return false;
+ });
+
+ el.find('h1').text(title);
+ if (!title) el.find('h1').remove();
+
+ // message
+ if ('string' == typeof msg) {
+ el.find('p').text(msg);
+ } else if (msg) {
+ el.find('p').replaceWith(msg.el || msg);
+ }
+
+ setTimeout(function(){
+ el.removeClass('hide');
+ }, 0);
+};
+
+/**
+ * Enable the dialog close link.
+ *
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.closable = function(){
+ this.el.addClass('closable');
+ return this;
+};
+
+/**
+ * Set the effect to `type`.
+ *
+ * @param {String} type
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.effect = function(type){
+ this._effect = type;
+ this.el.addClass(type);
+ return this;
+};
+
+/**
+ * Show the notification.
+ *
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.show = function(){
+ this.el.appendTo(list);
+ return this;
+};
+
+/**
+ * Hide the dialog with optional delay of `ms`,
+ * otherwise the notification is removed immediately.
+ *
+ * @return {Number} ms
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.hide = function(ms){
+ var self = this;
+
+ // duration
+ if (ms) {
+ setTimeout(function(){
+ self.hide();
+ }, ms);
+ return this;
+ }
+
+ // hide / remove
+ this.el.addClass('hide');
+ if (this._effect) {
+ setTimeout(function(self){
+ self.remove();
+ }, 500, this);
+ } else {
+ self.remove();
+ }
+
+ return this;
+};
+
+/**
+ * Hide the notification without potential animation.
+ *
+ * @return {Dialog} for chaining
+ * @api public
+ */
+
+Notification.prototype.remove = function(){
+ this.el.remove();
+ return this;
+};
+})(ui, "<li class=\"notification hide\">\n <div class=\"content\">\n <h1>Title</h1>\n <a href=\"#\" class=\"close\">✖</a>\n <p>Message</p>\n </div>\n</li>");
+;(function(exports, html){
+
+/**
* Expose `Card`.
*/
View
10 docs/index.html
@@ -10,6 +10,16 @@
<link rel="stylesheet" href="style.css">
<script>
$(function(){
+ ui.Notification.effect = 'scale';
+ setTimeout(function(){
+ ui.notify('Hello').show().hide(3000);
+ }, 200);
+ setTimeout(function(){
+ ui.notify('Tests', 'passed!').show().hide(4000);
+ }, 1000);
+ setTimeout(function(){
+ ui.notify('Tests', 'failed!').show().hide(5000);
+ }, 2000);
$('#simple-dialog').click(function(){
new ui.Dialog({ title: 'Title', message: "I'm a simple dialog" })
.show()
View
82 lib/components/notification/notification.css
@@ -0,0 +1,82 @@
+
+#notifications {
+ position: fixed;
+ top: 10px;
+ right: 15px;
+}
+
+#notifications li {
+ margin-bottom: 10px;
+ list-style: none;
+}
+
+.notification {
+ position: relative;
+ max-width: 600px;
+ min-width: 250px;
+ border: 1px solid #eee;
+ border-bottom-color: #cacaca;
+ border-radius: 3px;
+ box-shadow: 0 1px 4px 0 #ddd;
+ background: white;
+ z-index: 100;
+}
+
+.notification .content {
+ padding: 15px 20px;
+}
+
+.notification h1 {
+ margin: 0 0 5px 0;
+ font-size: 16px;
+ font-weight: normal;
+}
+
+.notification p {
+ margin: 0;
+ padding: 0;
+ font-size: .9em;
+}
+
+/* close */
+
+.notification .close {
+ position: absolute;
+ top: 5px;
+ right: 10px;
+ text-decoration: none;
+ color: #888;
+ display: none;
+}
+
+/* slide */
+
+.notification.slide {
+ transition: opacity 300ms, top 300ms;
+}
+
+.notification.slide.hide {
+ opacity: 0;
+ top: -500px;
+}
+
+/* fade */
+
+.notification.fade {
+ transition: opacity 300ms;
+}
+
+.notification.fade.hide {
+ opacity: 0;
+}
+
+/* scale */
+
+.notification.scale {
+ transition: transform 300ms;
+ transform: scale(1);
+}
+
+.notification.scale.hide {
+ transform: scale(0);
+}
View
7 lib/components/notification/notification.html
@@ -0,0 +1,7 @@
+<li class="notification hide">
+ <div class="content">
+ <h1>Title</h1>
+ <a href="#" class="close">✖</a>
+ <p>Message</p>
+ </div>
+</li>
View
178 lib/components/notification/notification.js
@@ -0,0 +1,178 @@
+
+/**
+ * Notification list.
+ */
+
+var list;
+
+/**
+ * Expose `Notification`.
+ */
+
+exports.Notification = Notification;
+
+// list
+
+$(function(){
+ list = $('<ul id="notifications">');
+ list.appendTo('body');
+})
+
+/**
+ * Return a new `Notification` with the given
+ * (optional) `title` and `msg`.
+ *
+ * @param {String} title or msg
+ * @param {String} msg
+ * @return {Dialog}
+ * @api public
+ */
+
+exports.notify = function(title, msg){
+ switch (arguments.length) {
+ case 2:
+ return new Notification({ title: title, message: msg })
+ .show();
+ case 1:
+ return new Notification({ message: title })
+ .show();
+ }
+};
+
+/**
+ * Initialize a new `Notification`.
+ *
+ * Options:
+ *
+ * - `title` dialog title
+ * - `message` a message to display
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+function Notification(options) {
+ options = options || {};
+ this.template = html;
+ this.el = $(this.template);
+ this.render(options);
+ if (Notification.effect) this.effect(Notification.effect);
+};
+
+
+/**
+ * Render with the given `options`.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Notification.prototype.render = function(options){
+ var el = this.el
+ , title = options.title
+ , msg = options.message
+ , self = this;
+
+ el.find('.close').click(function(){
+ self.emit('close');
+ self.hide();
+ return false;
+ });
+
+ el.find('h1').text(title);
+ if (!title) el.find('h1').remove();
+
+ // message
+ if ('string' == typeof msg) {
+ el.find('p').text(msg);
+ } else if (msg) {
+ el.find('p').replaceWith(msg.el || msg);
+ }
+
+ setTimeout(function(){
+ el.removeClass('hide');
+ }, 0);
+};
+
+/**
+ * Enable the dialog close link.
+ *
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.closable = function(){
+ this.el.addClass('closable');
+ return this;
+};
+
+/**
+ * Set the effect to `type`.
+ *
+ * @param {String} type
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.effect = function(type){
+ this._effect = type;
+ this.el.addClass(type);
+ return this;
+};
+
+/**
+ * Show the notification.
+ *
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.show = function(){
+ this.el.appendTo(list);
+ return this;
+};
+
+/**
+ * Hide the dialog with optional delay of `ms`,
+ * otherwise the notification is removed immediately.
+ *
+ * @return {Number} ms
+ * @return {Notification} for chaining
+ * @api public
+ */
+
+Notification.prototype.hide = function(ms){
+ var self = this;
+
+ // duration
+ if (ms) {
+ setTimeout(function(){
+ self.hide();
+ }, ms);
+ return this;
+ }
+
+ // hide / remove
+ this.el.addClass('hide');
+ if (this._effect) {
+ setTimeout(function(self){
+ self.remove();
+ }, 500, this);
+ } else {
+ self.remove();
+ }
+
+ return this;
+};
+
+/**
+ * Hide the notification without potential animation.
+ *
+ * @return {Dialog} for chaining
+ * @api public
+ */
+
+Notification.prototype.remove = function(){
+ this.el.remove();
+ return this;
+};

0 comments on commit c6328ac

Please sign in to comment.