drupal/breakpointsjs
. methods "register" and "unregister" are actual wrappers to the original methods, what means you can use everything the library provides for these methods: , , , and . This module also exposes...
About this module
Easy JavaScript Interface for Breakpoints
This module means to create a JavaScript interface for other modules to make use of breakpoints in the client side using a common way. While enquire.js gives us the ability to easily define code that runs on specific media conditions, it implies we have to work with media-query strings. As Breakpoints module creates an interface to manage and name these media-queries, it makes sense that we use these names in our client-side code too. For instance, if we create in our theme a breakpoint called "mobile", we could specify a code to run in this viewport by doing so:
Drupal.Breakpoints.register('mobile', function () {
// Code.
});
Also, if we have a breakpoint called "tablet", we could have a code that addresses both "mobile" and "tablet" passing it an array, like so:
Drupal.Breakpoints.register(['mobile', 'tablet'], function () {
// Code.
});
P.s.: to address any breakpoint change, just pass it the word "all".
P.s.2: you can still use Drupal.Breakpoints.register with plain media-query strings, although that probably doesn't make sense.
enquire.js wrapper
As you may have noticed, the module implements a Drupal.Breakpoints interface with a method called the same as in the original enquire.js API implementation. Drupal.Breakpoints methods "register" and "unregister" are actual wrappers to the original methods, what means you can use everything the library provides for these methods: setup callback, deferred setup, match callback, and unmatch callback.
Settings
This module also exposes in the Drupal.settings the "breakpoints" property, containing information objects for each defined breakpoints in the Breakpoints module.
Extra methods
Besides the methods provided by the enquire.js library, this module also provides two helper methods:
- Drupal.Breakpoints.getCurrent: return an array with active breakpoints objects (as found in settings).
- Drupal.Breakpoints.isCurrent: given an acceptable breakpoint argument (name, machine name, object or array containing items of the previous types), return true if it matches the current conditions.
Dependencies:
- Breakpoints
- Libraries API
- enquire.js
- matchMedia polyfill (optional)
Install with Composer:
composer require drupal/breakpointsjs