adapt ractive as a model partial

Gruntfile.coffee

@@ -30,6 +30,7 @@ module.exports = (grunt) ->
                     # Vendor dependencies.
                     'vendor/lodash/dist/lodash.js'
                     'vendor/ractive/ractive.js'
+                    'vendor/ractive-plugins/adaptors/Ractive.js'
                     'vendor/firebase/firebase.js'
                     'vendor/firebase-simple-login/firebase-simple-login.js'
                     # Our app.

bower.json

@@ -5,6 +5,7 @@
         "lodash": "2.3.0",
         "normalize-css": "2.1.3",
         "ractive": "~0.5.5",
+        "ractive-plugins": "Rich-Harris/Ractive-plugins",
         "firebase": "~1.0.21",
         "firebase-simple-login": "~1.6.3"
     }

public/js/app.bundle.js

@@ -19952,7 +19952,83 @@
 	};
 
 }( typeof window !== 'undefined' ? window : this ) );
-;/* Firebase v1.0.21 */ (function() {var h,aa=this;function n(a){return void 0!==a}function ba(){}function ca(a){a.sb=function(){return a.md?a.md:a.md=new a}}
+;// Ractive adaptor plugin
+// =======================
+//
+// This plugin allows you to have several Ractive instances sharing
+// a single model, without using any third party libraries.
+//
+// Usage:
+//
+//     var ractiveOne = new Ractive({
+//       el: 'one',
+//       template: templateOne
+//     });
+//
+//     var ractiveTwo = new Ractive({
+//       el: 'two',
+//       template: templateTwo,
+//       data: ractiveOne,
+//       adaptors: [ 'Ractive' ]
+//     });
+//
+// Changes to either Ractive will be reflected in both.
+
+(function () {
+
+	var RactiveWrapper;
+
+	Ractive.adaptors.Ractive = {
+		filter: function ( object ) {
+			return object instanceof Ractive;
+		},
+		wrap: function ( ractive, otherRactive, keypath, prefixer ) {
+			return new RactiveWrapper( ractive, otherRactive, keypath, prefixer );
+		}
+	};
+
+	RactiveWrapper = function ( ractive, otherRactive, keypath, prefixer ) {
+		var wrapper = this;
+
+		this.value = otherRactive;
+
+		this.changeHandler = otherRactive.on( 'change', function ( changeHash ) {
+			wrapper.shortCircuit = true;
+			ractive.set( prefixer( changeHash ) );
+			wrapper.shortCircuit = false;
+		});
+
+		this.resetHandler = otherRactive.on( 'reset', function ( newData ) {
+			wrapper.shortCircuit = true;
+			ractive.update( keypath );
+			wrapper.shortCircuit = false;
+		});
+	};
+
+	RactiveWrapper.prototype = {
+		teardown: function () {
+			this.changeHandler.cancel();
+			this.resetHandler.cancel();
+		},
+		get: function () {
+			return this.value.get();
+		},
+		set: function ( keypath, value ) {
+			this.value.set( keypath, value );
+		},
+		reset: function ( object ) {
+			// If the new object is a Backbone model, assume this one is
+			// being retired. Ditto if it's not a model at all
+			if ( object instanceof Ractive || typeof object !== 'object' ) {
+				return false;
+			}
+
+			// Otherwise if this is a POJO, reset the model
+			this.value.reset( object );
+		}
+	};
+
+}());;/* Firebase v1.0.21 */ (function() {var h,aa=this;function n(a){return void 0!==a}function ba(){}function ca(a){a.sb=function(){return a.md?a.md:a.md=new a}}
 function da(a){var b=typeof a;if("object"==b)if(a){if(a instanceof Array)return"array";if(a instanceof Object)return b;var c=Object.prototype.toString.call(a);if("[object Window]"==c)return"object";if("[object Array]"==c||"number"==typeof a.length&&"undefined"!=typeof a.splice&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("splice"))return"array";if("[object Function]"==c||"undefined"!=typeof a.call&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("call"))return"function"}else return"null";
 else if("function"==b&&"undefined"==typeof a.call)return"object";return b}function ea(a){return"array"==da(a)}function fa(a){var b=da(a);return"array"==b||"object"==b&&"number"==typeof a.length}function q(a){return"string"==typeof a}function ga(a){return"number"==typeof a}function ha(a){var b=typeof a;return"object"==b&&null!=a||"function"==b}function ia(a,b,c){return a.call.apply(a.bind,arguments)}
 function ja(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function r(a,b,c){r=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?ia:ja;return r.apply(null,arguments)}
@@ -20263,9 +20339,7 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
     // app.coffee
     root.require.register('burnchart/src/app.js', function(exports, require, module) {
     
-      var App, header, user;
+      var App, header;
-      
-      user = require('./modules/user');
       
       header = require('./components/header');
       
@@ -20275,9 +20349,6 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
         template: require('./templates/layout'),
         'components': {
           'Header': header
-        },
-        'data': {
-          'user': user.data
         }
       });
       
@@ -20288,13 +20359,28 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
     // header.coffee
     root.require.register('burnchart/src/components/header.js', function(exports, require, module) {
     
-      var firebase;
+      var firebase, user;
       
       firebase = require('../modules/firebase');
       
+      user = require('../modules/user');
+      
       module.exports = Ractive.extend({
         'template': require('../templates/header'),
-        init: function() {}
+        init: function() {
+          console.log(this.get('user.uid'));
+          return this.on('login', function() {
+            return firebase.login(function(err) {
+              if (err) {
+                throw err;
+              }
+            });
+          });
+        },
+        'data': {
+          user: user
+        },
+        'adapt': [Ractive.adaptors.Ractive]
       });
       
     });
@@ -20368,9 +20454,7 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
       
       module.exports = user = new Ractive();
       
-      user.render();
+      user.observe('uid', function() {
-      
-      user.observe('*', function() {
         return console.log('User', arguments);
       });
       
@@ -20379,7 +20463,7 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
     // header.mustache
     root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user}}","            {{user.displayName}} logged in","        {{else}}","            <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>","        {{/user}}","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
     });
 
     // layout.mustache

public/js/app.js

@@ -7,9 +7,7 @@
     // app.coffee
     root.require.register('burnchart/src/app.js', function(exports, require, module) {
     
-      var App, header, user;
+      var App, header;
-      
-      user = require('./modules/user');
       
       header = require('./components/header');
       
@@ -19,9 +17,6 @@
         template: require('./templates/layout'),
         'components': {
           'Header': header
-        },
-        'data': {
-          'user': user.data
         }
       });
       
@@ -32,13 +27,28 @@
     // header.coffee
     root.require.register('burnchart/src/components/header.js', function(exports, require, module) {
     
-      var firebase;
+      var firebase, user;
       
       firebase = require('../modules/firebase');
       
+      user = require('../modules/user');
+      
       module.exports = Ractive.extend({
         'template': require('../templates/header'),
-        init: function() {}
+        init: function() {
+          console.log(this.get('user.uid'));
+          return this.on('login', function() {
+            return firebase.login(function(err) {
+              if (err) {
+                throw err;
+              }
+            });
+          });
+        },
+        'data': {
+          user: user
+        },
+        'adapt': [Ractive.adaptors.Ractive]
       });
       
     });
@@ -112,9 +122,7 @@
       
       module.exports = user = new Ractive();
       
-      user.render();
+      user.observe('uid', function() {
-      
-      user.observe('*', function() {
         return console.log('User', arguments);
       });
       
@@ -123,7 +131,7 @@
     // header.mustache
     root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user}}","            {{user.displayName}} logged in","        {{else}}","            <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>","        {{/user}}","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>"].join("\n");
     });
 
     // layout.mustache

src/app.coffee

@@ -1,5 +1,3 @@
-user = require './modules/user'
-
 header = require './components/header'
 
 document.title = 'BurnChart: GitHub Burndown Chart as a Service'
@@ -11,8 +9,4 @@ App = Ractive.extend
     'components':
         'Header': header
 
-    # TODO: observe Model Ractive data.
-    'data':
-        'user': user.data
-
 module.exports = new App()

src/components/header.coffee

@@ -1,10 +1,19 @@
 firebase = require '../modules/firebase'
+user     = require '../modules/user'
 
 module.exports = Ractive.extend
 
     'template': require '../templates/header'
 
     init: ->
-        # # Login user.
+        # TODO: how to access adapted ractive model?
-        # firebase.login (err) ->
+        console.log @get 'user.uid'
-        #     throw err if err
+
+        # Login user.
+        @on 'login', ->
+            firebase.login (err) ->
+                throw err if err
+
+    'data': { user }
+
+    'adapt': [ Ractive.adaptors.Ractive ]

src/modules/user.coffee

@@ -1,8 +1,5 @@
 # Currently logged-in user.
 module.exports = user = new Ractive()
 
-# Init now.
+user.observe 'uid', ->
-do user.render
-
-user.observe '*', ->
     console.log 'User', arguments

src/templates/header.mustache

@@ -1,10 +1,10 @@
 <div id="head">
     <div class="right">
-        {{#user}}
+        {{#user.displayName}}
             {{user.displayName}} logged in
         {{else}}
-            <a href="#" class="github"><span class="icon github"></span> Sign In</a>
+            <a href="#" class="github" on-click="login"><span class="icon github"></span> Sign In</a>
-        {{/user}}
+        {{/user.displayName}}
     </div>
 
     <h1><span class="icon fire-station"></span></h1>