Rename config css class

Update config.js vars and export
Remove js error
2026-01-15 00:55:08 +08:00 · 2022-05-25 13:36:51 +02:00 · 2022-05-24 14:23:38 +02:00 · 2022-05-20 14:25:22 +02:00 · 2022-05-20 14:19:35 +02:00
13 changed files with 1185 additions and 585 deletions
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -1,7 +1,8 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-import { html } from './utils/environment';
+import { $html } from './utils/dom';
+import config from './config';

 const app = new modular({
    modules: modules
@@ -28,8 +29,8 @@ function init() {

    app.init(app);

-    html.classList.add('is-loaded');
-    html.classList.add('is-ready');
-    html.classList.remove('is-loading');
+    $html.classList.add(config.CSS_CLASS.LOADED);
+    $html.classList.add(config.CSS_CLASS.READY);
+    $html.classList.remove(config.CSS_CLASS.LOADING);
 }

--- a/assets/scripts/config.js
+++ b/assets/scripts/config.js
@@ -0,0 +1,15 @@
+const env = process.env.NODE_ENV
+
+export default config = Object.freeze({
+    // Environments
+    ENV: env,
+    IS_PROD: env === 'production',
+    IS_DEV: env === 'development',
+
+    // CSS class names
+    CSS_CLASS: {
+        LOADING: 'is-loading',
+        READY: 'is-ready',
+        LOADED: 'is-loaded',
+    },
+})
--- a/assets/scripts/modules/Load.js
+++ b/assets/scripts/modules/Load.js
@@ -1,5 +1,6 @@
 import { module } from 'modujs';
-import modularLoad from 'modularload';
+import barba from '@barba/core';
+import config from '../config'

 export default class extends module {
    constructor(m) {
@@ -7,16 +8,20 @@ export default class extends module {
    }

    init() {
-        const load = new modularLoad({
-            enterDelay: 0,
-            transitions: {
-                customTransition: {}
-            }
-        });
-
-        load.on('loaded', (transition, oldContainer, newContainer) => {
-            this.call('destroy', oldContainer, 'app');
-            this.call('update', newContainer, 'app');
+        barba.init({
+            debug: config.IS_DEV,
+            schema: {
+                prefix: 'data-load',
+            },
+            transitions: [{
+                name: 'default-transition',
+                leave: (data) => {
+                    this.call('destroy', data.current.container, 'app');
+                },
+                enter: (data) => {
+                    this.call('update', data.next.container, 'app');
+                }
+            }]
        });
    }
 }
--- a/assets/scripts/utils/dom.js
+++ b/assets/scripts/utils/dom.js
@@ -0,0 +1,4 @@
+const $html = document.documentElement;
+const $body = document.body;
+
+export { $html, $body };
--- a/assets/scripts/utils/environment.js
+++ b/assets/scripts/utils/environment.js
@@ -1,8 +0,0 @@
-const APP_NAME     = 'Boilerplate';
-const DATA_API_KEY = '.data-api';
-
-const html         = document.documentElement;
-const body         = document.body;
-const isDebug      = html.hasAttribute('data-debug');
-
-export { APP_NAME, DATA_API_KEY, html, body, isDebug };
--- a/assets/scripts/utils/visibility.js
+++ b/assets/scripts/utils/visibility.js
@@ -1,6 +1,5 @@
 import { isFunction } from './is';
 import { arrayContains, findByKeyValue, removeFromArray } from './array';
-import { $document, $window, $html, $body } from './environment';

 const CALLBACKS = {
    hidden: [],
@@ -22,7 +21,7 @@ const PREFIX = 'v-';
 let UUID = 0;

 // Main event
-$document.on('visibilitychange', function(event) {
+document.addEventListener('visibilitychange', function(event) {
    if (document.hidden) {
        onDocumentChange('hidden');
    } else {
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,9 @@
            "name": "@locomotivemtl/boilerplate",
            "version": "1.0.0",
            "dependencies": {
+                "@barba/core": "^2.9.7",
                "locomotive-scroll": "^4.1.4",
                "modujs": "^1.4.2",
-                "modularload": "^1.2.6",
                "normalize.css": "^8.0.1",
                "svg4everybody": "^2.1.9"
            },
@@ -66,6 +66,15 @@
                "node": ">=6.9.0"
            }
        },
+        "node_modules/@barba/core": {
+            "version": "2.9.7",
+            "resolved": "https://registry.npmjs.org/@barba/core/-/core-2.9.7.tgz",
+            "integrity": "sha512-GLtpty1fzWnd500AoUHd+hJoSCVElqth20P4W8Bf0IAA9nd1K5e8NbPnCegXC4KzOwV+JHk5DVofAZcoc+I54Q==",
+            "dependencies": {
+                "is-promise": "^2.1.0",
+                "path-to-regexp": "^3.0.0"
+            }
+        },
        "node_modules/@gar/promisify": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -3467,6 +3476,11 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/is-promise": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+            "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+        },
        "node_modules/is-typedarray": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -4267,11 +4281,6 @@
            "resolved": "https://registry.npmjs.org/modujs/-/modujs-1.4.2.tgz",
            "integrity": "sha512-avRHEER9hblxPSDEqX3Z05rmjp8pAcbZL4BjLqxfpL8jDxyCJUEO71fLC8raSLnfg7C3GRTwsN/nAPGiKDO3dA=="
        },
-        "node_modules/modularload": {
-            "version": "1.2.8",
-            "resolved": "https://registry.npmjs.org/modularload/-/modularload-1.2.8.tgz",
-            "integrity": "sha512-UKYB5nXTcv4DVkXJzwdp9vPw7QFfphkLc3Ka3MeFu9kw27SE/9MZivoHIvrtyUqa4Pt7Ss81h4siSI3dt+5xCQ=="
-        },
        "node_modules/ms": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -4851,6 +4860,11 @@
            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
            "dev": true
        },
+        "node_modules/path-to-regexp": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.2.0.tgz",
+            "integrity": "sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA=="
+        },
        "node_modules/performance-now": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -7135,6 +7149,15 @@
                "js-tokens": "^4.0.0"
            }
        },
+        "@barba/core": {
+            "version": "2.9.7",
+            "resolved": "https://registry.npmjs.org/@barba/core/-/core-2.9.7.tgz",
+            "integrity": "sha512-GLtpty1fzWnd500AoUHd+hJoSCVElqth20P4W8Bf0IAA9nd1K5e8NbPnCegXC4KzOwV+JHk5DVofAZcoc+I54Q==",
+            "requires": {
+                "is-promise": "^2.1.0",
+                "path-to-regexp": "^3.0.0"
+            }
+        },
        "@gar/promisify": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -9728,6 +9751,11 @@
                "isobject": "^3.0.1"
            }
        },
+        "is-promise": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+            "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+        },
        "is-typedarray": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -10368,11 +10396,6 @@
            "resolved": "https://registry.npmjs.org/modujs/-/modujs-1.4.2.tgz",
            "integrity": "sha512-avRHEER9hblxPSDEqX3Z05rmjp8pAcbZL4BjLqxfpL8jDxyCJUEO71fLC8raSLnfg7C3GRTwsN/nAPGiKDO3dA=="
        },
-        "modularload": {
-            "version": "1.2.8",
-            "resolved": "https://registry.npmjs.org/modularload/-/modularload-1.2.8.tgz",
-            "integrity": "sha512-UKYB5nXTcv4DVkXJzwdp9vPw7QFfphkLc3Ka3MeFu9kw27SE/9MZivoHIvrtyUqa4Pt7Ss81h4siSI3dt+5xCQ=="
-        },
        "ms": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -10818,6 +10841,11 @@
            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
            "dev": true
        },
+        "path-to-regexp": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.2.0.tgz",
+            "integrity": "sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA=="
+        },
        "performance-now": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -14,9 +14,9 @@
        "build": "node --experimental-json-modules --no-warnings build/build.js"
    },
    "dependencies": {
+        "@barba/core": "^2.9.7",
        "locomotive-scroll": "^4.1.4",
        "modujs": "^1.4.2",
-        "modularload": "^1.2.6",
        "normalize.css": "^8.0.1",
        "svg4everybody": "^2.1.9"
    },
--- a/www/assets/scripts/app.js
+++ b/www/assets/scripts/app.js
--- a/www/assets/scripts/app.js.map
+++ b/www/assets/scripts/app.js.map
--- a/www/form.html
+++ b/www/form.html
@@ -16,8 +16,8 @@

        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
    </head>
-    <body data-module-load>
-        <div data-load-container>
+    <body data-module-load data-load="wrapper">
+        <div data-load="container">
            <div class="o-scroll" data-module-scroll="main">
                <header data-scroll-section>
                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
--- a/www/images.html
+++ b/www/images.html
@@ -16,8 +16,8 @@

        <link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
    </head>
-    <body data-module-load>
-        <div data-load-container>
+    <body data-module-load data-load="wrapper">
+        <div data-load="container">
            <div class="o-scroll" data-module-scroll="main">
                <header data-scroll-section>
                    <a href="/"><h1>Locomotive Boilerplate</h1></a>
--- a/www/index.html
+++ b/www/index.html
@@ -33,8 +33,8 @@
        onload="this.media='all'; this.onload=null; this.isLoaded=true">
 </head>

-<body data-module-load>
-    <div data-load-container>
+<body data-module-load data-load="wrapper">
+    <div data-load="container">
        <div class="o-scroll" data-module-scroll="main">
            <header data-scroll-section>
                <a href="/">
Author	SHA1	Message	Date
Lucas Vallenet	2c19d14765	Rename config css class	2022-05-25 13:36:51 +02:00
Lucas Vallenet	f1544d24f9	Update config.js vars and export	2022-05-24 14:23:38 +02:00
Lucas Vallenet	26f261ce47	Remove js error	2022-05-20 14:25:22 +02:00
Lucas Vallenet	ce0788bdc9	Add Barba	2022-05-20 14:19:35 +02:00