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

01.03.2020

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

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

Проблема только в одном — скрипт, добавляющий класс js подключается в подвале и поэтому пока страница загружается пользователь будет видеть кнопку, потому что соответствующего класса у <code class="language-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>

Написанное актуально для

Drupal 8

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

Комментарии

Добавить комментарий