https://coljuristas.org/js/enquire.js

1/*!
2 * enquire.js v2.1.2 - Awesome Media Queries in JavaScript
3 * Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/enquire.js
4 * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5 */
6
7;(function (name, context, factory) {
8	var matchMedia = window.matchMedia;
9
10	if (typeof module !== 'undefined' && module.exports) {
11		module.exports = factory(matchMedia);
12	}
13	else if (typeof define === 'function' && define.amd) {
14		define(function() {
15			return (context[name] = factory(matchMedia));
16		});
17	}
18	else {
19		context[name] = factory(matchMedia);
20	}
21}('enquire', this, function (matchMedia) {
22
23	'use strict';
24
25    /*jshint unused:false */
26    /**
27     * Helper function for iterating over a collection
28     *
29     * @param collection
30     * @param fn
31     */
32    function each(collection, fn) {
33        var i      = 0,
34            length = collection.length,
35            cont;
36
37        for(i; i < length; i++) {
38            cont = fn(collection[i], i);
39            if(cont === false) {
40                break; //allow early exit
41            }
42        }
43    }
44
45    /**
46     * Helper function for determining whether target object is an array
47     *
48     * @param target the object under test
49     * @return {Boolean} true if array, false otherwise
50     */
51    function isArray(target) {
52        return Object.prototype.toString.apply(target) === '[object Array]';
53    }
54
55    /**
56     * Helper function for determining whether target object is a function
57     *
58     * @param target the object under test
59     * @return {Boolean} true if function, false otherwise
60     */
61    function isFunction(target) {
62        return typeof target === 'function';
63    }
64
65    /**
66     * Delegate to handle a media query being matched and unmatched.
67     *
68     * @param {object} options
69     * @param {function} options.match callback for when the media query is matched
70     * @param {function} [options.unmatch] callback for when the media query is unmatched
71     * @param {function} [options.setup] one-time callback triggered the first time a query is matched
72     * @param {boolean} [options.deferSetup=false] should the setup callback be run immediately, rather than first time query is matched?
73     * @constructor
74     */
75    function QueryHandler(options) {
76        this.options = options;
77        !options.deferSetup && this.setup();
78    }
79    QueryHandler.prototype = {
80
81        /**
82         * coordinates setup of the handler
83         *
84         * @function
85         */
86        setup : function() {
87            if(this.options.setup) {
88                this.options.setup();
89            }
90            this.initialised = true;
91        },
92
93        /**
94         * coordinates setup and triggering of the handler
95         *
96         * @function
97         */
98        on : function() {
99            !this.initialised && this.setup();
100            this.options.match && this.options.match();
101        },
102
103        /**
104         * coordinates the unmatch event for the handler
105         *
106         * @function
107         */
108        off : function() {
109            this.options.unmatch && this.options.unmatch();
110        },
111
112        /**
113         * called when a handler is to be destroyed.
114         * delegates to the destroy or unmatch callbacks, depending on availability.
115         *
116         * @function
117         */
118        destroy : function() {
119            this.options.destroy ? this.options.destroy() : this.off();
120        },
121
122        /**
123         * determines equality by reference.
124         * if object is supplied compare options, if function, compare match callback
125         *
126         * @function
127         * @param {object || function} [target] the target for comparison
128         */
129        equals : function(target) {
130            return this.options === target || this.options.match === target;
131        }
132
133    };
134    /**
135     * Represents a single media query, manages it's state and registered handlers for this query
136     *
137     * @constructor
138     * @param {string} query the media query string
139     * @param {boolean} [isUnconditional=false] whether the media query should run regardless of whether the conditions are met. Primarily for helping older browsers deal with mobile-first design
140     */
141    function MediaQuery(query, isUnconditional) {
142        this.query = query;
143        this.isUnconditional = isUnconditional;
144        this.handlers = [];
145        this.mql = matchMedia(query);
146
147        var self = this;
148        this.listener = function(mql) {
149            self.mql = mql;
150            self.assess();
151        };
152        this.mql.addListener(this.listener);
153    }
154    MediaQuery.prototype = {
155
156        /**
157         * add a handler for this query, triggering if already active
158         *
159         * @param {object} handler
160         * @param {function} handler.match callback for when query is activated
161         * @param {function} [handler.unmatch] callback for when query is deactivated
162         * @param {function} [handler.setup] callback for immediate execution when a query handler is registered
163         * @param {boolean} [handler.deferSetup=false] should the setup callback be deferred until the first time the handler is matched?
164         */
165        addHandler : function(handler) {
166            var qh = new QueryHandler(handler);
167            this.handlers.push(qh);
168
169            this.matches() && qh.on();
170        },
171
172        /**
173         * removes the given handler from the collection, and calls it's destroy methods
174         * 
175         * @param {object || function} handler the handler to remove
176         */
177        removeHandler : function(handler) {
178            var handlers = this.handlers;
179            each(handlers, function(h, i) {
180                if(h.equals(handler)) {
181                    h.destroy();
182                    return !handlers.splice(i,1); //remove from array and exit each early
183                }
184            });
185        },
186
187        /**
188         * Determine whether the media query should be considered a match
189         * 
190         * @return {Boolean} true if media query can be considered a match, false otherwise
191         */
192        matches : function() {
193            return this.mql.matches || this.isUnconditional;
194        },
195
196        /**
197         * Clears all handlers and unbinds events
198         */
199        clear : function() {
200            each(this.handlers, function(handler) {
201                handler.destroy();
202            });
203            this.mql.removeListener(this.listener);
204            this.handlers.length = 0; //clear array
205        },
206
207        /*
208         * Assesses the query, turning on all handlers if it matches, turning them off if it doesn't match
209         */
210        assess : function() {
211            var action = this.matches() ? 'on' : 'off';
212
213            each(this.handlers, function(handler) {
214                handler[action]();
215            });
216        }
217    };
218    /**
219     * Allows for registration of query handlers.
220     * Manages the query handler's state and is responsible for wiring up browser events
221     *
222     * @constructor
223     */
224    function MediaQueryDispatch () {
225        if(!matchMedia) {
226            throw new Error('matchMedia not present, legacy browsers require a polyfill');
227        }
228
229        this.queries = {};
230        this.browserIsIncapable = !matchMedia('only all').matches;
231    }
232
233    MediaQueryDispatch.prototype = {
234
235        /**
236         * Registers a handler for the given media query
237         *
238         * @param {string} q the media query
239         * @param {object || Array || Function} options either a single query handler object, a function, or an array of query handlers
240         * @param {function} options.match fired when query matched
241         * @param {function} [options.unmatch] fired when a query is no longer matched
242         * @param {function} [options.setup] fired when handler first triggered
243         * @param {boolean} [options.deferSetup=false] whether setup should be run immediately or deferred until query is first matched
244         * @param {boolean} [shouldDegrade=false] whether this particular media query should always run on incapable browsers
245         */
246        register : function(q, options, shouldDegrade) {
247            var queries         = this.queries,
248                isUnconditional = shouldDegrade && this.browserIsIncapable;
249
250            if(!queries[q]) {
251                queries[q] = new MediaQuery(q, isUnconditional);
252            }
253
254            //normalise to object in an array
255            if(isFunction(options)) {
256                options = { match : options };
257            }
258            if(!isArray(options)) {
259                options = [options];
260            }
261            each(options, function(handler) {
262                if (isFunction(handler)) {
263                    handler = { match : handler };
264                }
265                queries[q].addHandler(handler);
266            });
267
268            return this;
269        },
270
271        /**
272         * unregisters a query and all it's handlers, or a specific handler for a query
273         *
274         * @param {string} q the media query to target
275         * @param {object || function} [handler] specific handler to unregister
276         */
277        unregister : function(q, handler) {
278            var query = this.queries[q];
279
280            if(query) {
281                if(handler) {
282                    query.removeHandler(handler);
283                }
284                else {
285                    query.clear();
286                    delete this.queries[q];
287                }
288            }
289
290            return this;
291        }
292    };
293
294	return new MediaQueryDispatch();
295
296}));