Loading README.md +11 −9 Original line number Diff line number Diff line Loading @@ -12,22 +12,24 @@ 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 <code>window.themeBreakpoints</code>. `window.themeBreakpoints`. The function <code>themeBreakpoints.getCurrentBreakpoint()</code> The function `themeBreakpoints.getCurrentBreakpoint()` tells you the currently matching breakpoint for the given client. A new event <code>themeBreakpoint:changed</code> is being provided, which fires 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: <code> $(window).on('themeBreakpoint:changed', function (event, breakpoint) { alert('The current breakpoint has been changed to ' + breakpoint.name); Example listener: ```javascript window.addEventListener('themeBreakpoint:changed', function (event) { alert('The current breakpoint has been changed to ' + event.detail.name); }); </code> ``` Backend developers can use the <code>theme_breakpoints_js</code> 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. Loading Loading
README.md +11 −9 Original line number Diff line number Diff line Loading @@ -12,22 +12,24 @@ 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 <code>window.themeBreakpoints</code>. `window.themeBreakpoints`. The function <code>themeBreakpoints.getCurrentBreakpoint()</code> The function `themeBreakpoints.getCurrentBreakpoint()` tells you the currently matching breakpoint for the given client. A new event <code>themeBreakpoint:changed</code> is being provided, which fires 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: <code> $(window).on('themeBreakpoint:changed', function (event, breakpoint) { alert('The current breakpoint has been changed to ' + breakpoint.name); Example listener: ```javascript window.addEventListener('themeBreakpoint:changed', function (event) { alert('The current breakpoint has been changed to ' + event.detail.name); }); </code> ``` Backend developers can use the <code>theme_breakpoints_js</code> 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. Loading