Bugfix/component-init

packages/vanilla/.storybook/preview-head.html

@@ -5,3 +5,15 @@
 <link rel="stylesheet" href="font-awesome/all.css">
 
 <script type="module" src="bundle.js"></script>
+
+
+<!-- This is an example of how one might call cbpdsInit() manually from their application, but it doesn't seem to work in Storybook
+<script type="module">
+    import { cbpdsInit } from "bundle";
+    window.cbpdsInit = cbpdsInit;
+    // This could be any event, such as the return of a promise after fetching data that updated the page significantly
+    document.addEventListener('DOMContentLoaded', (event) => {
+        window.cbpdsInit();
+    });
+</script>
+-->

packages/vanilla/src/index.js

@@ -1,5 +1,3 @@
-import SelectorEngine from './utilities/selectorEngine';
-
 import Accordion from './components/accordion/accordion';
 import ApplicationHeader from './components/application-header/application-header';
 import Banner from './components/banner/banner';
@@ -23,141 +21,149 @@ import DarkMode from './utilities/darkMode';
 
 import './sass/main.scss';
 
-const addOrInstantiate = (Klass, node) => {
-  return new Klass(node);
-};
-
-// Make sure the DOM content has loaded before querying it
-// (this may still fail in frameworks that load their components asynchronously)
-document.addEventListener('DOMContentLoaded', (event) => {
 
+/*
+  Component initialization (bootstrapping) may be called on a specific selector for content that is loaded asynchronously.
+*/
+export function cbpdsInit(scope = document) {
   /**
    * Accordion Component
    */
-  SelectorEngine.findAll(".cbp-accordion__item").forEach((accordion) => {
-    addOrInstantiate(Accordion, accordion);
+  scope.querySelectorAll(".cbp-accordion__item").forEach((accordion) => {
+    new Accordion(accordion);
   });
 
   /**
    * Banner Component
    */
-  SelectorEngine.findAll(".cbp-banner").forEach((banner) => {
-    addOrInstantiate(Banner, banner);
+  scope.querySelectorAll(".cbp-banner").forEach((banner) => {
+    new Banner(banner);
   });
 
-  SelectorEngine.findAll(".cbp-banner__info").forEach((banner) => {
-    addOrInstantiate(Banner, banner);
+  scope.querySelectorAll(".cbp-banner__info").forEach((banner) => {
+    new Banner(banner);
   });
 
-  SelectorEngine.findAll(".cbp-banner__security").forEach((banner) => {
-    addOrInstantiate(Banner, banner);
+  scope.querySelectorAll(".cbp-banner__security").forEach((banner) => {
+    new Banner(banner);
   });
 
   /**
    * Chips
    */
-  SelectorEngine.findAll('.cbp-chip').forEach((chip) => {
-    addOrInstantiate(Chip, chip);
+  scope.querySelectorAll('.cbp-chip').forEach((chip) => {
+    new Chip(chip);
   });
 
   /**
    * Drawer Components
    */
-  SelectorEngine.findAll('[data-drawer-align]').forEach((drawer) => {
-    addOrInstantiate(Drawer, drawer);
+  scope.querySelectorAll('[data-drawer-align]').forEach((drawer) => {
+    new Drawer(drawer);
   });
 
   /**
    * Dropdown Components
    */
-  SelectorEngine.findAll('[data-toggle="dropdown"]').forEach((dropdown) => {
-    addOrInstantiate(Dropdown, dropdown);
+  scope.querySelectorAll('[data-toggle="dropdown"]').forEach((dropdown) => {
+    new Dropdown(dropdown);
   });
 
   /**
    * Expand Component
    */
-  SelectorEngine.findAll(".cbp-expand").forEach((expand) => {
-    addOrInstantiate(Expand, expand);
+  scope.querySelectorAll(".cbp-expand").forEach((expand) => {
+    new Expand(expand);
   });
 
 
   /**
    * Toggle Component
    */
-  window.addEventListener("load", () => {
-    SelectorEngine.findAll('[data-component="cbp-toggle"]').forEach((toggle) => {
+  scope.querySelectorAll('[data-component="cbp-toggle"]').forEach((toggle) => {
       new Toggle(toggle);
-    });
   });
 
   /**
    * File Input Component
    */
-  SelectorEngine.findAll('.cbp-file-input').forEach((fileInput) => {
-    addOrInstantiate(FileInput, fileInput);
+  scope.querySelectorAll('.cbp-file-input').forEach((fileInput) => {
+    new FileInput(fileInput);
   });
 
   /**
    * Application Header Component
    */
-  SelectorEngine.findAll('.cbp-application-header').forEach((appHeader) => {
-    addOrInstantiate(ApplicationHeader, appHeader);
+  scope.querySelectorAll('.cbp-application-header').forEach((appHeader) => {
+    new ApplicationHeader(appHeader);
   });
 
   /**
    * Universal Header Component
+   * TechDebt: this needs to be completed and hooked up
    */
-  SelectorEngine.findAll('.cbp-universal-header').forEach((univHeader) => {
-    //addOrInstantiate(UniversalHeader, univHeader);
+  scope.querySelectorAll('.cbp-universal-header').forEach((univHeader) => {
+    //new UniversalHeader(univHeader);
   });
 
   /**
    * Hashfield Component
    */
-  SelectorEngine.findAll("input[type='password']").forEach((obfuscatedField) => {
-    addOrInstantiate(ObfuscatedField, obfuscatedField);
+  scope.querySelectorAll("input[type='password']").forEach((obfuscatedField) => {
+    new ObfuscatedField(obfuscatedField);
   });
 
   /**
    * Menu
    */
-  SelectorEngine.findAll('.cbp-menu').forEach((menu) => {
-    addOrInstantiate(Menu, menu);
+  scope.querySelectorAll('.cbp-menu').forEach((menu) => {
+    new Menu(menu);
   });
 
   /**
    * Number Counter Component (Input)
    */
-  SelectorEngine.findAll('.cbp-input__numeric-counter').forEach((counter) => {
-    addOrInstantiate(NumberCounter, counter);
+  scope.querySelectorAll('.cbp-input__numeric-counter').forEach((counter) => {
+    new NumberCounter(counter);
   });
 
   /**
    * Segmented Buttons (Toggle Buttons)
    */
-  SelectorEngine.findAll('.cbp-btn--segment').forEach((segmentedButtonGroup) => {
-    addOrInstantiate(SegmentedButtonGroup, segmentedButtonGroup);
+  scope.querySelectorAll('.cbp-btn--segment').forEach((segmentedButtonGroup) => {
+    new SegmentedButtonGroup(segmentedButtonGroup);
   });
 
   /**
    * Tabset
    */
-  SelectorEngine.findAll('.cbp-tabset').forEach((tabset) => {
-    addOrInstantiate(Tabset, tabset);
+  scope.querySelectorAll('.cbp-tabset').forEach((tabset) => {
+    new Tabset(tabset);
   });
 
-
-  SelectorEngine.findAll("[data-checkbox='indeterminate']").forEach(checkbox => {
-    addOrInstantiate(IndeterminateCheckbox, checkbox);
+  /**
+   * Indeterminate Checkbox
+   */
+  scope.querySelectorAll("[data-checkbox='indeterminate']").forEach(checkbox => {
+    new IndeterminateCheckbox(checkbox);
   })
 
-  SelectorEngine.findAll(".cbp-modal").forEach(modal => {
-    addOrInstantiate(Modal, modal);
+  /**
+   * Modal dialog
+   */
+  scope.querySelectorAll(".cbp-modal").forEach(modal => {
+    new Modal(modal);
   })
 
-  SelectorEngine.findAll('[data-theme-toggle]').forEach((themeToggle) => {
-    addOrInstantiate(DarkMode, themeToggle);
+  // TechDebt: Can we rename this class to themeToggle? Seems inconsistent.
+  scope.querySelectorAll('[data-theme-toggle]').forEach((themeToggle) => {
+    new DarkMode(themeToggle);
   });
-
+
+}
+
+// Make sure the DOM content has loaded before querying it
+// (this may still fail in frameworks that load their components asynchronously)
+document.addEventListener('DOMContentLoaded', (event) => {
+  cbpdsInit();
 });