Jakie jest podstawowe zastosowanie pliku breakpoints.yml?

10

Jaki jest cel punktów przerwania zdefiniowanych w `breakpoints.yml?

Dlaczego zapytania o media są zdefiniowane w pliku breakpoints.yml, a nie w plikach CSS?

8 theming Prachat
źródło
Punkty przerwania są tam, gdzie dostosowuje się responsywny projekt w celu poprawnego wyświetlania na różnych urządzeniach. Moduł punktów przerwania standaryzuje użycie punktów przerwania i umożliwia modułom i motywom udostępnianie lub używanie punktów przerwania innych osób. Moduł Breakpoint śledzi punkty przerwania wysokości, szerokości i rozdzielczości.
Clive
1
Zastanawiam się nad tym, ponieważ używam niestandardowego motywu opartego na Fundacji, ale wydaje mi się, że w tej chwili nie ma to żadnego znaczenia. Tak, jest moduł responsywnych obrazów, ale to po prostu wszystko, co jest dobre. Widzę to bardziej jako przyszłą funkcję, którą warto mieć, ale nie wiem, czy kiedykolwiek zostanie wykorzystana.
drupal.org/documentation/modules/breakpoint
kmdhrm

Odpowiedzi:

7

Nie ma możliwości użycia punktów przerwania zdefiniowanych w pliku breakpoints.yml w CSS bez wstępnego lub końcowego przetwarzania. Ponieważ nie używamy procesorów do stylizacji w rdzeniu, punkty przerwania są nadal zakodowane na stałe w plikach CSS. W niestandardowym motywie możesz jednak swobodnie korzystać z narzędzi takich jak Gulp lub Grunt i teoretycznie byłoby możliwe użycie danych breakpoints.yml do generowania CSS.

Obecnie breakpoints.yml jest interesujący głównie dla JavaScript (JS). Spójrz na przykład na moduł Toolbar w rdzeniu. Informacje o punkcie przerwania są dodawane do obiektu JS „drupalSettings” w pliku „src / Element / Toolbar.php” w następujący sposób:

$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;
}

Następnie w JS odczytywane są ustawienia czasu pracy zdefiniowane powyżej.

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

Później detektor zdarzeń jest dodawany dla każdego punktu przerwania, aby „coś” można było zrobić, gdy zmienia się rozmiar ekranu.

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));
  }
}

W przypadku zmiany można podjąć różne działania dla każdego punktu przerwania.

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;
    }
  }
};

Uwaga : przykłady kodu są pobierane z modułu Drupal Toolbar i usuwane. Użyj jako inspiracji, a nie jako kodu funkcjonalnego.

Dobre wyjaśnienie dotyczące korzystania z JS mediaQueries ogólnie można znaleźć tutaj: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

dmsmidt
źródło