gorkdesign / module-theme_breakpoints_js

Theme Breakpoints for Javascript

This module exposes theme-related breakpoints as directly usable Javascript variables.

Usage

When developing client-side Javascript applications, you might need to know about the breakpoints your currently used theme defines. Themes can define breakpoints this way, but they're not exposed automatically for client-side behaviors.

This module helps frontend developers by exposing the breakpoints as Javascript variables, being directly accessible via window.themeBreakpoints.

The function themeBreakpoints.getCurrentBreakpoint() tells you the currently matching breakpoint for the given client.

A new event themeBreakpoint:changed is being provided, which fires when the matching breakpoint of the client has changed. With this event, you're able to implement responsive Javascript behaviors via event listeners. Example event listener with JQuery: $(window).on('themeBreakpoint:changed', function (event, breakpoint) { alert('The current breakpoint has been changed to ' + breakpoint.name); });

Backend developers can use the theme_breakpoints_js service for conveniently receiving breakpoints defined by themes. It already takes care about defined breakpoints by base themes and also loads them in case a theme doesn't define breakpoints by itself.

Installation

• This module obviously depends on Drupal core's breakpoint module.
• Install this module as usual.
• No configuration required. Once enabled, the currently used theme's breakpoints are available as JS variables.