Merge pull request #147 from locomotivemtl/feature/js-config

Feature/js config

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1675955478084
+    "version": 1680721594993
 }

assets/scripts/app.js

@@ -1,8 +1,9 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-import { html } from './utils/environment';
-import config from './config'
+import { debounce } from './utils/tickers'
+import { $html } from './utils/dom';
+import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
 import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
 
 const app = new modular({
@@ -25,28 +26,32 @@ window.onload = (event) => {
     }
 };
 
-export const EAGER_FONTS = [
-    { family: 'Source Sans', style: 'normal', weight: 400 },
-    { family: 'Source Sans', style: 'normal', weight: 700 },
-];
-
 function init() {
     globals();
 
     app.init(app);
 
-    html.classList.add('is-loaded');
-    html.classList.add('is-ready');
-    html.classList.remove('is-loading');
+    $html.classList.add(CSS_CLASS.LOADED);
+    $html.classList.add(CSS_CLASS.READY);
+    $html.classList.remove(CSS_CLASS.LOADING);
+
+    // Bind window resize event with default vars
+    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
+    window.addEventListener('resize', () => {
+        $html.style.setProperty('--vw', `${document.documentElement.clientWidth * 0.01}px`)
+        debounce(() => {
+            window.dispatchEvent(resizeEndEvent)
+        }, 200, false)
+    })
 
     /**
      * Eagerly load the following fonts.
      */
     if (isFontLoadingAPIAvailable) {
-        loadFonts(EAGER_FONTS, config.IS_DEV).then((eagerFonts) => {
-            html.classList.add('fonts-loaded');
+        loadFonts(FONT.EAGER_FONTS, ENV.IS_DEV).then((eagerFonts) => {
+            $html.classList.add(CSS_CLASS.FONTS_LOADED);
 
-            if (config.IS_DEV) {
+            if (ENV.IS_DEV) {
                 console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
                 console.group('State of eager fonts:')
                 eagerFonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))

assets/scripts/config.js

@@ -7,18 +7,50 @@
  * > (since `process` is a Node API, not a web API).
  * > — https://esbuild.github.io/api/#platform
  */
-const env = process.env.NODE_ENV
 
-export default config = Object.freeze({
-    // Environments
-    ENV: env,
-    IS_PROD: env === 'production',
-    IS_DEV: env === 'development',
+const NODE_ENV = process.env.NODE_ENV
+const IS_DESKTOP = typeof window.orientation === 'undefined'
 
-    // CSS class names
-    CSS_CLASS: {
-        LOADING: 'is-loading',
-        READY: 'is-ready',
-        LOADED: 'is-loaded',
-    },
+// Main environment variables
+const ENV = Object.freeze({
+    // Node environment
+    NAME: NODE_ENV,
+    IS_PROD: NODE_ENV === 'production',
+    IS_DEV: NODE_ENV === 'development',
+
+    // Device
+    IS_DESKTOP,
+    IS_MOBILE: !IS_DESKTOP,
 })
+
+// Main CSS classes used within the project
+const CSS_CLASS = Object.freeze({
+    LOADING: 'is-loading',
+    LOADED: 'is-loaded',
+    READY: 'is-ready',
+    FONTS_LOADED: 'fonts-loaded',
+    LAZY_CONTAINER: 'c-lazy',
+    LAZY_LOADED: '-lazy-loaded',
+    // ...
+})
+
+// Custom js events
+const CUSTOM_EVENT = Object.freeze({
+    RESIZE_END: 'loco.resizeEnd',
+    // ...
+})
+
+// Fonts parameters
+const FONT = Object.freeze({
+    EAGER: [
+        { family: 'Source Sans', style: 'normal', weight: 400 },
+        { family: 'Source Sans', style: 'normal', weight: 700 },
+    ],
+})
+
+export {
+    ENV,
+    CSS_CLASS,
+    CUSTOM_EVENT,
+    FONT,
+}

assets/scripts/globals.js

@@ -1,10 +1,10 @@
 import svg4everybody from 'svg4everybody';
-import config from './config';
+import { ENV } from './config';
 
 // Dynamic imports for development mode only
 let gridHelper;
 (async () => {
-    if (config.IS_DEV) {
+    if (ENV.IS_DEV) {
         const gridHelperModule = await import('./utils/grid-helper');
         gridHelper = gridHelperModule?.gridHelper;
     }

assets/scripts/modules/Example.js

@@ -1,5 +1,5 @@
 import { module } from 'modujs';
-import { EAGER_FONTS } from '../app';
+import { FONT } from '../config';
 import { whenReady } from '../utils/fonts';
 
 export default class extends module {
@@ -8,7 +8,7 @@ export default class extends module {
     }
 
     init() {
-        whenReady(EAGER_FONTS).then((fonts) => this.onFontsLoaded(fonts));
+        whenReady(FONT.EAGER).then((fonts) => this.onFontsLoaded(fonts));
     }
 
     onFontsLoaded(fonts) {

assets/scripts/utils/dom.js

@@ -0,0 +1,7 @@
+const $html = document.documentElement
+const $body = document.body
+
+export {
+    $html,
+    $body,
+}

assets/scripts/utils/environment.js

@@ -1,9 +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 };

assets/scripts/utils/image.js

@@ -1,3 +1,5 @@
+import { CSS_CLASS } from '../config'
+
 /**
  * Get an image meta data
  *
@@ -89,14 +91,14 @@ const lazyLoadImage = async ($el, url, callback) => {
     }
 
     requestAnimationFrame(() => {
-        let lazyParent = $el.closest('.c-lazy')
+        let lazyParent = $el.closest(`.${CSS_CLASS.LAZY_CONTAINER}`)
 
         if(lazyParent) {
-            lazyParent.classList.add('-lazy-loaded')
+            lazyParent.classList.add(CSS_CLASS.LAZY_LOADED)
             lazyParent.style.backgroundImage = ''
         }
 
-        $el.classList.add('-lazy-loaded')
+        $el.classList.add(CSS_CLASS.LAZY_LOADED)
 
         callback?.()
     })