Skip to content

Commit

Permalink
Merge pull request #2 from mrmartineau/master
Browse files Browse the repository at this point in the history
add matchMedia shim
  • Loading branch information
nicbell committed Apr 4, 2016
2 parents 9bf27f0 + 55b2c43 commit 4a8410c
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 0 deletions.
1 change: 1 addition & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ Create a JavaScript shim set using node.
- **EventListener** (EventListener polyfill – [Jonathan Neal](https://github.com/jonathantneal/EventListener))
- **Document.getElementsByClassName** (getElementsByClassName polyfill – [SitePoint](http://www.sitepoint.com/5-useful-functions-missing-in-javascript/))
- **String.trim** (`String.prototype.trim()`[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim))
- **matchMedia** (`matchMedia()`[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia))

### Install:

Expand Down
46 changes: 46 additions & 0 deletions shims/matchMedia.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */

window.matchMedia || (window.matchMedia = function() {
"use strict";

// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);

// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;

style.type = 'text/css';
style.id = 'matchmediajs-test';

script.parentNode.insertBefore(style, script);

// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;

styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';

// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}

// Test if media query is true or false
return info.width === '1px';
}
};
}

return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());

0 comments on commit 4a8410c

Please sign in to comment.