Каково основное использование файла breakpoints.yml?

10

Какова цель точек останова, определенных в `breakpoints.yml?

Почему медиазапросы определены в breakpoints.yml, а не в файлах CSS?

8 theming Prakhyat
источник
Точки останова - это когда адаптивный дизайн настраивается для правильного отображения на разных устройствах. Модуль точек останова стандартизует использование точек останова и позволяет модулям и темам выставлять или использовать точки останова друг друга. Модуль точек останова отслеживает точки останова по высоте, ширине и разрешению.
Клайв
1
Я просто думаю о реализации этого, так как я использую основанную на Foundation тему, но мне кажется, что в данный момент это не имеет никакого значения. Да, есть модуль адаптивных изображений, но это все, для чего он хорош. Я вижу, что это больше похоже на будущую функцию, которую хорошо иметь, но я не знаю, будет ли она когда-либо использована.
drupal.org/documentation/modules/breakpoint
kmdhrm

Ответы:

7

Невозможно использовать точки останова, определенные в файле breakpoints.yml в CSS, без предварительной или последующей обработки. Поскольку мы не используем процессоры для стилизации ядра, точки останова все еще жестко запрограммированы в файлах CSS. Однако в пользовательской теме вы можете свободно использовать такие инструменты, как Gulp или Grunt, и теоретически можно использовать вход breakpoints.yml для генерации CSS.

В настоящее время breakpoints.yml в основном интересен для JavaScript (JS). Посмотрите, например, на модуль панели инструментов в ядре. Информация о точке останова добавляется в JS-объект drupalSettings в файле src / Element / Toolbar.php следующим образом:

$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
  $media_queries =  array();
  foreach ($breakpoints as $id => $breakpoint) {
    $media_queries[$id] = $breakpoint->getMediaQuery();
  }

  $element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}

Затем в JS считываются настройки времени выполнения, определенные выше.

var options = $.extend(
  {
    breakpoints: {
      'toolbar.narrow': '',
      'toolbar.standard': '',
      'toolbar.wide': ''
    }
  },
  drupalSettings.toolbar
);

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

for (var label in options.breakpoints) {
  if (options.breakpoints.hasOwnProperty(label)) {
    var mq = options.breakpoints[label];
    var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
    mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
  }
}

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

Drupal.toolbar = {
  mediaQueryChangeHandler: function (model, label, mql) {
    switch (label) {
      case 'toolbar.narrow':
        model.set({
          isOriented: mql.matches,
          isTrayToggleVisible: false
        });
        break;

      case 'toolbar.standard':
        // Logic
        break;

      case 'toolbar.wide':
        // Logic
        break;

      default:
        break;
    }
  }
};

Примечание : примеры кода взяты из модуля панели инструментов Drupal и удалены. Используйте как вдохновение, а не как функциональный код.

Хорошее объяснение использования JS mediaQueries в целом можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

dmsmidt
источник