Merge pull request #20 from Pageworks/develop

Pjax v2.3.0
Pageworks · Aug 26, 2019 · 5ce322a · 5ce322a
2 parents 7d0f0ab + 5b2c318
commit 5ce322a
Show file tree

Hide file tree

Showing 15 changed files with 6,878 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+.DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.3.0 - 2019-08-26
+
+### Added
+
+- Adds: developers can enable the `requireCssBeforeComplete` flag to force Pjax to fetch and append all the CSS stylesheets before firing the `pjax:complete` event
+
 ## 2.2.1 - 2019-08-23
 
 ### Fixed

diff --git a/README.md b/README.md
@@ -104,6 +104,7 @@ You can define custom Pjax options using the following:
 | importScripts                | boolean                   | `true`               |
 | importCSS                    | boolean                   | `true`               |
 | scriptImportLocation         | HTMLElement               | `document.head`      |
+| requireCssBeforeComplete     | boolean                   | `false`              |
 
 `elements` is the base element users should click on to trigger a page transition.
 
@@ -127,6 +128,8 @@ When `importCSS` is `true` Pjax will dynamically fetch and append custom `<style
 
 `scriptImportLocation` is the `HTMLElement` that the dynamically fetched `<script>` elements will be appended upon. Defaults to `document.head`.
 
+When `requireCssBeforeComplete` is `true` Pjax will delay firing the `pjax:complete` event until all the CSS fetch request have been resolved.
+
 ### Pjax Events
 
 Pjax fires a handful of events on the `document` that you can listen for.

diff --git a/lib/parse-options.js b/lib/parse-options.js
diff --git a/lib/parse-options.js.map b/lib/parse-options.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@pageworks/pjax",
-    "version": "2.2.1",
+    "version": "2.3.0",
     "description": "Turns any website into a SPA using Fetch and link prefetching.",
     "keywords": [
         "pjax",

diff --git a/pjax.js b/pjax.js
diff --git a/pjax.js.map b/pjax.js.map
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -20,6 +20,7 @@ declare namespace Pjax{
         importScripts?:                 boolean;
         importCSS?:                     boolean;
         scriptImportLocation?:          HTMLElement|HTMLHeadElement;
+        requireCssBeforeComplete?:      boolean;
     }
 
     export interface IScrollPosition{

diff --git a/src/lib/parse-options.ts b/src/lib/parse-options.ts
@@ -16,5 +16,6 @@ export default (options:PJAX.IOptions = null)=>{
             parsedOptions.importScripts                 = (options !== null && options.importScripts !== undefined) ? options.importScripts : true;
             parsedOptions.importCSS                     = (options !== null && options.importCSS !== undefined) ? options.importCSS : true;
             parsedOptions.scriptImportLocation          = (options !== null && options.scriptImportLocation !== undefined && options.scriptImportLocation instanceof HTMLElement) ? options.scriptImportLocation : document.head;
+            parsedOptions.requireCssBeforeComplete      = (options !== null && options.requireCssBeforeComplete !== undefined) ? options.requireCssBeforeComplete : false;
     return  parsedOptions;
 }
diff --git a/src/pjax.ts b/src/pjax.ts
@@ -14,7 +14,7 @@ import PJAX from './global';
 
 export default class Pjax{
 
-    public static VERSION:string    = '2.2.1';
+    public static VERSION:string    = '2.3.0';
 
     public  options                 :   PJAX.IOptions;
     private _cache                  :   PJAX.ICacheObject;
@@ -373,11 +373,47 @@ export default class Pjax{
         }
 
         if(this.options.importCSS){
-            this.handleCSS(tempDocument);
+            if (!this.options.requireCssBeforeComplete)
+            {
+                this.handleCSS(tempDocument);
+            }
+            else
+            {
+                this.handleSynchronousCss(tempDocument)
+                .then(()=>{
+                    // Check if Pjax needs to wait for the continue event
+                    if(!this.options.customTransitions){
+                        if(this.options.titleSwitch){
+                            document.title = tempDocument.title;
+                        }
+                        this.handleSwitches(switchQueue);
+                    }else{
+                        this._cachedSwitch = {
+                            queue: switchQueue,
+                            title: tempDocument.title
+                        };
+
+                        if (this._transitionFinished)
+                        {
+                            if (this.options.titleSwitch)
+                            {
+                                document.title = this._cachedSwitch.title;
+                            }
+                            this.handleSwitches(this._cachedSwitch.queue);
+                        }
+                    }
+                });
+            }
         }
 
+        if (this.options.importCSS && this.options.requireCssBeforeComplete)
+        {
+            return;
+        }
+
         // Check if Pjax needs to wait for the continue event
-        if(!this.options.customTransitions){
+        if (!this.options.customTransitions)
+        {
             if(this.options.titleSwitch){
                 document.title = tempDocument.title;
             }
@@ -636,9 +672,10 @@ export default class Pjax{
      * Append any `<style>` or `<link rel="stylesheet">` elements onto the current documents head
      * @param newDocument - `HTMLDocument`
      */
-    private handleCSS(newDocument:HTMLDocument):void{
-
-        if(newDocument instanceof HTMLDocument){
+    private handleCSS(newDocument:HTMLDocument) : void
+    {  
+        if (newDocument instanceof HTMLDocument)
+        {
             const newStyles:Array<HTMLLinkElement> = Array.from(newDocument.querySelectorAll('link[rel="stylesheet"]'));
             const currentStyles:Array<HTMLElement> = Array.from(document.querySelectorAll('link[rel="stylesheet"], style[href]'));
             const stylesToAppend:Array<HTMLLinkElement> = [];
@@ -654,7 +691,8 @@ export default class Pjax{
                     }
                 });
 
-                if(appendStyle){
+                if (appendStyle)
+                {
                     stylesToAppend.push(newStyle);
                 }
             });
@@ -686,6 +724,74 @@ export default class Pjax{
         }
     }
 
+    private handleSynchronousCss(newDocument:HTMLDocument) : Promise<any>
+    {
+        return new Promise((resolve)=>{
+            if (newDocument instanceof HTMLDocument)
+            {
+                const newStyles:Array<HTMLLinkElement> = Array.from(newDocument.querySelectorAll('link[rel="stylesheet"]'));
+                const currentStyles:Array<HTMLElement> = Array.from(document.querySelectorAll('link[rel="stylesheet"], style[href]'));
+                const stylesToAppend:Array<HTMLLinkElement> = [];
+                let fetched = 0;
+
+                newStyles.forEach((newStyle)=>{
+                    let appendStyle = true;
+                    const newStyleFile = newStyle.getAttribute('href').match(/[^/]+$/g)[0];
+
+                    currentStyles.forEach((currentStyle)=>{
+                        const currentStyleFile = currentStyle.getAttribute('href').match(/[^/]+$/g)[0];
+                        if (newStyleFile === currentStyleFile)
+                        {
+                            appendStyle = false;
+                        }
+                    });
+
+                    if (appendStyle)
+                    {
+                        stylesToAppend.push(newStyle);
+                    }
+                });
+
+                // Append the new `link` styles to the head
+                if (stylesToAppend.length)
+                {
+                    stylesToAppend.forEach((style)=>{
+                        fetch(style.href, {
+                            method: 'GET',
+                            credentials: 'include',
+                            headers: new Headers({
+                                'X-Requested-With': 'XMLHttpRequest'
+                            })
+                        })
+                        .then(request => request.text())
+                        .then(response => {
+                            const newStyle = document.createElement('style');
+                            newStyle.setAttribute('rel', 'stylesheet');
+                            newStyle.setAttribute('href', style.href);
+                            newStyle.innerHTML = response;
+                            document.head.appendChild(newStyle);
+                        })
+                        .catch(error => {
+                            console.error('Failed to fetch stylesheet', style.href, error);
+                        })
+                        .then(()=>{
+                            fetched++;
+
+                            if (fetched === stylesToAppend.length)
+                            {
+                                resolve();
+                            }
+                        });
+                    });
+                }
+                else
+                {
+                    resolve();
+                }
+            }
+        });
+    }
+
     /**
      * Handles the fetch `Response` based on the load type.
      * @param response - `Reponse` object provided by the Fetch API

diff --git a/testing/App.js b/testing/App.js
@@ -6,7 +6,7 @@ var useTransition = true;
  * IIFE for starting Pjax on load
  */
 (function(){
-    var pjax = new Pjax({ debug:true, customTransitions: useTransition });
+    var pjax = new Pjax({ debug:true });
 
     var prefetchLight = document.body.querySelector('.js-prefetch');
     var loadLight = document.body.querySelector('.js-load');