JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

html, body {
    font-size: 12;
    background: #aaa;
}

div.work-order {
    position: absolute;
    background: #f6f6f6;
    height: 80px;
    border: 1px solid #333;
    border-radius: 12px;
    list-style: none;
    transition: all .4s;
    z-index: 0;
}

.work-order.floating {
    
}

.work-order.full-width {
    
}

JavaScript 1.7

/** @jsx React.DOM */

var WorkOrder = React.createClass({
    statics: {
        width: 180,
        widthGutter: 10,
        height: 60,
        heightGutter: 10
    },
    propTypes: {
        title: React.PropTypes.string.isRequired,
        coords: React.PropTypes.object.isRequired,
        drawingStrategy: React.PropTypes.string.isRequired
    },

    
    calculateStyle: function (coords) {
    
        return {
            width: this.props.drawingStrategy !== 'full-width' ? WorkOrder.width : '100%',
            height: WorkOrder.height,
            top: coords.y * (WorkOrder.height + WorkOrder.heightGutter),
            left: coords.x * (WorkOrder.width + WorkOrder.widthGutter)
        };
    },

    render: function () {
        var style = this.calculateStyle(this.props.coords);
        return (<div style={style} className={"work-order " + this.props.drawingStrategy}>
            {this.props.title}
        </div>);    
    }
});

var WorkOrderBoard = React.createClass({
    propTypes: {
        workOrders: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
    },
    
    boxesPerRow: function () {
        var viewportWidth = $(window).width();
        var boxesPerRow = Math.floor(viewportWidth / WorkOrder.width);

        // drop to responsive if we're too narrow
        if (boxesPerRow <= 2) {
            boxesPerRow = 1
        }

        return boxesPerRow;
    },
    
    drawingStrategy: function () {
        return this.boxesPerRow() === 1 ? 'full-width' : 'floating';
    },
    
    calculateCoords: function (i) {
        var boxesPerRow = this.boxesPerRow();
    
        return {
            x: (i % boxesPerRow),
            y: Math.floor(i / boxesPerRow)
        };
    },

    componentDidMount: function () {
        $(window).bind('resize', this.forceUpdate.bind(this, null));
    },
    
    componentWillUnmount: function () {
        $(window).unbind('resize');
    },

    render: function () {
        
        var workOrders =...