JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://rawgithub.com/ifandelse/ConduitJS/master/lib/conduit.js"></script>
<script src="https://rawgit.com/postaljs/postal.js/master/lib/postal.js"></script>
<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>
<script src="https://rawgit.com/postaljs/postal.react/master/lib/postal.react.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

@import url(http://fonts.googleapis.com/css?family=Orbitron:400,700);

body {
    padding: 1em;
}

.container {
    background: transparent url("http://demos.telerik.com/kendo-ui/content/dataviz/gauge/gauge-container-partial.png") no-repeat 50% 50%;
    width: 386px;
    height: 386px;
    text-align: center;
    margin: 0 auto 30px auto;
}
.gauge {
    width: 350px;
    height: 300px;
    margin: 0 auto;
}
.container .k-slider {
    margin-top: -15px;
    width: 140px;
}

.uom-select {
    font-size: 1.5em;
    color: #A3A3A3;
    padding: .10em 1em .10em 1em;
    border: 1pt solid silver;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
    display:block;
    margin: auto;
    text-align:center;
}

.speed-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 52pt;
    font-weight: bold;
    color: hsla(203, 92%, 39%, 0.81);
    text-align:center;
}

JavaScript 1.7

/** @jsx React.DOM */

var Kendo = {};

Kendo.RadialGauge = React.createClass({

    getDefaultProps: function() {
        return {
            theme: "silver",
            minorUnit: 5,
            startAngle: -30,
            endAngle: 210,
            max: 180
        }
    },

    componentDidMount: function() {
        var props = this.props;
        $(this.getDOMNode()).kendoRadialGauge({
            theme: props.theme,
            pointer: {
                value: props.value
            },    
            scale: {
                minorUnit: props.minorUnit,
                startAngle: props.startAngle,
                endAngle: props.endAngle,
                max: props.max
            }
        });
    },
    
    componentWillReceiveProps: function(nextProps) {
        if(nextProps.value !== this.props.value) {
            $(this.getDOMNode()).data("kendoRadialGauge").value(nextProps.value);            
        }
    },

    render: function() {
        return <div className="gauge" />;
    }
});

Kendo.Slider = React.createClass({

    mixins: [React.postal],

    getDefaultProps: function() {
        return {
            min: 0,
            max: 180,
            showButtons: false
        }
    },

    componentDidMount: function() {
        var props = this.props;
        $(this.getDOMNode()).kendoSlider({
            min: props.min,
            max: props.max,
            showButtons: props.showButtons,
            value: this.props.value,
            change: this.handleChange
        });
    },
    
    componentWillUnmount: function() {
        $(this.getDOMNode()).data("kendoSlider").destroy();
    },
    
    handleChange: function(e) {
        this.publish("change.speed", { speed: e.value });
    },

    render: function() {
        return <div />
    }
});

var UnitOfMeasure = React.createClass({

    mixins: [React.postal],
    
    handleChange: function(e) {
        this.publish("change.uom", { uom: $(this.getDOMNode()).val() });
    },
   ...