D3 Examples - Relative Sprout

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sprizzout, yo.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="mobile-web-app-capable" content="yes">
        <script src="//use.typekit.net/exf4iwe.js"></script>
        <script>try{Typekit.load();}catch(e){}</script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mcustomscrollbar.concat.min.js"></script>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mCustomScrollbar.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.js"></script>
        <script>
            $.get('sprout.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.4/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 */
​
var dispatch = _.extend({}, Backbone.Events),
    local = JSON.parse(localStorage.getItem('sprout')),
    Model = Backbone.Model.extend({
        defaults: {
            page: null
        }
    }),
    model;
​
if (local) {
    model = new Model(local);
} else {
    model = new Model();
}
​
var Transition = React.addons.CSSTransitionGroup;
​
var App = 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('sprout', JSON.stringify(json));
            // console.log('App:componentWillMount', json);
        });
    },
​
    componentDidMount: function () {
        $('.sprout-body, .sprout-east-wrap, .sprout-west-wrap')
            .mCustomScrollbar({
                theme: 'minimal-dark',
                scrollInertia: 200
            });
    },
​
    render: function () {
        console.log('App:render', this.state);
        return (
<div className={this.getClasses()}>
    <div className="sprout-body" role="main">
        <div className="sprout-body-center">
            {this.getPage()}
        </div>
    </div>
    <div className="sprout-east" role="complementary">
        <div className="sprout-east-center">
            <div className="sprout-east-offset">
                <div className="sprout-east-wrap">
                    <div className="dev-stub">Page-specific sidebar</div>
                </div>
            </div>
        </div>
    </div>
    <div className="sprout-west" role="complementary">
        <div className="sprout-west-center">
            <div className="sprout-west-offset">
                <div className="sprout-west-wrap">
                    <div className="sprout-west-body">
                        <div className="dev-stub">
                            No position:fixed
                            Custom scrollbars
                        </div>
                    </div>
                    <div className="sprout-west-foot"></div>
                </div>
            </div>
        </div>
    </div>
    <div className="sprout-north" role="banner">
        <div className="sprout-north-center">
​
        </div>
    </div>
</div>
        );
    },
​
    getClasses: function () {
        var classes = React.addons.classSet({
            'sprout': true,
            'standalone': window.navigator.standalone
        });
        return classes;
    },
​
    getPage: function () {
        switch (this.state.page) {
            default:
                return <Front {...this.state} />;
        }
    }
});
​
var Front = React.createClass({
​
    render: function () {
        return (
<div className={this.getClasses()}>
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
    <div className="dev-message-stub" />
</div>
        );
    },
​
    getClasses: function () {
        var classes = React.addons.classSet({
            'sprout-front': true
        });
        return classes;
    }
});
​
$(function () {
    window.React = React;
    window.dispatch = dispatch;
    window.model = model;
    React.initializeTouchEvents(true);
    React.render(<App />, document.body);
});
        </script>
    </head>
    <body>
    </body>
</html>
​
    