JAVASCRIPT   10

respond.js

Guest on 6th May 2021 03:03:54 PM

  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 */
  2. /*! #NOTE:20 If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
  3.  
  4. /*
  5. comento machmedia porque ya se incluye
  6.  
  7. window.matchMedia = window.matchMedia || (function( doc, undefined ) {
  8.  
  9.   "use strict";
  10.  
  11.   var bool,
  12.       docElem = doc.documentElement,
  13.       refNode = docElem.firstElementChild || docElem.firstChild,
  14.       // fakeBody required for <FF4 when executed in <head>
  15.       fakeBody = doc.createElement( "body" ),
  16.       div = doc.createElement( "div" );
  17.  
  18.   div.id = "mq-test-1";
  19.   div.style.cssText = "position:absolute;top:-100em";
  20.   fakeBody.style.background = "none";
  21.   fakeBody.appendChild(div);
  22.  
  23.   return function(q){
  24.  
  25.     div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
  26.  
  27.     docElem.insertBefore( fakeBody, refNode );
  28.     bool = div.offsetWidth === 42;
  29.     docElem.removeChild( fakeBody );
  30.  
  31.     return {
  32.       matches: bool,
  33.       media: q
  34.     };
  35.  
  36.   };
  37.  
  38. }( document ));
  39. */
  40.  
  41.  
  42.  
  43.  
  44. /*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
  45. (function( win ){
  46.  
  47.       "use strict";
  48.  
  49.       //exposed namespace
  50.       var respond = {};
  51.       win.respond = respond;
  52.      
  53.       //define update even in native-mq-supporting browsers, to avoid errors
  54.       respond.update = function(){};
  55.      
  56.       //expose media query support flag for external use
  57.       respond.mediaQueriesSupported = win.matchMedia && win.matchMedia( "only all" ).matches;
  58.      
  59.       //if media queries are supported, exit here
  60.       if( respond.mediaQueriesSupported ){
  61.             return;
  62.       }
  63.      
  64.       //define vars
  65.       var doc = win.document,
  66.             docElem = doc.documentElement,
  67.             mediastyles = [],
  68.             rules = [],
  69.             appendedEls = [],
  70.             parsedSheets = {},
  71.             resizeThrottle = 30,
  72.             head = doc.getElementsByTagName( "head" )[0] || docElem,
  73.             base = doc.getElementsByTagName( "base" )[0],
  74.             links = head.getElementsByTagName( "link" ),
  75.             requestQueue = [],
  76.            
  77.             //loop stylesheets, send text content to translate
  78.             ripCSS = function(){
  79.  
  80.                   for( var i = 0; i < links.length; i++ ){
  81.                         var sheet = links[ i ],
  82.                         href = sheet.href,
  83.                         media = sheet.media,
  84.                         isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
  85.  
  86.                         //only links plz and prevent re-parsing
  87.                         if( !!href && isCSS && !parsedSheets[ href ] ){
  88.                               // selectivizr exposes css through the rawCssText expando
  89.                               if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
  90.                                     translate( sheet.styleSheet.rawCssText, href, media );
  91.                                     parsedSheets[ href ] = true;
  92.                               } else {
  93.                                     if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base) ||
  94.                                           href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
  95.                                           requestQueue.push( {
  96.                                                 href: href,
  97.                                                 media: media
  98.                                           } );
  99.                                     }
  100.                               }
  101.                         }
  102.                   }
  103.                   makeRequests();
  104.             },
  105.            
  106.             //recurse through request queue, get css text
  107.             makeRequests      = function(){
  108.                   if( requestQueue.length ){
  109.                         var thisRequest = requestQueue.shift();
  110.                        
  111.                         ajax( thisRequest.href, function( styles ){
  112.                               translate( styles, thisRequest.href, thisRequest.media );
  113.                               parsedSheets[ thisRequest.href ] = true;
  114.  
  115.                               // by wrapping recursive function call in setTimeout
  116.                               // we prevent "Stack overflow" error in IE7
  117.                               win.setTimeout(function(){ makeRequests(); },0);
  118.                         } );
  119.                   }
  120.             },
  121.            
  122.             //find media blocks in css text, convert to style blocks
  123.             translate = function( styles, href, media ){
  124.                   var qs = styles.match(  /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),
  125.                         ql = qs && qs.length || 0;
  126.  
  127.                   //try to get CSS path
  128.                   href = href.substring( 0, href.lastIndexOf( "/" ) );
  129.  
  130.                   var repUrls = function( css ){
  131.                               return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" );
  132.                         },
  133.                         useMedia = !ql && media;
  134.  
  135.                   //if path exists, tack on trailing slash
  136.                   if( href.length ){ href += "/"; }  
  137.                        
  138.                   //if no internal queries exist, but media attr does, use that    
  139.                   //note: this currently lacks support for situations where a media attr is specified on a link AND
  140.                         //its associated stylesheet has internal CSS media queries.
  141.                         //In those cases, the media attribute will currently be ignored.
  142.                   if( useMedia ){
  143.                         ql = 1;
  144.                   }
  145.  
  146.                   for( var i = 0; i < ql; i++ ){
  147.                         var fullq, thisq, eachq, eql;
  148.  
  149.                         //media attr
  150.                         if( useMedia ){
  151.                               fullq = media;
  152.                               rules.push( repUrls( styles ) );
  153.                         }
  154.                         //parse for styles
  155.                         else{
  156.                               fullq = qs[ i ].match( /@media *([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1;
  157.                               rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
  158.                         }
  159.                        
  160.                         eachq = fullq.split( "," );
  161.                         eql   = eachq.length;
  162.                              
  163.                         for( var j = 0; j < eql; j++ ){
  164.                               thisq = eachq[ j ];
  165.                               mediastyles.push( {
  166.                                     media : thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-zA-Z]+)\s?/ ) && RegExp.$2 || "all",
  167.                                     rules : rules.length - 1,
  168.                                     hasquery : thisq.indexOf("(") > -1,
  169.                                     minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
  170.                                     maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
  171.                               } );
  172.                         }    
  173.                   }
  174.  
  175.                   applyMedia();
  176.             },
  177.        
  178.             lastCall,
  179.            
  180.             resizeDefer,
  181.            
  182.             // returns the value of 1em in pixels
  183.             getEmValue = function() {
  184.                   var ret,
  185.                         div = doc.createElement('div'),
  186.                         body = doc.body,
  187.                         fakeUsed = false;
  188.                                                      
  189.                   div.style.cssText = "position:absolute;font-size:1em;width:1em";
  190.                              
  191.                   if( !body ){
  192.                         body = fakeUsed = doc.createElement( "body" );
  193.                         body.style.background = "none";
  194.                   }
  195.                              
  196.                   body.appendChild( div );
  197.                                                
  198.                   docElem.insertBefore( body, docElem.firstChild );
  199.                                                
  200.                   ret = div.offsetWidth;
  201.                                                
  202.                   if( fakeUsed ){
  203.                         docElem.removeChild( body );
  204.                   }
  205.                   else {
  206.                         body.removeChild( div );
  207.                   }
  208.                  
  209.                   //also update eminpx before returning
  210.                   ret = eminpx = parseFloat(ret);
  211.                                                
  212.                   return ret;
  213.             },
  214.            
  215.             //cached container for 1em value, populated the first time it's needed
  216.             eminpx,
  217.            
  218.             //enable/disable styles
  219.             applyMedia = function( fromResize ){
  220.                   var name = "clientWidth",
  221.                         docElemProp = docElem[ name ],
  222.                         currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
  223.                         styleBlocks = {},
  224.                         lastLink = links[ links.length-1 ],
  225.                         now = (new Date()).getTime();
  226.  
  227.                   //throttle resize calls
  228.                   if( fromResize && lastCall && now - lastCall < resizeThrottle ){
  229.                         win.clearTimeout( resizeDefer );
  230.                         resizeDefer = win.setTimeout( applyMedia, resizeThrottle );
  231.                         return;
  232.                   }
  233.                   else {
  234.                         lastCall = now;
  235.                   }
  236.                                                            
  237.                   for( var i in mediastyles ){
  238.                         if( mediastyles.hasOwnProperty( i ) ){
  239.                               var thisstyle = mediastyles[ i ],
  240.                                     min = thisstyle.minw,
  241.                                     max = thisstyle.maxw,
  242.                                     minnull = min === null,
  243.                                     maxnull = max === null,
  244.                                     em = "em";
  245.                              
  246.                               if( !!min ){
  247.                                     min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
  248.                               }
  249.                               if( !!max ){
  250.                                     max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
  251.                               }
  252.                              
  253.                               // if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
  254.                               if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
  255.                                     if( !styleBlocks[ thisstyle.media ] ){
  256.                                           styleBlocks[ thisstyle.media ] = [];
  257.                                     }
  258.                                     styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );
  259.                               }
  260.                         }
  261.                   }
  262.                  
  263.                   //remove any existing respond style element(s)
  264.                   for( var j in appendedEls ){
  265.                         if( appendedEls.hasOwnProperty( j ) ){
  266.                               if( appendedEls[ j ] && appendedEls[ j ].parentNode === head ){
  267.                                     head.removeChild( appendedEls[ j ] );
  268.                               }
  269.                         }
  270.                   }
  271.                  
  272.                   //inject active styles, grouped by media type
  273.                   for( var k in styleBlocks ){
  274.                         if( styleBlocks.hasOwnProperty( k ) ){
  275.                               var ss = doc.createElement( "style" ),
  276.                                     css = styleBlocks[ k ].join( "\n" );
  277.                              
  278.                               ss.type = "text/css";  
  279.                               ss.media = k;
  280.                              
  281.                               //originally, ss was appended to a documentFragment and sheets were appended in bulk.
  282.                               //this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set, so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!
  283.                               head.insertBefore( ss, lastLink.nextSibling );
  284.                              
  285.                               if ( ss.styleSheet ){
  286.                                     ss.styleSheet.cssText = css;
  287.                               }
  288.                               else {
  289.                                     ss.appendChild( doc.createTextNode( css ) );
  290.                               }
  291.  
  292.                               //push to appendedEls to track for later removal
  293.                               appendedEls.push( ss );
  294.                         }
  295.                   }
  296.             },
  297.             //tweaked Ajax functions from Quirksmode
  298.             ajax = function( url, callback ) {
  299.                   var req = xmlHttp();
  300.                   if (!req){
  301.                         return;
  302.                   }    
  303.                   req.open( "GET", url, true );
  304.                   req.onreadystatechange = function () {
  305.                         if ( req.readyState !== 4 || req.status !== 200 && req.status !== 304 ){
  306.                               return;
  307.                         }
  308.                         callback( req.responseText );
  309.                   };
  310.                   if ( req.readyState === 4 ){
  311.                         return;
  312.                   }
  313.                   req.send( null );
  314.             },
  315.             //define ajax obj
  316.             xmlHttp = (function() {
  317.                   var xmlhttpmethod = false;   
  318.                   try {
  319.                         xmlhttpmethod = new win.XMLHttpRequest();
  320.                   }
  321.                   catch( e ){
  322.                         xmlhttpmethod = new win.ActiveXObject( "Microsoft.XMLHTTP" );
  323.                   }
  324.                   return function(){
  325.                         return xmlhttpmethod;
  326.                   };
  327.             })();
  328.      
  329.       //translate CSS
  330.       ripCSS();
  331.      
  332.       //expose update for re-running respond later on
  333.       respond.update = ripCSS;
  334.      
  335.       //adjust on resize
  336.       function callMedia(){
  337.             applyMedia( true );
  338.       }
  339.       if( win.addEventListener ){
  340.             win.addEventListener( "resize", callMedia, false );
  341.       }
  342.       else if( win.attachEvent ){
  343.             win.attachEvent( "onresize", callMedia );
  344.       }
  345. })(this);

Raw Paste


Login or Register to edit or fork this paste. It's free.