oscript-ui
oscript-ui

Текст и значения

Листья дерева — то, что человек читает: заголовки, надписи, абзацы, ссылки, машинные значения, картинки. Текст из данных кладут строкой на место ребёнка: она становится узлом и экранируется всегда.

Какой род взять#

  • Заголовок — место в оглавлении страницы, уровень от 1 до 6.
  • Надпись — кусок строки со своей ролью: название, пояснение, приглушённое.
  • Примечание — абзац мелким шрифтом: описание, источник значения, «ничего не найдено».
  • Ссылка — переход; внутрь кладут текст, значок, картинку.
  • Текст — сама строка. Экранируется по своей природе.
  • Код — машинное значение моноширинным: имя, адрес, ключ, команда.
  • Шаблон — фраза для перевода с местами %1…%N, которые занимают узлы.
  • Картинка — внешний рисунок. Значок из набора — компонент «Иконка».
  • Проза — чужой документ (README) из HTML, который кит сам санитизирует.
  • Готовое — костыль перехода: строка разметки, собранная не деревом.

Заголовок#

Уровень заголовка — не оформление, а место в оглавлении страницы. Поэтому он задаётся числом — первым аргументом, за ним текст и другие дети, — а не видом. Слово .Вид("имя") — имя объекта в его карточке.

Заголовки — уровень числом, а не тегом

Документы проекта

Редакции

HTML = Кит.Холст( Кит.Заголовок(2, "Документы проекта").Вид("имя"), Кит.Заголовок(3, "Редакции")).Рендер();

Уровня вне 1–6 кит не соберёт. Заголовок без содержимого не печатается: в оглавлении страницы он остался бы дырой.

Уровень 7 — исключение

Кит: заголовок уровня «7» не бывает — уровень от 1 до 6. Уровень задаёт место заголовка в оглавлении страницы, и пропуск уровня ломает его для скринридера.

Попытка Кит.Заголовок(7); Исключение HTML = Кит.Примечание(КраткоеПредставлениеОшибки(ИнформацияОбОшибке())).Рендер(); КонецПопытки;

Надпись#

Надпись — span с ролью в строке; роль задаёт слово .Вид(…). «Название» — главное слово строки, «пояснение» — подсказка рядом, «приглушённая» — второстепенное, «приписка» — мелкая строка под значением, «ключ» — имя настройки.

Надписи — кусок строки со своей ролью

отчётобновлён вчерачерновик
HTML = Кит.Ряд("строкой", Кит.Надпись("отчёт").Вид("название"), Кит.Надпись("обновлён вчера").Вид("пояснение"), Кит.Надпись("черновик").Вид("приглушённая")).Рендер();

Примечание#

Примечание — абзац мелким шрифтом. Текст можно передать сразу, а можно собрать детьми: примечание — холст, в нём бывают ссылка и код. Пустое примечание не печатается.

Примечание — абзац мелким шрифтом

Ключ показывается один раз.

HTML = Кит.Примечание("Ключ показывается один раз.").Вид("описание").Рендер();

Вид «источник» говорит, откуда взято значение. Вид «пусто» — ответ списка, который ничего не нашёл.

Источник значения и пустая выдача

задано в конфигурации: hub.quota

По запросу «бета» ничего не найдено

HTML = Кит.Холст( Кит.Примечание("задано в конфигурации: ", Кит.Код("hub.quota")).Вид("источник"), Кит.Примечание("По запросу «бета» ничего не найдено").Вид("пусто")).Рендер();

Вид «сноска» — самый мелкий петит страницы: обязательная атрибуция данных, лицензия, строка о правах внизу колонки. Кегль body-small цветом пояснения, без рамки и своих отступов — ритм задаёт контейнер; ссылка внутри того же кегля. В узкой странице сноска стоит по центру, в обычной — слева.

Сноска — атрибуция внизу колонки

Страна по адресу — IP to Country by DB-IP, лицензия CC BY 4.0.

HTML = Кит.Примечание("Страна по адресу — ", Кит.Ссылка("https://db-ip.com", "IP to Country by DB-IP"), ", лицензия CC BY 4.0.").Вид("сноска").Рендер();

Ссылка#

Ссылка — холст: за адресом идут дети — текст, машинное значение, значок. Вид «пилюля» — ссылка в ряду взаимоисключающих, «пилюля-текущая» — она же выбранная.

Ссылка — холст, а не только текст

HTML = Кит.Ссылка("/документы", Кит.Иконка("куб"), " Документы").Вид("пилюля").Рендер();

Ссылка в тексте — в абзаце, примечании, пункте списка, лиде карточки или окна, подсказке под полем — подчёркнута всегда: одним цветом её от текста не отличить (primary к тексту — 2.67:1 в светлой теме и 1.32:1 в тёмной при норме 3:1). Ссылка вне текста — пункт навигации, кнопка, ячейка таблицы, имя карточки — стоит одна и подчёркивания не получает; у ссылок-компонентов кита всегда есть свой класс.

Ссылка в тексте подчёркнута

Права участников меняются в разделе «Видимость и доступ».

HTML = Кит.Примечание("Права участников меняются в разделе ", Кит.Ссылка("/проекты/альфа/доступ", "«Видимость и доступ»"), ".").Рендер();

Адрес недопустимой схемы ссылкой не станет: содержимое останется видимым, но кликабельным не будет. Ссылка без содержимого не печатается вовсе.

Адрес javascript: снимает ссылку

открыть
HTML = Кит.Ссылка("javascript:alert(1)", "открыть").Рендер();

Текст#

Текстовый узел иначе как экранированным печатать не умеет. Чужая строка разметкой не станет, даже если в ней тег. Строка на месте ребёнка — тот же узел: Кит.Текст(…) пишут явно, только когда хотят его подчеркнуть.

Текст экранируется по своей природе

<script>alert(1)</script> — и это видно как текст

HTML = Кит.Примечание( Кит.Текст("<script>alert(1)</script> — и это видно как текст")).Рендер();

Код#

Код — машинное значение моноширинным шрифтом. Без вида он стоит внутри строки текста. «Блочный» — образец в несколько строк, переносы и отступы сохраняются. «Приглушённый» — значение, которое не спорит с соседним текстом.

Код — машинное значение моноширинным

приложение установить отчёт
Холст = Кит.Холст();
HTML = Кит.Холст( Кит.Код("приложение установить отчёт"), Кит.Код("Холст = Кит.Холст();").Вид("блочный")).Рендер();

Шаблон#

Шаблон держит фразу цельной строкой для перевода, а вставки собирает деревом. Места %1…%N занимают дети в порядке аргументов. Сам текст экранируется, дети печатаются разметкой.

Шаблон — фраза цельная, вставки собираются деревом

Проект main обновлён вчера

Шаблон = Кит.Шаблон("Проект %1 обновлён %2", Кит.Код("main"), Кит.Надпись("вчера").Вид("приглушённая")); HTML = Кит.Примечание(Шаблон).Рендер();

Число мест и детей обязано совпасть. Лишний ребёнок не напечатался бы, недостающий оставил бы дыру, поэтому кит останавливает сборку.

Картинка#

Картинка — внешний рисунок по адресу. Слово Подпись становится alt, слова Высота и Ширина — атрибутами: место под картинку занято до того, как приедет лист стилей. Пустой адрес не даёт битого изображения — узел печатается пустой строкой.

Картинка — внешний рисунок, Подпись() даёт alt

<img class="image-icon" src="/static/знак.svg" alt="Знак проекта" height="32">
HTML = Кит.Картинка("/static/знак.svg").Вид("значок") .Подпись("Знак проекта").Высота(32).Рендер();

Проза#

Проза — чужой документ, который деревом не собирается никогда: README, справка, отрисованная из Markdown. Кит.Проза(Html) сам санитизирует HTML при печати (html-sanitizer, профиль markdown-вывода: абзацы, заголовки, списки, ссылки, картинки, код, таблицы, details, а из вывода GitHub — зачёркнутое и галки списка задач, как профиль oscript-md): скрипт, обработчики событий и опасные адреса в страницу не попадут, а уже чистый HTML печатается как есть (дев-сборка 10). Оформление — блоки кода, таблицы и картинки документа в цветах кита. Сырой узел Готовое для README больше не нужен.

Проза — README, санитизированный китом

Установка

Поставьте пакет: opm install ромашка.

Скрипт и обработчик кит снимет.

Сообщить("Привет");
HTML = Кит.Проза("<h2>Установка</h2><p>Поставьте пакет: <code>opm install ромашка</code>.</p>" + "<script>alert(1)</script><p onclick=""alert(2)"">Скрипт и обработчик кит снимет.</p>" + "<pre><code>Сообщить(""Привет"");</code></pre>").Рендер();

Подсветку блоков кода ставят рядом узлом встроенного модуля — Кит.Скрипт().Модуль(Текст), см. Каркас документа.

Готовое#

Готовое — костыль перехода. Узел печатает строку как есть и ничего не экранирует. Он нужен, чтобы переводить экраны на дерево по одному, и стоит на виду у ревью.

Готовое — ⚠ костыль перехода: узел ничего не экранирует

собрано строкой
HTML = Кит.Готовое(Набор.Тег().Отрисовать("собрано строкой")).Рендер();

Гайдлайны#

<b>отчёт</b>

ДелайтеЗначение из данных — узлом Текст() или Код()
Код
Имя = "<b>отчёт</b>";
HTML = Кит.Примечание(Кит.Код(Имя)).Рендер();

отчёт

Не делайтеЗначение из данных — в Готовое(): оно станет разметкой
Код
Имя = "<b>отчёт</b>";
HTML = Кит.Примечание(Кит.Готовое(Имя)).Рендер();

Проект main обновлён вчера

ДелайтеФраза со вставками — шаблоном: переводчик видит её целиком
Код
HTML = Кит.Примечание(
	Кит.Шаблон("Проект %1 обновлён %2", Кит.Код("main"), "вчера")).Рендер();

Проект main обновлён вчера

Не делайтеФраза из кусков: порядок слов не переведёшь
Код
HTML = Кит.Примечание("Проект ", Кит.Код("main"), " обновлён ", "вчера").Рендер();

Проект

Редакции

ДелайтеЗаголовки по порядку уровней
Код
HTML = Кит.Холст(
	Кит.Заголовок(2, "Проект"),
	Кит.Заголовок(3, "Редакции")).Рендер();

Проект

Редакции
Не делайтеУровень выбран по размеру шрифта: оглавление с пропуском
Код
HTML = Кит.Холст(
	Кит.Заголовок(2, "Проект"),
	Кит.Заголовок(5, "Редакции")).Рендер();

Доступность#

  • Картинке, которая что-то сообщает, дайте подпись: она станет alt. Картинка без подписи печатается с пустым alt, и скринридер её пропускает.
  • Значок внутри ссылки декоративен, если рядом есть текст. Значок без текста подпишите — подпись станет его доступным именем.
  • Пустые заголовок, ссылка и примечание не печатаются: скринридер не встретит безымянный элемент.
  • Ссылка с адресом недопустимой схемы (javascript:) печатается одним содержимым.

Справка#

Кит.Заголовок()src/Классы/холст/Кит.os

Заголовок первого-шестого уровня. Уровень — не оформление, а место в оглавлении
страницы, поэтому он задаётся числом, а не видом. Вид словом: «имя» (имя объекта в его
карточке) | "" (без оформления).

Параметры:
 Уровень - Число - от 1 до 6.
 Р1…Р8   - ЭлементЭкрана, Строка - (необязательные) текст заголовка; строка — текст.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Надпись()src/Классы/холст/Кит.os

Надпись — кусок строки со своей ролью в ней. Вид словом: «название» | «пояснение»
| «сноска» | «приглушённая» | «ключ» (имя настройки) | «приписка» (мелкая строка под
значением) | «заголовок» и «лид» (две первые строки врезки) | «метка» (подпись поля,
собранного вручную) | «учётка» (имя вошедшего в шапке страницы) | "" (без оформления).

Параметры:
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) содержимое; строка — текст.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Примечание()src/Классы/холст/Кит.os

Примечание мелким шрифтом. Холст: примечание бывает и со ссылкой, и с машинным
значением внутри. Без содержимого не печатается вовсе. Вид словом: «описание»
(описание в карточке объекта) | «источник» (откуда взято значение) | «пусто» (список
ничего не нашёл) | "" (приглушённый абзац).

Параметры:
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) содержимое; строка — текст.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Ссылка()src/Классы/холст/Кит.os

Ссылка. Холст: внутрь кладут текст, машинное значение или картинку. Адрес недопустимой
схемы ссылкой не станет — содержимое останется видимым, кликабельным оно не будет.
Вид словом: «пилюля» (ссылка-пилюля в ряду взаимоисключающих) | «пилюля-текущая» (она
же, выбранная) | «знак» (ход на главную со знаком инсталляции) | «шапка» (ход в ряду
шапки страницы) | "" (обычная).

Параметры:
 Адрес - Строка - URL.
 Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) содержимое; строка — текст.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Текст()src/Классы/холст/Кит.os

Текстовый узел. Экранируется по своей природе: чужой текст разметкой не станет,
потому что этот узел иначе печатать не умеет.

Параметры:
 Значение - Произвольный - текст.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Код()src/Классы/холст/Кит.os

Машинное значение моноширинным шрифтом: имя, адрес, ключ. Вид словом: «блочный»
(образец в несколько строк, переносы сохраняются) | «приглушённый» (значение, которое
не спорит с соседним текстом) | "" (значение внутри строки текста).

Параметры:
 Значение   - Произвольный - текст (экранируется).
 Устаревший - Неопределено - не задаётся: вид кода теперь словом Вид(…).

Возвращаемое значение:
 ЭлементЭкрана

Кит.Шаблон()src/Классы/холст/Кит.os

Шаблон — текст с местами %1…%N, которые занимают дети узла в порядке добавления.
Текст экранируется, дети печатаются разметкой: так фраза остаётся цельной строкой
для перевода, а вставки в неё собираются деревом.

Параметры:
 Образец - Строка - текст с местами %1…%N.
 Р1…Р8   - ЭлементЭкрана, Строка - (необязательные) вставки по порядку мест.

Возвращаемое значение:
 ЭлементЭкрана

Кит.Картинка()src/Классы/холст/Кит.os

Картинка. Пустой адрес не даёт битого изображения — узел печатается пустой строкой.
Подпись узла становится alt, подсказка — title: картинка без подписи декоративна.
Вид словом: «значок» (внешняя картинка размером со значок) | «значок-малый» (тот же
значок при строке текста) | «превью» (показ загруженного изображения) | «знак» (знак
инсталляции в шапке) | "" (без оформления).

Параметры:
 Адрес      - Строка - адрес картинки.
 Устаревший - Неопределено - не задаётся: вид картинки теперь словом Вид(…).

Возвращаемое значение:
 ЭлементЭкрана

ЭлементЭкрана.Высота()src/Классы/холст/ЭлементЭкрана.os

Задаёт высоту картинки в пикселях: место под неё занято до того, как приедет лист
стилей, и страница не прыгает.

Параметры:
 Пикселей - Число - высота.

Возвращаемое значение:
 ЭлементЭкрана - этот же элемент.

ЭлементЭкрана.Ширина()src/Классы/холст/ЭлементЭкрана.os

Задаёт ширину картинки в пикселях. Ставится только там, где пропорции известны
заранее: у картинки произвольных пропорций ширину считает браузер, а заданная
впрессовала бы её в чужую рамку.

Параметры:
 Пикселей - Число - ширина.

Возвращаемое значение:
 ЭлементЭкрана - этот же элемент.

Кит.Проза()src/Классы/холст/Кит.os

Проза — чужой документ, который деревом не собирается никогда: README пакета, справка,
отрисованная из Markdown. Кит сам санитизирует его при печати (html-sanitizer, профиль
markdown-вывода: абзацы, заголовки, списки, ссылки, картинки, код, таблицы, details,
зачёркнутое и галки списка задач GitHub — как профиль oscript-md) —
скрипт, обработчики событий и опасные адреса в страницу не попадут; уже чистый HTML
печатается как есть. Оформление — вид «проза»: блоки кода, таблицы и картинки документа
в цветах кита (дев-сборка 10). Подсветку кода ставят рядом узлом Кит.Скрипт().Модуль(…).

Параметры:
 Html - Строка - HTML документа (недоверенный: санитизирует кит).

Возвращаемое значение:
 ЭлементЭкрана - узел рода «проза».

Кит.Готовое()src/Классы/холст/Кит.os

⚠ Костыль перехода: готовый кусок разметки, собранный не деревом. Существует ради того,
чтобы переводить экраны по одному, и на виду у ревью: узел ничего не экранирует.

Параметры:
 Разметка - Строка - ДОВЕРЕННЫЙ HTML: экранированием занят тот, кто его собрал.

Возвращаемое значение:
 ЭлементЭкрана