erjemin/2026-etpgrf-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: настройки типографа (03) подключен Alpine

Browse Source
This commit is contained in:
Sergei Erjemin
2025-12-31 17:26:57 +03:00
parent 4f81e85a6c
commit ee95ce25a5
2 changed files with 112 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
etpgrf_site/typograph/templates/typograph/base.html
View File

@@ -5,11 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}ETPGRF - Типограф{% endblock %}</title> <title>{% block title %}ETPGRF - Типограф{% endblock %}</title>
<!-- Bootstrap 5 CSS --> {# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> {# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script>
{# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style> <style>
/* Небольшие стили для красоты */ /* Небольшие стили для красоты */

210
etpgrf_site/typograph/templates/typograph/index.html
View File

@@ -1,120 +1,128 @@
{% extends 'typograph/base.html' %} {% extends 'typograph/base.html' %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h3>Типограф</h3> <h3>Типограф</h3>
<form hx-post="{% url 'process_text' %}" hx-target="#result-area" hx-swap="innerHTML"> <form hx-post="{% url 'process_text' %}" hx-target="#result-area" hx-swap="innerHTML">
{% csrf_token %} {% csrf_token %}
<!-- Поле ввода --> <!-- Поле ввода -->
<div class="mb-3"> <div class="mb-3">
<textarea class="form-control" name="text" rows="10" placeholder="Вставьте текст сюда..."></textarea> <textarea class="form-control" name="text" rows="10" placeholder="Вставьте текст сюда..."></textarea>
</div> </div>
<!-- Блок настроек (Collapse) --> <!-- Блок настроек (Collapse) -->
<div class="mb-3"> <div class="mb-3">
<button class="btn btn-outline-secondary btn-sm mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#settingsCollapse" aria-expanded="false" aria-controls="settingsCollapse"> <button class="btn btn-outline-secondary btn-sm mb-2" type="button" data-bs-toggle="collapse"
⚙️ Настройки типографики data-bs-target="#settingsCollapse" aria-expanded="false" aria-controls="settingsCollapse">
</button> ⚙️ Настройки типографики
</button>
<div class="collapse" id="settingsCollapse"> <div class="collapse" id="settingsCollapse">
<div class="card card-body bg-light"> <div class="card card-body bg-light">
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h6>Основные</h6> <h6>Основные</h6>
<!-- Выбор языка --> <!-- Выбор языка (Alpine.js) -->
<label class="form-label small text-muted mb-0">Язык:</label> <!-- x-data инициализирует состояние. Берем описание первой опции сразу. -->
<select class="form-select form-select-sm" name="langs" id="selectLangs"> <div
<option value="ru" selected data-desc="Правила русского языка. Кавычки: «...», вложенные „...“. Тире: длинное (—).">Русский</option> x-data="{ desc: 'Только русская типографика: кавычки &laquo;ёлочки&raquo; (&bdquo;вложенные&ldquo;); длинное тире (&mdash;) с&nbsp;пробелами; &laquo;прилипающие&raquo; союзы и&nbsp;предлоги только для&nbsp;русского языка, и&nbsp;т.&thinsp;д.' }">
<option value="en" data-desc="Правила английского языка. Кавычки: “...”, вложенные ‘...’. Тире: английское (—).">Английский</option> <label class="form-label small text-muted mb-0">Язык:</label>
<option value="ru+en" data-desc="Основной русский, поддержка английских фраз. Вложенность кавычек учитывает оба языка.">Русский + Английский</option> <select class="form-select form-select-sm mb-2" name="langs"
<option value="en+ru" data-desc="Основной английский, поддержка русских фраз.">Английский + Русский</option> @change="desc = $event.target.options[$event.target.selectedIndex].dataset.desc">
</select> <option value="ru" selected
<!-- Блок для описания языка --> data-desc="Только русская типографика: кавычки &laquo;ёлочки&raquo; (&bdquo;вложенные&ldquo;); длинное тире (&mdash;) с&nbsp;пробелами; &laquo;прилипающие&raquo; союзы и&nbsp;предлоги только для&nbsp;русского языка, и&nbsp;т.&thinsp;д.">
<div id="descLangs" class="form-text text-muted small mb-2" style="min-height: 2.5em;"></div> Русский
</option>
<option value="en"
data-desc="Только английская типографика: кавычки &ldquo;лапки&rdquo; (&lsquo;вложенные&rsquo;); длинное тире (&mdash;) вплотную; &ldquo;прилипающие&rdquo; союзы и&nbsp;предлоги только для&nbsp;английского языка, и&nbsp;т.&thinsp;д.">
Английский
</option>
<option value="ru+en"
data-desc="Основной русский, поддержка английских фраз. Вложенность кавычек учитывает оба языка.">
Русский + Английский
</option>
<option value="en+ru" data-desc="Основной английский, поддержка русских фраз.">Английский +
Русский
</option>
</select>
<!-- Вывод описания -->
<div class="form-text text-muted small mb-2" style="min-height: 2.5em;" x-text="desc"></div>
</div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="quotes" id="optQuotes" checked> <input class="form-check-input" type="checkbox" name="quotes" id="optQuotes" checked>
<label class="form-check-label" for="optQuotes">Обработка кавычек</label> <label class="form-check-label" for="optQuotes">Обработка кавычек</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="layout" id="optLayout" checked> <input class="form-check-input" type="checkbox" name="layout" id="optLayout" checked>
<label class="form-check-label" for="optLayout">Тире и спецсимволы</label> <label class="form-check-label" for="optLayout">Тире и спецсимволы</label>
</div> </div>
<div class="form-check mb-2"> <div class="form-check mb-2">
<input class="form-check-input" type="checkbox" name="unbreakables" id="optUnbreakables" checked> <input class="form-check-input" type="checkbox" name="unbreakables" id="optUnbreakables" checked>
<label class="form-check-label" for="optUnbreakables">Неразрывные пробелы</label> <label class="form-check-label" for="optUnbreakables">Неразрывные пробелы</label>
</div> </div>
<!-- Режим вывода --> <!-- Режим вывода (Alpine.js) -->
<label class="form-label small text-muted mb-0">Режим вывода:</label> <div x-data="{ desc: 'Оптимально. Спецсимволы (—, ©) как есть, неразрывные пробелы как &nbsp;.' }">
<select class="form-select form-select-sm" name="mode" id="selectMode"> <label class="form-label small text-muted mb-0">Режим вывода:</label>
<option value="mixed" selected data-desc="Оптимально. Спецсимволы (—, ©) как есть, неразрывные пробелы как &amp;nbsp;.">Смешанный (Mixed)</option> <select class="form-select form-select-sm" name="mode"
<option value="unicode" data-desc="Компактно. Все символы в UTF-8 (включая неразрывный пробел U+00A0).">Юникод (Unicode)</option> @change="desc = $event.target.options[$event.target.selectedIndex].dataset.desc">
<option value="mnemonic" data-desc="Совместимость. Все спецсимволы заменяются на HTML-сущности (&amp;mdash;, &amp;copy;).">Мнемоники (&amp;nbsp;)</option> <option value="mixed" selected
</select> data-desc="Оптимально. Спецсимволы (—, ©) как есть, неразрывные пробелы как &amp;nbsp;.">
<!-- Блок для описания режима --> Смешанный
<div id="descMode" class="form-text text-muted small mb-2" style="min-height: 2.5em;"></div> (Mixed)
</div> </option>
<option value="unicode"
<div class="col-md-4"> data-desc="Компактно. Все символы в UTF-8 (включая неразрывный пробел U+00A0).">
<h6>Дополнительно</h6> Юникод (Unicode)
<div class="form-check"> </option>
<input class="form-check-input" type="checkbox" name="hyphenation" id="optHyphenation" checked> <option value="mnemonic"
<label class="form-check-label" for="optHyphenation">Переносы слов (&shy;)</label> data-desc="Совместимость. Все спецсимволы заменяются на HTML-сущности (&amp;mdash;, &amp;copy;).">
</div> Мнемоники (&amp;nbsp;)
<div class="form-check"> </option>
<input class="form-check-input" type="checkbox" name="symbols" id="optSymbols" checked> </select>
<label class="form-check-label" for="optSymbols">Символы ((c) &rarr; ©)</label> <div class="form-text text-muted small mb-2" style="min-height: 2.5em;" x-text="desc"></div>
</div> </div>
</div>
<div class="col-md-4">
<h6>Висячая пунктуация</h6>
<select class="form-select form-select-sm mb-2" name="hanging_punctuation">
<option value="both" selected>С обеих сторон</option>
<option value="left">Только слева</option>
<option value="right">Только справа</option>
<option value="none">Отключить</option>
</select>
</div>
</div>
</div>
</div> </div>
</div>
<!-- Кнопка отправки --> <div class="col-md-4">
<button type="submit" class="btn btn-primary btn-lg w-100">Типографировать</button> <h6>Дополнительно</h6>
</form> <div class="form-check">
<input class="form-check-input" type="checkbox" name="hyphenation" id="optHyphenation" checked>
<label class="form-check-label" for="optHyphenation">Переносы слов (&shy;)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="symbols" id="optSymbols" checked>
<label class="form-check-label" for="optSymbols">Символы ((c) &rarr; ©)</label>
</div>
</div>
<div class="col-md-4">
<h6>Висячая пунктуация</h6>
<select class="form-select form-select-sm mb-2" name="hanging_punctuation">
<option value="none" selected="">Отключена</option>
<option value="left">Только слева</option>
<option value="right">Только справа</option>
<option value="both">С обеих сторон</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Кнопка отправки -->
<button type="submit" class="btn btn-primary btn-lg w-100">Типографировать</button>
</form>
</div> </div>
<div class="col-md-12 mt-4"> <div class="col-md-12 mt-4">
<h3>Результат</h3> <h3>Результат</h3>
<pre id="result-area" class="result-box">Здесь появится результат...</pre> <pre id="result-area" class="result-box">Здесь появится результат...</pre>
</div> </div>
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function setupDynamicDescription(selectId, descId) {
const select = document.getElementById(selectId);
const desc = document.getElementById(descId);
if (!select || !desc) return;
function update() {
const selectedOption = select.options[select.selectedIndex];
desc.textContent = selectedOption.getAttribute('data-desc') || '';
}
select.addEventListener('change', update);
update(); // Инициализация при загрузке
}
setupDynamicDescription('selectLangs', 'descLangs');
setupDynamicDescription('selectMode', 'descMode');
});
</script>
{% endblock %} {% endblock %}