Зеро блок в Тильде: десять типов элементов, и почему аккордеона среди них нет

Зеро блок (Zero Block, блок T396) — блок Тильды, где элементы стоят на свободном холсте, а не в готовой сетке. Рантайм собирает в нём ровно десять типов элемента: текст, фигуру, картинку, кнопку, видео, HTML-код, подсказку, форму, галерею и вектор. Аккордеона, табов, таймера и карты среди них нет — их кладут внутрь элемента HTML-кода.

Каждый элемент внутри артборда несёт атрибут data-elem-type. Рантайм читает его и по нему выбирает, какую функцию позвать — это обычная развилка switch в файле tilda-zero-1.1.min.js. Развилка перечисляет десять значений, и ветки «всё остальное» у неё нет. Поэтому десять — закрытый список, а не «столько удалось вспомнить».

«Раз» и «доля» — из переписи пяти страниц, а не из справки. Восемь типов из десяти встретились хоть раз; tooltip и gallery — ни разу, хотя функции для них в рантайме есть.

Аккордеон, табы, бегущая строка, таймер обратного отсчёта, карта, квиз, поиск по сайту — ни одного из них в списке десяти нет. Формулировать это надо аккуратно, потому что напрашивающаяся фраза «в Тильде такого нет» неверна: шесть из этих семи в Тильде есть, просто не в зеро блоке. Ниже — что замер разрешает утверждать, а что нет.

Единственная из семи задач, про которую замер разрешает сказать «в Тильде этого нет», — бегущая строка. Все тридцать вхождений слова marquee в корпусе объяснены до единого: перед каждым стоит -webkit-, это правило CSS-сброса. На живых страницах бегущая строка встречается — но всегда рукописным кодом в блоке «свой код», а не блоком Тильды.

В обратную сторону есть одна приятная неожиданность. «Читать далее» внутри текста — не самодельное: рантайм зеро блока сам ищет в артборде .ql-undercut и подгружает под него скрипт. И табы зеро блок хоть и не умеет создавать, но умеет быть их содержимым: при data-connect-with-tab="yes" он слушает displayChanged и перерисовывается, когда вкладку открыли, — иначе элементы в скрытой вкладке посчитались бы по нулевой ширине.

Единственный из десяти типов, внутрь которого можно положить что угодно своё, — html. Функция, которая его обслуживает, побайтово совпадает с функцией для фигуры: рантайм ставит рамку по одиннадцати полям и уходит, содержимое не трогает вообще. И вот замер, который стоит держать в голове: в 354 элементах пяти страниц Тильды элемент html встретился 1 раз — это 0.3% всех элементов, а текста, фигур и картинок — 88,8% на троих. Зеро блок в живой жизни используют как холст для вёрстки, а не как контейнер для своего кода.

Оговорка, без которой любое из этих отрицаний врёт: отсутствие в корпусе не равно отсутствию в Тильде. Тильда привязывает функции отложенно, через t_onFuncLoad, поэтому функция может вызываться в файле, который у нас есть, а определяться в постраничном бандле, которого нет. Замер «упоминается / определяется» это показывает прямо: t817_init — 2 упоминания и 0 определений, t972_init — 14 и 0. Такие предметы отмечены выше как «частично» или названы по имени блока без разбора кода.

Общее место — «у Тильды пять разрешений: 320, 480, 640, 960 и 1200». Как утверждение о платформе это неверно, и проверяется одной строкой поиска по вашей же странице.

Список лежит в атрибуте data-artboard-screens у самого артборда. Числа 320, 480, 640, 960, 1200 рантайм подставляет только тогда, когда атрибута нет вовсе, — это запасной вариант, единственный числовой массив во всём файле ядра. В переписи 39 артбордов:

• 320,480,640,960,1200 — 38 артбордов
• 320,480,640,960,1440 — 1 артборд , и это rec1024570506 на tilda.cc

Тот единственный артборд с верхним значением 1440 стоит на собственной странице tilda.cc. То есть верхнюю границу меняет сама Тильда, и код, который рассчитывает на 1200, на такой странице считает не то.

Второе следствие, из которого ломаются поиски по разметке: значения полей для самого крупного разрешения лежат в атрибуте без суффикса. Рантайм так и читает — на максимальном разрешении берёт data-artboard-height, на остальных data-artboard-height-res-960 и так далее. Поэтому в корпусе суффиксов ровно столько:

Ноль у 1200 и 1440 — не пропуск в замере, а ровно то, что предсказывает код. Это и был контроль: сошлось.

Артборд с автовысотой помечен data-artboard-heightmode="hug" — других значений рантайм не сравнивает. Дальше происходит то, чего от разметки не ждёшь: посчитав высоту, рантайм записывает её назад в то же поле, которое читает как заданную высоту. Порог записи — расхождение больше 0,7 пикселя.

Три следствия, каждое проверяемо по коду и каждое объясняет знакомую странность:

1. Не все элементы увеличивают высоту. Из подсчёта исключены те, у которых отступ сверху или высота заданы в процентах, и те, что привязаны к низу или к центру. Такой элемент может свисать за край артборда, а автовысота его не заметит.
2. Быстрый путь расчёта доступен только автолейауту. Он требует класса t396__artboard-flex; обычный артборд с абсолютным позиционированием всегда идёт длинным путём — перебором прямых детей. В переписи артбордов на автолейауте 22 из 39.
3. Пересчёт идёт по таймеру всё время жизни страницы — раз в три секунды на каждый такой артборд, и снятия таймера в файле нет ни одного. Плюс ещё четыре источника пересчёта: готовность шрифтов, загрузка картинок и два наблюдателя за изменениями в поддереве.

За закрепление отвечает отдельный файл — tilda-zero-fixed-1.0.min.js, 3006 байт, 8 функций. Первое, что стоит про него знать: он не закрепляет. В файле нет ни position, ни transform, ни sticky, ни z-index. Всё, что он делает, — переключает три класса; сам position: fixed печатает в страницу публикатор Тильды, инлайновым правилом на конкретную запись.

Единственное событие, которое он слушает, — scroll, с ограничением в 200 миллисекунд. Единственное сравнение — текущая позиция скролла против числа из поля триггера. Из этого прямо следует то, что обычно выясняют опытным путём:

1. Верхней границы нет — блок не отпускается никогда. Ни конца артборда, ни конца страницы в расчёте не участвует.
2. Высота шапки не учитывается. Селектора шапки в файле нет вовсе, так что закреплённый блок и меню разъезжаются сами по себе.
3. Нечисловой триггер прячет блок навсегда. Значение вида 50vh в сравнении даёт «не число», условие не выполняется ни при каком скролле, и блок остаётся в состоянии, где он не только невидим, но и не принимает клики.
4. Прозрачный фон отменяет распорку под плашкой «Made on Tilda»: блок без фона выпадает из внутреннего реестра, и нижний закреплённый блок эту плашку накроет.

Сдвиг страницы вниз под закреплённой сверху шапкой — ещё один отдельный файл, tilda-zero-top-shift-1.0.min.js, и делает он ровно одну вещь: ставит padding-top у <body> равным высоте артборда. Ни в одной из пяти страниц корпуса он не подключён, и атрибута, который его включает, в разметке тоже нет ни одного — так что сказать о нём можно только то, что написано в его коде.

Файл ядра не обёрнут ни в модуль, ни в замыкание, поэтому формально глобальны все 99 его функций. Ниже — те, за которые есть смысл браться из своего кода, и состояние, которое можно прочитать вместо того, чтобы измерять заново.

События, на которые можно подписаться вместо опроса в setInterval:

• artBoardRendered — на артборд, единственное всплывающее — можно слушать на document
• artBoardResized — на артборд, не всплывает
• zero:height-changed — на .t396, после того, как автовысота переписала поле
• zero:window-width-changed — на document, ширина, не высота

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

• tilda.cc/ru/ главная Тильды, страница 75717 — 18 элементов в 2 артбордах
• tilda.education/en/ её образовательный сайт, страница 145229936 — 118 элементов в 23 артбордах
• smv-shop.ru/contacts клиентский сайт, страница 28337012 — 99 элементов в 5 артбордах
• smv-shop.ru/test1234 его страница магазина, страница 141185516 — 39 элементов в 4 артбордах
• mo-ti.ru страница на автолейауте, страница 9692335 — 80 элементов в 5 артбордах

Контроль замера. Зеро блок помечается в разметке четырьмя способами, и рантайм ищет по всем четырём: два атрибута, каждый со значением 396 или 121. Сумма по всем четырём — 38 + 1 + 0 + 0 = 39, — совпала с числом артбордов, найденных независимо, по классу. Значит пятого способа пометки в этих страницах нет.

Что этот контроль попутно вскрыл: зеро блок внутри попапа несёт data-record-type="2071", а зеро-блоком его делает второй атрибут — data-parenttplid="396". Практический вывод: селектор [data-record-type="396"] найдёт только те зеро блоки, что не в попапе. Это не догадка — рантайм сам ищет по обоим атрибутам, собирая селектор из двух половин.

Список из семи задач выше проверялся отдельным проходом — по 161 файлам, 16.5 МБ, каждая задача несколькими написаниями: номер блока, имя класса, английское слово, имя функции. Считались вхождения, а не строки: ядро зеро блока — одна строка в 44 395 байт, и построчный счёт вернёт на нём единицу при любом числе совпадений.

Контроль того прохода: заведомо существующее нашлось четырьмя независимыми написаниями — gallery 445 вхождений, tooltip 333, t396 31 468, data-elem-type 1592. И третья, независимая от кода проверка десятки: в 25 сохранённых страницах 1558 фактических значений data-elem-type дали ровно 9 различных — все из объявленных десяти и ни одного неожиданного. Плюс перепись самих функций: определений t396_add* ровно 10, и каждое имя встречается в файле по 2 раза — определение и единственный вызов. Других точек входа нет, подсунуть одиннадцатый тип неоткуда.

Чего на этой странице нет: списка «что можно сделать в зеро блоке». Это вопрос про редактор, а на руках у нас его вывод, а не его интерфейс — пять готовых страниц и код рантайма. Утверждать по ним, что показывает панель настроек, было бы домыслом.