moving files

Author: scott-williams-az

packages/unity-bootstrap-theme/.storybook/local-addon/decorators/withHeader.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef} from 'react';
 import { makeDecorator } from '@storybook/addons';
 
-import { Basic as Header } from "../../../stories/organisms/global-header/global-header.templates";
+import { Basic as Header } from "../../../stories/organisms/global-header/global-header.templates.jsx";
 
 import { initGlobalHeader } from "../../../src/js/storybook-global-header";
 

packages/unity-bootstrap-theme/stories/atoms/anchor-menu/anchor-menu.js renamed to packages/unity-bootstrap-theme/src/js/anchor-menu.js

@@ -1,9 +1,15 @@
-const bootstrap = require('bootstrap');
+import { EventHandler } from "./bootstrap-helper";
 
-function initializeAnchorMenu () {
+function initAnchorMenu () {
   const HEADER_IDS = ['asu-header', 'asuHeader'];
 
   const globalHeaderId = HEADER_IDS.find((id) => document.getElementById(id));
+
+  if (globalHeaderId === undefined) {
+    // Asu header not found in the DOM.
+    return;
+  }
+
   const globalHeader = document.getElementById(globalHeaderId);
   const navbar = document.getElementById('uds-anchor-menu');
   const navbarOriginalParent = navbar.parentNode;
@@ -115,4 +121,6 @@ function initializeAnchorMenu () {
   }
 };
 
-export { initializeAnchorMenu };
+EventHandler.on(window, 'load.uds.anchor-menu', initAnchorMenu);
+
+export { initAnchorMenu };

packages/unity-bootstrap-theme/stories/molecules/banners/banner.js renamed to packages/unity-bootstrap-theme/src/js/banner.js

@@ -1,5 +1,6 @@
-function initializeBlockquoteAnimation () {
-  window.addEventListener("load", () => {
+import { EventHandler } from "./bootstrap-helper";
+
+function initBlockquoteAnimation () {
     // Find all marks with a class starting with pen-
     const markers = document.querySelectorAll('mark[class^="pen-"]');
 
@@ -24,7 +25,8 @@ function initializeBlockquoteAnimation () {
     markers.forEach((mark) => {
       observer.observe(mark);
     });
-  });
 }
 
-export { initializeBlockquoteAnimation };
+EventHandler.on(window, 'load.uds.blockquote-animation', initBlockquoteAnimation);
+
+export { initBlockquoteAnimation };

packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote-animated.js renamed to packages/unity-bootstrap-theme/src/js/blockquote-animated.js

@@ -0,0 +1,11 @@
+import BaseComponent from 'bootstrap/js/src/base-component.js'
+import EventHandler from "bootstrap/js/src/dom/event-handler.js";
+import { enableDismissTrigger } from 'bootstrap/js/src/util/component-functions.js'
+import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js'
+
+export {
+  BaseComponent,
+  EventHandler,
+  enableDismissTrigger,
+  defineJQueryPlugin,
+};

packages/unity-bootstrap-theme/src/js/bootstrap-helper.js

@@ -1,3 +1,5 @@
+import { EventHandler } from "./bootstrap-helper";
+
 function initCalendar() {
   const months = [
     'January',
@@ -81,6 +83,11 @@ function initCalendar() {
 
   const render = () => {
     const calendarContainer = document.getElementById('calendar');
+
+  if (!calendarContainer) {
+    return;
+  }
+
     calendarContainer.innerHTML = `
       <h2><span class="highlight-black">${months[state.month]} ${
       state.year
@@ -154,4 +161,6 @@ function initCalendar() {
   showCalendar(0);
 };
 
+EventHandler.on(window, 'load.uds.calendar', initCalendar);
+
 export { initCalendar }

packages/unity-bootstrap-theme/stories/molecules/calendar/calendar.js renamed to packages/unity-bootstrap-theme/src/js/calendar.js

@@ -1,12 +1,16 @@
+import { EventHandler } from "./bootstrap-helper";
+
 // method ot handle the custom behavior of the ranking card
 function rankingFunc() {
   const $infoLayer = document.querySelector(".info-layer");
   const $toggleIcon = document.getElementById("dispatch");
 
-  $toggleIcon?.addEventListener("click", function () {
+  EventHandler.on($toggleIcon, "click", function () {
     $infoLayer?.classList.toggle("active");
   });
 
 };
 
+EventHandler.on(window, 'load.uds.ranking-card', rankingFunc);
+
 export { rankingFunc };

packages/unity-bootstrap-theme/stories/molecules/cards/ranking-cards.js renamed to packages/unity-bootstrap-theme/src/js/card-ranking.js

@@ -1,11 +1,22 @@
 import { Chart, registerables } from 'chart.js';
+import { EventHandler } from './bootstrap-helper';
+
+// Chart.js library should be peer dependency
+
 Chart.register(...registerables);
 
 function initChart() {
   const GRAPH_PERCENTAGE_COMPLETE = 50;
+
+  var ctx = document.getElementById('uds-donut');
+
+  if (!ctx) {
+      // id="uds-donut" not found in the DOM.
+    return;
+  }
+
   document.getElementById('percentage-display').innerHTML =
     GRAPH_PERCENTAGE_COMPLETE + '%';
-  var ctx = document.getElementById('uds-donut');
 
   const config = {
     type: 'doughnut',
@@ -29,4 +40,6 @@ function initChart() {
   var myChart = new Chart(ctx, config);
 };
 
+EventHandler.on(window, 'load.uds.chart', initChart);
+
 export { initChart };

packages/unity-bootstrap-theme/stories/molecules/charts-and-graphs/charts-and-graphs.js renamed to packages/unity-bootstrap-theme/src/js/charts-and-graphs.js

@@ -1,4 +1,6 @@
-function initVideo() {
+import { EventHandler } from "./bootstrap-helper";
+
+function initHeroesVideo() {
   // common selectors
   const DOM_ELEMENT_VIDEO = "video";
   const DOM_ELEMENT_BTN_PLAY = "#playHeroVid";
@@ -50,4 +52,6 @@ function initVideo() {
 
 };
 
-export { initVideo };
+EventHandler.on(window, 'load.uds.heroes-video', initHeroesVideo);
+
+export { initHeroesVideo };

packages/unity-bootstrap-theme/stories/molecules/heroes/heroes-video.js renamed to packages/unity-bootstrap-theme/src/js/heroes-video.js

@@ -1,3 +1,5 @@
+import { EventHandler } from "./bootstrap-helper";
+
 export const initImageParallax = () => {
   const MAGIC_PARALLAX_FACTOR = 1.2;
 
@@ -91,7 +93,7 @@ export const initImageParallax = () => {
   // dataLayer elements focus event listener
   const elements = document.querySelectorAll('[data-ga-image-parallax]');
   elements.forEach((element) =>
-    element.addEventListener('focus', () => {
+    EventHandler.on(element, 'focus.uds.image-parallax', () => {
       const args = {
         section: element
           .getAttribute('data-ga-image-parallax-section')
@@ -103,13 +105,11 @@ export const initImageParallax = () => {
   );
 
   // Window management
-  window.addEventListener('DOMContentLoaded', function () {
-    manage_image_sizes();
-  });
+  manage_image_sizes();
 
-  window.addEventListener('resize', function () {
-    manage_image_sizes();
-  });
+  EventHandler.on(window, 'resize.uds.image-parallax', manage_image_sizes);
 
-  window.addEventListener('scroll', scrollHandler);
+  EventHandler.on(window, 'scroll.uds.image-parallax', scrollHandler);
 };
+
+EventHandler.on(window, 'load.uds.image-parallax', initImageParallax);