be able to close topbar messages

TODO.md

@@ -4,7 +4,6 @@
 
 - [ ] create a 500/400/loading system messages
 - [ ] slide top menu on page load too
-- [ ] allow user to close topbar messages
 - [ ] deal with Firebase timing out, are we still logged-in?
 - [ ] on system-wide notifications show a button that takes us to the index unless we are on index
 - [ ] mediator `!app/notify/edit` will edit the current notification
@@ -32,6 +31,7 @@
 - [ ] show logged-in state only after it is known
 - [ ] trigger success topbar when we have completed a milestone on chart page; show plain when we are behind
 - [ ] on chart page show a little progress bar in the title
+- [ ] use tap plugin for Ractive
 
 ##Future Releases
 

public/css/app.bundle.css

@@ -449,11 +449,13 @@ 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 .close{float:right;font-size:16px;padding:22px;cursor:pointer;}
+#notify .close:before{content:"\d7";display:block}
 #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.success,#notify.ok,#notify.good{border-top-color:#00b361;color:#00b361}
-#notify.warn{border-top-color:#ea9712;color:#ea9712}
+#notify.warn,#notify.trouble{border-top-color:#ea9712;color:#ea9712}
-#notify.alert{border-top-color:#c1041c;color:#c1041c}
+#notify.alert,#notify.bad,#notify.fucked{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:22px 20px 20px 74px;text-align:justify}

public/css/app.css

@@ -42,11 +42,13 @@ 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 .close{float:right;font-size:16px;padding:22px;cursor:pointer;}
+#notify .close:before{content:"\d7";display:block}
 #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.success,#notify.ok,#notify.good{border-top-color:#00b361;color:#00b361}
-#notify.warn{border-top-color:#ea9712;color:#ea9712}
+#notify.warn,#notify.trouble{border-top-color:#ea9712;color:#ea9712}
-#notify.alert{border-top-color:#c1041c;color:#c1041c}
+#notify.alert,#notify.bad,#notify.fucked{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:22px 20px 20px 74px;text-align:justify}

public/js/app.bundle.js

@@ -41246,8 +41246,7 @@ Router.prototype.mount = function(routes, path) {
           done = system.async();
           mediator.fire('!app/notify', {
             'text': 'You have some interesting news in your inbox. Go check it out now.',
-            'type': 'warn',
+            'type': 'warn'
-            'system': true
           });
           window.location.hash = '#';
           return _.delay(done, 3e3);
@@ -41289,7 +41288,7 @@ Router.prototype.mount = function(routes, path) {
     // notify.mustache
     root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
     
-      module.exports = ["{{#text}}","  {{#system}}","    <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{else}}","    <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{/system}}","{{/text}}"].join("\n");
+      module.exports = ["{{#text}}","  {{#system}}","    <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{else}}","    <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","      <span class=\"close\" on-click=\"close\" />","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{/system}}","{{/text}}"].join("\n");
     });
 
     // chart.mustache
@@ -41565,8 +41564,9 @@ Router.prototype.mount = function(routes, path) {
           'top': HEIGHT
         },
         init: function() {
-          var defaults, hide, show,
+          var defaults, hidden, hide, show,
             _this = this;
+          hidden = true;
           defaults = {
             'text': '',
             'type': '',
@@ -41576,8 +41576,8 @@ Router.prototype.mount = function(routes, path) {
           };
           show = function(opts) {
             var pos;
-            opts = _.defaults(opts, defaults);
+            hidden = false;
-            _this.set(opts);
+            _this.set(opts = _.defaults(opts, defaults));
             pos = [0, 50][+opts.system];
             _this.animate('top', pos, {
               'easing': d3.ease('bounce'),
@@ -41589,6 +41589,10 @@ Router.prototype.mount = function(routes, path) {
             return _.delay(hide, opts.ttl);
           };
           hide = function() {
+            if (hidden) {
+              return;
+            }
+            hidden = true;
             return _this.animate('top', HEIGHT, {
               'easing': d3.ease('back'),
               'complete': function() {
@@ -41597,7 +41601,8 @@ Router.prototype.mount = function(routes, path) {
             });
           };
           mediator.on('!app/notify', show);
-          return mediator.on('!app/notify/hide', hide);
+          mediator.on('!app/notify/hide', hide);
+          return this.on('close', hide);
         },
         'components': {
           Icons: Icons

public/js/app.js

@@ -793,8 +793,7 @@
           done = system.async();
           mediator.fire('!app/notify', {
             'text': 'You have some interesting news in your inbox. Go check it out now.',
-            'type': 'warn',
+            'type': 'warn'
-            'system': true
           });
           window.location.hash = '#';
           return _.delay(done, 3e3);
@@ -836,7 +835,7 @@
     // notify.mustache
     root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
     
-      module.exports = ["{{#text}}","  {{#system}}","    <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{else}}","    <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{/system}}","{{/text}}"].join("\n");
+      module.exports = ["{{#text}}","  {{#system}}","    <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{else}}","    <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","      <span class=\"close\" on-click=\"close\" />","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{/system}}","{{/text}}"].join("\n");
     });
 
     // chart.mustache
@@ -1112,8 +1111,9 @@
           'top': HEIGHT
         },
         init: function() {
-          var defaults, hide, show,
+          var defaults, hidden, hide, show,
             _this = this;
+          hidden = true;
           defaults = {
             'text': '',
             'type': '',
@@ -1123,8 +1123,8 @@
           };
           show = function(opts) {
             var pos;
-            opts = _.defaults(opts, defaults);
+            hidden = false;
-            _this.set(opts);
+            _this.set(opts = _.defaults(opts, defaults));
             pos = [0, 50][+opts.system];
             _this.animate('top', pos, {
               'easing': d3.ease('bounce'),
@@ -1136,6 +1136,10 @@
             return _.delay(hide, opts.ttl);
           };
           hide = function() {
+            if (hidden) {
+              return;
+            }
+            hidden = true;
             return _this.animate('top', HEIGHT, {
               'easing': d3.ease('back'),
               'complete': function() {
@@ -1144,7 +1148,8 @@
             });
           };
           mediator.on('!app/notify', show);
-          return mediator.on('!app/notify/hide', hide);
+          mediator.on('!app/notify/hide', hide);
+          return this.on('close', hide);
         },
         'components': {
           Icons: Icons

src/modules/router.coffee

@@ -23,7 +23,6 @@ module.exports = window.router = router = Router
     mediator.fire '!app/notify',
       'text': 'You have some interesting news in your inbox. Go check it out now.'
       'type': 'warn'
-      'system': yes
     window.location.hash = '#'
 
     _.delay done, 3e3

src/styles/app.styl

@@ -40,6 +40,16 @@ ul
   border-top: 3px solid #AAAFBF
   border-bottom: 1px solid #F3F4F8
 
+  .close
+    float: right
+    font-size: 16px
+    padding: 22px
+    cursor: pointer
+    
+    &:before
+      content: "\d7"
+      display: block
+
   // system-wide notification
   &.system
     top: 0%  // hide from view
@@ -50,15 +60,15 @@ ul
     p
       padding-top: 20px
 
-  &.success
+  &.success, &.ok, &.good
     border-top-color: #00B361
     color: #00B361
 
-  &.warn
+  &.warn, &.trouble
     border-top-color: #EA9712
     color: #EA9712
 
-  &.alert
+  &.alert, &.bad, &.fucked
     border-top-color: $strong_color
     color: $strong_color
 

src/templates/notify.mustache

@@ -6,6 +6,7 @@
     </div>
   {{else}}
     <div id="notify" class="{{type}}" style="top:{{-top}}px">
+      <span class="close" on-click="close" />
       <Icons icon="{{icon}}"/>
       <p>{{text}}</p>
     </div>

src/views/notify.coffee

@@ -11,6 +11,8 @@ module.exports = Ractive.extend
     'top': HEIGHT
 
   init: ->
+    hidden = yes
+
     defaults =
       'text': ''
       'type': ''
@@ -19,13 +21,11 @@ module.exports = Ractive.extend
       'ttl':  5e3
 
     # Show a notification.
-    # type:   alert/warn/success
-    # system: yes/no
     show = (opts) =>
-      opts = _.defaults opts, defaults
+      hidden = no
       
-      # Set the text.
+      # Set the opts.
-      @set opts
+      @set opts = _.defaults opts, defaults
       # Which position to slide to?
       pos = [ 0, 50 ][ +opts.system ] # 0px or 50% from top
       # Slide into view.
@@ -41,6 +41,9 @@ module.exports = Ractive.extend
 
     # Hide a notification.
     hide = =>
+      return if hidden
+      hidden = yes
+
       @animate 'top', HEIGHT,
         'easing': d3.ease('back')
         'complete': =>
@@ -51,6 +54,9 @@ module.exports = Ractive.extend
     mediator.on '!app/notify', show
     mediator.on '!app/notify/hide', hide
 
+    # Close us prematurely...
+    @on 'close', hide
+
   'components': { Icons }
 
   'adapt': [ Ractive.adaptors.Ractive ]