k88hudson/webmaker-nav — pull request #12 by toolness (2012-10-17 12:11:40+00:00)
Title: Add optional badge UI to webmaker nav bar.

This is currently just a first attempt at integrating the clopenbadger consumer library with webmaker nav via a very, very rudimentary UI (featuring extremely bad temporary CSS). See [examples/with-badge-ui.html](https://github.com/toolness/webmaker-nav/blob/badge-ui/example/with-badge-ui.html) for the core example use case code.

Architecturally, this is done via a `BadgeUI` class that is coupled to the `Clopenbadger` and `WebmakerNav` interfaces (but not implementations), as well as jQuery. `WebmakerNav` is completely decoupled from `BadgeUI`, so it's still possible for clients to create a universal nav bar without a badge UI.

Things I like about this, from a technical perspective:

* Because it's in the webmaker-nav repository, it forces the code to be as non-thimble-specific (and therefore as reusable) as possible.

* Iterating on the UI is really easy because it doesn't require a full checkout/deploy of Thimble (which is currently the case with my [badges-integration](https://github.com/toolness/webpagemaker/tree/badges-integration) Thimble branch).

Things I don't currently like about this, from a technical perspective:

* A `Clopenbadger` instance can only exist when a user is logged in, which makes it a bit annoying for client code to credit behaviors--this can be fixed with a simple wrapper, but it's annoying for each Webmaker app to have to make its own wrapper. One possibility is for `BadgeUI` to provide this wrapper, but it feels weird for a view/controller class to provide model-like functionality. Blegh.

* Client code needs to manually call methods on a `BadgeUI` instance whenever the user logs in and out. This could be remedied, at least to an extent, if webmakerNav instances emitted events when it changed views. This could be done very easily via `jQuery.trigger()` if we couple webmakerNav to jQuery, or it could be done through an eventing micro-lib like `backbone-events`.