feat(core): Add preliminary support for PJAX

Implements ppoffice#1277 Related ppoffice#1269 ppoffice#992 ppoffice#722 ppoffice#649 ppoffice#507
PJ-568 · Apr 17, 2024 · 5267ac8 · 5267ac8
1 parent 866c59f
commit 5267ac8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/layout/common/scripts.jsx b/layout/common/scripts.jsx
@@ -32,12 +32,14 @@ module.exports = class extends Component {
         return <Fragment>
             <script src={cdn('jquery', '3.3.1', 'dist/jquery.min.js')}></script>
             <script src={cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')}></script>
+            <script src={cdn('pjax', '0.2.8', 'min/pjax.min.js')}></script>
             {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>
+            <script src={url_for('/js/pjax.js')}></script>
         </Fragment>;
     }
 };
diff --git a/layout/plugin/back_to_top.jsx b/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>;
 
     }

diff --git a/source/js/pjax.js b/source/js/pjax.js
@@ -0,0 +1,36 @@
+// eslint-disable-next-line no-unused-vars
+let pjax;
+
+function initPjax() {
+    try {
+        // eslint-disable-next-line no-undef
+        pjax = new Pjax({
+            selectors: [
+                'head title',
+                '.columns',
+                '.navbar-start',
+                '.navbar-end',
+                '.searchbox',
+                '#back-to-top',
+                '[data-pjax]',
+                '.pjax-reload'
+            ]
+        });
+    } catch (e) {
+        console.log('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
+// })
+
+window.addEventListener('load', () => initPjax());