it-swarm.com.de

Was ist die grundlegende Verwendung der Datei breakpoints.yml?

Was ist der Zweck von Haltepunkten, die in `breakpoints.yml definiert sind?

Warum werden die Medienabfragen in breakpoints.yml und nicht in CSS-Dateien definiert?

10
Prakhyat

Es gibt keine Möglichkeit, die in einer breakpoints.yml-Datei definierten Haltepunkte in CSS ohne Vor- oder Nachbearbeitung zu verwenden. Da wir im Core keine Prozessoren für das Styling verwenden, sind die Haltepunkte in den CSS-Dateien immer noch fest codiert. In einem benutzerdefinierten Design können Sie jedoch Tools wie Gulp oder Grunt verwenden, und es wäre theoretisch möglich, die Eingabe breakpoints.yml für Ihre CSS-Generierung zu verwenden.

Derzeit ist die Datei breakpoints.yml hauptsächlich für JavaScript (JS) interessant. Schauen Sie sich zum Beispiel das Toolbar-Modul im Kern an. Die Haltepunktinformationen werden dem JS-Objekt 'drupalSettings' in 'src/Element/Toolbar.php' wie folgt hinzugefügt:

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

Dann werden in JS die oben definierten Laufzeiteinstellungen eingelesen.

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

Später wird pro Haltepunkt ein Ereignis-Listener hinzugefügt, damit bei Änderungen der Bildschirmgröße etwas unternommen werden kann.

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

Im Falle einer Änderung können pro Haltepunkt verschiedene Aktionen ausgeführt werden.

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

Hinweis : Die Codebeispiele stammen aus dem Drupal Symbolleistenmodul und werden entfernt. Als Inspiration, nicht als Funktionscode .

Eine gute Erklärung zur Verwendung von JS mediaQueries im Allgemeinen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

7
dmsmidt