use eventful to dispose of listeners

TODO.md

@@ -12,9 +12,6 @@
 
 ###Error Handling
 
-- [ ] save in memory only if no `localStorage`, warn about that
-- [ ] can we get more than 1 notification at a time? stack them and show just one text
-- [ ] Check location.hash is supported
 - [ ] move tests from `radekstepan/github-burndown-chart`
 
 ###Customers
@@ -23,13 +20,8 @@
 - [ ] provide a documentation site (because we ref it from hero)
 - [ ] track users/make it easy for people to leave feedback
 
-###Style
-
-- [ ] make it easy to go back to project page from a chart page, show it in the header
-
 ###Misc
 
-- [ ] extend from Eventful object that disposes of mediator subscriptions on teardown
 - [ ] the deploy script needs to disable autoreload; `make watch` should start a static web server and also launch a build script with a flag saying which files to include in the head (uncompressed, with live reload); standard build script should minify scripts
 - [ ] vendor module so we can proxy require all `window` libs
 - [ ] show a countdown clock towards the end of the milestone or show overdue
@@ -54,6 +46,7 @@
 - [ ] tell people if they have no due date
 - [ ] calculate left margin based on the total number of points text width
 - [ ] responsive layout
+- [ ] show project name on the milestone page, in the title
 
 ###Customers
 
@@ -70,6 +63,7 @@
 - [ ] deal with Firebase timing out, are we still logged-in?
 - [ ] check that we have not run out of requests to make
 - [ ] what if milestone does not match our strategy?
+- [ ] web storage and location hash supported by 93% of browsers; good enough?
 
 ###Notifications
 

public/css/app.bundle.css

@@ -476,6 +476,7 @@ ul li{display:inline-block}
 #head .right a{-webkit-border-radius:2px;border-radius:2px;background:#ffbb2a;color:#c1041c;padding:11px 20px}
 #title{border-bottom:3px solid #f3f4f8;}
 #title .title{border-bottom:3px solid #aaafbf;margin:30px 0 -3px 0;display:inline-block;padding-bottom:20px}
+#title .sup{color:#b1b6c4}
 #title .sub{font-size:16px;font-weight:bold;margin:0 20px}
 #title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;white-space:nowrap;color:#b1b6c4}
 #page{padding-bottom:80px;}

public/css/app.css

@@ -69,6 +69,7 @@ ul li{display:inline-block}
 #head .right a{-webkit-border-radius:2px;border-radius:2px;background:#ffbb2a;color:#c1041c;padding:11px 20px}
 #title{border-bottom:3px solid #f3f4f8;}
 #title .title{border-bottom:3px solid #aaafbf;margin:30px 0 -3px 0;display:inline-block;padding-bottom:20px}
+#title .sup{color:#b1b6c4}
 #title .sub{font-size:16px;font-weight:bold;margin:0 20px}
 #title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;white-space:nowrap;color:#b1b6c4}
 #page{padding-bottom:80px;}

src/models/config.coffee

@@ -1,4 +1,4 @@
-Model = require '../utils/model.coffee'
+Model = require '../utils/ractive/model.coffee'
 
 module.exports = new Model
 

src/models/firebase.coffee

@@ -1,6 +1,6 @@
 { Firebase, FirebaseSimpleLogin } = require '../modules/vendor.coffee'
 
-Model  = require '../utils/model.coffee'
+Model  = require '../utils/ractive/model.coffee'
 user   = require './user.coffee'
 config = require './config.coffee'
 

src/models/projects.coffee

@@ -1,9 +1,8 @@
 { _, lscache, sortedIndexCmp, semver } = require '../modules/vendor.coffee'
 
+Model    = require '../utils/ractive/model.coffee'
 config   = require '../models/config.coffee'
-mediator = require '../modules/mediator.coffee'
 stats    = require '../modules/stats.coffee'
-Model    = require '../utils/model.coffee'
 date     = require '../utils/date.coffee'
 user     = require './user.coffee'
 
@@ -139,8 +138,8 @@ module.exports = new Model
     @set 'index', index
 
   onconstruct: ->
-    mediator.on '!projects/add',    _.bind @add, @
-    mediator.on '!projects/clear',  _.bind @clear, @
+    @subscribe '!projects/add',    @add, @
+    @subscribe '!projects/clear',  @clear, @
 
   onrender: ->
     # Init the projects.

src/models/system.coffee

@@ -1,5 +1,4 @@
-mediator = require '../modules/mediator.coffee'
-Model    = require '../utils/model.coffee'
+Model = require '../utils/ractive/model.coffee'
 
 # System state.
 system = new Model

src/models/user.coffee

@@ -1,5 +1,4 @@
-mediator = require '../modules/mediator.coffee'
-Model    = require '../utils/model.coffee'
+Model = require '../utils/ractive/model.coffee'
 
 # Currently logged-in user.
 module.exports = new Model

src/utils/model.coffee

@@ -1,7 +0,0 @@
-{ Ractive } = require '../modules/vendor.coffee'
-
-module.exports = (opts) ->
-  Model = Ractive.extend(opts)
-  model = new Model()
-  model.render()
-  model

src/utils/ractive/eventful.coffee

@@ -0,0 +1,26 @@
+{ Ractive, _ } = require '../../modules/vendor.coffee'
+
+mediator = require '../../modules/mediator.coffee'
+
+# An Ractive that subscribes and listens to messages on `mediator` event bus.
+# Usage: this.subscribe('!event', function() { /* listener */ }, context);
+module.exports = Ractive.extend
+
+  subscribe: (name, cb, ctx) ->
+    ctx ?= @
+    @_subs = [] unless _.isArray @_subs
+    if _.isFunction cb
+      @_subs.push mediator.on name, _.bind cb, ctx
+    else
+      console.log "Warning: `cb` is not a function"
+
+  publish: ->
+    mediator.fire.apply mediator, arguments
+
+  onteardown: ->
+    if _.isArray @_subs
+      for sub in @_subs
+        if _.isFunction sub.cancel
+          do sub.cancel
+        else
+          console.log "Warning: `sub.cancel` is not a function"

src/utils/ractive/model.coffee

@@ -0,0 +1,7 @@
+Eventful = require './eventful.coffee'
+
+module.exports = (opts) ->
+  Model = Eventful.extend(opts)
+  model = new Model()
+  model.render()
+  model

src/views/hero.coffee

@@ -1,7 +1,6 @@
 { Ractive } = require '../modules/vendor.coffee'
 
-mediator = require '../modules/mediator.coffee'
-Icons    = require './icons.coffee'
+Icons = require './icons.coffee'
 
 module.exports = Ractive.extend
 

src/views/notify.coffee

@@ -1,11 +1,11 @@
 { Ractive, _, d3 } = require '../modules/vendor.coffee'
 
-mediator = require '../modules/mediator.coffee'
+Eventful = require '../utils/ractive/eventful.coffee'
 Icons    = require './icons.coffee'
 
 HEIGHT = 68 # height of div in px
 
-module.exports = Ractive.extend
+module.exports = Eventful.extend
 
   'name': 'views/notify'
 
@@ -56,8 +56,8 @@ module.exports = Ractive.extend
   
   onconstruct: ->
     # On outside messages.
-    mediator.on '!app/notify', _.bind @show, @
-    mediator.on '!app/notify/hide', _.bind @hide, @
+    @subscribe '!app/notify', @show, @
+    @subscribe '!app/notify/hide', @hide, @
 
     # Close us prematurely...
     @on 'close', @hide

src/views/pages/index.coffee

@@ -7,7 +7,6 @@ projects   = require '../../models/projects.coffee'
 system     = require '../../models/system.coffee'
 milestones = require '../../modules/github/milestones.coffee'
 issues     = require '../../modules/github/issues.coffee'
-mediator   = require '../../modules/mediator.coffee'
 
 module.exports = Ractive.extend
 

src/views/pages/milestone.coffee

@@ -1,15 +1,15 @@
-{ _, Ractive, async } = require '../../modules/vendor.coffee'
+{ _, async } = require '../../modules/vendor.coffee'
 
 Chart = require '../chart.coffee'
 
+Eventful   = require '../../utils/ractive/eventful.coffee'
 projects   = require '../../models/projects.coffee'
 system     = require '../../models/system.coffee'
 milestones = require '../../modules/github/milestones.coffee'
 issues     = require '../../modules/github/issues.coffee'
-mediator   = require '../../modules/mediator.coffee'
 format     = require '../../utils/format.coffee'
 
-module.exports = Ractive.extend
+module.exports = Eventful.extend
 
   'name': 'views/pages/chart'
 
@@ -55,7 +55,7 @@ module.exports = Ractive.extend
       fetchIssues
     ], (err, data) =>
       do done
-      return mediator.fire '!app/notify', {
+      return @publish '!app/notify', {
         'text': do err.toString
         'type': 'alert'
         'system': yes

src/views/pages/new.coffee

@@ -1,11 +1,11 @@
 { _, Ractive } = require '../../modules/vendor.coffee'
 
-mediator = require '../../modules/mediator.coffee'
+Eventful   = require '../../utils/ractive/eventful.coffee'
 system   = require '../../models/system.coffee'
 user     = require '../../models/user.coffee'
 key      = require '../../utils/key.coffee'
 
-module.exports = Ractive.extend
+module.exports = Eventful.extend
 
   'name': 'views/pages/new'
 
@@ -24,10 +24,10 @@ module.exports = Ractive.extend
     done = do system.async
 
     # Save repo.
-    mediator.fire '!projects/add', { owner, name }, (err) ->
+    @publish '!projects/add', { owner, name }, (err) =>
       do done
 
-      mediator.fire '!app/notify',
+      @publish '!app/notify',
         'text': err or "Project #{value} saved."
         'type': if err then 'error' else 'success'
 

src/views/pages/project.coffee

@@ -1,14 +1,14 @@
-{ _, Ractive, async } = require '../../modules/vendor.coffee'
+{ _, async } = require '../../modules/vendor.coffee'
 
 Milestones = require '../tables/milestones.coffee'
 
+Eventful   = require '../../utils/ractive/eventful.coffee'
 projects   = require '../../models/projects.coffee'
 system     = require '../../models/system.coffee'
 milestones = require '../../modules/github/milestones.coffee'
 issues     = require '../../modules/github/issues.coffee'
-mediator   = require '../../modules/mediator.coffee'
 
-module.exports = Ractive.extend
+module.exports = Eventful.extend
 
   'name': 'views/pages/project'
 
@@ -63,7 +63,7 @@ module.exports = Ractive.extend
       fetchIssues
     ], (err) =>
       do done
-      return mediator.fire '!app/notify', {
+      return @publish '!app/notify', {
         'text': do err.toString
         'type': 'alert'
         'system': yes