Merge pull request #1287 from PJ-568/master

feat(core): Add preliminary support for PJAX

include/schema/common/plugins.json

@@ -43,6 +43,9 @@
         "outdated_browser": {
             "$ref": "/plugin/outdated_browser.json"
         },
+        "pjax": {
+            "$ref": "/plugin/pjax.json"
+        },
         "progressbar": {
             "$ref": "/plugin/progressbar.json"
         },

include/schema/plugin/pjax.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "/plugin/pjax.json",
+    "description": "Enable PJAX",
+    "type": "boolean",
+    "default": true
+}

layout/common/head.jsx

@@ -166,9 +166,9 @@ module.exports = class extends Component {
             {rss ? <link rel="alternate" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}
             {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
             <link rel="stylesheet" href={iconcdn()} />
-            {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '11.7.0', 'styles/' + hlTheme + '.css')} /> : null}
+            {hlTheme ? <link data-pjax rel="stylesheet" href={cdn('highlight.js', '11.7.0', 'styles/' + hlTheme + '.css')} /> : null}
             <link rel="stylesheet" href={fontCssUrl[variant]} />
-            <link rel="stylesheet" href={url_for('/css/' + variant + '.css')} />
+            <link data-pjax rel="stylesheet" href={url_for('/css/' + variant + '.css')} />
             <Plugins site={site} config={config} helper={helper} page={page} head={true} />
 
             {adsenseClientId ? <script data-ad-client={adsenseClientId}

layout/common/scripts.jsx

@@ -35,9 +35,9 @@ module.exports = class extends Component {
             {clipboard && <script src={cdn('clipboard', '2.0.4', 'dist/clipboard.min.js')} defer></script>}
             <script dangerouslySetInnerHTML={{ __html: `moment.locale("${language}");` }}></script>
             <script dangerouslySetInnerHTML={{ __html: embeddedConfig }}></script>
-            <script src={url_for('/js/column.js')}></script>
+            <script data-pjax src={url_for('/js/column.js')}></script>
             <Plugins site={site} config={config} page={page} helper={helper} head={false} />
-            <script src={url_for('/js/main.js')} defer></script>
+            <script data-pjax src={url_for('/js/main.js')} defer></script>
         </Fragment>;
     }
 };

layout/plugin/back_to_top.jsx

@@ -9,7 +9,7 @@ class BackToTop extends Component {
             <a id="back-to-top" title={title} href="javascript:;">
                 <i class="fas fa-chevron-up"></i>
             </a>
-            <script src={jsUrl} defer></script>
+            <script data-pjax src={jsUrl} defer></script>
         </Fragment>;
 
     }

layout/plugin/pjax.jsx

@@ -0,0 +1,18 @@
+const { Component, Fragment } = require('inferno');
+
+class Pjax extends Component {
+    render() {
+        if (this.props.head) {
+            return null;
+        }
+        const { helper } = this.props;
+        const { url_for, cdn } = helper;
+
+        return <Fragment>
+            <script src={cdn('pjax', '0.2.8', 'pjax.min.js')}></script>
+            <script src={url_for('/js/pjax.js')}></script>
+        </Fragment>;
+    }
+}
+
+module.exports = Pjax;

source/js/pjax.js

@@ -0,0 +1,38 @@
+(function() {
+    // eslint-disable-next-line no-unused-vars
+    let pjax;
+
+    function initPjax() {
+        try {
+            const Pjax = window.Pjax || function() {};
+            pjax = new Pjax({
+                selectors: [
+                    'head title',
+                    '.columns',
+                    '.navbar-start',
+                    '.navbar-end',
+                    '.searchbox',
+                    '#back-to-top',
+                    '[data-pjax]',
+                    '.pjax-reload'
+                ]
+            });
+        } catch (e) {
+            console.warn('PJAX error: ' + e);
+        }
+    }
+
+    // // Listen for start of Pjax
+    // document.addEventListener('pjax:send', function() {
+    //     return;
+    //     // TODO pace start loading animation
+    // })
+
+    // // Listen for completion of Pjax
+    // document.addEventListener('pjax:complete', function() {
+    //     return;
+    //     // TODO pace stop loading animation
+    // })
+
+    document.addEventListener('DOMContentLoaded', () => initPjax());
+}());