Add config vars / Reformat app.js and add explicite comments

assets/scripts/app.js

@@ -9,17 +9,17 @@ class App {
     constructor() {
         console.log(`${this.constructor.name}:constructor`)
 
-        this.options = {
+        this.options = Object.freeze({
             fonts: [
                 // { name: '<font-name>', style: '<font-style>', weight: '<font-weight>' }
             ],
             preloadImage: [
-                'img[data-preload]'
+                config.SELECTORS.IMAGE_PRELOAD
             ],
             styleSheets: [
-                '#main-css'
+                config.SELECTORS.MAIN_STYLESHEET
             ]
-        }
+        })
 
         // Create app
         this.moduleManager = new modular({
@@ -28,7 +28,7 @@ class App {
 
         // this.addCustomEvents()
 
-        this.setVars()
+        this.setInitialVars()
     }
 
     load() {
@@ -84,14 +84,26 @@ class App {
     }
 
     /*
-     * Set initial vars
-     *
-     * `--vh-initial` is necessary for mobile vh unit
+     * Set initial variables.
      */
-    setVars() {
+
+    setInitialVars() {
+
+        /**
+         * Store the initial viewport height in a CSS property.
+         *
+         * @see {@link https://css-tricks.com/the-trick-to-viewport-units-on-mobile/}
+         *     This can be applied to elements, instead of using the `vh` unit,
+         *     for consistent and correct sizing on mobile browsers.
+         *
+         * @see {@link https://caniuse.com/viewport-unit-variants}
+         *     This trick should be replaced with viewport-relative units
+         *     once browser support has improved.
+         */
+
         html.style.setProperty('--vh-initial', `${0.01 * html.clientHeight}px`)
     }
 }
 
 const app = new App()
-window.addEventListener('load', app.load)
+window.addEventListener('load', () => app.load(), { once: true })

assets/scripts/config.js

@@ -19,6 +19,7 @@ export default config = Object.freeze({
     // JS selectors
     SELECTORS: {
         IMAGE_LAZY: '.c-lazy',
-        IMAGE_PRELOAD: 'img[data-preload]'
+        IMAGE_PRELOAD: 'img[data-preload]',
+        MAIN_STYLESHEET: '#main-css'
     }
 })

www/assets/scripts/app.js

@@ -1110,7 +1110,8 @@
     },
     SELECTORS: {
       IMAGE_LAZY: ".c-lazy",
-      IMAGE_PRELOAD: "img[data-preload]"
+      IMAGE_PRELOAD: "img[data-preload]",
+      MAIN_STYLESHEET: "#main-css"
     }
   });
 
@@ -3806,19 +3807,19 @@
   var App = class {
     constructor() {
       console.log(`${this.constructor.name}:constructor`);
-      this.options = {
+      this.options = Object.freeze({
         fonts: [],
         preloadImage: [
-          "img[data-preload]"
+          config_default.SELECTORS.IMAGE_PRELOAD
         ],
         styleSheets: [
-          "#main-css"
+          config_default.SELECTORS.MAIN_STYLESHEET
         ]
-      };
+      });
       this.moduleManager = new main_esm_default({
         modules: modules_exports
       });
-      this.setVars();
+      this.setInitialVars();
     }
     load() {
       console.log(`${this.constructor.name}:load`);
@@ -3856,12 +3857,12 @@
     addCustomEvents() {
       console.log(`${this.constructor.name}:addCustomEvents`);
     }
-    setVars() {
+    setInitialVars() {
       html.style.setProperty("--vh-initial", `${0.01 * html.clientHeight}px`);
     }
   };
   var app = new App();
-  window.addEventListener("load", app.load);
+  window.addEventListener("load", () => app.load(), { once: true });
 })();
 /*
 object-assign