flash.moe/templates/tools/ascii/index.twig

81 lines
4 KiB
Twig
Raw Normal View History

{% extends 'tools/ascii/master.twig' %}
{% set header_title = 'ascii table' %}
{% set master_breadcrumbs = [{ url: '/tools', text: 'tools' }, { url: '/tools/ascii', text: 'ascii' }] %}
{% block column_left %}
<div class="sidelist">
<div class="sidelist-title">About</div>
<div class="sidelist-body">
<p>This page provides a filterable ASCII table allowing for quick lookup, in case you need a Delta Line Escape character for some reason.</p>
<p>I've heard the Linux manual pages also have an equivalent but sometimes you don't readily have access to a Linux terminal ok...</p>
</div>
</div>
<div class="sidelist">
<div class="sidelist-title">Filters</div>
<div class="sidelist-body">
<a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#" data-filter="">
<div class="sidelist-item-icon">A</div>
<div class="sidelist-item-label">All characters</div>
</a>
<a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#control" data-filter="control">
<div class="sidelist-item-icon">C</div>
<div class="sidelist-item-label">Control characters</div>
</a>
<a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#printable" data-filter="printable">
<div class="sidelist-item-icon">P</div>
<div class="sidelist-item-label">Printable characters</div>
</a>
</div>
</div>
{% endblock %}
{% block column_centre %}
<div class="ascii-search">
<div class="ascii-search-box">
<input type="search" class="js-ascii-search" placeholder="Filter..." autocomplete="off">
</div>
</div>
<div class="ascii-hint">
<div class="ascii-hint-body">
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 info in chars %}
{% set print = info.string %}
<div class="ascii-char {{ info.isPrintable ? 'ascii-char-printable' : 'ascii-char-control' }} js-ascii-char" data-key-code="{{ info.decimal }}" data-key-desc="{{ info.name }}" data-key-print="{{ info.string }}" data-copy="{{ info.string }}" {% if info.hasHtml %}data-key-html="{{ info.html }}"{% endif %}>
<div class="ascii-char-main">
<div class="ascii-char-print">{{ info.string }}</div>
<div class="ascii-char-desc">{{ info.name }}</div>
</div>
<div class="ascii-char-misc">
<div class="ascii-char-misc-item" data-copy="{{ info.decimal }}">
<div class="ascii-char-misc-item-head">Dec</div>
<div class="ascii-char-misc-item-value">{{ info.decimal }}</div>
</div>
<div class="ascii-char-misc-item" data-copy="{{ info.octal }}">
<div class="ascii-char-misc-item-head">Oct</div>
<div class="ascii-char-misc-item-value">{{ info.octal }}</div>
</div>
<div class="ascii-char-misc-item" data-copy="{{ info.hex }}">
<div class="ascii-char-misc-item-head">Hex</div>
<div class="ascii-char-misc-item-value">{{ info.hex }}</div>
</div>
{% if info.hasHtml %}
<div class="ascii-char-misc-item" data-copy="&amp;{{ info.html }};">
<div class="ascii-char-misc-item-head">HTML</div>
<div class="ascii-char-misc-item-value">&amp;{{ info.html }};</div>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<script type="application/json" class="js-ascii-table">{{ chars|json_encode|raw }}</script>
{% endblock %}