Progress bar (#41)

Author: pascalbaljet

app/package-lock.json

@@ -20,5 +20,6 @@ createApp({
     .use(SpladePlugin, {
         "max_keep_alive": 10,
         "transform_anchors": false,
+        "progress_bar": true
     })
     .mount(el);

app/resources/js/app.js

@@ -289,11 +289,21 @@ function restore(key, useLocalStorage) {
 
 //
 
+function fireEvent(name, data) {
+    if (isSsr) {
+        return;
+    }
+
+    document.dispatchEvent(new CustomEvent(`splade:${name}`, { detail: data }));
+}
+
 function request(url, method, data, headers, replace) {
     if (!isSsr) {
         remember("scrollY", window.scrollY);
     }
 
+    fireEvent("request", { url, method, data, headers, replace });
+
     const promise = Axios({
         method,
         url,
@@ -304,13 +314,22 @@ function request(url, method, data, headers, replace) {
             Accept: "text/html, application/xhtml+xml",
             ...headers,
         },
+        onUploadProgress: progress => {
+            if (data instanceof FormData) {
+                progress.percentage = Math.round(progress.loaded / progress.total * 100);
+                fireEvent("request-progress", { url, method, data, headers, replace, progress });
+            }
+        },
     });
 
     promise
         .then((response) => {
             newPageFromResponse(response, replace);
+            fireEvent("request-response", { url, method, data, headers, replace, response });
         })
         .catch((error) => {
+            fireEvent("request-error", { url, method, data, headers, replace, error });
+
             const spladeData = error.response.data.splade;
 
             if (spladeData) {

lib/Splade.js

@@ -1,4 +1,5 @@
 import has from "lodash-es/has";
+import isObject from "lodash-es/isObject";
 import Confirm from "./Components/Confirm.vue";
 import Data from "./Components/Data.vue";
 import Defer from "./Components/Defer.vue";
@@ -21,6 +22,7 @@ import Toasts from "./Components/Toasts.vue";
 import Toggle from "./Components/Toggle.vue";
 import Transition from "./Components/Transition.vue";
 import { Splade } from "./Splade.js";
+import { SpladeProgress } from "./SpladeProgress.js";
 
 export default {
     install: (app, options) => {
@@ -29,6 +31,7 @@ export default {
         options.prefix = has(options, "prefix") ? options.prefix : "Splade";
         options.transform_anchors = has(options, "transform_anchors") ? options.transform_anchors : false;
         options.link_component = has(options, "link_component") ? options.link_component : "Link";
+        options.progress_bar = has(options, "progress_bar") ? options.progress_bar : false;
 
         const prefix = options.prefix;
 
@@ -60,5 +63,26 @@ export default {
 
         app.provide("$splade", app.config.globalProperties.$splade);
         app.provide("$spladeOptions", app.config.globalProperties.$spladeOptions);
+
+        if (options.progress_bar) {
+            const progressDefaults = {
+                delay: 250,
+                color: "#4B5563",
+                css: true,
+                spinner: false,
+            };
+
+            if(!isObject(options.progress_bar)){
+                options.progress_bar = {};
+            }
+
+            ["delay", "color", "css", "spinner"].forEach((option) => {
+                if(!has(options.progress_bar, option)) {
+                    options.progress_bar[option] = progressDefaults[option];
+                }
+            });
+
+            SpladeProgress.init(options.progress_bar);
+        }
     }
 };

lib/SpladePlugin.js

@@ -0,0 +1,103 @@
+const SpladeProgress = {
+    injectCSS(color) {
+        const element = document.createElement("style");
+        element.type = "text/css";
+        element.textContent = `
+    #nprogress {
+      pointer-events: none;
+    }
+    #nprogress .bar {
+      background: ${color};
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
+      opacity: 1.0;
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+          -ms-transform: rotate(3deg) translate(0px, -4px);
+              transform: rotate(3deg) translate(0px, -4px);
+    }
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: ${color};
+      border-left-color: ${color};
+      border-radius: 50%;
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+              animation: nprogress-spinner 400ms linear infinite;
+    }
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+    @-webkit-keyframes nprogress-spinner {
+      0%   { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+    @keyframes nprogress-spinner {
+      0%   { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+        document.head.appendChild(element);
+    },
+
+    timeout: null,
+
+    start(event, delay, NProgress) {
+        SpladeProgress.timeout = setTimeout(() => NProgress.start(), delay);
+    },
+
+    progress(event, NProgress) {
+        if (NProgress.isStarted() && event.detail.progress.percentage) {
+            NProgress.set(Math.max(NProgress.status, event.detail.progress.percentage / 100 * 0.9));
+        }
+    },
+
+    stop(event, NProgress) {
+        clearTimeout(SpladeProgress.timeout);
+        NProgress.done();
+        NProgress.remove();
+    },
+
+    init(options) {
+        const self = this;
+        import("nprogress").then((NProgress) => {
+            document.addEventListener("splade:request", (event) => self.start(event, options.delay, NProgress));
+            document.addEventListener("splade:request-progress", (event) => self.progress(event, NProgress));
+            document.addEventListener("splade:request-response", (event) => self.stop(event, NProgress));
+            document.addEventListener("splade:request-error", (event) => self.stop(event, NProgress));
+
+            NProgress.configure({ showSpinner: options.spinner });
+
+            if(options.css) {
+                this.injectCSS(options.color);
+            }
+        });
+    }
+};
+
+export { SpladeProgress };

lib/SpladeProgress.js

@@ -42,6 +42,7 @@
   "dependencies": {
     "autosize": "^5.0.1",
     "choices.js": "^10.1.0",
-    "flatpickr": "^4.6.13"
+    "flatpickr": "^4.6.13",
+    "nprogress": "^0.2.0"
   }
-}
+}