show & hide notifications

public/css/app.bundle.css

@@ -449,13 +449,14 @@ ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
 .wrap{width:800px;margin:0 auto}
 #notify{position:fixed;top:-68px;z-index:1;width:100%;background:#fcfcfc;color:#aaafbf;border-top:3px solid #aaafbf;border-bottom:1px solid #f3f4f8;}
-#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px}
+#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px;}
+#notify.system p{padding-top:20px}
 #notify.success{border-top-color:#00b361;color:#00b361}
 #notify.warn{border-top-color:#ea9712;color:#ea9712}
 #notify.alert{border-top-color:#c1041c;color:#c1041c}
 #notify .icon,#notify p{display:block}
 #notify .icon{font-size:26px;padding:18px;width:38px;float:left}
-#notify p{padding:20px 20px 20px 74px;text-align:justify}
+#notify p{padding:22px 20px 20px 74px;text-align:justify}
 #head{background:#c1041c;height:64px;}
 #head #icon{font-size:26px;margin:0;padding:10px 0;line-height:44px;height:44px;width:74px;background:#77000e;display:inline-block;color:#c1041c;margin:0;text-align:center}
 #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}

public/css/app.css

@@ -42,13 +42,14 @@ ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
 .wrap{width:800px;margin:0 auto}
 #notify{position:fixed;top:-68px;z-index:1;width:100%;background:#fcfcfc;color:#aaafbf;border-top:3px solid #aaafbf;border-bottom:1px solid #f3f4f8;}
-#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px}
+#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px;}
+#notify.system p{padding-top:20px}
 #notify.success{border-top-color:#00b361;color:#00b361}
 #notify.warn{border-top-color:#ea9712;color:#ea9712}
 #notify.alert{border-top-color:#c1041c;color:#c1041c}
 #notify .icon,#notify p{display:block}
 #notify .icon{font-size:26px;padding:18px;width:38px;float:left}
-#notify p{padding:20px 20px 20px 74px;text-align:justify}
+#notify p{padding:22px 20px 20px 74px;text-align:justify}
 #head{background:#c1041c;height:64px;}
 #head #icon{font-size:26px;margin:0;padding:10px 0;line-height:44px;height:44px;width:74px;background:#77000e;display:inline-block;color:#c1041c;margin:0;text-align:center}
 #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}

public/js/app.bundle.js

@@ -41527,15 +41527,16 @@ Router.prototype.mount = function(routes, path) {
           'top': HEIGHT
         },
         init: function() {
-          var defaults,
+          var defaults, hide, show,
             _this = this;
           defaults = {
             'text': '',
             'type': '',
             'system': false,
-            'icon': 'megaphone'
+            'icon': 'megaphone',
+            'ttl': 5e3
           };
-          return mediator.on('!app/notify', function(opts) {
+          show = function(opts) {
             var pos;
             opts = _.defaults(opts, defaults);
             _this.set(opts);
@@ -41544,15 +41545,21 @@ Router.prototype.mount = function(routes, path) {
               'easing': d3.ease('bounce'),
               'duration': 800
             });
-            return _.delay(function() {
+            if (!opts.ttl) {
-              return _this.animate('top', HEIGHT, {
+              return;
-                'easing': d3.ease('back'),
+            }
-                'complete': function() {
+            return _.delay(hide, opts.ttl);
-                  return _this.set('text', null);
+          };
-                }
+          hide = function() {
-              });
+            return _this.animate('top', HEIGHT, {
-            }, 5e3);
+              'easing': d3.ease('back'),
-          });
+              'complete': function() {
+                return _this.set('text', null);
+              }
+            });
+          };
+          mediator.on('!app/notify', show);
+          return mediator.on('!app/notify/hide', hide);
         },
         'components': {
           Icons: Icons

public/js/app.js

@@ -1074,15 +1074,16 @@
           'top': HEIGHT
         },
         init: function() {
-          var defaults,
+          var defaults, hide, show,
             _this = this;
           defaults = {
             'text': '',
             'type': '',
             'system': false,
-            'icon': 'megaphone'
+            'icon': 'megaphone',
+            'ttl': 5e3
           };
-          return mediator.on('!app/notify', function(opts) {
+          show = function(opts) {
             var pos;
             opts = _.defaults(opts, defaults);
             _this.set(opts);
@@ -1091,15 +1092,21 @@
               'easing': d3.ease('bounce'),
               'duration': 800
             });
-            return _.delay(function() {
+            if (!opts.ttl) {
-              return _this.animate('top', HEIGHT, {
+              return;
-                'easing': d3.ease('back'),
+            }
-                'complete': function() {
+            return _.delay(hide, opts.ttl);
-                  return _this.set('text', null);
+          };
-                }
+          hide = function() {
-              });
+            return _this.animate('top', HEIGHT, {
-            }, 5e3);
+              'easing': d3.ease('back'),
-          });
+              'complete': function() {
+                return _this.set('text', null);
+              }
+            });
+          };
+          mediator.on('!app/notify', show);
+          return mediator.on('!app/notify/hide', hide);
         },
         'components': {
           Icons: Icons

src/styles/app.styl

@@ -47,6 +47,9 @@ ul
     transform: translateX(-50%) translateY(-50%)
     width: 500px
 
+    p
+      padding-top: 20px
+
   &.success
     border-top-color: #00B361
     color: #00B361
@@ -69,7 +72,7 @@ ul
     float: left
 
   p
-    padding: 20px 20px 20px 74px
+    padding: 22px 20px 20px 74px
     text-align: justify
 
 #head

src/views/notify.coffee

@@ -16,11 +16,12 @@ module.exports = Ractive.extend
       'type': ''
       'system': no
       'icon': 'megaphone'
+      'ttl':  5e3
 
-    # Animate.
+    # Show a notification.
     # type:   alert/warn/success
     # system: yes/no
-    mediator.on '!app/notify', (opts) =>
+    show = (opts) =>
       opts = _.defaults opts, defaults
 
       # Set the text.
@@ -31,15 +32,24 @@ module.exports = Ractive.extend
       @animate 'top', pos,
         'easing': d3.ease('bounce')
         'duration': 800
-      _.delay =>
+      
-        # Slide out of the view.
+      # If no ttl then show permanently.
-        @animate 'top', HEIGHT,
+      return unless opts.ttl
-          'easing': d3.ease('back')
+
-          'complete': =>
+      # Slide out of the view.
-            # Reset the text when all is done.
+      _.delay hide, opts.ttl
-            @set 'text', null
+
-      # Ttl.
+    # Hide a notification.
-      , 5e3
+    hide = =>
+      @animate 'top', HEIGHT,
+        'easing': d3.ease('back')
+        'complete': =>
+          # Reset the text when all is done.
+          @set 'text', null
+
+    # On outside messages.
+    mediator.on '!app/notify', show
+    mediator.on '!app/notify/hide', hide
 
   'components': { Icons }