| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ |
| A | 2 | /*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ |
| 3 | (function(w) { | |
| 4 | "use strict"; | |
| 5 | w.matchMedia = w.matchMedia || function(doc, undefined) { | |
| 6 | var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div"); | |
| 7 | div.id = "mq-test-1"; | |
| 8 | div.style.cssText = "position:absolute;top:-100em"; | |
| 9 | fakeBody.style.background = "none"; | |
| 10 | fakeBody.appendChild(div); | |
| 11 | return function(q) { | |
| 12 | div.innerHTML = '­<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>'; | |
| 13 | docElem.insertBefore(fakeBody, refNode); | |
| 14 | bool = div.offsetWidth === 42; | |
| 15 | docElem.removeChild(fakeBody); | |
| 16 | return { | |
| 17 | matches: bool, | |
| 18 | media: q | |
| 19 | }; | |
| 20 | }; | |
| 21 | }(w.document); | |
| 22 | })(this); | |
| 23 | ||
| 24 | /*! Respond.js v1.4.0: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */ | |
| 25 | (function(w) { | |
| 26 | "use strict"; | |
| 27 | var respond = {}; | |
| 28 | w.respond = respond; | |
| 29 | respond.update = function() {}; | |
| 30 | var requestQueue = [], xmlHttp = function() { | |
| 31 | var xmlhttpmethod = false; | |
| 32 | try { | |
| 33 | xmlhttpmethod = new w.XMLHttpRequest(); | |
| 34 | } catch (e) { | |
| 35 | xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP"); | |
| 36 | } | |
| 37 | return function() { | |
| 38 | return xmlhttpmethod; | |
| 39 | }; | |
| 40 | }(), ajax = function(url, callback) { | |
| 41 | var req = xmlHttp(); | |
| 42 | if (!req) { | |
| 43 | return; | |
| 44 | } | |
| 45 | req.open("GET", url, true); | |
| 46 | req.onreadystatechange = function() { | |
| 47 | if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) { | |
| 48 | return; | |
| 49 | } | |
| 50 | callback(req.responseText); | |
| 51 | }; | |
| 52 | if (req.readyState === 4) { | |
| 53 | return; | |
| 54 | } | |
| 55 | req.send(null); | |
| 56 | }; | |
| 57 | respond.ajax = ajax; | |
| 58 | respond.queue = requestQueue; | |
| 59 | respond.regex = { | |
| 60 | media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi, | |
| 61 | keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi, | |
| 62 | urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, | |
| 63 | findStyles: /@media *([^\{]+)\{([\S\s]+?)$/, | |
| 64 | only: /(only\s+)?([a-zA-Z]+)\s?/, | |
| 65 | minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/, | |
| 66 | maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ | |
| 67 | }; | |
| 68 | respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches; | |
| 69 | if (respond.mediaQueriesSupported) { | |
| 70 | return; | |
| 71 | } | |
| 72 | var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() { | |
| 73 | var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false; | |
| 74 | div.style.cssText = "position:absolute;font-size:1em;width:1em"; | |
| 75 | if (!body) { | |
| 76 | body = fakeUsed = doc.createElement("body"); | |
| 77 | body.style.background = "none"; | |
| 78 | } | |
| 79 | docElem.style.fontSize = "100%"; | |
| 80 | body.style.fontSize = "100%"; | |
| 81 | body.appendChild(div); | |
| 82 | if (fakeUsed) { | |
| 83 | docElem.insertBefore(body, docElem.firstChild); | |
| 84 | } | |
| 85 | ret = div.offsetWidth; | |
| 86 | if (fakeUsed) { | |
| 87 | docElem.removeChild(body); | |
| 88 | } else { | |
| 89 | body.removeChild(div); | |
| 90 | } | |
| 91 | docElem.style.fontSize = originalHTMLFontSize; | |
| 92 | if (originalBodyFontSize) { | |
| 93 | body.style.fontSize = originalBodyFontSize; | |
| 94 | } | |
| 95 | ret = eminpx = parseFloat(ret); | |
| 96 | return ret; | |
| 97 | }, applyMedia = function(fromResize) { | |
| 98 | var name = "clientWidth", docElemProp = docElem[name], currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime(); | |
| 99 | if (fromResize && lastCall && now - lastCall < resizeThrottle) { | |
| 100 | w.clearTimeout(resizeDefer); | |
| 101 | resizeDefer = w.setTimeout(applyMedia, resizeThrottle); | |
| 102 | return; | |
| 103 | } else { | |
| 104 | lastCall = now; | |
| 105 | } | |
| 106 | for (var i in mediastyles) { | |
| 107 | if (mediastyles.hasOwnProperty(i)) { | |
| 108 | var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em"; | |
| 109 | if (!!min) { | |
| 110 | min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1); | |
| 111 | } | |
| 112 | if (!!max) { | |
| 113 | max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1); | |
| 114 | } | |
| 115 | if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) { | |
| 116 | if (!styleBlocks[thisstyle.media]) { | |
| 117 | styleBlocks[thisstyle.media] = []; | |
| 118 | } | |
| 119 | styleBlocks[thisstyle.media].push(rules[thisstyle.rules]); | |
| 120 | } | |
| 121 | } | |
| 122 | } | |
| 123 | for (var j in appendedEls) { | |
| 124 | if (appendedEls.hasOwnProperty(j)) { | |
| 125 | if (appendedEls[j] && appendedEls[j].parentNode === head) { | |
| 126 | head.removeChild(appendedEls[j]); | |
| 127 | } | |
| 128 | } | |
| 129 | } | |
| 130 | appendedEls.length = 0; | |
| 131 | for (var k in styleBlocks) { | |
| 132 | if (styleBlocks.hasOwnProperty(k)) { | |
| 133 | var ss = doc.createElement("style"), css = styleBlocks[k].join("\n"); | |
| 134 | ss.type = "text/css"; | |
| 135 | ss.media = k; | |
| 136 | head.insertBefore(ss, lastLink.nextSibling); | |
| 137 | if (ss.styleSheet) { | |
| 138 | ss.styleSheet.cssText = css; | |
| 139 | } else { | |
| 140 | ss.appendChild(doc.createTextNode(css)); | |
| 141 | } | |
| 142 | appendedEls.push(ss); | |
| 143 | } | |
| 144 | } | |
| 145 | }, translate = function(styles, href, media) { | |
| 146 | var qs = styles.replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0; | |
| 147 | href = href.substring(0, href.lastIndexOf("/")); | |
| 148 | var repUrls = function(css) { | |
| 149 | return css.replace(respond.regex.urls, "$1" + href + "$2$3"); | |
| 150 | }, useMedia = !ql && media; | |
| 151 | if (href.length) { | |
| 152 | href += "/"; | |
| 153 | } | |
| 154 | if (useMedia) { | |
| 155 | ql = 1; | |
| 156 | } | |
| 157 | for (var i = 0; i < ql; i++) { | |
| 158 | var fullq, thisq, eachq, eql; | |
| 159 | if (useMedia) { | |
| 160 | fullq = media; | |
| 161 | rules.push(repUrls(styles)); | |
| 162 | } else { | |
| 163 | fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1; | |
| 164 | rules.push(RegExp.$2 && repUrls(RegExp.$2)); | |
| 165 | } | |
| 166 | eachq = fullq.split(","); | |
| 167 | eql = eachq.length; | |
| 168 | for (var j = 0; j < eql; j++) { | |
| 169 | thisq = eachq[j]; | |
| 170 | mediastyles.push({ | |
| 171 | media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all", | |
| 172 | rules: rules.length - 1, | |
| 173 | hasquery: thisq.indexOf("(") > -1, | |
| 174 | minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""), | |
| 175 | maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "") | |
| 176 | }); | |
| 177 | } | |
| 178 | } | |
| 179 | applyMedia(); | |
| 180 | }, makeRequests = function() { | |
| 181 | if (requestQueue.length) { | |
| 182 | var thisRequest = requestQueue.shift(); | |
| 183 | ajax(thisRequest.href, function(styles) { | |
| 184 | translate(styles, thisRequest.href, thisRequest.media); | |
| 185 | parsedSheets[thisRequest.href] = true; | |
| 186 | w.setTimeout(function() { | |
| 187 | makeRequests(); | |
| 188 | }, 0); | |
| 189 | }); | |
| 190 | } | |
| 191 | }, ripCSS = function() { | |
| 192 | for (var i = 0; i < links.length; i++) { | |
| 193 | var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet"; | |
| 194 | if (!!href && isCSS && !parsedSheets[href]) { | |
| 195 | if (sheet.styleSheet && sheet.styleSheet.rawCssText) { | |
| 196 | translate(sheet.styleSheet.rawCssText, href, media); | |
| 197 | parsedSheets[href] = true; | |
| 198 | } else { | |
| 199 | if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) { | |
| 200 | if (href.substring(0, 2) === "//") { | |
| 201 | href = w.location.protocol + href; | |
| 202 | } | |
| 203 | requestQueue.push({ | |
| 204 | href: href, | |
| 205 | media: media | |
| 206 | }); | |
| 207 | } | |
| 208 | } | |
| 209 | } | |
| 210 | } | |
| 211 | makeRequests(); | |
| 212 | }; | |
| 213 | ripCSS(); | |
| 214 | respond.update = ripCSS; | |
| 215 | respond.getEmValue = getEmValue; | |
| 216 | function callMedia() { | |
| 217 | applyMedia(true); | |
| 218 | } | |
| 219 | if (w.addEventListener) { | |
| 220 | w.addEventListener("resize", callMedia, false); | |
| 221 | } else if (w.attachEvent) { | |
| 222 | w.attachEvent("onresize", callMedia); | |
| 223 | } | |
| 224 | })(this); | |
