Re-use CSS media queries in JavaScript.

• DRY: All media queries are stored in one place. Especially when using tools as LESS CSS or SASS where the design breakpoints may be defined in the global variables file. Using this JS plug-in, one don't need to repeat the CSS media queries in a JS file.
• Fewer event actions for the layout: We may also listen to the resize event, but in many cases a redraw of the UI or a re-computing of layout options is not necessary on each resize action, but most times only if a design breakpoint was reached.

This plug-in is implemented as AMD and has a fallback to a global variable.

The plug-in uses the JavaScript CustomEvent. If you target browsers that do not know this object, you have to include the appropriate polyfill. (For example IE 10 on Microsoft Surface tablets)

    if( typeof window.CustomEvent !== 'function' ) {
        /* include polyfill (using your preferred script loading mechanism) */
    }

The breakpoints are the following:

1. 'xs'
2. 'sm'
3. 'md'
4. 'lg'
5. 'xl'

The numbers correspond to the z-index of the element that is used for the tests. Those z-indizes are set via CSS inside a given @media query. See the attached CSS for an example. David Walsh also proposed to use pseudo elements and their content property to store the media query breakpoint identifiers directly. But older versions of the iOS Safari and native Android browsers do not support getComputedStyle on pseudo-elements.

There is a sister-repository at https://github.com/votum/media-queries from which may take the CSS media queries as those are defined more thorough.

The first option to read a design breakpoint is to listen to the event deviceStateChanged, which has a property deviceState. This property contains a string naming the breakpoint that was reached as the event was fired.

The MediaQuerySync module has one public method: getDeviceState(). This method returns the current design breakpoint. This can be used if your layout changes do not only depend on screen size changes.

Include the provided CSS file in the HTML HEAD of your template or append it to your custom CSS/LESS.

    <link rel="stylesheet" href="media-query-sync.css">

You need to set up the event handler before the script is included to capture the initial event which is fired upon executing the module.

    window.addEventListener( 'deviceStateChanged', function( event ) {
        console.log( 'another breakpoint was reached: ' + event.deviceState );
    }, false );
    
    require( [ 'media-query-sync' ] );

    <script type="text/javascript">
        window.addEventListener( 'deviceStateChanged', function( event ) {
            console.log( 'another breakpoint was reached: ' + event.deviceState );
        }, false );
    </script>
    <script type="text/javascript" src="media-query-sync.js"></script>

    require( [ 'media-query-sync' ], function( MediaQuerySync ) {
        console.log( 'the current breakpoint is: ' + MediaQuerySync.getDeviceState() );
    } );

    <script type="text/javascript" src="media-query-sync.js"></script>
    <script type="text/javascript">
        console.log( 'the current breakpoint is: ' + mediaQuerySync.getDeviceState() );
    </script>

You can run the usage example via rawgit.com: https://rawgit.com/votum/media-query-sync/master/demo.htm (Watch the JS console output.)