JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.min.css">
<script type="text/javascript" src="http://build-master.jaspersoft.com:6680/jrs-pro-feature-visualizejs/client/visualize.js"></script>
<div id="test">
    <input type="text" id="percent" size="10" value="100" disabled></input>
        <span>%</span>  
    <button id="resize" disabled>resize</button>
    <button id="plus" disabled>+</button>
    <button id="minus" disabled>-</button>
    <button id="width" disabled>Fit Width</button>
    <button id="height" disabled>Fit Height</button>
    <button id="page" disabled>Fit Page</button>
    <a href="#">simple link</a>
</div>


<table style="width:100%;">
    <tr valign="top">
        <td style="width:80%"><div id="report" ></div></td>
         <td valign="top" style="width:20%" ><div id="filters"></div></td>
    </tr>
</table>

CSS

li {
    border: thin solid red;
    list-style: none;
}

#test{
    height:100px;

}

#report{
    width:100%;
    height:500px;
    background-color:rgba(48,156,64,1);
}

#filters{
    height:500px;
    width:250px;
    background-color:rgba(255,203,0,0.5);
}

JavaScript

var customOverlay = $("<div style='position:absolute;'></div>")
    .append(
    $("<div></div>").css({
        margin: "15px auto 10px auto",
        width: 32,
        height: 32,
        background: "url('http://bit.ly/1lWxxrd') transparent"
    })
).append(
        $("<div>Loading...</div>")
).css({
    top: 30,
    left: 0,
    margin: "0px auto 60px auto",
    height: 100,
    width: 200,
    opacity: 1,
    "font-size": 24,
    "padding-top": 1,
    "text-align": "center",
    "background-color": "white",
    "box-shadow": "0 0 20px #aaa",
    "border-radius": 10
});


var report,
    resource="/public/Samples/Reports/RevenueDetailReport",
    controls,
zoom = 1,
    percent = document.getElementById("percent"),
    resize = document.getElementById("resize"),
    plus = document.getElementById("plus"),
    minus = document.getElementById("minus"),
    width = document.getElementById("width"),
    height = document.getElementById("height"),
    page = document.getElementById("page");

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    report = v.report({
        resource: resource,
        container: "#report",
        loadingOverlay: customOverlay,
        success: function () {
            plus.removeAttribute("disabled");
             percent.removeAttribute("disabled");
             resize.removeAttribute("disabled");
            minus.removeAttribute("disabled");
            width.removeAttribute("disabled");
            height.removeAttribute("disabled");
            page.removeAttribute("disabled");
        },
        error: function (err) {
            alert(err.message);
        }
    });
    
     controls=v.inputControls({
                    container: "#filters",
                    resource: resource,
         loadingOverlay: customOverlay,
                    error:  function (err) {
                        alert(err.message);
                    },
                    events: {
      ...