Типы нод

Нода — это редактируемый элемент блока: заголовок, картинка, кнопка, иконка, видео или карта. Ноды описываются в ключе nodes файла манифеста блока: каждая привязана к CSS-селектору, а ее тип определяет, какой формой элемент редактируется в интерфейсе и в каком формате хранится значение.

Тип ноды нужен в двух случаях: когда вы собираете собственный блок и передаете манифест методом landing.repo.register, и когда меняете блок через REST — селектор и формат значения в landing.block.updatenodes зависят от типа ноды.

Ноды описывают только редактируемые элементы. Оформление блока задает ключ style, дополнительные настройки — ключ attrs, повторяемые элементы — ключ cards.

После этой статьи вы сможете описать ноды в манифесте своего блока и подобрать формат значения для метода landing.block.updatenodes.

Какие бывают типы нодКакие бывают типы нод

Поля нодыПоля ноды

У ноды есть общие поля, которые используются у разных типов и задают базовую настройку элемента в редакторе. Отдельно от них есть типозависимые поля, которые работают только для конкретных типов.

Общие поля:

• name — название ноды в интерфейсе редактирования
• type — тип ноды
• allowInlineEdit — управление доступностью ноды для инлайн-редактирования. Если передать false, нода будет недоступна для инлайн-редактирования, но останется доступной в форме редактирования блока
• useInDesigner — управление участием ноды в дизайнере блока. Если передать false, элемент будет проигнорирован в дизайнере блока
• group — группировка нод. Если нескольким нодам в одном блоке задать одинаковое значение, при клике на любую из них откроется общая форма редактирования группы

Поля для отдельных типов:

Набор полей зависит от типа ноды и конкретного сценария блока.

Описание типовОписание типов

texttext

Текстовая нода для заголовков, абзацев и других текстовых элементов.

'.landing-block-node-card-title' => [
    'name' => 'Заголовок',
    'type' => 'text',
],

<h2 class="landing-block-node-card-title">Company24 video</h2>

imgimg

Нода изображения. Нодой может быть отдельный тег <img> или фоновое изображение контейнера, например <div>.

Для этого типа рекомендуется задавать dimensions, чтобы контролировать размер загружаемых изображений и не хранить в Битрикс24 слишком большие файлы.

Поддерживаются варианты dimensions:

• width / height — привести к фиксированному размеру
• maxWidth / maxHeight — уменьшать, если изображение больше заданного размера
• minWidth / minHeight — увеличивать, пока не достигнут минимум

'.landing-block-node-card-image' => [
    'name' => 'Изображение',
    'type' => 'img',
    'dimensions' => [
        'maxWidth' => 1920,
        'maxHeight' => 1080,
    ],
],

<img class="landing-block-node-card-image" src="/upload/demo.jpg" alt="">

Чтобы изображение отображалось, у ноды должен быть задан источник изображения:

• для тега <img> используется атрибут src
• для фонового элемента, например <div>, используется CSS-свойство background-image

linklink

Нода ссылки. Позволяет редактировать адрес и связанные параметры ссылки, например текст ссылки или режим открытия.

'.landing-block-node-card-button' => [
    'name' => 'Кнопка',
    'type' => 'link',
],

<a class="landing-block-node-card-button btn btn-primary" href="/">Read more</a>

Если ссылка оборачивает нетекстовый контент, можно указать skipContent => true, чтобы не изменять внутреннее содержимое при сохранении:

'.landing-block-node-card-button' => [
    'name' => 'Кнопка',
    'type' => 'link',
    'skipContent' => true,
],

iconicon

Нода иконки. Обычно меняет CSS-класс, который определяет отображаемую иконку.

'.landing-block-node-list-item-icon' => [
    'name' => 'Иконка',
    'type' => 'icon',
],

<i class="landing-block-node-list-item-icon fa fa-check"></i>

embedembed

Нода встраиваемого медиа-контента, например видео.

Значение такой ноды — объект. Его ключи передают в методе landing.block.updatenodes, а система раскладывает их по атрибутам элемента:

• src — адрес встраиваемого контента. Для <iframe> сохраняется в атрибут src, для других вариантов встраивания может использоваться data-src
• source — исходный URL, сохраняется в атрибут data-source
• preview — URL превью-изображения, сохраняется в data-preview
• ratio — соотношение сторон контейнера. Допустимые значения: embed-responsive-16by9, embed-responsive-9by16, embed-responsive-4by3, embed-responsive-3by4, embed-responsive-21by9, embed-responsive-9by21, embed-responsive-1by1. Значение применяется, только если в том же вызове передан новый src и родитель ноды имеет класс embed-responsive

'.landing-block-node-video' => [
    'name' => 'Видео',
    'type' => 'embed',
],

<div class="embed-responsive embed-responsive-16by9">
    <iframe
        class="landing-block-node-video"
        width="100%"
        src="//www.youtube.com/embed/q4d8g9Dn3ww"
        data-source="https://www.youtube.com/watch?v=q4d8g9Dn3ww"
        data-preview="https://example.com/preview.jpg"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

mapmap

Нода карты для блоков с географической привязкой.

Провайдер задается атрибутом data-map-provider, поддерживаются значения google и yandex. Как провайдер выбирается при добавлении блока, описано в статье Карты в блоках.

Типовая структура значения карты в data-map включает:

• center — координаты центра карты
• zoom — уровень масштабирования
• markers — массив маркеров

'.landing-block-node-map' => [
    'name' => 'Карта',
    'type' => 'map',
],

<div
    class="landing-block-node-map"
    data-map-provider="google"
    data-map='{
        "center":{"lat":55.751244,"lng":37.618423},
        "zoom":12,
        "markers":[
            {
                "title":"Офис",
                "description":"Москва, центр",
                "showByDefault":true,
                "latLng":{"lat":55.751244,"lng":37.618423}
            }
        ]
    }'>
</div>

componentcomponent

Нода для встраивания компонента в структуру блока.

'.landing-block-node-catalog' => [
    'name' => 'Каталог',
    'type' => 'component',
],

<div class="landing-block-node-catalog"></div>

styleimgstyleimg

Нода изображения, которым управляют через стилевые настройки блока.

'.landing-block-node-cover' => [
    'name' => 'Фоновое изображение',
    'type' => 'styleimg',
],

<div class="landing-block-node-cover"></div>

Группировка нодГруппировка нод

Чтобы несколько нод открывались в одной форме редактирования, укажите одинаковое значение group.

'.landing-block-node-title' => [
    'name' => 'Заголовок',
    'type' => 'text',
    'group' => 'hero-content',
],
'.landing-block-node-text' => [
    'name' => 'Текст',
    'type' => 'text',
    'group' => 'hero-content',
],
'.landing-block-node-button' => [
    'name' => 'Кнопка',
    'type' => 'link',
    // без group: редактируется отдельно
],

Как изменить ноду через RESTКак изменить ноду через REST

Селекторы нод из манифеста используют методы изменения блока:

• содержимое ноды меняет landing.block.updatenodes. Ключ в параметре data — это селектор ноды, а формат значения зависит от типа ноды. Форматы для каждого типа перечислены в разделе Форматы значений в data
• название тега ноды меняет landing.block.changeNodeName, например h2 на h3
• изображение для ноды типа img сначала загружают методом landing.block.uploadfile, а затем подставляют полученный src методом landing.block.updatenodes

Узнать, какие ноды есть в конкретном блоке, можно методом landing.block.getmanifest для размещенного блока или landing.block.getmanifestfile для шаблона из репозитория.

Права и ограниченияПрава и ограничения

Scope: landing

Кто может выполнять метод: в зависимости от метода

Ограничения:

• изменить можно только те элементы, которые описаны в ключе nodes. Селекторы, которых нет в манифесте, метод landing.block.updatenodes игнорирует
• селектор ноды лучше не делать совпадающим с селектором карточки того же блока: система этого не запрещает, но в редакторе будет непонятно, что редактируется
• у селектора из nodes не должно быть в style фонового типа background, block-default или block-border: landing.repo.register вернет ошибку MANIFEST_INTERSECT_IMG
• свой набор нод описывают только в собственном блоке: его регистрируют методом landing.repo.register. Манифест штатного блока Битрикс24 через REST не меняется, подробнее: Файл манифеста

Продолжите изучениеПродолжите изучение

• Файл манифеста
• Атрибуты
• Расширенное описание карточек
• Локализация блока
• Обновить ноды блока landing.block.updatenodes
• Получить манифест блока landing.block.getmanifest