|
1 | | -(function (global) { |
2 | | - function evalQuery(query) { |
3 | | - /* jshint evil: true */ |
4 | | - query = (query || 'true') |
5 | | - .replace(/^only\s+/, '') |
6 | | - .replace(/(device)-([\w.]+)/g, '$1.$2') |
7 | | - .replace(/([\w.]+)\s*:/g, 'media.$1 ===') |
8 | | - .replace(/min-([\w.]+)\s*===/g, '$1 >=') |
9 | | - .replace(/max-([\w.]+)\s*===/g, '$1 <=') |
10 | | - .replace(/all|screen/g, '1') |
11 | | - .replace(/print/g, '0') |
12 | | - .replace(/,/g, '||') |
13 | | - .replace(/\band\b/g, '&&') |
14 | | - .replace(/dpi/g, '') |
15 | | - .replace(/(\d+)(cm|em|in|dppx|mm|pc|pt|px|rem)/g, function ($0, $1, $2) { |
16 | | - return $1 * ( |
17 | | - $2 === 'cm' ? 0.3937 * 96 : ( |
18 | | - $2 === 'em' || $2 === 'rem' ? 16 : ( |
19 | | - $2 === 'in' || $2 === 'dppx' ? 96 : ( |
20 | | - $2 === 'mm' ? 0.3937 * 96 / 10 : ( |
21 | | - $2 === 'pc' ? 12 * 96 / 72 : ( |
22 | | - $2 === 'pt' ? 96 / 72 : 1 |
23 | | - ) |
24 | | - ) |
25 | | - ) |
26 | | - ) |
27 | | - ) |
28 | | - ); |
29 | | - }); |
30 | | - return new Function('media', 'try{ return !!(%s) }catch(e){ return false }' |
31 | | - .replace('%s', query) |
32 | | - )({ |
33 | | - width: global.innerWidth, |
34 | | - height: global.innerHeight, |
35 | | - orientation: global.orientation || 'landscape', |
36 | | - device: { |
37 | | - width: global.screen.width, |
38 | | - height: global.screen.height, |
39 | | - orientation: global.screen.orientation || global.orientation || 'landscape' |
40 | | - } |
41 | | - }); |
42 | | - } |
| 1 | +(function() { |
| 2 | + "use strict"; |
| 3 | + |
| 4 | + // For browsers that support matchMedium api such as IE 9 and webkit |
| 5 | + var styleMedia = (self.styleMedia || self.media); |
| 6 | + |
| 7 | + // For those that don't support matchMedium |
| 8 | + if (!styleMedia) { |
| 9 | + var style = document.createElement('style'), |
| 10 | + script = document.getElementsByTagName('script')[0], |
| 11 | + info = null; |
| 12 | + |
| 13 | + style.type = 'text/css'; |
| 14 | + style.id = 'matchmediajs-test'; |
43 | 15 |
|
| 16 | + if (!script) { |
| 17 | + document.head.appendChild(style); |
| 18 | + } else { |
| 19 | + script.parentNode.insertBefore(style, script); |
| 20 | + } |
| 21 | + |
| 22 | + // 'style.currentStyle' is used by IE <= 8 and 'self.getComputedStyle' for all other browsers |
| 23 | + info = ('getComputedStyle' in self) && self.getComputedStyle(style, null) || style.currentStyle; |
| 24 | + |
| 25 | + styleMedia = { |
| 26 | + matchMedium: function(media) { |
| 27 | + var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }'; |
| 28 | + |
| 29 | + // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers |
| 30 | + if (style.styleSheet) { |
| 31 | + style.styleSheet.cssText = text; |
| 32 | + } else { |
| 33 | + style.textContent = text; |
| 34 | + } |
| 35 | + |
| 36 | + // Test if media query is true or false |
| 37 | + return info.width === '1px'; |
| 38 | + } |
| 39 | + }; |
| 40 | + } |
44 | 41 | function MediaQueryList() { |
45 | 42 | this.matches = false; |
46 | 43 | this.media = 'invalid'; |
|
62 | 59 | } |
63 | 60 | }; |
64 | 61 |
|
65 | | - global.MediaQueryList = MediaQueryList; |
| 62 | + self.MediaQueryList = MediaQueryList; |
66 | 63 |
|
67 | | - // <Global>.matchMedia |
68 | | - global.matchMedia = function matchMedia(query) { |
69 | | - var |
70 | | - list = new MediaQueryList(); |
| 64 | + self.matchMedia = function matchMedia(media) { |
| 65 | + var list = new MediaQueryList(); |
71 | 66 |
|
72 | 67 | if (0 === arguments.length) { |
73 | 68 | throw new TypeError('Not enough arguments to matchMedia'); |
74 | 69 | } |
75 | 70 |
|
76 | | - list.media = String(query); |
77 | | - list.matches = evalQuery(list.media); |
78 | | - list.addListener.listeners = []; |
| 71 | + list.media = String(media); |
| 72 | + list.matches = styleMedia.matchMedium(media || 'all'); |
79 | 73 |
|
80 | | - global.addEventListener('resize', function () { |
81 | | - var listeners = [].concat(list.addListener.listeners), matches = evalQuery(list.media); |
| 74 | + self.addEventListener('resize', function () { |
| 75 | + var listeners = [].concat(list.addListener.listeners), matches = styleMedia.matchMedium(media || 'all'); |
82 | 76 |
|
83 | 77 | if (matches != list.matches) { |
84 | 78 | list.matches = matches; |
85 | 79 | for (var index = 0, length = listeners.length; index < length; ++index) { |
86 | | - listeners[index].call(global, list); |
| 80 | + listeners[index].call(self, list); |
87 | 81 | } |
88 | 82 | } |
89 | 83 | }); |
90 | 84 |
|
91 | | - return list; |
92 | | - }; |
93 | | -}(self)); |
| 85 | + return list; |
| 86 | + }; |
| 87 | +}()); |
0 commit comments