Skip to content
This repository
Browse code

started notifications

  • Loading branch information...
commit c6328acae6656f6650fb799f6338cdaa6b39874a 1 parent a553b92
TJ Holowaychuk authored December 03, 2011
1  Makefile
@@ -4,6 +4,7 @@ COMPONENTS = emitter \
4 4
   overlay \
5 5
   confirmation \
6 6
   color-picker \
  7
+  notification \
7 8
   card
8 9
 
9 10
 ui:
81  build/ui.css
@@ -141,6 +141,87 @@
141 141
   cursor: crosshair;
142 142
 }
143 143
 
  144
+#notifications {
  145
+  position: fixed;
  146
+  top: 10px;
  147
+  right: 15px;
  148
+}
  149
+
  150
+#notifications li {
  151
+  margin-bottom: 10px;
  152
+  list-style: none;
  153
+}
  154
+
  155
+.notification {
  156
+  position: relative;
  157
+  max-width: 600px;
  158
+  min-width: 250px;
  159
+  border: 1px solid #eee;
  160
+  border-bottom-color: #cacaca;
  161
+  -webkit-border-radius: 3px;
  162
+  -webkit-box-shadow: 0 1px 4px 0 #ddd;
  163
+  background: white;
  164
+  z-index: 100;
  165
+}
  166
+
  167
+.notification .content {
  168
+  padding: 15px 20px;
  169
+}
  170
+
  171
+.notification h1 {
  172
+  margin: 0 0 5px 0;
  173
+  font-size: 16px;
  174
+  font-weight: normal;
  175
+}
  176
+
  177
+.notification p {
  178
+  margin: 0;
  179
+  padding: 0;
  180
+  font-size: .9em;
  181
+}
  182
+
  183
+/* close */
  184
+
  185
+.notification .close {
  186
+  position: absolute;
  187
+  top: 5px;
  188
+  right: 10px;
  189
+  text-decoration: none;
  190
+  color: #888;
  191
+  display: none;
  192
+}
  193
+
  194
+/* slide */
  195
+
  196
+.notification.slide {
  197
+  -webkit-transition: opacity 300ms, top 300ms;
  198
+}
  199
+
  200
+.notification.slide.hide {
  201
+  opacity: 0;
  202
+  top: -500px;
  203
+}
  204
+
  205
+/* fade */
  206
+
  207
+.notification.fade {
  208
+  -webkit-transition: opacity 300ms;
  209
+}
  210
+
  211
+.notification.fade.hide {
  212
+  opacity: 0;
  213
+}
  214
+
  215
+/* scale */
  216
+
  217
+.notification.scale {
  218
+  -webkit-transition: -webkit-transform 300ms;
  219
+  -webkit-transform: scale(1);
  220
+}
  221
+
  222
+.notification.scale.hide {
  223
+  -webkit-transform: scale(0);
  224
+}
144 225
 /* from: http://desandro.github.com/3d-webkit-transforms */
145 226
 
146 227
 .card {
180  build/ui.js
@@ -825,6 +825,186 @@ ColorPicker.prototype.renderMain = function(options){
825 825
 ;(function(exports, html){
826 826
 
827 827
 /**
  828
+ * Notification list.
  829
+ */
  830
+
  831
+var list;
  832
+
  833
+/**
  834
+ * Expose `Notification`.
  835
+ */
  836
+
  837
+exports.Notification = Notification;
  838
+
  839
+// list
  840
+
  841
+$(function(){
  842
+  list = $('<ul id="notifications">');
  843
+  list.appendTo('body');
  844
+})
  845
+
  846
+/**
  847
+ * Return a new `Notification` with the given 
  848
+ * (optional) `title` and `msg`.
  849
+ *
  850
+ * @param {String} title or msg
  851
+ * @param {String} msg
  852
+ * @return {Dialog}
  853
+ * @api public
  854
+ */
  855
+
  856
+exports.notify = function(title, msg){
  857
+  switch (arguments.length) {
  858
+    case 2:
  859
+      return new Notification({ title: title, message: msg })
  860
+        .show();
  861
+    case 1:
  862
+      return new Notification({ message: title })
  863
+        .show();
  864
+  }
  865
+};
  866
+
  867
+/**
  868
+ * Initialize a new `Notification`.
  869
+ *
  870
+ * Options:
  871
+ *
  872
+ *    - `title` dialog title
  873
+ *    - `message` a message to display
  874
+ *
  875
+ * @param {Object} options
  876
+ * @api public
  877
+ */
  878
+
  879
+function Notification(options) {
  880
+  options = options || {};
  881
+  this.template = html;
  882
+  this.el = $(this.template);
  883
+  this.render(options);
  884
+  if (Notification.effect) this.effect(Notification.effect);
  885
+};
  886
+
  887
+
  888
+/**
  889
+ * Render with the given `options`.
  890
+ *
  891
+ * @param {Object} options
  892
+ * @api public
  893
+ */
  894
+
  895
+Notification.prototype.render = function(options){
  896
+  var el = this.el
  897
+    , title = options.title
  898
+    , msg = options.message
  899
+    , self = this;
  900
+
  901
+  el.find('.close').click(function(){
  902
+    self.emit('close');
  903
+    self.hide();
  904
+    return false;
  905
+  });
  906
+
  907
+  el.find('h1').text(title);
  908
+  if (!title) el.find('h1').remove();
  909
+
  910
+  // message
  911
+  if ('string' == typeof msg) {
  912
+    el.find('p').text(msg);
  913
+  } else if (msg) {
  914
+    el.find('p').replaceWith(msg.el || msg);
  915
+  }
  916
+
  917
+  setTimeout(function(){
  918
+    el.removeClass('hide');
  919
+  }, 0);
  920
+};
  921
+
  922
+/**
  923
+ * Enable the dialog close link.
  924
+ *
  925
+ * @return {Notification} for chaining
  926
+ * @api public
  927
+ */
  928
+
  929
+Notification.prototype.closable = function(){
  930
+  this.el.addClass('closable');
  931
+  return this;
  932
+};
  933
+
  934
+/**
  935
+ * Set the effect to `type`.
  936
+ *
  937
+ * @param {String} type
  938
+ * @return {Notification} for chaining
  939
+ * @api public
  940
+ */
  941
+
  942
+Notification.prototype.effect = function(type){
  943
+  this._effect = type;
  944
+  this.el.addClass(type);
  945
+  return this;
  946
+};
  947
+
  948
+/**
  949
+ * Show the notification.
  950
+ *
  951
+ * @return {Notification} for chaining
  952
+ * @api public
  953
+ */
  954
+
  955
+Notification.prototype.show = function(){
  956
+  this.el.appendTo(list);
  957
+  return this;
  958
+};
  959
+
  960
+/**
  961
+ * Hide the dialog with optional delay of `ms`,
  962
+ * otherwise the notification is removed immediately.
  963
+ *
  964
+ * @return {Number} ms
  965
+ * @return {Notification} for chaining
  966
+ * @api public
  967
+ */
  968
+
  969
+Notification.prototype.hide = function(ms){
  970
+  var self = this;
  971
+
  972
+  // duration
  973
+  if (ms) {
  974
+    setTimeout(function(){
  975
+      self.hide();
  976
+    }, ms);
  977
+    return this;
  978
+  }
  979
+
  980
+  // hide / remove
  981
+  this.el.addClass('hide');
  982
+  if (this._effect) {
  983
+    setTimeout(function(self){
  984
+      self.remove();
  985
+    }, 500, this);
  986
+  } else {
  987
+    self.remove();
  988
+  }
  989
+
  990
+  return this;
  991
+};
  992
+
  993
+/**
  994
+ * Hide the notification without potential animation.
  995
+ *
  996
+ * @return {Dialog} for chaining
  997
+ * @api public
  998
+ */
  999
+
  1000
+Notification.prototype.remove = function(){
  1001
+  this.el.remove();
  1002
+  return this;
  1003
+};
  1004
+})(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>");
  1005
+;(function(exports, html){
  1006
+
  1007
+/**
828 1008
  * Expose `Card`.
829 1009
  */
830 1010
 
10  docs/index.html
@@ -10,6 +10,16 @@
10 10
     <link rel="stylesheet" href="style.css">
11 11
     <script>
12 12
       $(function(){
  13
+        ui.Notification.effect = 'scale';
  14
+        setTimeout(function(){
  15
+          ui.notify('Hello').show().hide(3000);
  16
+        }, 200);
  17
+        setTimeout(function(){
  18
+          ui.notify('Tests', 'passed!').show().hide(4000);
  19
+        }, 1000);
  20
+        setTimeout(function(){
  21
+          ui.notify('Tests', 'failed!').show().hide(5000);
  22
+        }, 2000);
13 23
         $('#simple-dialog').click(function(){
14 24
           new ui.Dialog({ title: 'Title', message: "I'm a simple dialog" })
15 25
             .show()
82  lib/components/notification/notification.css
... ...
@@ -0,0 +1,82 @@
  1
+
  2
+#notifications {
  3
+  position: fixed;
  4
+  top: 10px;
  5
+  right: 15px;
  6
+}
  7
+
  8
+#notifications li {
  9
+  margin-bottom: 10px;
  10
+  list-style: none;
  11
+}
  12
+
  13
+.notification {
  14
+  position: relative;
  15
+  max-width: 600px;
  16
+  min-width: 250px;
  17
+  border: 1px solid #eee;
  18
+  border-bottom-color: #cacaca;
  19
+  border-radius: 3px;
  20
+  box-shadow: 0 1px 4px 0 #ddd;
  21
+  background: white;
  22
+  z-index: 100;
  23
+}
  24
+
  25
+.notification .content {
  26
+  padding: 15px 20px;
  27
+}
  28
+
  29
+.notification h1 {
  30
+  margin: 0 0 5px 0;
  31
+  font-size: 16px;
  32
+  font-weight: normal;
  33
+}
  34
+
  35
+.notification p {
  36
+  margin: 0;
  37
+  padding: 0;
  38
+  font-size: .9em;
  39
+}
  40
+
  41
+/* close */
  42
+
  43
+.notification .close {
  44
+  position: absolute;
  45
+  top: 5px;
  46
+  right: 10px;
  47
+  text-decoration: none;
  48
+  color: #888;
  49
+  display: none;
  50
+}
  51
+
  52
+/* slide */
  53
+
  54
+.notification.slide {
  55
+  transition: opacity 300ms, top 300ms;
  56
+}
  57
+
  58
+.notification.slide.hide {
  59
+  opacity: 0;
  60
+  top: -500px;
  61
+}
  62
+
  63
+/* fade */
  64
+
  65
+.notification.fade {
  66
+  transition: opacity 300ms;
  67
+}
  68
+
  69
+.notification.fade.hide {
  70
+  opacity: 0;
  71
+}
  72
+
  73
+/* scale */
  74
+
  75
+.notification.scale {
  76
+  transition: transform 300ms;
  77
+  transform: scale(1);
  78
+}
  79
+
  80
+.notification.scale.hide {
  81
+  transform: scale(0);
  82
+}
7  lib/components/notification/notification.html
... ...
@@ -0,0 +1,7 @@
  1
+<li class="notification hide">
  2
+  <div class="content">
  3
+    <h1>Title</h1>
  4
+    <a href="#" class="close">✖</a>
  5
+    <p>Message</p>
  6
+  </div>
  7
+</li>
178  lib/components/notification/notification.js
... ...
@@ -0,0 +1,178 @@
  1
+
  2
+/**
  3
+ * Notification list.
  4
+ */
  5
+
  6
+var list;
  7
+
  8
+/**
  9
+ * Expose `Notification`.
  10
+ */
  11
+
  12
+exports.Notification = Notification;
  13
+
  14
+// list
  15
+
  16
+$(function(){
  17
+  list = $('<ul id="notifications">');
  18
+  list.appendTo('body');
  19
+})
  20
+
  21
+/**
  22
+ * Return a new `Notification` with the given 
  23
+ * (optional) `title` and `msg`.
  24
+ *
  25
+ * @param {String} title or msg
  26
+ * @param {String} msg
  27
+ * @return {Dialog}
  28
+ * @api public
  29
+ */
  30
+
  31
+exports.notify = function(title, msg){
  32
+  switch (arguments.length) {
  33
+    case 2:
  34
+      return new Notification({ title: title, message: msg })
  35
+        .show();
  36
+    case 1:
  37
+      return new Notification({ message: title })
  38
+        .show();
  39
+  }
  40
+};
  41
+
  42
+/**
  43
+ * Initialize a new `Notification`.
  44
+ *
  45
+ * Options:
  46
+ *
  47
+ *    - `title` dialog title
  48
+ *    - `message` a message to display
  49
+ *
  50
+ * @param {Object} options
  51
+ * @api public
  52
+ */
  53
+
  54
+function Notification(options) {
  55
+  options = options || {};
  56
+  this.template = html;
  57
+  this.el = $(this.template);
  58
+  this.render(options);
  59
+  if (Notification.effect) this.effect(Notification.effect);
  60
+};
  61
+
  62
+
  63
+/**
  64
+ * Render with the given `options`.
  65
+ *
  66
+ * @param {Object} options
  67
+ * @api public
  68
+ */
  69
+
  70
+Notification.prototype.render = function(options){
  71
+  var el = this.el
  72
+    , title = options.title
  73
+    , msg = options.message
  74
+    , self = this;
  75
+
  76
+  el.find('.close').click(function(){
  77
+    self.emit('close');
  78
+    self.hide();
  79
+    return false;
  80
+  });
  81
+
  82
+  el.find('h1').text(title);
  83
+  if (!title) el.find('h1').remove();
  84
+
  85
+  // message
  86
+  if ('string' == typeof msg) {
  87
+    el.find('p').text(msg);
  88
+  } else if (msg) {
  89
+    el.find('p').replaceWith(msg.el || msg);
  90
+  }
  91
+
  92
+  setTimeout(function(){
  93
+    el.removeClass('hide');
  94
+  }, 0);
  95
+};
  96
+
  97
+/**
  98
+ * Enable the dialog close link.
  99
+ *
  100
+ * @return {Notification} for chaining
  101
+ * @api public
  102
+ */
  103
+
  104
+Notification.prototype.closable = function(){
  105
+  this.el.addClass('closable');
  106
+  return this;
  107
+};
  108
+
  109
+/**
  110
+ * Set the effect to `type`.
  111
+ *
  112
+ * @param {String} type
  113
+ * @return {Notification} for chaining
  114
+ * @api public
  115
+ */
  116
+
  117
+Notification.prototype.effect = function(type){
  118
+  this._effect = type;
  119
+  this.el.addClass(type);
  120
+  return this;
  121
+};
  122
+
  123
+/**
  124
+ * Show the notification.
  125
+ *
  126
+ * @return {Notification} for chaining
  127
+ * @api public
  128
+ */
  129
+
  130
+Notification.prototype.show = function(){
  131
+  this.el.appendTo(list);
  132
+  return this;
  133
+};
  134
+
  135
+/**
  136
+ * Hide the dialog with optional delay of `ms`,
  137
+ * otherwise the notification is removed immediately.
  138
+ *
  139
+ * @return {Number} ms
  140
+ * @return {Notification} for chaining
  141
+ * @api public
  142
+ */
  143
+
  144
+Notification.prototype.hide = function(ms){
  145
+  var self = this;
  146
+
  147
+  // duration
  148
+  if (ms) {
  149
+    setTimeout(function(){
  150
+      self.hide();
  151
+    }, ms);
  152
+    return this;
  153
+  }
  154
+
  155
+  // hide / remove
  156
+  this.el.addClass('hide');
  157
+  if (this._effect) {
  158
+    setTimeout(function(self){
  159
+      self.remove();
  160
+    }, 500, this);
  161
+  } else {
  162
+    self.remove();
  163
+  }
  164
+
  165
+  return this;
  166
+};
  167
+
  168
+/**
  169
+ * Hide the notification without potential animation.
  170
+ *
  171
+ * @return {Dialog} for chaining
  172
+ * @api public
  173
+ */
  174
+
  175
+Notification.prototype.remove = function(){
  176
+  this.el.remove();
  177
+  return this;
  178
+};

0 notes on commit c6328ac

Please sign in to comment.
Something went wrong with that request. Please try again.