Skip to content

Commit

Permalink
add matchMedia shim
Browse files Browse the repository at this point in the history
  • Loading branch information
mrmartineau committed Jan 13, 2016
1 parent ecf543a commit 55b2c43
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 1 deletion.
3 changes: 2 additions & 1 deletion readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,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 All @@ -38,7 +39,7 @@ shimly.list(); //lists available shims
```js
// ...
var shimly = require('shimly')

shimly.shim(['Array.every', 'Array.forEach'], false, 'shims.js');
// ...
```
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 55b2c43

Please sign in to comment.