JSFiddle - React, Tailwind, and code Playground

by josh3736

HTML

<div id="menu">
<table border=0 cellpading=0 cellspacing=0><tr>
<td>
    <table border=0 cellpading=0 cellspacing=0>
    <tr><th>Bar Code:<td><select id="symbol" style="width:64ex"></select>
    <tr><th>Bar Text:<td><input id="symtext" type="text" style="width:63ex">
    <tr><th>Alt Text:<td><input id="symaltx" type="text" style="width:63ex">
    <tr><th>Options:<td><input id="symopts" type="text" style="width:63ex">
    </table>
<td style="padding-left:10mm">
    <table border=0 cellpading=0 cellspacing=0>
    <tr><th>Scale:<td><input type="text" id="scale" value=2>
    <span class="button up"></span>
    <span class="button dn"></span>
    <tr><th>Rotate:<td>
        <label for="rotN"><input type="radio" name="rot" value="N" id="rotN" checked>Normal</label>
        <label for="rotR"><input type="radio" name="rot" value="R" id="rotR">90 CW</label>
        <label for="rotL"><input type="radio" name="rot" value="L" id="rotL">90 CCW</label>
        <label for="rotI"><input type="radio" name="rot" value="I" id="rotI">180</label>
    <tr><td><br>
    <tr><td><td><button onclick="render()">Show Barcode</button>
    </table>
<tr><td><br>
</table>
</div>
<canvas id="canvas" width=1 height=1 style="border:1px solid #fff;visibility:hidden"></canvas>
<div id="output" style="white-space:pre"></div>
<xmp id="debug" style="white-space:pre"></xmp>

CSS

#menu th {
    text-align:            right;
    padding-right:        1.5ex;
}
#menu span.button {
    border:                1px solid #000;
    background-color:    #eee;
    display:            inline-block;
    height:                9px;
    width:                15px;
    position:            relative;
    background-repeat:    no-repeat;
    background-position:50% 50%;
}
#menu span.button.up {
    top:                -5px;
    left:                -5px;
    background-image:    url(lib/up-arrow.gif);
}
#menu span.button.dn {
    top:                6px;
    left:                -26px;
    background-image:    url(lib/dn-arrow.gif);
}
#menu span.button:hover {
    background-color:    gold;
    border:                1px solid orange;
}
#scale {
    height:                16px;
    width:                3ex;
}

JavaScript

/* NOTE:
   Commented out all symbologies other than Aztec since the code for all 83 weighs in at
   6 MB.  Normally, bwip loads the code for each symbology on-demand, but I have to include
   it inline here since I can't put files on jsfiddle's server.
*/

// file: bwip.js
//
// Copyright (c) 2011,2012 Mark Warren
//
// See the LICENSE file in the bwip.js root directory
// for the extended copyright notice.

// The one and only global - our class constructor
function BWIPJS() {
    
    // PostScript state
    this.ptr    = 0;                // operand stack pointer
    this.stk    = [];                // operand stack
    this.dict     = {};                // current dictionary
    this.dstk    = [this.dict];        // dictionary stack
    this.gstk    = [];                // graphics state stack
    this.bmap    = null;                // host bitmap instance

    // dict-stack lookup
    this.dstk.get = function(id) {
        for (var i = this.length-1; i >= 0; i--) {
            if (this[i][id] !== undefined) {
                //BWIPJS.print('dstk::get=' + BWIPJS.pstostring(this[i][id]) +
                //    ' (' + (this[i][id] instanceof Function) + ')');
                return this[i][id];
            }
        }
    }

    // Initialize the graphics 
    this.greset();
}

// Objects for globally registering the encoders and fonts
BWIPJS.bwipp = {};
BWIPJS.fonts = {};

// Host-specific overrides
BWIPJS.print = function(s) {};
BWIPJS.debug = function(s) {};
//BWIPJS.load  = function(s) {};    // force a run-time error    

BWIPJS.psarray = function(v) {
    if (!(this instanceof BWIPJS.psarray))
        return new BWIPJS.psarray(v);

    if (typeof(v) == "number") {
        var a = [];
        for (var i = 0; i < v; i++)
            a[i] = null;

        this.value  = a;
        this.length = v;
        this.offset = 0;
    }
    else if (v instanceof Array) {
        this.value  = v;
        this.offset = 0;
        this.length = v.length;
    }
    else...