JSFiddle - React, Tailwind, and code Playground

by randynwalsh

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://www.methvin.com/splitter/splitter.js"></script>
<div id="MySplitter">
    <div>
        <div id="ok_div">OK</div>
        <p id="paraone" style="color:red" >ThiThis is para one This is para one This is para one This is para one This is para one This is para one This is para one This is para one This is para one This is para one This is para one 
        </p>
        <p id="paratwo">This is paragraph two</p>
        <input id="txtbox" type="text" />
        <span id="curtag"></span>
     </div>
     <div id="propertyBox" class="jqueryide">this is it</div>
 </div>

CSS

#MySplitter {
    height: 200px;
    width: 500px;
    border: 5px solid #aaa;
}
#MySplitter div {
    overflow: auto;
}
.vsplitbar {
    width: 5px;
    background: #aaa;
}

JavaScript

var lastPropertyWidget;
var lastborder;

$(function() {
    $("#MySplitter").splitter();

    $("*:not(html, head, body, .jqueryide)").click(function() {
        if (lastPropertyWidget) {
            $(lastPropertyWidget).draggable('destroy');
        }

        loadProperties($(this))

        $(this).draggable({
            cancel: '',
            start: function(event, ui) {
                unloadProperties(false);
            }
        });


        lastPropertyWidget = this;
        return false
    });
    $("html, head, body").click(function() {
        unloadProperties(true);
    });
    $(".jqueryide").click(function() {
        unloadProperties(false);
    });
});


function loadProperties(widget) {

    unloadProperties(true);

    lastborder = $(widget).css("border");

    var content = '<table id="propertyTable">';
    $.each($(widget)[0].attributes, function(i, attrib) {

        var val = attrib.value;
        content += '<tr>';
        content += '<td style="border: 1px solid #C0C0C0;"><div class="attributeName" style="white-space:nowrap; overflow:hidden;">';
        content += htmlEncode(attrib.name) + ':&nbsp;'
        content += '</div></td>';
        content += '<td style="width:100%; border: 1px solid #C0C0C0;">';
        content += '<input type="text" class="attributeValue" style="width:100%; border-width: 0;';
        content += ' padding: 0;"';
        content += ' value="' + htmlEncode(val) + '" />'
        content += '</td>';
        content += '</tr>';
    });


    content += '</table>';

    $('#propertyBox').html(content);

    //  lastPropertyWidget = widget;
    // $(widget).css("border", "2px solid purple");
    // alert('ok ' + $(widget).outerHTML());
}

function unloadProperties(completely) {
    if (lastPropertyWidget) {

        // unload current widget
        $('#propertyTable').find(("tr")).each(

        function(i, tr) {
            var atrName = $(tr).find(".attributeName").text();
            var atrValue =...