JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="serverArea box">
    <span class="header">Server Area</span>
    <button class="addCSS">Add CSS</button>
    <button class="removeCSS">Remove CSS</button>
    <button class="setInvalid">Set Invalid</button>
    <br/>
    <div class="box">2: <input class="hubbedClientTextBox hubbedControl serverValue 2" data-guid='2'/></div>
    <div class="box">3: <input class="hubbedClientTextBox hubbedControl serverValue 3" data-guid='3'/></div>
</div>
<div class="clientArea box">
    <span class="header">Client Area</span>
    <div class="table">
        <div class="row">
            <div class="cell">
                <input class="hubbedClientTextBox hubbedControl 1" data-guid="1"/>
            </div>
            <div class="cell">
                <span class="classDisplay 1"></span>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <input class="hubbedTextBox hubbedClientTextBox hubbedControl 2" data-guid="2"/>
            </div>
            <div class="cell">
                <span class="classDisplay 2"></span>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <input class="hubbedTextBox hubbedClientTextBox hubbedControl 2" data-guid="2"/>
            </div>
            <div class="cell">
                <span class="classDisplay 2"></span>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="MSTBCell hubbedControl 4" data-guid="4">
                    <input class="hubbedTextBox hubbedClientTextBox hubbedControl 3" data-guid="3"/>
                    <span></span>
                </div>
            </div>
            <div class="cell">
                <span class="classDisplay 3"></span>
                <span> - </span>
                <span class="classDisplay 4"></span>
            </div>
        </div>
    </div>
    <button class="revert">Revert</button>
</div>

CSS

div.box
{
    border: 1px black solid;
    margin: 2px;
    padding: 2px;
}
div.table { display:table; }
div.row { display:table-row; }
div.cell { display:table-cell; }
div.MSTBCell { display:inline; border: 1px black solid; width:100%; height: 100%; }
span.header { display:block; }
input.invalidValue, input.invalidCharacter { background-color:rgb(255,128,128); }
.sending { background-color:rgb(128,255,128); }
.sendTimedOut { background-color:rgb(128,128,255); }

JavaScript

debugger;

// Setup
(function($) {
    var originalAddClass = $.fn.addClass;
    $.fn.addClass = function() {
        var r = originalAddClass.apply(this,arguments);
        if (this.is('.hubbedControl')) {
            this.trigger('cssChanged');
        }
        return r;
    };
    
    var originalRemoveClass = $.fn.removeClass;
    $.fn.removeClass = function() {
        var r = originalRemoveClass.apply(this,arguments);
        if (this.is('.hubbedControl')) {
            this.trigger('cssChanged');
        }
        return r;
    };
    
    var originalVal = $.fn.val;
    $.fn.val = function() {
        var r;
        if (arguments.length > 0 && this.is('.hubbedClientTextBox')) {
            var newVal = arguments[0];
            if (this.length > 1) {
                r = [];
                this.each(function(i, a) { 
                    r.push($(a).val(newVal)[0]);
                });
                return r;
            }
            var oldVal = this.data('__currentValue');
            if (oldVal !== newVal) {
                var res = this.hchctbCheck(newVal);
                if (res.pass) {
                    var transformed;
                    var transform = this.data('valueTransform');
                    if (transform) {
                        transformed = transform(res.filtered);
                    } else {
                        transformed = res.filtered;
                    }
                    newVal = transformed;
                    arguments[0] = newVal;
                    r = originalVal.apply(this,arguments);
                    this.data('__reversion', oldVal);
                    this.data('__currentValue', newVal);
                    this.trigger('change');
                    this.trigger('valChanged');
                } else {
                    newVal = oldVal;
                    arguments[0] = newVal;
                    r = originalVal.apply(this,arguments);
                }
            } else {
                r =...