D3 Examples - Inline confirmation UI

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inline confirmation UI</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.min.js"></script>
        <script>
            $.get('gist.sass').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.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react-with-addons.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/jsxtransformer.js"></script>
        <script type="text/jsx">
            /** @jsx React.DOM */
​
            var Gist = React.createClass({
​
                getInitialState: function () {
                    return {
                        confirm: false,
                        remove: false
                    };
                },
​
                getConfirmState: function () {
                    return this.state.remove || !this.state.confirm;
                },
​
                render: function () {
​
                    return (
<div className="gist">
    <div className="item" hidden={this.state.remove}>
        <div className="item-pair" hidden={this.state.confirm}>
            <p className="item-text">Item</p>
            <button className="item-button" onClick={this.confirm}>
                <i className="button-icon fa fa-trash-o" />
                <span className="button-text">Remove</span>
            </button>
        </div>
        <p className="confirm" hidden={this.getConfirmState()}>
            <span className="confirm-text">Are you sure?</span>
            <button className="confirm-button" onClick={this.yes}>
                <span className="button-text">Yes</span>
            </button>
            <button className="confirm-button" onClick={this.no}>
                <span className="button-text">No</span>
            </button>
        </p>
    </div>
    <div className="gist-reset" hidden={!this.state.remove}>
        <button className="gist-button" onClick={this.reset}>
            <i className="button-icon fa fa-refresh"></i>
            <span className="button-text">Reset</span>
        </button>
    </div>
</div>
                    );
                },
​
                confirm: function () {
                    this.setState({confirm: true});
                },
​
                yes: function () {
                    this.setState({remove: true});
                },
​
                no: function () {
                    this.setState({confirm: false});
                },
​
                reset: function () {
                    this.setState({
                        confirm: false,
                        remove: false
                    });
                }
​
            });
​
            React.renderComponent(<Gist />, document.body);
        </script>
    </head>
    <body>
    </body>
</html>
    