covered

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...

0 active installs

About this module

Agnostic integration between Breakpoints module and enquire.js.

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:

Install with Composer:

composer require drupal/breakpointsjs