xandeadx.ru Блог музицирующего веб-девелопера

Drupal → Выносим определение поддержки javascript в head

Опубликовано в

Для пользователей с включённым javascript друпал добавляет тегу <html> класс js, что позволяет писать более "доступные" стили. Например если на форме включена автоотправка, то можно не просто скрыть кнопку сабмита для всех, а скрыть только для пользователей с js:

.js .example-form .form-submit {
  display: none;
}

Проблема только в одном — скрипт, добавляющий класс js подключается в подвале и поэтому пока страница загружается пользователь будет видеть кнопку, потому что соответствующего класса у <html> ещё нет.

Решение достаточно простое — добавить небольшой кусок js кода прямо в html.html.twig:

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
    <script>document.documentElement.className += ' js';</script>   <-----------
  </head>
  <body{{ attributes }}>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>
Написанное актуально для Drupal 8
Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании