Truly Ergonomic keycode table editor

Truly Ergonomic keycode table editor

HTML

<address>created by <a href="[email protected]">Yuri Khan</a>, released into public domain</address>

<select id="layout">
    <option value="ansi" selected="selected">ANSI</option>
    <option value="iso">ISO</option>
    <option value="jis">JIS</option>
    <option value="keypad">Keypad</option>
    <option value="rare">Rare keys</option>
</select>

<label><input type="checkbox" id="warn"/>Dim Linux-incompatible keys</label>

<div id="sources" class="ansi"><div id="warning-wrapper">
    <div id="kbd">
    <div id="fkeys" class="row">
        <div class="main"
            ><span id="esc" class="dark" data-u="29">Esc</span
            ><span class="spacer"></span
            ><span data-u="3A">F1</span
            ><span data-u="3B">F2</span
            ><span data-u="3C">F3</span
            ><span data-u="3D">F4</span
            ><span class="spacer"></span
            ><span class="dark" data-u="3E">F5</span
            ><span class="dark" data-u="3F">F6</span
            ><span class="dark" data-u="40">F7</span
            ><span class="dark" data-u="41">F8</span
            ><span class="spacer"></span
            ><span data-u="42">F9</span
            ><span data-u="43">F10</span
            ><span data-u="44">F11</span
            ><span data-u="45">F12</span
        ></div>
        <div class="nav"
            ><span class="dark" data-u="46">⎙</span
            ><span class="dark" data-u="47">⇳</span
            ><span class="dark" data-u="48">⎊</span
        ></div>
        <div class="keypad"></div>
    </div>
    <div class="row">
        <div class="main">
            <div><span id="grave" data-u="35">`~</span
                ><span id="hankaku" class="dark" data-u="94">半角</span
                ><span data-u="1E">1!</span
                ><span data-u="1F">2@</span
                ><span data-u="20">3#</span
                ><span data-u="21">4$</span
                ><span data-u="22">5%</span
                ><span data-u="23">6^</span
       ...

CSS

address { float: right; opacity: 0.5; font-size: smaller; }
form { display: block; margin-top: 5mm; background-color: #d3d7cf; color: black; padding: 5mm; }
textarea { width: 100%; height: 18em; background-color: #2e3436; color: #73d216; font-family: monospace; }

#targets>div { display: inline-block; vertical-align: top; width: 157mm; }
#targets>#teck { text-align: center;
    padding: 5mm 5mm 20mm 5mm; background-color: #2e3436; color: #f7f8f5;
    border-radius: 3mm;
}
#targets>#notes { display: inline-block; width: 81mm; }
#targets input { width: 9mm; height: 9mm;
    background-color: #2e3436; color: #f7f8f5;
    border-top: 2px solid #555753; border-left: 2px solid #555753;
    border-bottom: 2px solid #000000; border-right: 2px solid #000000;
    border-radius: 4px;
}
#targets .spacer { display: inline-block; width: 4mm; }
#targets #t-fkeys { margin-bottom: 4mm; }
#targets #t-gui, #targets #t-hen, #targets #t-tab, #targets #t-bksp,
#targets #t-enter { width: 14.75mm; }
#targets #t-lsh, #targets #t-rsh, #targets #t-lctrl, #targets #t-rctrl,
#targets #t-apps, #targets #t-space { width: 19mm; }
.cross { vertical-align: top; display: inline-block; height: 19.5mm; margin-bottom: -12mm;}
.cross>input, .cross>.stack { vertical-align: middle; display: inline-block; }
.cross>.stack>input { display: block; }

#sources { width: 239mm; padding: 3mm; border: 2px solid #ecf0eb;
    margin-bottom: 5mm;
    background-color: #f7f8f5; color: #000000; }
#sources .sup { color: #888a85; }
#sources .note { float: right }
#sources div { margin: 0.75mm 0mm 0.75mm 0mm; }
#sources .row { display: table-row; }
#sources .main, #sources .nav, #sources .keypad { display: table-cell; padding: 1mm 1mm; }
#sources .main div, #sources .nav div, #sources .keypad div { height: 9.5mm; }
#sources .nav div { text-align: center; }
#sources .nav div * { text-align: left; }
#sources.ansi #keypad, #sources.iso #keypad, #sources.jis #keypad, #sources.rare #keypad,
#sources.ansi #rare, #sources.iso...

JavaScript

function warn(warning) {
    function _warn(data)
    {
        if (typeof(data) === 'string')
        {
            return _warn([data]);
        }
        var result = data;
        result.warning = warning;
        return result;
    }
    return _warn;
}

var L = warn('Ignored by Linux kernel module');
var W = warn('Wide Linux keycode, unusable by XKB');

var usages = [
    '', '01h', '02h', '03h', 'A', 'B', 'C', 'D',
    'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
    'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
    'U', 'V', 'W', 'X', 'Y', 'Z', ['1!', '1'], ['2@', '2'],
    ['3#', '3'], ['4$', '4'], ['5%', '5'], ['6^', '6'], ['7&', '7'], ['8*', '8'], ['9(', '9'], ['0)', '0'],
    ['⏎', 'Enter'], ['⎋', 'Esc'], ['⌫', 'Backspace', 'Bksp'], ['↹', 'Tab'], ['␣', 'Space'], ['-_', '-'], ['=+', '='], ['[{', '['],
    [']}', ']'], ['\\|', '\\'], ['€#~', 'Euro1'], [';:', ';'], ['\'"', '\''], ['`~', '`'], [',<', ','], ['.>', '.'],
    ['/?', '/'], ['⇬', 'Caps Lock', 'Caps'], 'F1', 'F2', 'F3', 'F4', 'F5', 'F6',
    'F7', 'F8', 'F9', 'F10', 'F11', 'F12', ['⎙', 'PrtScr', 'PrtSc'], ['⇳⃢', 'Scroll Lock', 'Scroll'],
    ['⎉', 'Pause'], ['⎀', 'Insert', 'Ins'], ['⇱', 'Home'], ['⎗', 'Page Up', 'PgUp'], ['⌦', 'Delete', 'Del'], ['⇲', 'End'], ['⎘', 'Page Down', 'PgDn'], ['→', 'Right'],
    ['←', 'Left'], ['↓', 'Down'], ['↑', 'Up'], ['⇭', 'Num Lock', 'Num'], ['÷', 'K/'], ['×', 'K*'], ['−', 'K-'], ['+', 'K+'],
    ['⎆', 'KEnter'], ['1⇲', 'K1'], ['2↓', 'K2'], ['3⎘', 'K3'], ['4←', 'K4'], ['5⎅', 'K5'], ['6→', 'K6'], ['7⇱', 'K7'],
    ['8↑', 'K8'], ['9⎗', 'K9'], ['0⎀', 'K0'], ['.⌦', 'K.'], ['€\\|', 'Euro2'], ['▤', 'Apps', 'App'], ['Ⓘ', 'Power'], ['=', 'K='],
    'F13', 'F14', 'F15', 'F16', 'F17', 'F18', 'F19', 'F20',
    'F21', 'F22', 'F23', 'F24', 'Exec', 'Help', 'Menu', 'Select',
    'Stop', 'Again', 'Undo', 'Cut', 'Copy', 'Paste', 'Find', 'Mute',
    'Vol+', 'Vol−', L(['⇬⃞', 'Locking Caps']), L(['⇭⃞', 'Locking Num']), L(['⇳⃞', 'Locking Scroll']), [',⌦', 'K,'], L(['=⃞', 'K= AS/400']), ['\\_',...