Merge branch 'master' into feature/scss-colors

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1682069627576
+    "version": 1683902331941
 }

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?.()
     })

assets/styles/objects/_icons.scss

@@ -32,7 +32,7 @@
     vertical-align: middle;
 
     svg {
-        --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
+        --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));
 
         display: block;
         width: var(--icon-width);

assets/styles/tools/_family.scss

@@ -147,7 +147,7 @@
 // @param {number} $num - id of the child
 
 @mixin middle($num) {
-    &:nth-child(#{round($num / 2)}) {
+    &:nth-child(#{round(math.div($num, 2))}) {
         @content;
     }
 }

assets/styles/tools/_maths.scss

@@ -8,7 +8,7 @@
 // @return {number}
 
 @function strip-units($number) {
-    @return $number / ($number * 0 + 1);
+    @return math.div($number, ($number * 0 + 1));
 }
 
 // Returns the square root of the given number.
@@ -21,7 +21,7 @@
     $value: $x;
 
     @for $i from 1 through 10 {
-        $value: $x - ($x * $x - abs($number)) / (2 * $x);
+        $value: $x - math.div(($x * $x - abs($number)), (2 * $x));
         $x: $value;
     }
 
@@ -43,7 +43,7 @@
         }
     } @else if $exp < 0 {
         @for $i from 1 through -$exp {
-            $value: $value / $number;
+            $value: math.div($value, $number);
         }
     }
 
@@ -88,7 +88,7 @@
 
     // If the angle has `deg` as unit, convert to radians.
     @if ($unit == deg) {
-        @return $angle / 180 * pi();
+        @return math.div($angle, 180) * pi();
     }
 
     @return $angle;
@@ -104,7 +104,7 @@
     $angle: rad($angle);
 
     @for $i from 0 through 10 {
-        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
+        $sin: $sin + pow(-1, $i) * math.div(pow($angle, (2 * $i + 1)), fact(2 * $i + 1));
     }
 
     @return $sin;
@@ -120,7 +120,7 @@
     $angle: rad($angle);
 
     @for $i from 0 through 10 {
-        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
+        $cos: $cos + pow(-1, $i) * math.div(pow($angle, 2 * $i), fact(2 * $i));
     }
 
     @return $cos;
@@ -132,5 +132,5 @@
 // @return {number}
 
 @function tan($angle) {
-    @return sin($angle) / cos($angle);
+    @return math.div(sin($angle), cos($angle));
 }

assets/styles/tools/_mixins.scss

@@ -51,7 +51,7 @@
     font-size: rem($font-size) $important;
 
     @if ($line-height == "auto") {
-        line-height: ceil($font-size / $line-height) * ($line-height / $font-size) $important;
+        line-height: ceil(math.div($font-size, $line-height)) * math.div($line-height, $font-size) $important;
     }
     @else {
         @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {

assets/styles/tools/_widths.scss

@@ -58,7 +58,7 @@ $breakpoint-delimiter: \@ !default;
         @for $numerator from 1 through $denominator {
             // Build a class in the format `.u-3/4[@<breakpoint>]`.
             .u-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
-                width: ($numerator / $denominator) * 100% $important;
+                width: math.div($numerator, $denominator) * 100% $important;
             }
 
             @if ($widths-offsets == true) {
@@ -66,13 +66,13 @@ $breakpoint-delimiter: \@ !default;
                 .u-push-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                     position: relative $important;
                     right: auto $important;
-                    left: ($numerator / $denominator) * 100% $important;
+                    left: math.div($numerator, $denominator) * 100% $important;
                 }
 
                 // Build a class in the format `.u-pull-5/6[@<breakpoint>]`.
                 .u-pull-#{$numerator}#{$fractions-delimiter}#{$denominator}#{$breakpoint} {
                     position: relative $important;
-                    right: ($numerator / $denominator) * 100% $important;
+                    right: math.div($numerator, $denominator) * 100% $important;
                     left: auto $important;
                 }
             }