JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div id="edit-fields"></div>
<div id="container"></div>

CSS

.edit-label {
    padding: 7px;
}

JavaScript

var LABJACK_OVERVIEW_IMG_SRC = 'http://gleap.org/static/img/T7-cartoon.png';
var DEVICE_IMAGE_X_OFFSET = 150;
var DEVICE_IMAGE_Y_OFFSET = 10;
var VALUE_LABEL_X_OFFSET = -40;
var DEVICE_IMG_WIDTH = 225;
var DEVICE_IMG_HEIGHT = 525;
var VALUE_TEXT_X_OFFSET = -50;
var VALUE_TEXT_Y_OFFSET = -6;
var EDIT_RECT_X_OFFSET = -30;
var EDIT_RECT_Y_OFFSET = 0;
var EDIT_RECT_WIDTH = 27;
var EDIT_RECT_HEIGHT = 12;
var EDIT_TEXT_X_OFFSET = 3;
var EDIT_TEXT_Y_OFFSET = 0;

var TEST_OVERLAY_SPEC = [
    {register: 'AIN0', yLocation: 0.783, editStrategy: null},
    {register: 'AIN1', yLocation: 0.757, editStrategy: null},
    {register: 'AIN2', yLocation: 0.664, editStrategy: null},
    {register: 'AIN3', yLocation: 0.639, editStrategy: null},
    {register: 'DAC0', yLocation: 0.545, editStrategy: 'simpleWrite'},
    {register: 'DAC1', yLocation: 0.519, editStrategy: 'simpleWrite'},
    {register: 'FIO0', yLocation: 0.426, editStrategy: 'fioWrite'},
    {register: 'FIO1', yLocation: 0.403, editStrategy: 'fioWrite'},
    {register: 'FIO2', yLocation: 0.308, editStrategy: 'fioWrite'},
    {register: 'FIO3', yLocation: 0.283, editStrategy: 'fioWrite'}
];

var EDIT_CONTROLS_TEMPLATE_STR = '<div id="{{ . }}-edit-control" class="row-fluid edit-control">' +
    '<div class="span1 edit-label">{{ . }}</div>' +
    '<div class="span3"><input id="{{ . }}-val-input" type="text" placeholder="val to write"></div>' +
    '<div class="span4">' +
    '<a href="#" id="{{ . }}-write-btn" class="write-button btn btn-success">write</a>' +
    '<a href="#" id="{{ . }}-close-btn" class="close-button btn btn-warning">return to read-mode</a>' +
    '</div>' +
    '</div>';
var EDIT_CONTROLS_TEMPLATE = Handlebars.compile(EDIT_CONTROLS_TEMPLATE_STR);
var EDIT_CONTROL_ID_TEMPLATE = Handlebars.compile('#{{ . }}-edit-control');
var WRITE_BTN_ID_TEMPLATE = Handlebars.compile('#{{ . }}-write-btn');
var CLOSE_BTN_ID_TEMPLATE = Handlebars.compile('#{{ . }}-close-btn');
var VAL_INPUT_ID_TEMPLATE =...