JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<script src="https://cmrdemo.com/websites/partnerportal/template/scripts/plugin.minicolors.js"></script>
<div class="targetclass">div test</div>
<hr/>
<ul id="collapsible_2" class="formfield">
    <li class="field">
        <label class="field-label">Options</label>
        <div class="field-control">
            <span class="checkboxlist">
                <label>
                    <input type="checkbox" class="checkbox" data-key="border_top_width_container" data-target="targetclass" data-onchange-style="checkoption" data-option="border_width_container" data-placeholder="" checked />
                    <span>top</span>
                </label>
                <label>
                    <input type="checkbox" class="checkbox" data-key="border_right_width_container" data-target="targetclass" data-onchange-style="checkoption" data-option="border_width_container" data-placeholder="" checked />
                    <span>right</span>
                </label>
                <label>
                    <input type="checkbox" class="checkbox" data-key="border_bottom_width_container" data-target="targetclass" data-onchange-style="checkoption" data-option="border_width_container" data-placeholder="" checked />
                    <span>bottom</span>
                </label>
                <label>
                    <input type="checkbox" class="checkbox" data-key="border_left_width_container" data-target="targetclass" data-onchange-style="checkoption" data-option="border_width_container" data-placeholder="" checked />
                    <span>left</span>
                </label>
            </span>
        </div>
    </li>
    <li>
        <label class="field-label">Width</label>
        <div class="field-control">
            <input type="text" class="textbox" data-key="border_width_container" data-target="targetclass" data-unit="px" data-onchange-style="textoption" />
        </div>
    </li>
    <li>
        <label class="field-label">Style</label>
        <div...

CSS

.targetclass { background-color:#eee;}























.minicolors {
    position:relative
}

.minicolors-sprite {
   ...

JavaScript

var onchangestyle = {
    number: function(input) {
        var unit = $(input).attr('data-unit');
        if(unit == undefined)
            unit = "";
        $(input).val(function(index, value) {
            if(value != "")
                value = value.replace(/[^0-9]/g, '') + unit;
            if(value == "px" || value == "%")
                value = "";
            return value;
        });
    },
    style: function(input) {
        console.log($(input).val());
        var target = $(input).attr('data-target');
        var key = $(input).attr('data-key').split('_').join('-');
        var styles = {};
        key = key.substring(0, key.lastIndexOf("-"));
        styles[key] = $(input).val();        
        $('.' + target).css(styles);
    },
    textbox: function() {
        onchangestyle.number(this);
        onchangestyle.style(this);
    },
    textoption: function() {
        onchangestyle.number(this);
        var key = $(this).attr('data-key');
        var v = $(this).val();
        $('[data-option="'+key+'"]').each(function() {
            $(this).attr('data-placeholder', v);
            if($(this).is(":checked"))
                $(this).val(v);
            onchangestyle.style(this);
        });
    },
    checkoption: function() {
        if($(this).is(":checked")) {
            var v = $(this).attr('data-placeholder');
            $(this).val(v);
        } else {
            $(this).val('0px');
        }
        onchangestyle.style(this);
    },
    select: function() {
        onchangestyle.style(this);
    },
};

var onloadstyle = {
    color: function() {
        $(this).minicolors({
            change: function(hex) {
                $(this).attr('value', hex);
                if( !hex ) return;
                onchangestyle.style($(this));
            },
            changeDelay: 100
        }).blur(function() {
           onchangestyle.style($(this));
        });
    }
};


$('body').on('change', '[data-onchange-style]', function() {
    var...