Работа с исходным кодом
на Платформе LP

Расширение стандартных возможностей

Измененный HTML код будет отображаться прямо в редакторе, но из него будут удалены следующие теги:

iframe, frameset, frame, video, audio, bgsound, source, track, object, embed, applet, param, script, link, meta, title

В предпросмотре и в публикации все теги будут отображаться без изменений.

Так же стоит отменить, что комментарии вида <!--  --> будут приводить к ошибке. Это известная проблема.

В отличии от HTML, из CSS ничего вырезаться не будет.

Во всех виджетах кроме HTML-виджета включена инкапсуляция стилей.

Это значит, что все стили могут применяться только к текущему виджету, и его дочерним виджетам.

Технически это сделано так. Допустим, вы написали следующий код:

.demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

Перед появление на странице он будет обработан, и добавлен будет в следующем виде:

#meta20 .demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

Где meta20 - уникальный id элемента, внутри которого расположен HTML код виджета.

Для работы с адаптивностью стоит использовать классы screen-xs для телефонов, screen-sm для планшетов, screen-md для ноутбуков и screen-lg для широких экранов.

.screen-xs .demo { /* для телефонов */
  font-size: 14px;
}
.screen-sm .demo { /* для планшетов */
  font-size: 24px;
}
.screen-md .demo { /* для ноутбуков */
  font-size: 36px;
}
.screen-lg .demo { /* для широких экранов */
  font-size: 48px;
}

Главное, чтобы класс .screen-* был в начале селектора.

Компоненты позволяют интегрировать некоторые стандартные возможности редактора в ваш код.

Чтобы добавить компонент, в нужном месте HTML кода нужно вставить:

<component name="myname"></component>

Где myname - название компонента, данное ему при добавлении.

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

Если в коде встречается несколько компонентов с одним именем, то при изменении любого из них, все будут синхронизироваться.

Иконка, которую так же можно изменить по клику.

Цвет иконки можно изменить, указав параметр color.

<component name="myname" color="black"></component>

Параметр color может принимать одно из следующих значений:

• white - белый цвет
• black - черный цвет
• _textcolor - цвет текста. На светлом фоне будет темным, а на темном - белым.
• Название переменной типа "Цвет" - об этом ниже.

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

Контейнер, внутрь которого перетаскивающем можно вставлять виджеты Платформы.

Важно понимать, что виджеты внутри такого контейнера пытаются автоматически определить цвет фона, и исходя из этого правильно показываться.

Вот виджет в контейнере на белом фоне:

А вот виджет в контейнере на белом фоне:

Оно работает правильно при условии, что цвет фона указан в настройках родительского виджета.

Если цвет фона указан не в настройках стиля родительского виджета, а в CSS, то  виджет в контейнере не сумеет распознать цвет фона, и получится что-то такое:

Получается темный цвет на темном фоне. Многие виджеты, помимо текста, будут отображаться не правильно.

На этот случай у нас есть параметр colorside, который дает знать виджетам, на светлом(light) фоне они находятся, или на темном(dark).

Вот предыдущий пример, но с параметром colorside="dark":

<component name="myname" colorside="dark"></component>

Выглядит так:

Параметр colorside может принимать одно из следующих значений:

• light - контейнер на светлом фоне
• dark - контейнер на темном фоне
• Свойство .colorside переменной с типом "Цвет". Об этом ниже.

Если в коде встречается несколько компонентов с одним именем, то все, кроме первого, будут удалены.

Важное замечение. Стоит избегать изменений свойств overflow, transform и стили текста (color, font-style и т.д.) если внутри элемента с этим свойством находится контейнер для виджетов.

Настройки можно использовать как внутри HTML, так и внутри CSS кода.

Вставляются они с помощью фигурных скобок {{ }}:

<div class="{{ classname }}"></div>

.demo {
    border: {{ bordersize }}px solid {{ bordercolor }};
    text-align: {{ align }};
}

Внутри можно использовать математические операции и стандартные функции Javascript.

.demo {
    border-radius: {{ Math.min(100, radius * 10) }}%;
}

Известная проблема: в HTML коде нельзя использовать вставки переменных в именах атрибутов. Такой код работать не будет:

<div {{ attrname }}="..."></div>

В HTML коде вставки использовать можно в именах тегов, содержимом атрибутов, в тексте. Внутри CSS ограничений никаких нет.

Цвета можно модифицировать.

Меняются отдельно каналы hue, saturation и lightness и alpha.

Полный набор функций:

Все функции - установить (set), увеличить (inc), уменьшить (dec) и инвертировать (inv) работают одинаково со всеми каналами. Все они получают на вход число от 0 до 1.

Функция установить (set) задает значение канала.

Функции уменьшить (dec) и увеличить (inc) пропорционально уменьшают, или увеличивают значение канала.

Вот пример работы l_inc и l_dec

А вот пример работы s_inc и s_dec

Функция инвертировать (inv) увеличивает значение канала, если оно маленькое, и уменьшает, если оно большое.

Вот пример:

На примере выше мы сначала устанавливаем цвет фона, а затем устанавливаем цвет текста. Причем цвет текста - инвертированный цвет фона. И мы видим, что на темном фоне цвет текста белый, а на светлом - черный.

Так же у настроек цвета есть функция colorside(), которая возвращает "dark", если цвет темный, или "light", если цвет светлый. Это удобно для передачи в параметры иконок и контейнеров.

В _textcolor содержится цвет текста видждета. Эту переменную удобно использовать, когда необходимо сделать виджет, раскрашиваемый под цвет фона, как это делает текст.

С этой переменной можно работать так же, как и с любыми другими настройками типа Цвет.

Значение переменной определяется исходя из настроек фона виджета, и всех его родительских виджетов.

Функционал виджета Спойлер заключается в двух атрибутах.

plp-spoiler-container - элемент с этим атрибутом будет скрываться или показываться.

plp-spoiler-toggle - элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом plp-spoiler-container.

И plp-spoiler-container и plp-spoiler-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.

Верстка виджета при этом может быть произвольной. Элемент с атрибутами, указанными выше, могут располагаться в любом месте.

Вы можете сделать даже несколько элементов с атрибутом plp-spoiler-container и несколько с атрибутом plp-spoiler-toggle, и все будет работать.

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

Для этого используется атрибут plp-countdown-root.

Далее, в коде виджета можно использовать заготовленные переменные для показа цифр.

Дни:

{{_dn}} - количество дней. Может быть 0, 4, 12, 143 и т.д.
{{_dnn}} - количество дней с двумя цифрами и больше. Может быть 00, 04, 143 и т.д.
{{_d1}} - цифра от 0 од 9, единицы дней. Это может быть "4" от "4" дней или "2" от "12" дней или "3" от "143" дней.
{{_d10}} - цифра от 0 од 9, десятки дней. Это может быть "0" от "4" дней или "1" от "12" дней или "4" от "143" дней.
{{_dl}} - текст "День", "Дней" или "Дня" в зависимости от количества дней.

Часы:
Те же переменные, что и в днях, но с "h" вместо "d".
{{_hn}}, {{_hnn}}, {{_h1}}, {{_h10}}, {{_hl}}

Минуты:
Те же переменные, что и в днях, но с "m" вместо "d".
{{_mn}}, {{_mnn}}, {{_m1}}, {{_m10}}, {{_ml}}

Секунды:
Те же переменные, что и в днях, но с "s" вместо "d".
{{_sn}}, {{_snn}}, {{_s1}}, {{_s10}}, {{_sl}}

Корректная работа динамических виджетов, таких как слайдер, видео и т.д., внутри элемента с атрибутом plp-countdown-root не гарантируется.

Элемент, в котором размещены слайды, помечается атрибутом plp-slider-container.

Кнопка перелистывание вперед помечается атрибутом plp-slider-previous.

Кнопка перелистывания назад помечается атрибутом plp-slider-next.

Чтобы сделать точки для каждого слайда необходимо использовать атрибут plp-slider-pagination. При том внутри элемента с этим атрибутом должен находиться всегда только 1 элемент с атрибутом plp-slider-page.

Пример:

<div plp-slider-pagination>
  <div plp-slider-page></div>
</div>

Для каждого слайда элемент plp-slider-page будет продублирован. Элемент, указывающий на активный слайд, будет иметь класс is-active.

Внутри plp-slider-page можно использовать произвольную верстку. Доступны так же следующие специальные элементы:

plp-slider-page_number - номер слайда

plp-slider-page_label - название слайда

plp-slider-page_icon - иконка слайда. Для указания цвета иконки используйте атрибут color.

Пример:

<div plp-slider-pagination>
  <div plp-slider-page>
    <div plp-slider-page_icon color="white"></div>
  </div>
</div>

Таким образом слайдер можно гибко настраивать.

Идентично виджету Слайдер, только в атрибутах вместо plp-slider-* нужно использовать plp-tabs-*.

Идентично виджету Слайдер, только не используется элемент plp-slider-container.

При этом весь редактируемый HTML код помещен внутрь position:absolute элемента, растянутого по ширине и высоте всей секции.

Если нужно обратиться к CSS-свойствам слайда, можно использовать селектор .section-slider-container.

В виджете меню-гамбургер есть 3 ключевых элемента.

plp-hamburger-root - корневой элемент мобильного меню. Будет показан только на мобильных устройствах.

plp-hamburger-menu - элемент с меню. Не должен находиться внутри plp-hamburger-root. На мобильных устройствах будет скрываться или показываться по клику по plp-hamburger-toggle. На остальных устройствах будет всегда показан.

plp-hamburger-toggle - элемент с этим атрибутом по клику скрывает или показывает элемент с атрибутом plp-hamburger-menu.

Как и в спойлере, и plp-hamburger-menu и plp-hamburger-toggle в зависимости от состояния будут иметь класс is-expanded или is-collapsed.

В виджете есть всего один элемент микро-разметки.

plp-video-button - элемент, по клику которого будет открываться окно с видео.

Автор: Вячеслав Гримальский, https://vk.com/grimalschi