Breakpoint Panels

This module adds a panel style called "Breakpoint Panel". When selected, it will display checkboxes next to all of the breakpoints specified in that modules UI. Unchecking any of these will 'hide' it from that breakpoint.

Requirements:
Breakpoints module
Panels module
Libraries module
enquire.js JavaScript library
matchMedia.js JavaScript polyfill library
Font Awesome font-face for 'toggle responsive' button icon.

This module has three settings of its own:

• Load Hidden: This option allows you to specify if the 'hidden' content should be loaded, but hidden via css. If not, the data will not be sent to the browser. Production sites should turn this off.
• Load Hidden for Admins: This option allows you to load 'hidden' content and hide it via css. It will only load the data for users with the 'administer breakpoints' permission. This option is recommended for use with the Panels In-Place Editor
• Auto Reload: This option will reload the page if it's resized past a breakpoint.

Panels In-Place Editor (IPE) features:

• By default (if hidden content is being loaded), the IPE will show all panels with labels on each panel designating which breakpoints it will be hidden in.
• A 'Toggle Responsive' button is added to the IPE toolbar. When clicked, it will hide all panels that would normally be hidden.

Roadmap:
Given more time, I'd like to make the JS libraries a soft requirement that would simply remove features if they aren't available.
The content is excluded at the pane_pre_render hook. I'd like to find something a little higher in the stack to exclude it sooner to cut out even more processing.

Sponsored by Metal Toad Media
Special thanks to theduke. His Context Breakpoint module provided the basis for the breakpoints integration.

Downloads