D3 Examples - muon part 2

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>μ</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.js"></script>
        <script>
            $.get('muon.scss').done(function (sass) {
                var css = Sass.compile(sass);
                $('<style>').html(css).appendTo('head');
            });
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react-with-addons.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.1/jsxtransformer.js"></script>
        <script type="text/jsx">
/** @jsx React.DOM */
​
window.dispatch = _.extend({}, Backbone.Events);
window.model = {};
​
var local = JSON.parse(localStorage.getItem('muon2')),
    Model = Backbone.Model.extend({});
​
if (local) {
    model = new Model(local);
} else {
    model = new Model({user_signed_in: false});
}
​
var Signin = React.createClass({
​
    render: function () {
        return (
<div className={this.getClasses()}>
    <button className="muon-signin-submit" onClick={this.submit}>
        <span className="button-text">Sign in</span>
    </button>
</div>
        );
    },
​
    getClasses: function () {
        var classes = React.addons.classSet({
            'muon-signin': true
        });
        return classes;
    },
​
    submit: function () {
        model.set({
            user_signed_in: true,
            user_email: 'test@sproutsocial.com'
        });
    }
});
​
var App = React.createClass({
​
    render: function () {
        return (
<div className={this.getClasses()}>
    <button className="muon-app-signout" onClick={this.signOut}>
        <span className="button-text">Sign out</span>
    </button>
</div>
        );
    },
​
    getClasses: function () {
        var classes = React.addons.classSet({
            'muon-app': true
        });
        return classes;
    },
​
    signOut: function () {
        model.set({user_signed_in: false});
    }
});
​
var Muon = React.createClass({
​
    getInitialState: function() {
        return _.extend({}, model.toJSON());
    },
​
    componentWillMount: function () {
        var component = this;
        model.on('change', function (model) {
            var json = model.toJSON();
            component.setState(json);
            localStorage.setItem('muon2', JSON.stringify(json));
            console.log('Muon:componentWillMount', json);
        });
    },
​
    render: function () {
​
        console.log('Muon:render', this.state);
​
        return (
<div className={this.getClasses()}>
    {this.getAppState()}
</div>
        );
    },
​
    getClasses: function () {
        var classes = React.addons.classSet({
            'muon': true,
            'user-signed-in': this.state.user_signed_in
        });
        return classes;
    },
​
    getAppState: function () {
        return this.state.user_signed_in ? <App /> : <Signin /> ;
    }
});
​
$(function () {
    window.React = React;
    React.render(<Muon />, document.body);
});
        </script>
    </head>
    <body>
    </body>
</html>
    