use ractive adaptor to interact between instances; github login

Gruntfile.coffee

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

bower.json

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

public/js/app.bundle.js

@@ -19974,61 +19974,97 @@
 //
 // Changes to either Ractive will be reflected in both.
 
-(function () {
+(function ( global, factory ) {
 
-	var RactiveWrapper;
+    'use strict';
 
-	Ractive.adaptors.Ractive = {
+    // Common JS (i.e. browserify) environment
-		filter: function ( object ) {
+    if ( typeof module !== 'undefined' && module.exports && typeof require === 'function' ) {
-			return object instanceof Ractive;
+        factory( require( 'ractive' ) );
-		},
+    }
-		wrap: function ( ractive, otherRactive, keypath, prefixer ) {
-			return new RactiveWrapper( ractive, otherRactive, keypath, prefixer );
-		}
-	};
 
-	RactiveWrapper = function ( ractive, otherRactive, keypath, prefixer ) {
+    // AMD?
-		var wrapper = this;
+    else if ( typeof define === 'function' && define.amd ) {
+        define([ 'ractive' ], factory );
+    }
 
-		this.value = otherRactive;
+    // browser global
+    else if ( global.Ractive ) {
+        factory( global.Ractive );
+    }
 
-		this.changeHandler = otherRactive.on( 'change', function ( changeHash ) {
+    else {
-			wrapper.shortCircuit = true;
+        throw new Error( 'Could not find Ractive! It must be loaded before the ractive-adaptor-ractive plugin' );
-			ractive.set( prefixer( changeHash ) );
+    }
-			wrapper.shortCircuit = false;
-		});
 
-		this.resetHandler = otherRactive.on( 'reset', function ( newData ) {
+}( typeof window !== 'undefined' ? window : this, function ( Ractive ) {
-			wrapper.shortCircuit = true;
-			ractive.update( keypath );
-			wrapper.shortCircuit = false;
-		});
-	};
 
-	RactiveWrapper.prototype = {
+    'use strict';
-		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
+    if ( !Ractive ) {
-			this.value.reset( object );
+        throw new Error( 'Could not find Ractive! Check your paths config' );
-		}
+    }
-	};
 
-}());;/* 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}}
+    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.setting = true;
+            ractive.set( prefixer( changeHash ) );
+            wrapper.setting = false;
+        });
+
+        this.resetHandler = otherRactive.on( 'reset', function ( newData ) {
+            wrapper.setting = true;
+            ractive.update( keypath );
+            wrapper.setting = false;
+        });
+    };
+
+    RactiveWrapper.prototype = {
+        teardown: function () {
+            this.changeHandler.cancel();
+            this.resetHandler.cancel();
+        },
+        get: function () {
+            return this.value.get();
+        },
+        set: function ( keypath, value ) {
+            // Only set if the we didn't originate the change.
+            if (!this.setting) {
+                this.value.set( keypath, value );
+            }
+        },
+        reset: function ( object ) {
+            if (this.setting) {
+                return;
+            }
+
+            // 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)}
@@ -20368,7 +20404,6 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
       module.exports = Ractive.extend({
         'template': require('../templates/header'),
         init: function() {
-          console.log(this.get('user.uid'));
           return this.on('login', function() {
             return firebase.login(function(err) {
               if (err) {
@@ -20407,7 +20442,6 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
       
       FB = (function() {
         function FB() {
-          console.log('Init Firebase');
           this.client = new Firebase("https://" + config.firebase + ".firebaseio.com");
           this.auth = new FirebaseSimpleLogin(this.client, function(err, obj) {
             if (err || !obj) {
@@ -20450,20 +20484,14 @@ goog.exportProperty(FirebaseSimpleLogin,"onOpen",FirebaseSimpleLogin.onOpen);Fir
     // user.coffee
     root.require.register('burnchart/src/modules/user.js', function(exports, require, module) {
     
-      var user;
+      module.exports = new Ractive();
-      
-      module.exports = user = new Ractive();
-      
-      user.observe('uid', function() {
-        return console.log('User', arguments);
-      });
       
     });
 
     // header.mustache
     root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
     
-      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");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user.displayName}}","            {{user.displayName}} logged in","        {{else}}","            <a href=\"#\" class=\"github\" on-click=\"login\"><span class=\"icon github\"></span> Sign In</a>","        {{/user.displayName}}","    </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

@@ -36,7 +36,6 @@
       module.exports = Ractive.extend({
         'template': require('../templates/header'),
         init: function() {
-          console.log(this.get('user.uid'));
           return this.on('login', function() {
             return firebase.login(function(err) {
               if (err) {
@@ -75,7 +74,6 @@
       
       FB = (function() {
         function FB() {
-          console.log('Init Firebase');
           this.client = new Firebase("https://" + config.firebase + ".firebaseio.com");
           this.auth = new FirebaseSimpleLogin(this.client, function(err, obj) {
             if (err || !obj) {
@@ -118,20 +116,14 @@
     // user.coffee
     root.require.register('burnchart/src/modules/user.js', function(exports, require, module) {
     
-      var user;
+      module.exports = new Ractive();
-      
-      module.exports = user = new Ractive();
-      
-      user.observe('uid', function() {
-        return console.log('User', arguments);
-      });
       
     });
 
     // header.mustache
     root.require.register('burnchart/src/templates/header.js', function(exports, require, module) {
     
-      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");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        {{#user.displayName}}","            {{user.displayName}} logged in","        {{else}}","            <a href=\"#\" class=\"github\" on-click=\"login\"><span class=\"icon github\"></span> Sign In</a>","        {{/user.displayName}}","    </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/components/header.coffee

@@ -6,9 +6,6 @@ module.exports = Ractive.extend
     'template': require '../templates/header'
 
     init: ->
-        # TODO: how to access adapted ractive model?
-        console.log @get 'user.uid'
-
         # Login user.
         @on 'login', ->
             firebase.login (err) ->

src/modules/firebase.coffee

@@ -6,16 +6,13 @@ authCb = ->
 
 class FB
     
-    constructor: ->
+    constructor: ->       
-        console.log 'Init Firebase'
-        
         # Setup a new client.
         @client = new Firebase "https://#{config.firebase}.firebaseio.com"
         
         # Check if we have a user in session.
         @auth = new FirebaseSimpleLogin @client, (err, obj) ->
-            if err or not obj
+            return authCb err if err or not obj
-                return authCb err
 
             # Save user.
             user.set obj

src/modules/user.coffee

@@ -1,5 +1,2 @@
 # Currently logged-in user.
-module.exports = user = new Ractive()
+module.exports = new Ractive()
-
-user.observe 'uid', ->
-    console.log 'User', arguments