https://laisontech.com/cn/js/respond.js

1/*! Respond.js v1.4.2: min/max-width media query polyfill
2 * Copyright 2014 Scott Jehl
3 * Licensed under MIT
4 * https://j.mp/respondjs */
5
6/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
7/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
8(function(w) {
9  "use strict";
10  w.matchMedia = w.matchMedia || function(doc, undefined) {
11    var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");
12    div.id = "mq-test-1";
13    div.style.cssText = "position:absolute;top:-100em";
14    fakeBody.style.background = "none";
15    fakeBody.appendChild(div);
16    return function(q) {
17      div.innerHTML = '&shy;<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
18      docElem.insertBefore(fakeBody, refNode);
19      bool = div.offsetWidth === 42;
20      docElem.removeChild(fakeBody);
21      return {
22        matches: bool,
23        media: q
24      };
25    };
26  }(w.document);
27})(this);
28
29/*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
30(function(w) {
31  "use strict";
32  if (w.matchMedia && w.matchMedia("all").addListener) {
33    return false;
34  }
35  var localMatchMedia = w.matchMedia, hasMediaQueries = localMatchMedia("only all").matches, isListening = false, timeoutID = 0, queries = [], handleChange = function(evt) {
36    w.clearTimeout(timeoutID);
37    timeoutID = w.setTimeout(function() {
38      for (var i = 0, il = queries.length; i < il; i++) {
39        var mql = queries[i].mql, listeners = queries[i].listeners || [], matches = localMatchMedia(mql.media).matches;
40        if (matches !== mql.matches) {
41          mql.matches = matches;
42          for (var j = 0, jl = listeners.length; j < jl; j++) {
43            listeners[j].call(w, mql);
44          }
45        }
46      }
47    }, 30);
48  };
49  w.matchMedia = function(media) {
50    var mql = localMatchMedia(media), listeners = [], index = 0;
51    mql.addListener = function(listener) {
52      if (!hasMediaQueries) {
53        return;
54      }
55      if (!isListening) {
56        isListening = true;
57        w.addEventListener("resize", handleChange, true);
58      }
59      if (index === 0) {
60        index = queries.push({
61          mql: mql,
62          listeners: listeners
63        });
64      }
65      listeners.push(listener);
66    };
67    mql.removeListener = function(listener) {
68      for (var i = 0, il = listeners.length; i < il; i++) {
69        if (listeners[i] === listener) {
70          listeners.splice(i, 1);
71        }
72      }
73    };
74    return mql;
75  };
76})(this);
77
78(function(w) {
79  "use strict";
80  var respond = {};
81  w.respond = respond;
82  respond.update = function() {};
83  var requestQueue = [], xmlHttp = function() {
84    var xmlhttpmethod = false;
85    try {
86      xmlhttpmethod = new w.XMLHttpRequest();
87    } catch (e) {
88      xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
89    }
90    return function() {
91      return xmlhttpmethod;
92    };
93  }(), ajax = function(url, callback) {
94    var req = xmlHttp();
95    if (!req) {
96      return;
97    }
98    req.open("GET", url, true);
99    req.onreadystatechange = function() {
100      if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) {
101        return;
102      }
103      callback(req.responseText);
104    };
105    if (req.readyState === 4) {
106      return;
107    }
108    req.send(null);
109  }, isUnsupportedMediaQuery = function(query) {
110    return query.replace(respond.regex.minmaxwh, "").match(respond.regex.other);
111  };
112  respond.ajax = ajax;
113  respond.queue = requestQueue;
114  respond.unsupportedmq = isUnsupportedMediaQuery;
115  respond.regex = {
116    media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
117    keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,
118    comments: /\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,
119    urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
120    findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
121    only: /(only\s+)?([a-zA-Z]+)\s?/,
122    minw: /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
123    maxw: /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
124    minmaxwh: /\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,
125    other: /\([^\)]*\)/g
126  };
127  respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
128  if (respond.mediaQueriesSupported) {
129    return;
130  }
131  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() {
132    var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false;

133    div.style.cssText = "position:absolute;font-size:1em;width:1em";
134    if (!body) {
135      body = fakeUsed = doc.createElement("body");
136      body.style.background = "none";
137    }
138    docElem.style.fontSize = "100%";
139    body.style.fontSize = "100%";
140    body.appendChild(div);
141    if (fakeUsed) {
142      docElem.insertBefore(body, docElem.firstChild);
143    }
144    ret = div.offsetWidth;
145    if (fakeUsed) {
146      docElem.removeChild(body);
147    } else {
148      body.removeChild(div);
149    }
150    docElem.style.fontSize = originalHTMLFontSize;
151    if (originalBodyFontSize) {
152      body.style.fontSize = originalBodyFontSize;
153    }
154    ret = eminpx = parseFloat(ret);
155    return ret;
156  }, applyMedia = function(fromResize) {
157    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();
158    if (fromResize && lastCall && now - lastCall < resizeThrottle) {
159      w.clearTimeout(resizeDefer);
160      resizeDefer = w.setTimeout(applyMedia, resizeThrottle);
161      return;
162    } else {
163      lastCall = now;
164    }
165    for (var i in mediastyles) {
166      if (mediastyles.hasOwnProperty(i)) {
167        var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em";
168        if (!!min) {
169          min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
170        }
171        if (!!max) {
172          max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue() : 1);
173        }
174        if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)) {
175          if (!styleBlocks[thisstyle.media]) {
176            styleBlocks[thisstyle.media] = [];
177          }
178          styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
179        }
180      }
181    }
182    for (var j in appendedEls) {
183      if (appendedEls.hasOwnProperty(j)) {
184        if (appendedEls[j] && appendedEls[j].parentNode === head) {
185          head.removeChild(appendedEls[j]);
186        }
187      }
188    }
189    appendedEls.length = 0;
190    for (var k in styleBlocks) {
191      if (styleBlocks.hasOwnProperty(k)) {
192        var ss = doc.createElement("style"), css = styleBlocks[k].join("\n");
193        ss.type = "text/css";
194        ss.media = k;
195        head.insertBefore(ss, lastLink.nextSibling);
196        if (ss.styleSheet) {
197          ss.styleSheet.cssText = css;
198        } else {
199          ss.appendChild(doc.createTextNode(css));
200        }
201        appendedEls.push(ss);
202      }
203    }
204  }, translate = function(styles, href, media) {
205    var qs = styles.replace(respond.regex.comments, "").replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;
206    href = href.substring(0, href.lastIndexOf("/"));
207    var repUrls = function(css) {
208      return css.replace(respond.regex.urls, "$1" + href + "$2$3");
209    }, useMedia = !ql && media;
210    if (href.length) {
211      href += "/";
212    }
213    if (useMedia) {
214      ql = 1;
215    }
216    for (var i = 0; i < ql; i++) {
217      var fullq, thisq, eachq, eql;
218      if (useMedia) {
219        fullq = media;
220        rules.push(repUrls(styles));
221      } else {
222        fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
223        rules.push(RegExp.$2 && repUrls(RegExp.$2));
224      }
225      eachq = fullq.split(",");
226      eql = eachq.length;
227      for (var j = 0; j < eql; j++) {
228        thisq = eachq[j];
229        if (isUnsupportedMediaQuery(thisq)) {
230          continue;
231        }
232        mediastyles.push({
233          media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",
234          rules: rules.length - 1,
235          hasquery: thisq.indexOf("(") > -1,
236          minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
237          maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
238        });
239      }
240    }
241    applyMedia();
242  }, makeRequests = function() {
243    if (requestQueue.length) {
244      var thisRequest = requestQueue.shift();
245      ajax(thisRequest.href, function(styles) {
246        translate(styles, thisRequest.href, thisRequest.media);
247        parsedSheets[thisRequest.href] = true;
248        w.setTimeout(function() {
249          makeRequests();
250        }, 0);
251      });
252    }
253  }, ripCSS = function() {
254    for (var i = 0; i < links.length; i++) {
255      var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
256      if (!!href && isCSS && !parsedSheets[href]) {
257        if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
258          translate(sheet.styleSheet.rawCssText, href, media);
259          parsedSheets[href] = true;
260        } else {
261          if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) {
262            if (href.substring(0, 2) === "//") {
263              href = w.location.protocol + href;
264            }
265            requestQueue.push({
266              href: href,
267              media: media
268            });
269          }
270        }
271      }
272    }
273    makeRequests();
274  };
275  ripCSS();
276  respond.update = ripCSS;
277  respond.getEmValue = getEmValue;
278  function callMedia() {
279    applyMedia(true);
280  }
281  if (w.addEventListener) {
282    w.addEventListener("resize", callMedia, false);
283  } else if (w.attachEvent) {
284    w.attachEvent("onresize", callMedia);
285  }
286})(this);