Bootstrap Breakpoints in JavaScript

Bei Bootstrap wird dem Entwickler das Leben mit vordefinierten Breakpoints ein wenig erleichtert. Manchmal muss man allerdings auch in JavaScript wissen, in welchem Breakpoint man sich gerade befindet. Heute zeige ich Euch, wie man Daten aus den Stylesheets nach JavaScript überträgt und auf Änderungen in den Breakpoints reagiert.

Hierzu muss man zunächst einmal wissen, dass man mit JavaScript CSS-Stile auslesen kann. Hierfür sorgt die Funktion getComputedStyle(). Diese gibt ein Objekt mit allen errechneten oder definierten CSS-Stilen eines Elementes zurück. Wenn man also einen Wert von CSS nach JavaScript kommunizieren möchte, bietet es sich an dies über einen Stil zu tun. Und was wäre dafür besser geeignet als das der content-Stil.

Um also die Bootstrap-Breakpoints als content-Stil zu hinterlegen verwende ich die Pseudoklasse ::after vom <body>-Element. In SCSS können wir dann einfach über die Variable $grid-breakpoints von Bootstrap loopen und uns so automatisch aus den Breakpoints unsere Stile definieren. Das sieht dann wie folgt aus.

body::after {
  content: '';
  display: none;
}

@each $name, $settings in $grid-breakpoints {
  @media ('min-width: #{$settings}') {
    body::after {
      content: '#{$name}';
    }
  }
}

Da wir nun die Stile bereits definiert haben, können wir die JavaScript-Logik entwickeln. Am einfachsten ist es, wenn wir auf den Resize-Event des Fensters lauschen und bei Änderungen des Breakpoints reagieren. Damit nicht jedes Widget einen eigenen Event-Listener für den Resize-Event registieren muss, ist es am besten, wenn wir einen eigenen Event raus hauen. Ich nenne ihn hier einfach mal breakpointUpdate. An diesen können sich nun "interessierte" Widgets dran hängen und auf Änderungen des Breakpoints reagieren.

var breakpoint = null;

$(window).resize(function _onResize() {
  var element = document.querySelector('body');
  var newValue = window.getComputedStyle(element, ':after')
    .getPropertyValue('content')
    .replace(/["']/g, '');

  if (newValue !== breakpoint) {
    const oldValue = breakpoint;
    breakpoint = newValue;
    $(window).trigger('breakpointUpdate', [newValue, oldValue]);
  }
});

Als Parameter werden jeweils der neue (newValue) und der alte Breakpoint (oldValue) an den Event übergeben. Widgets können dann einfach einen entsprechenden Event-Listener registrieren und auf eine Änderung des Breakpoints reagieren. Das kann dann zum Beispiel so aussehen:

$(window).on('breakpointUpdate', function _onUpdate(newValue, oldValue) {
  console.log(newValue, oldValue);
});

Nützlich ist dies zum Beispiel, wenn Ihr bestimmt Elemente der Seite erst bei definierten Breakpoints nachladen möchtet. Oder aber auch dann wenn Ihr Plugins für Mobile Menus verwendet und diese nur abfeuern wollt, wenn der entsprechende Breakpoint erreicht ist. Ich habe Euch das Ganze unten in einer kleinen Demo einmal vorbereitet. Viel Spaß beim Ausprobieren.

Demo

Share this on: