Merge pull request #1553 from bookernath/add-back-nanobar

Put nanobar back

CHANGELOG.md

@@ -16,6 +16,7 @@
 - Clean up conditional logic in a couple component templates [#1547](https://github.com/bigcommerce/cornerstone/pull/1547)
 - Remove "demo" product conditional logic [#1551](https://github.com/bigcommerce/cornerstone/pull/1551)
 - Add responsive breakpoints to product carousel. [#1458](https://github.com/bigcommerce/cornerstone/pull/1458)
+- Add nanobar back to fix tests [#1553](https://github.com/bigcommerce/cornerstone/pull/1553)
 
 ## 3.5.1 (2019-06-24)
 - Fix conditional logic in share.html [#1522](https://github.com/bigcommerce/cornerstone/pull/1522)

assets/js/theme/global.js

@@ -11,6 +11,7 @@ import cartPreview from './global/cart-preview';
 import privacyCookieNotification from './global/cookieNotification';
 import maintenanceMode from './global/maintenanceMode';
 import carousel from './common/carousel';
+import loadingProgressBar from './global/loading-progress-bar';
 import svgInjector from './global/svg-injector';
 
 export default class Global extends PageManager {
@@ -25,6 +26,7 @@ export default class Global extends PageManager {
         mobileMenuToggle();
         privacyCookieNotification();
         maintenanceMode(this.context.maintenanceMode);
+        loadingProgressBar();
         svgInjector();
     }
 }

assets/js/theme/global/loading-progress-bar.js

@@ -0,0 +1,41 @@
+import Nanobar from 'nanobar';
+
+export default function () {
+    // Create the nanobar instance
+    const nanobar = new Nanobar();
+
+    // Timer for moving progress bar during ajax calls
+    let timer = null;
+    let current = 0;
+
+    function clearTimer() {
+        if (timer) {
+            clearInterval(timer);
+            timer = null;
+        }
+    }
+
+    function setTimer() {
+        clearTimer();
+
+        current = 0;
+        timer = setInterval(() => {
+            current += 3;
+            if (current <= 100) {
+                nanobar.go(current);
+            } else {
+                clearTimer();
+            }
+        }, 50);
+    }
+
+    // Attach global jquery handlers to listen for ajax start
+    $(document).ajaxSend(() => {
+        setTimer();
+    });
+
+    $(document).ajaxComplete(() => {
+        nanobar.go(100);
+        clearTimer();
+    });
+}

assets/scss/components/_components.scss

@@ -9,6 +9,9 @@
 // Slick carousel
 @import "vendor/slick/component";
 
+// Nanobar Ajax loading progress bar
+@import "vendor/nanobar/component";
+
 // SweetAlert2 replacement for JavaScript alert/confirmations
 @import "vendor/sweetalert2/component";
 

assets/scss/components/vendor/nanobar/_component.scss

@@ -0,0 +1,5 @@
+// =============================================================================
+// NANOBAR - AJAX LOADING PROGRESS
+// =============================================================================
+
+@import "nanobar";

assets/scss/components/vendor/nanobar/_nanobar.scss

@@ -0,0 +1,20 @@
+// =============================================================================
+// NANOBAR - AJAX LOADING PROGRESS
+// =============================================================================
+
+.nanobar {
+    display: none;
+    width: 100%;
+    height: remCalc(5px);
+    z-index: 9999;
+    top: 0;
+    pointer-events: none;
+    user-select: none;
+
+    .bar {
+        width: 0;
+        height: 100%;
+        transition: height .1s;
+        background-color: stencilColor("pace-progress-backgroundColor");
+    }
+}