Skip to content
В этом разделе

Кража стилей

О разделе

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

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

Сейчас стили берутся у 5 элементов: Поле формы, Кнопка, Кнопка мультиформы, Шейп гуглформы и Лейбл гуглформы.

Процесс заимствования

За данный процесс отвечает специальная функция - stealElementStyling. Она принимает в себя следующие аргументы: Элемент, Путь до элемента, Значения для заимствования, Заблокировать ли нативный парсинг, Пути элементов для удаления после заимствования и Добавление кастомных свойств.

  • Элемент. Название элемента, по которому скрипт в дальнейшем сможет получить скопированные стили. Грубо говоря, работает как идентификатор.
  • Путь до элемента. Путь до DOM элемента, стили которого будут подвержены копированию. Раньше не было необходимости использовать такой путь и элемент искался по пути Элемента, однако когда появились более хитрые пути до DOM элемента, стало понятно, что необходимо дополнять функцию таким аргументом.
  • Значения для заимствования. Скрипт не копируют все свойства стилей по умолчанию, потому что исходных свойств очень много, а часть из них не работает должным образом, кроме того такое заимствование влияет на производительность. Сейчас существует всего два набора стилей - Инпут и Кнопка.
Набор стилей для копирования Инпут
  • color
  • border
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
  • outline
  • outline-color
  • outline-style
  • outline-width
  • background
  • background-image
  • background-position-x
  • background-position-y
  • background-size
  • background-repeat-x
  • background-repeat-y
  • background-attachment
  • background-origin
  • background-clip
  • background-color
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • height
  • font-family
Набор стилей для копирования Кнопка
  • color
  • border
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
  • outline
  • outline-color
  • outline-style
  • outline-width
  • background
  • background-image
  • background-position-x
  • background-position-y
  • background-size
  • background-repeat-x
  • background-repeat-y
  • background-attachment
  • background-origin
  • background-clip
  • background-color
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • height
  • font-size
  • width
  • text-transform
  • font-weight
  • font
  • font-family
  • Заблокировать ли нативный парсинг. Иногда стили элементов некорректно копируются с помощью нативного element.style[property_name] и отследить это автоматически невозможно, поэтому было решено для некоторых элементов добавить альтернативную функцию window.getComputedStyle(element).getPropertyValue(property_name).

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

  • Добавление кастомных свойств. Поскольку изначальная верстка тильды располагает блоки абсолютными значениями, а наша форма располагается обычной версткой, то некоторые свойства необходимо не только скопировать из оригинала, но и добавить свои. Например, для полей гуглформы.