MediaQuery watcher for Foundation5.4.x

app.js

/*
 * Sample app Javascript initializer to demonstrate usage of 'mediaquery-watcher.jquery.js'
 */
$(document).ready(function($) {
    // Init MediaQuery watcher
    $('#watch-for-current-mquery').initCurrentMediaQuery();
    $('#watch-for-current-mquery').watchForCurrentMediaQuery();
    
    /*
    * Initialize Foundation after all event is binded
    */
    $(document).foundation();
    
    // Bind some stuff on window resizing
    $(window).on("debouncedresize", function( event ) {
        // MediaQuery watcher on resize
        $('#watch-for-current-mquery').watchForCurrentMediaQuery();
    });
});

mediaquery-watcher.jquery.js

    /*
    * Find current media query
    * 
    * Require debounce event from jquery-smartresize library
    * 
    * Usage:
    *
    * Put the following html at the end of your <body/> :
    *
    *     <div id="watch-for-current-mquery"><small>Current MQuery</small><span class="value"></span></div>
    *
    * (You may need to style it yourself)
    *
    * Once initialized, the component will show on absolute position in top right corner of body, you can 
    * hide it/show it using with combo keys 'SHIFT+M'. Also, each time the browser is resized, the mediaquery 
    * is checked again.
    *
    * Note: This should be an unique jQuery plugin with two available actions (init and applier), not two as actually
    */
;(function($) {
    'use strict';
    
    // Init key shortcut (SHIFT+M) to show/hide container
    $.fn.initCurrentMediaQuery = function(options) {
        return this.each(function() {
            var $container = $(this);
            $(document).keydown(function( event ) {
                if ( event.which == 13 ) {
                    event.preventDefault();
                } else if ( event.which == 77 && event.shiftKey == true && event.ctrlKey != true && event.metaKey != true ){
                    $container.toggle();
                }
            });
        });
    };
    // Fill/Update current mquery value
    $.fn.watchForCurrentMediaQuery = function(options) {
        return this.each(function() {
            var current,
                $container = $(this),
                matched = [];
            if (matchMedia(Foundation.media_queries['small']).matches){
                matched.push('small');
            };
            if (matchMedia(Foundation.media_queries['medium']).matches){
                matched.push('medium');
            };
            if (matchMedia(Foundation.media_queries['large']).matches){
                matched.push('large');
            };
            if (matchMedia(Foundation.media_queries['xlarge']).matches){
                matched.push('xlarge');
            };
            if (matchMedia(Foundation.media_queries['xxlarge']).matches){
                matched.push('xxlarge');
            };
            // The last matched media query is the current one
            matched.reverse();
            current = matched.shift();
            $('.value', $container).html(current);
        });
    };
}( jQuery ));

mediaquery-watcher.jquery.scss

/*
 * Styling sample with some SCSS
 */
#watch-for-current-mquery{
    padding: 0.0rem 0.5rem;
    position: absolute;
    top: 10px;
    right: 35px;
    font-size: 14px;
    font-weight:bold;
    line-height:1.4;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #FF0000;
    background-color: #FFFFFF;
    
    small{
        display: block;
    }
}