grid helper refactoring + prepare JS dynamic import + add app-env function for Sass conditions

.gitignore

@@ -3,3 +3,4 @@ node_modules
 Thumbs.db
 loconfig.*.json
 !loconfig.example.json
+.prettierrc

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1667240536223
+    "version": 1667240712883
 }

assets/scripts/app.js

@@ -5,8 +5,17 @@ import { html } from './utils/environment';
 import config from './config'
 import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
 
+// Dynamic imports for development mode only
+let gridHelper;
+(async () => {
+    if (process.env.NODE_ENV === 'development') {
+        const gridHelperModule = await import('./utils/grid-helper');
+        gridHelper = gridHelperModule?.gridHelper;
+    }
+})();
+
 const app = new modular({
-    modules: modules
+    modules: modules,
 });
 
 window.onload = (event) => {
@@ -35,24 +44,9 @@ function init() {
 
     app.init(app);
 
-    html.classList.add(config.CSS_CLASS.LOADED);
-    html.classList.add(config.CSS_CLASS.READY);
-    html.classList.remove(config.CSS_CLASS.LOADING);
+    html.classList.add('is-loaded');
+    html.classList.add('is-ready');
+    html.classList.remove('is-loading');
 
-    /**
-     * Eagerly load the following fonts.
-     */
-    if (isFontLoadingAPIAvailable) {
-        loadFonts(EAGER_FONTS).then((eagerFonts) => {
-            html.classList.add('fonts-loaded');
-            // 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*/))
-            // console.groupEnd()
-            // console.group('State of all fonts:')
-            // document.fonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
-            // console.groupEnd()
-        });
-    }
+    gridHelper?.();
 }
-

assets/scripts/modules.js

@@ -1,4 +1,3 @@
 export {default as Example} from './modules/Example';
-export {default as GridHelper} from './modules/GridHelper';
 export {default as Load} from './modules/Load';
 export {default as Scroll} from './modules/Scroll';

assets/scripts/modules/GridHelper.js

@@ -1,89 +0,0 @@
-import { module } from 'modujs';
-
-export default class GridHelper extends module {
-
-    static get settings() {
-        return {
-            GUTTER: 'var(--grid-gutter, 0)',
-            MARGIN: 'var(--grid-margin, 0)',
-            COLOR: 'rgba(255, 0, 0, .1)',
-        }
-    }
-
-    constructor(m) {
-        super(m);
-    }
-
-    init() {
-        this.setColumns()
-        this.setStyles()
-        this.bindEvents()
-
-        window.addEventListener('resize', this.onResize = () => this.setColumns())
-    }
-
-    setColumns() {
-
-        // Clear columns
-        this.el.innerHTML = ''
-
-        // Loop through columns
-        const columns = Number(window.getComputedStyle(this.el).getPropertyValue('--grid-columns'))
-
-        let $col
-        for (var i = 0; i < columns; i++) {
-            $col = document.createElement('div')
-            $col.style.flex = '1 1 0'
-            $col.style.backgroundColor = GridHelper.settings.COLOR
-            this.el.appendChild($col)
-        }
-    }
-
-    setStyles() {
-        const elStyles = this.el.style
-        elStyles.zIndex = '10000'
-        elStyles.position = 'fixed'
-        elStyles.top = '0'
-        elStyles.left = '0'
-        elStyles.display = 'flex'
-        elStyles.width = '100%'
-        elStyles.height = '100%'
-        elStyles.columnGap = GridHelper.settings.GUTTER
-        elStyles.paddingLeft = `${GridHelper.settings.MARGIN}`
-        elStyles.paddingRight = `${GridHelper.settings.MARGIN}`
-        elStyles.pointerEvents = 'none'
-        elStyles.visibility = 'hidden'
-    }
-
-    bindEvents() {
-
-        let ctrlDown = false
-        let isActive = false
-        document.addEventListener('keydown', (e) => {
-            if(e.key == 'Control') {
-                ctrlDown = true;
-            } else {
-                if(ctrlDown && e.key == 'g') {
-
-                    if(isActive) {
-                        this.el.style.visibility = 'visible'
-                    } else {
-                        this.el.style.visibility = 'hidden'
-                    }
-
-                    isActive = !isActive
-                }
-            }
-        })
-
-        document.addEventListener('keyup', (e) => {
-            if(e.key == 'Control') {
-                ctrlDown = false
-            }
-        })
-    }
-
-    destroy() {
-        window.removeEventListener('resize', this.onResize)
-    }
-}

assets/scripts/utils/grid-helper.js

@@ -0,0 +1,138 @@
+/**
+ * Grid Helper
+ *
+ * Provides a grid based on the design guidelines and is helpful for web integration.
+ *
+ * - `Control + g` to toggle the grid
+ *
+ */
+
+/**
+ * @typedef {Object} GridHelperReference
+ *
+ * @property {string} [gutterCssVar=GRID_HELPER_GUTTER_CSS_VAR] - CSS variable used to define grid gutters.
+ * @property {string} [marginCssVar=GRID_HELPER_MARGIN_CSS_VAR] - CSS variable used to define grid margins.
+ * @property {string} [rgbaColor=GRID_HELPER_RGBA_COLOR]        - RGBA color for the grid appearence.
+ */
+
+const GRID_HELPER_GUTTER_CSS_VAR = '--grid-gutter';
+const GRID_HELPER_MARGIN_CSS_VAR = '--grid-margin';
+const GRID_HELPER_RGBA_COLOR = 'rgba(255, 0, 0, .1)';
+
+/**
+ * Create a grid helper
+ *
+ * @param {GridHelperReference}
+ *
+ */
+function gridHelper({
+    gutterCssVar = GRID_HELPER_GUTTER_CSS_VAR,
+    marginCssVar = GRID_HELPER_MARGIN_CSS_VAR,
+    rgbaColor = GRID_HELPER_RGBA_COLOR,
+} = {}) {
+    // Set grid container
+    const $gridContainer = document.createElement('div');
+    document.body.append($gridContainer);
+
+    // Set grid appearence
+    setGridHelperColumns($gridContainer, rgbaColor);
+    setGridHelperStyles($gridContainer, gutterCssVar, marginCssVar);
+
+    // Set grid interactivity
+    setGridEvents($gridContainer, rgbaColor);
+}
+
+/**
+ * Set grid container styles
+ *
+ * @param {HTMLElement} $container - DOM Element that contains a list of generated columns
+ * @param {string} gutterCssVar    - CSS variable used to define grid gutters.
+ * @param {string} marginCssVar    - CSS variable used to define grid margins.
+ *
+ */
+function setGridHelperStyles($container, gutterCssVar, marginCssVar) {
+    const elStyles = $container.style;
+    elStyles.zIndex = '10000';
+    elStyles.position = 'fixed';
+    elStyles.top = '0';
+    elStyles.left = '0';
+    elStyles.display = 'flex';
+    elStyles.width = '100%';
+    elStyles.height = '100%';
+    elStyles.columnGap = `var(${gutterCssVar}, 0)`;
+    elStyles.paddingLeft = `var(${marginCssVar}, 0)`;
+    elStyles.paddingRight = `var(${marginCssVar}, 0)`;
+    elStyles.pointerEvents = 'none';
+    elStyles.visibility = 'hidden';
+}
+
+/**
+ * Set grid columns
+ *
+ * @param {HTMLElement} $container - DOM Element that will contain a list of generated columns
+ * @param {string} rgbaColor       - RGBA color to stylize the generated columns
+ *
+ */
+function setGridHelperColumns($container, rgbaColor) {
+    // Clear columns
+    $container.innerHTML = '';
+
+    // Loop through columns
+    const columns = Number(
+        window.getComputedStyle($container).getPropertyValue('--grid-columns')
+    );
+
+    let $col;
+    for (var i = 0; i < columns; i++) {
+        $col = document.createElement('div');
+        $col.style.flex = '1 1 0';
+        $col.style.backgroundColor = rgbaColor;
+        $container.appendChild($col);
+    }
+}
+
+/**
+ * Set grid events
+ *
+ * Resize to rebuild columns
+ * Keydown/Keyup to toggle the grid display
+ *
+ * @param {HTMLElement} $container - DOM Element that contains a list of generated columns
+ * @param {string} rgbaColor       - RGBA color to stylize the generated columns
+ *
+ */
+function setGridEvents($container, rgbaColor) {
+    // Handle resize
+    window.addEventListener(
+        'resize',
+        setGridHelperColumns($container, rgbaColor)
+    );
+
+    // Toggle grid
+    let ctrlDown = false;
+    let isActive = false;
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key == 'Control') {
+            ctrlDown = true;
+        } else {
+            if (ctrlDown && e.key == 'g') {
+                if (isActive) {
+                    $container.style.visibility = 'visible';
+                } else {
+                    $container.style.visibility = 'hidden';
+                }
+
+                isActive = !isActive;
+            }
+        }
+    });
+
+    document.addEventListener('keyup', (e) => {
+        if (e.key == 'Control') {
+            ctrlDown = false;
+        }
+    });
+}
+
+export { gridHelper };

assets/styles/main.scss

@@ -1,6 +1,7 @@
 // ==========================================================================
 // Main
 // ==========================================================================
+$app-env: app-env();  
 
 // Settings
 // ==========================================================================
@@ -69,4 +70,4 @@
 // @import "utilities/helpers";
 // @import "utilities/states";
 // @import "utilities/spacing";
-// @import "utilities/print";
+// @import "utilities/print";

build/tasks/styles.js

@@ -6,7 +6,7 @@ import resolve from '../utils/template.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { promisify } from 'node:util';
-import sass from 'node-sass';
+import sass, { types } from 'node-sass';
 import { PurgeCSS } from 'purgecss';
 
 const sassRender = promisify(sass.render);
@@ -23,8 +23,14 @@ export const defaultSassOptions = {
     sourceMap: true,
     sourceMapContents: true,
 };
+
 export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
     outputStyle: 'expanded',
+    functions: {
+        'app-env()': function () {
+            return (new types.String('development'))
+        }
+    }
 });
 export const productionSassOptions = Object.assign({}, defaultSassOptions, {
     outputStyle: 'compressed',

www/index.html

@@ -41,8 +41,6 @@
 
 <body data-module-load>
 
-    <div data-module-grid-helper></div>
-
     <div data-load-container>
         <div class="o-scroll" data-module-scroll="main">
             <header data-scroll-section>