[Enquire JS] #javascript

enquirejs.md

Enquire JS

Snippet / Proof of Concept.

x-enquirejs.js

// dependencies:
// jQuery 1.10.2
// https://github.com/WickyNilliams/enquire.js.git
// https://github.com/paulirish/matchMedia.js.git

// JSHint
/* global enquire */


// Monkey patch:
// to allow unmatch (which usually runs on breakpoint transition) to run on DOM load as well
// https://github.com/WickyNilliams/enquire.js/issues/86#issuecomment-28665171
enquire.registerImmediate = function(query, options) {
    options.setup = options.unmatch;
    return this.register(query, options);
};

function em(target_px) { // based on our .scss function
    var context = 16; // basefont_size
    var target = target_px.replace('px', '');
    target = parseInt(target, 10);

    return ( target/context + 'em' );
},

function myfunction() {
    if ( typeof enquire !== 'undefined') {
    
        enquire.registerImmediate('screen and (max-width:' + em('767px') + ')', {
            
            match : function() {
                // do something
            },
            
            // transition from this breakpoint to another
            unmatch : function() {
                // do something else
            },
            
            // triggered once, when the match handler is registered.
            // the monkey patch uses the unmatch callback instead
            //setup : function() {
            //},
    
            // OPTIONAL, defaults to false
            // If set to true, defers execution of the setup function
            // until the first time the media query is matched
            deferSetup : false // needs to be false for the monkey patch to work
    
            // OPTIONAL
            // If supplied, triggered when handler is unregistered.
            // Place cleanup code here
            //destroy : function() {}
    
        }, false); // false == !shouldDegrade
    }
}