flash.moe/templates/ascii/index.twig

{% extends 'ascii/master.twig' %}

{% set header_title = 'ascii table' %}
{% set header_minimal = true %}

{% set styles = styles|default([])|merge([ globals.assetsInfo.get('ascii.css') ]) %}
{% set scripts = scripts|default([])|merge([ globals.assetsInfo.get('ascii.js') ]) %}

{% set table = [
    ['Null character',                'NUL'],
    ['Start of heading',              'SOH'],
    ['Start of text',                 'STX'],
    ['End of text',                   'ETX'],
    ['End of transmission',           'EOT'],
    ['Enquiry',                       'ENQ'],
    ['Acknowledgement',               'ACK'],
    ['Bell',                          'BEL'],
    ['Backspace',                     'BS' ],
    ['Horizontal tab',                'HT' ],
    ['Line feed',                     'LF' ],
    ['Vertical tab',                  'VT' ],
    ['Form feed',                     'FF' ],
    ['Carriage return',               'CR' ],
    ['Shift out/X-On',                'SO' ],
    ['Shift in/X-Off',                'SI' ],
    ['Delta line escape',             'DLE'],
    ['Device control 1 (often XON)',  'DC1'],
    ['Device control 2',              'DC2'],
    ['Device control 3 (often XOFF)', 'DC3'],
    ['Device control 4',              'DC4'],
    ['Negative acknowledgement',      'NAK'],
    ['Synchronous idle',              'SYN'],
    ['End of transmit block',         'ETB'],
    ['Cancel',                        'CAN'],
    ['End of medium',                 'EM' ],
    ['Substitute',                    'SUB'],
    ['Escape',                        'ESC'],
    ['File separator',                'FS' ],
    ['Group separator',               'GS' ],
    ['Record separator',              'RS' ],
    ['Unit separator',                'US' ],

    ['Space'],
    ['Excalamation mark'],
    ['Double quotes', 'quot'],
    ['Hash'],
    ['Dollar'],
    ['Percent'],
    ['Ampersand', 'amp'],
    ['Single quote'],
    ['Open parenthesis'],
    ['Close parenthesis'],
    ['Asterisk'],
    ['Plus'],
    ['Comma'],
    ['Hyphen'],
    ['Period'],
    ['Slash'],
    ['Zero'],
    ['One'],
    ['Two'],
    ['Three'],
    ['Four'],
    ['Five'],
    ['Six'],
    ['Seven'],
    ['Eight'],
    ['Nine'],
    ['Colon'],
    ['Semicolon'],
    ['Less than', 'lt'],
    ['Equals'],
    ['Greater than', 'gt'],
    ['Question mark'],
    ['At symbol'],
    ['Uppercase A'],
    ['Uppercase B'],
    ['Uppercase C'],
    ['Uppercase D'],
    ['Uppercase E'],
    ['Uppercase F'],
    ['Uppercase G'],
    ['Uppercase H'],
    ['Uppercase I'],
    ['Uppercase J'],
    ['Uppercase K'],
    ['Uppercase L'],
    ['Uppercase M'],
    ['Uppercase N'],
    ['Uppercase O'],
    ['Uppercase P'],
    ['Uppercase Q'],
    ['Uppercase R'],
    ['Uppercase S'],
    ['Uppercase T'],
    ['Uppercase U'],
    ['Uppercase V'],
    ['Uppercase W'],
    ['Uppercase X'],
    ['Uppercase Y'],
    ['Uppercase Z'],
    ['Opening bracket'],
    ['Backslash'],
    ['Closing bracket'],
    ['Caret'],
    ['Underscore'],
    ['Accent grave'],
    ['Lowercase a'],
    ['Lowercase b'],
    ['Lowercase c'],
    ['Lowercase d'],
    ['Lowercase e'],
    ['Lowercase f'],
    ['Lowercase g'],
    ['Lowercase h'],
    ['Lowercase i'],
    ['Lowercase j'],
    ['Lowercase k'],
    ['Lowercase l'],
    ['Lowercase m'],
    ['Lowercase n'],
    ['Lowercase o'],
    ['Lowercase p'],
    ['Lowercase q'],
    ['Lowercase r'],
    ['Lowercase s'],
    ['Lowercase t'],
    ['Lowercase u'],
    ['Lowercase v'],
    ['Lowercase w'],
    ['Lowercase x'],
    ['Lowercase y'],
    ['Lowercase z'],
    ['Opening curly brace'],
    ['Vertical bar'],
    ['Closing curly brace'],
    ['Tilde'],

    ['Delete', 'DEL'],
] %}

{% block container %}
    <div class="ascii-wrap">
        <div class="ascii-search">
            <div class="ascii-search-box">
                <input type="search" id="search" placeholder="Filter..." autocomplete="off">
            </div>
            <div class="ascii-search-hint js-invisible-on-scroll">
                Type <em><code>printable</code></em> for all printable characters, or <em><code>control</code></em> for all control characters.
            </div>
        </div>
        <div class="ascii-chars">
            {% for code, info in table %}
                {% set is_printable = code > 31 and code < 127 %}
                {% set has_html = is_printable and info[1] is defined %}
                {% set print = is_printable ? code|chr : info[1] %}

                <div class="ascii-char" data-key-code="{{ code }}" data-key-desc="{{ info[0] }}" data-key-print="{{ print }}" data-copy="{{ print }}" {% if has_html %}data-key-html="{{ info[1] }}"{% endif %}>
                    <div class="ascii-char-print">{{ print }}</div>
                    <div class="ascii-char-desc">{{ info[0] }}</div>
                    <div class="ascii-char-misc">
                        <div class="ascii-char-misc-item" data-copy="{{ code }}">
                            <div class="ascii-char-misc-item-head">Decimal</div>
                            <div class="ascii-char-misc-item-value">{{ code }}</div>
                        </div>
                        <div class="ascii-char-misc-item" data-copy="{{ code|decoct }}">
                            <div class="ascii-char-misc-item-head">Octal</div>
                            <div class="ascii-char-misc-item-value">{{ code|decoct }}</div>
                        </div>
                        <div class="ascii-char-misc-item" data-copy="{{ code|dechex }}">
                            <div class="ascii-char-misc-item-head">Hex</div>
                            <div class="ascii-char-misc-item-value">{{ code|dechex }}</div>
                        </div>
                        {% if has_html %}
                        <div class="ascii-char-misc-item" data-copy="&amp;{{ info[1] }};">
                            <div class="ascii-char-misc-item-head">HTML</div>
                            <div class="ascii-char-misc-item-value">&amp;{{ info[1] }};</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <script type="text/javascript" src="{{ globals.assetsInfo.get('ascii.js') }}"></script>
{% endblock %}