loadCSS.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
  2. (function(w){
  3. "use strict";
  4. /* exported loadCSS */
  5. var loadCSS = function( href, before, media, attributes ){
  6. // Arguments explained:
  7. // `href` [REQUIRED] is the URL for your CSS file.
  8. // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
  9. // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
  10. // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
  11. // `attributes` [OPTIONAL] is the Object of attribute name/attribute value pairs to set on the stylesheet's DOM Element.
  12. var doc = w.document;
  13. var ss = doc.createElement( "link" );
  14. var ref;
  15. if( before ){
  16. ref = before;
  17. }
  18. else {
  19. var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
  20. ref = refs[ refs.length - 1];
  21. }
  22. var sheets = doc.styleSheets;
  23. // Set any of the provided attributes to the stylesheet DOM Element.
  24. if( attributes ){
  25. for( var attributeName in attributes ){
  26. if( attributes.hasOwnProperty( attributeName ) ){
  27. ss.setAttribute( attributeName, attributes[attributeName] );
  28. }
  29. }
  30. }
  31. ss.rel = "stylesheet";
  32. ss.href = href;
  33. // temporarily set media to something inapplicable to ensure it'll fetch without blocking render
  34. ss.media = "only x";
  35. // wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
  36. function ready( cb ){
  37. if( doc.body ){
  38. return cb();
  39. }
  40. setTimeout(function(){
  41. ready( cb );
  42. });
  43. }
  44. // Inject link
  45. // Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
  46. // Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
  47. ready( function(){
  48. ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
  49. });
  50. // A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
  51. var onloadcssdefined = function( cb ){
  52. var resolvedHref = ss.href;
  53. var i = sheets.length;
  54. while( i-- ){
  55. if( sheets[ i ].href === resolvedHref ){
  56. return cb();
  57. }
  58. }
  59. setTimeout(function() {
  60. onloadcssdefined( cb );
  61. });
  62. };
  63. function loadCB(){
  64. if( ss.addEventListener ){
  65. ss.removeEventListener( "load", loadCB );
  66. }
  67. ss.media = media || "all";
  68. }
  69. // once loaded, set link's media back to `all` so that the stylesheet applies once it loads
  70. if( ss.addEventListener ){
  71. ss.addEventListener( "load", loadCB);
  72. }
  73. ss.onloadcssdefined = onloadcssdefined;
  74. onloadcssdefined( loadCB );
  75. return ss;
  76. };
  77. // commonjs
  78. if( typeof exports !== "undefined" ){
  79. exports.loadCSS = loadCSS;
  80. }
  81. else {
  82. w.loadCSS = loadCSS;
  83. }
  84. }( typeof global !== "undefined" ? global : this ));