loadcss-rails 1.3.1 → 2.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 125a6764da9c1917a1d3d09647cf331413ec455f
-  data.tar.gz: c66f35824d340de35eb572fc425630395cd754f2
+  metadata.gz: 890354a3f2b5255309167fb1af8d6cf9464a3960
+  data.tar.gz: 9f0a70e4338132012b5739592a03293fa1ab0c9b
 SHA512:
-  metadata.gz: 3d73a2e2b22d24057c1ee61cff68ccc6db7582825e9c1c8d504a096a25dd8644352cc44d0540d7f35a0dfcd580b0daf91f58fef3e06465698cee73f822cd8585
-  data.tar.gz: 4ae372535a69f77b57f86ab638ee75738fd2655610aa003c6816c5ebb669b7aeda2a05635d01d442faa4237b5df78239cb76db63e426cdf589e46388bed9f433
+  metadata.gz: 4df83184ba0faa40dc2e2ed8fe17a8c7f2ebe9036131b14d8a735af223e9e158e13a38cba9f1d741c1631f92cf5094c848932cbd9d64fd18ebc50bd35574380d
+  data.tar.gz: 2b531bcfd39bbe53ff4bf4530629c27e0aa3a3ab3fcef052ae20ecccca5fdd2e5e0cd41b745193281c05bc343af719d3dfd7fcac88d8e0dcad72ff756397ac78

data/Gemfile

@@ -1,4 +1,4 @@
 # A sample Gemfile
-source "https://rubygems.org"
+source 'https://rubygems.org'
 
 gem 'rubocop', require: false

data/README.md

@@ -11,7 +11,7 @@ These pieces of javascript were implemented by [Filament Group](https://github.c
 ## Installation
 
 ```
-gem 'loadcss-rails', '~> 1.2.0'
+gem 'loadcss-rails', '~> 2.0.1'
 ```
 
 The loadCSS and onloadCSS files will be added to the asset pipeline and available for you to use. Add the lines that you need to your application's JS manifest (usually `app/assets/javascripts/application.js`).

data/lib/loadcss/rails/version.rb

@@ -1,6 +1,6 @@
 module LoadCSS
   module Rails
-    VERSION = '1.3.1'
-    LOADCSS_VERSION = '1.3.1'
+    VERSION = '2.0.1'
+    LOADCSS_VERSION = '2.0.1'
   end
 end

data/vendor/assets/javascripts/cssrelpreload.js

@@ -1,44 +1,104 @@
-/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
+/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
+/* This file is meant as a standalone workflow for
+- testing support for link[rel=preload]
+- enabling async CSS loading in browsers that do not support rel=preload
+- applying rel preload css once loaded, whether supported or not.
+*/
 (function( w ){
+  "use strict";
   // rel=preload support test
   if( !w.loadCSS ){
-    return;
+    w.loadCSS = function(){};
   }
+  // define on the loadCSS obj
   var rp = loadCSS.relpreload = {};
-  rp.support = function(){
+  // rel=preload feature support test
+  // runs once and returns a function for compat purposes
+  rp.support = (function(){
+    var ret;
     try {
-      return w.document.createElement( "link" ).relList.supports( "preload" );
+      ret = w.document.createElement( "link" ).relList.supports( "preload" );
     } catch (e) {
-      return false;
+      ret = false;
     }
+    return function(){
+      return ret;
+    };
+  })();
+
+  // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
+  // then change that media back to its intended value on load
+  rp.bindMediaToggle = function( link ){
+    // remember existing media attr for ultimate state, or default to 'all'
+    var finalMedia = link.media || "all";
+
+    function enableStylesheet(){
+      link.media = finalMedia;
+    }
+
+    // bind load handlers to enable media
+    if( link.addEventListener ){
+      link.addEventListener( "load", enableStylesheet );
+    } else if( link.attachEvent ){
+      link.attachEvent( "onload", enableStylesheet );
+    }
+
+    // Set rel and non-applicable media type to start an async request
+    // note: timeout allows this to happen async to let rendering continue in IE
+    setTimeout(function(){
+      link.rel = "stylesheet";
+      link.media = "only x";
+    });
+    // also enable media after 3 seconds,
+    // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
+    setTimeout( enableStylesheet, 3000 );
   };
 
-  // loop preload links and fetch using loadCSS
+  // loop through link elements in DOM
   rp.poly = function(){
+    // double check this to prevent external calls from running
+    if( rp.support() ){
+      return;
+    }
     var links = w.document.getElementsByTagName( "link" );
     for( var i = 0; i < links.length; i++ ){
       var link = links[ i ];
-      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
-        w.loadCSS( link.href, link, link.getAttribute( "media" ) );
-        link.rel = null;
+      // qualify links to those with rel=preload and as=style attrs
+      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
+        // prevent rerunning on link
+        link.setAttribute( "data-loadcss", true );
+        // bind listeners to toggle media back
+        rp.bindMediaToggle( link );
       }
     }
   };
 
-  // if link[rel=preload] is not supported, we must fetch the CSS manually using loadCSS
+  // if unsupported, run the polyfill
   if( !rp.support() ){
+    // run once at least
     rp.poly();
-    var run = w.setInterval( rp.poly, 300 );
+
+    // rerun poly on an interval until onload
+    var run = w.setInterval( rp.poly, 500 );
     if( w.addEventListener ){
       w.addEventListener( "load", function(){
         rp.poly();
         w.clearInterval( run );
       } );
-    }
-    if( w.attachEvent ){
+    } else if( w.attachEvent ){
       w.attachEvent( "onload", function(){
+        rp.poly();
         w.clearInterval( run );
-      } )
+      } );
     }
   }
-}( this ));
+
+
+  // commonjs
+  if( typeof exports !== "undefined" ){
+    exports.loadCSS = loadCSS;
+  }
+  else {
+    w.loadCSS = loadCSS;
+  }
+}( typeof global !== "undefined" ? global : this ) );

data/vendor/assets/javascripts/loadCSS.js

@@ -6,7 +6,7 @@
     // Arguments explained:
     // `href` [REQUIRED] is the URL for your CSS file.
     // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
-      // 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.
+    // 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.
     // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
     var doc = w.document;
     var ss = doc.createElement( "link" );

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: loadcss-rails
 version: !ruby/object:Gem::Version
-  version: 1.3.1
+  version: 2.0.1
 platform: ruby
 authors:
 - Michael Misshore
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-03-04 00:00:00.000000000 Z
+date: 2017-12-27 00:00:00.000000000 Z
 dependencies: []
 description: This gem provides LoadCSS and OnloadCSS for your Rails application.
 email:
@@ -52,7 +52,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.12
 signing_key: 
 specification_version: 4
 summary: Use LoadCSS and OnloadCSS with Rails