@utahdts/utah-design-system-header 1.2.1 → 1.3.0

package/src/js/renderables/utahLogo/renderOfficialWebsite.js

@@ -0,0 +1,139 @@
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import UtahOfficialWebsitePopupContentHtml from './html/UtahOfficialWebsitePopupContent.html?raw';
+
+import domConstants, { getCssClassSelector } from '../../enumerations/domConstants';
+import notNull from '../../misc/notNull';
+import renderDOMSingle from '../../misc/renderDOMSingle';
+import uuidv4 from '../../misc/uuidv4';
+import { hideMobileMenu } from '../mobile/util/showHideHamburgerElements';
+
+export function closeOfficialWebsite() {
+  const officialWebsiteWrapper = notNull(
+    document.querySelector(getCssClassSelector(domConstants.LOGO_OFFICIAL_WRAPPER)),
+    'openOfficialWebsite: official wrapper not found'
+  );
+  const logoWrapper = notNull(
+    document.querySelector(getCssClassSelector(domConstants.LOGO)),
+    'openOfficialWebsite: logoWrapper not found'
+  );
+  const logoButton = notNull(
+    logoWrapper.querySelector(getCssClassSelector(domConstants.LOGO_SVG)),
+    'openOfficialWebsite: logoButton not found'
+  );
+  const closeButton = notNull(
+    officialWebsiteWrapper.querySelector(getCssClassSelector(domConstants.LOGO_OFFICIAL_CLOSE_BUTTON)),
+    'openOfficialWebsite: official close button not found'
+  );
+  officialWebsiteWrapper.classList.add(domConstants.VISUALLY_HIDDEN);
+
+  logoButton.setAttribute('aria-expanded', 'false');
+  officialWebsiteWrapper.setAttribute('aria-hidden', 'true');
+  // shift tabbing from mobile menu item content's first action item button would tab in to this
+  // hidden "official website" content. setting the tabindex to -1 makes this not happen
+  closeButton.setAttribute('tabIndex', '-1');
+  officialWebsiteWrapper.setAttribute('tabIndex', '-1');
+
+  // hide all tooltips when button is clicked because the popup opens
+  const toolTips = document.querySelectorAll(getCssClassSelector(domConstants.TOOLTIP__WRAPPER));
+  toolTips?.forEach((tooltip) => {
+    tooltip.classList.add(domConstants.TOOLTIP__WRAPPER__HIDDEN);
+    tooltip.classList.remove(domConstants.TOOLTIP__WRAPPER__VISIBLE);
+  });
+}
+
+export function openOfficialWebsite() {
+  const officialWebsiteWrapper = notNull(
+    document.querySelector(getCssClassSelector(domConstants.LOGO_OFFICIAL_WRAPPER)),
+    'openOfficialWebsite: official wrapper not found'
+  );
+  const logoWrapper = notNull(
+    document.querySelector(getCssClassSelector(domConstants.LOGO)),
+    'openOfficialWebsite: logoWrapper not found'
+  );
+  const logoButton = notNull(
+    logoWrapper.querySelector(getCssClassSelector(domConstants.LOGO_SVG)),
+    'openOfficialWebsite: logoButton not found'
+  );
+  const closeButton = notNull(
+    officialWebsiteWrapper.querySelector(getCssClassSelector(domConstants.LOGO_OFFICIAL_CLOSE_BUTTON)),
+    'openOfficialWebsite: official close button not found'
+  );
+  officialWebsiteWrapper.classList.remove(domConstants.VISUALLY_HIDDEN);
+
+  closeButton.removeAttribute('tabIndex');
+  officialWebsiteWrapper.removeAttribute('tabIndex');
+  logoButton.setAttribute('aria-expanded', 'true');
+  officialWebsiteWrapper.setAttribute('aria-hidden', 'false');
+  // @ts-ignore
+  officialWebsiteWrapper.focus();
+
+  // hide all tooltips when button is clicked because the popup opens
+  const toolTips = document.querySelectorAll(getCssClassSelector(domConstants.TOOLTIP__WRAPPER));
+  toolTips?.forEach((tooltip) => {
+    tooltip.classList.add(domConstants.TOOLTIP__WRAPPER__HIDDEN);
+    tooltip.classList.remove(domConstants.TOOLTIP__WRAPPER__VISIBLE);
+  });
+
+  hideMobileMenu();
+}
+
+/**
+ * @returns {Element}
+ */
+export default function renderOfficialWebsite() {
+  const officialWebsiteWrapper = renderDOMSingle(UtahOfficialWebsitePopupContentHtml);
+
+  const logoWrapper = document.querySelector(getCssClassSelector(domConstants.LOGO));
+  const logoButton = /** @type {HTMLElement} */(logoWrapper?.querySelector(getCssClassSelector(domConstants.LOGO_SVG)));
+  if (!logoButton) {
+    throw new Error('renderOfficialWebsite: logoButton not found');
+  }
+  if (logoButton.onclick) {
+    throw new Error('renderOfficialWebsite: logoButton already has an onclick');
+  }
+
+  const closeButton = officialWebsiteWrapper.querySelector(getCssClassSelector(domConstants.LOGO_OFFICIAL_CLOSE_BUTTON));
+  if (!closeButton) {
+    throw new Error('renderOfficialWebsite: closeButton not found');
+  }
+
+  logoButton.onclick = () => {
+    officialWebsiteWrapper.classList.toggle(domConstants.VISUALLY_HIDDEN);
+    if (officialWebsiteWrapper.classList.contains(domConstants.VISUALLY_HIDDEN)) {
+      closeOfficialWebsite();
+    } else {
+      openOfficialWebsite();
+    }
+
+    // hide all tooltips when button is clicked because the popup opens
+    const toolTips = document.querySelectorAll(getCssClassSelector(domConstants.TOOLTIP__WRAPPER));
+    toolTips?.forEach((tooltip) => {
+      tooltip.classList.add(domConstants.TOOLTIP__WRAPPER__HIDDEN);
+      tooltip.classList.remove(domConstants.TOOLTIP__WRAPPER__VISIBLE);
+    });
+  };
+
+  // @ts-ignore
+  closeButton.onclick = () => {
+    officialWebsiteWrapper.classList.toggle(domConstants.VISUALLY_HIDDEN);
+    logoButton.focus();
+    logoButton.setAttribute('aria-expanded', 'false');
+    officialWebsiteWrapper.setAttribute('aria-hidden', 'true');
+  };
+
+  if (!closeButton.id) {
+    closeButton.id = uuidv4();
+  }
+  if (!officialWebsiteWrapper.id) {
+    officialWebsiteWrapper.id = uuidv4();
+  }
+
+  // hook up aria
+  logoButton.setAttribute('aria-controls', officialWebsiteWrapper.id);
+  logoButton.setAttribute('aria-expanded', 'false');
+  officialWebsiteWrapper.setAttribute('aria-hidden', 'true');
+  officialWebsiteWrapper.setAttribute('aria-labelledby', logoButton.id);
+
+  return officialWebsiteWrapper;
+}

package/src/js/settings/defaultSettings.js

@@ -0,0 +1,31 @@
+// @ts-check
+import sizes from '../enumerations/sizes';
+
+/**
+ * @typedef {import('../misc/jsDocTypes').Settings} Settings
+*/
+
+/**
+ * !~! Do not use defaultSettings directly !~!
+ * Interact with `settings` using getUtahHeaderSettings() and setUtahHeaderSettings().
+ * There is a SettingsInput jsDoc type that allows all settings fields to be undefined.
+ * That way, an app can pass in a blank object and still get a header. This `defaultSettings`
+ * then are defaults for all the required fields in case they really did pass a blank object
+ * to setUtahHeaderSettings. So make sure out all the required fields in this object with sensible
+ * default values as a starting place for a new app.
+ * @type {Settings} the current settings of the header
+ */
+export default {
+  onSearch: false,
+  mainMenu: false,
+  mediaSizes: {
+    mobile: 640,
+    tabletPortrait: 768,
+    tabletLandscape: 1024,
+  },
+  showTitle: true,
+  size: sizes.MEDIUM,
+  title: 'My Utah.gov Site',
+  titleURL: '/',
+  utahId: false,
+};

package/src/js/settings/getUtahHeaderSettings.js

@@ -0,0 +1,16 @@
+// @ts-check
+import settingsKeeper from './settingsKeeper';
+
+/**
+ * @typedef {import('../misc/jsDocTypes').Settings} Settings
+*/
+
+/**
+ * an easy to use function, this is what the world expects.
+ * the functional world isn't ready for objects. it tried.
+ * it didn't stick. back to functions.
+ * @returns {Settings} the current settings information
+ */
+export default function getUtahHeaderSettings() {
+  return settingsKeeper.getSettings();
+}

package/src/js/settings/settings.js

@@ -0,0 +1,69 @@
+// @ts-check
+import events from '../enumerations/events';
+import { loadHeader, removeHeader } from '../lifecycle/lifecycle';
+import defaultSettings from './defaultSettings';
+import settingsKeeper from './settingsKeeper';
+
+/**
+ * @typedef {import('../misc/jsDocTypes').FooterSettings} FooterSettings
+ * @typedef {import('../misc/jsDocTypes').Settings} Settings
+ * @typedef {import('../misc/jsDocTypes').SettingsInput} SettingsInput
+*/
+
+function doLoadHeader() {
+  removeHeader(false);
+
+  loadHeader();
+}
+
+// Trigger a custom event ('utahHeaderLoaded') that developers can listen for
+// in their applications.
+// The event needs to wait for the UMD library to load the global window.utahHeader
+// module. Use setInterval to wait for this script to finish running before firing
+// the `utahHeaderLoaded` event.
+let isSetUtahHeaderSettingsCalled = false;
+const MAX_EVENT_FIRES = 15000;
+let numberEventFires = 0;
+
+const intervalId = setInterval(
+  () => {
+    numberEventFires += 1;
+    if (numberEventFires >= MAX_EVENT_FIRES || isSetUtahHeaderSettingsCalled) {
+      clearInterval(intervalId);
+    } else {
+      // please, developer, call setUtahHeaderSettings() as soon as you receive this event... the header
+      // can't load if you don't give it any settings.
+      document.dispatchEvent(new Event(events.HEADER_LOADED));
+    }
+  },
+  2
+);
+
+/**
+ * @param {SettingsInput} newSettings
+ * @returns {Settings}
+ */
+export function setUtahHeaderSettings(newSettings) {
+  // note that if newSettings has a key/value where the value is undefined it WILL override the value to undefined
+  // but if newSettings is missing a key then the `undefined` value of the missing key will not override the default.
+  // this is only a shallow copy, so merging nested settings does not happen.
+  settingsKeeper.setSettings(newSettings);
+
+  isSetUtahHeaderSettingsCalled = true;
+
+  if (document?.body) {
+    doLoadHeader();
+  } else {
+    window.addEventListener('load', () => doLoadHeader());
+  }
+
+  return settingsKeeper.getSettings();
+}
+
+/**
+ * @param {FooterSettings} [footerSettings]
+ * @returns {FooterSettings | undefined}
+ */
+export function setUtahFooterSettings(footerSettings) {
+  return setUtahHeaderSettings({ ...defaultSettings, ...settingsKeeper.getSettings(), footer: footerSettings });
+}

package/src/js/settings/settingsKeeper.js

@@ -0,0 +1,47 @@
+// @ts-check
+import defaultSettings from './defaultSettings';
+
+/**
+ * @typedef {import('../misc/jsDocTypes').FooterSettings} FooterSettings
+ * @typedef {import('../misc/jsDocTypes').Settings} Settings
+ * @typedef {import('../misc/jsDocTypes').SettingsInput} SettingsInput
+*/
+
+/**
+ * @param {Settings} settingsToValidate
+ */
+function validateSettings(settingsToValidate) {
+  if (!settingsToValidate.showTitle && !settingsToValidate.logo) {
+    throw new Error('validateSettings: A title must be shown if there is no logo. Please change the `showTitle` setting to be `true` or provide a logo image.');
+  }
+}
+
+/**
+ * settings had to be stored external to settings.js
+ * and they had to be global
+ * and they couldn't/shouldn't be put on the window variable
+ * so wrapped them in an class object
+ */
+class SettingsKeeper {
+  constructor() {
+    this.settings = { ...defaultSettings };
+  }
+
+  /**
+   * @param {SettingsInput} settings
+   */
+  setSettings(settings) {
+    const newSettings = { ...defaultSettings, ...this.settings, ...settings };
+    validateSettings(newSettings);
+    this.settings = newSettings;
+  }
+
+  /**
+   * @returns {Settings}
+  */
+  getSettings() {
+    return this.settings;
+  }
+}
+
+export default new SettingsKeeper();

package/src/js/utahId/httpRequest.js

@@ -0,0 +1,42 @@
+// @ts-check
+/**
+ * An XMLHttpRequest that fires callback functions when the request is complete
+ * @param {Object} params
+ * @param {string} params.url - URL and parameters of the request
+ * @param {string} params.method - 'GET' or 'POST' - defaults to 'GET'
+ * @param {Object.<string, string>} params.headers - key:value pairs to set request headers
+ * @param {number} params.timeout - The timeout length
+ * @param {function} params.onResolve - Function to call on a successful request
+ * @param {function} params.onReject - Function to call on error or timeout
+ */
+export default function httpRequest({
+  url,
+  method,
+  headers,
+  timeout,
+  onResolve,
+  onReject,
+}) {
+  // Create the XHR request
+  const request = new XMLHttpRequest();
+
+  request.addEventListener('load', (e) => onResolve(e.target));
+  request.addEventListener('error', (e) => onReject(e.target));
+  request.addEventListener('timeout', (e) => onReject(e.target));
+
+  // Setup our HTTP request
+  request.open(method || 'GET', url, true);
+
+  request.withCredentials = true;
+
+  if (timeout) {
+    request.timeout = timeout;
+  }
+
+  if (headers) {
+    Object.keys(headers).forEach((key) => request.setRequestHeader(key, headers[key] || ''));
+  }
+
+  // Send the request
+  request.send();
+}

package/src/js/utahId/utahIdData.js

@@ -0,0 +1,165 @@
+// @ts-check
+import utahIdUrls from '../enumerations/utahIdUrls';
+import { authChangedEventHandler } from '../renderables/utahId/UtahId';
+import getUtahHeaderSettings from '../settings/getUtahHeaderSettings';
+/**
+ * @typedef {import('../misc/jsDocTypes').UtahIdData} UtahIdData
+ * @typedef {import('../misc/jsDocTypes').UtahIdFetchStyle} UtahIdFetchStyle
+ * @typedef {import('../misc/jsDocTypes').UtahIDSettings} UtahIDSettings
+ * @typedef {import('../misc/jsDocTypes').UserInfo} UserInfo
+ */
+
+/** @enum {UtahIdFetchStyle} */
+const UtahIdFetchStyle = {
+  AUTOMATIC: /** @type {UtahIdFetchStyle} */ ('Automatic'),
+  NONE: /** @type {UtahIdFetchStyle} */ ('None'),
+  PROVIDED: /** @type {UtahIdFetchStyle} */ ('Provided'),
+};
+let lastFetchStyle = UtahIdFetchStyle.NONE;
+/**
+ * @param {UtahIDSettings | boolean | undefined} utahIdData
+ * @returns {UtahIdFetchStyle}
+ */
+function determineFetchStyle(utahIdData) {
+  /** @type {UtahIdFetchStyle} */
+  let fetchStyle;
+  if (utahIdData === true) {
+    fetchStyle = UtahIdFetchStyle.AUTOMATIC;
+  } else if (utahIdData === false) {
+    fetchStyle = UtahIdFetchStyle.NONE;
+  } else if (utahIdData === undefined || utahIdData.currentUser === undefined) {
+    fetchStyle = UtahIdFetchStyle.AUTOMATIC;
+  } else if (utahIdData.currentUser === null || utahIdData.currentUser) {
+    fetchStyle = UtahIdFetchStyle.PROVIDED;
+  } else {
+    throw new Error('determineFetchStyle: Unknown utah id fetch style');
+  }
+  return fetchStyle;
+}
+
+/**
+ * @type {UtahIdData}
+ */
+const utahIdData = {
+  // null = not yet loaded, false = ajaxing, true = have a result (may be error or user data)
+  isDefinitive: null,
+  lastError: null,
+  userInfo: null,
+};
+
+/**
+ * when auth status changes, call this to notify the world including the Sign In button
+ *
+ * @param {UtahIdData} newUtahIdData the current information to store
+ */
+function maybeTriggerAuthEvent(newUtahIdData) {
+  // something asked for new information, so fire off that new information has arrived
+  if (newUtahIdData.isDefinitive) {
+    // call auth changed so name updates in button
+    authChangedEventHandler(newUtahIdData);
+
+    // give settings callback a crack at the auth change
+    const utahId = getUtahHeaderSettings()?.utahId;
+    if (typeof utahId === 'object') {
+      utahId.onAuthChanged?.(newUtahIdData);
+    }
+  }
+}
+
+// give the application a bit of time to call setUtahHeaderSettings() so that they
+// can tell the header if the application will be controlling the logged in user
+// if the application controls the user, then the user is not fetched from UtahID
+// within this "waitForLaunch" window, the application must call setUtahHeaderSettings()
+// if the current user is not yet known, make sure to set `settings.utahId.currentUser = null`
+// this way the header knows the user is controlled by the app and to not go fetch the user.
+let waitingForLaunch = true;
+const WAIT_FOR_LAUNCH_MS = 500;
+
+/** @type {number} */
+let fetchUserTimeoutId = NaN;
+
+/**
+ * @returns {Promise<UtahIdData>}
+ */
+export async function fetchUtahIdUserDataAsync() {
+  /** @type {Promise<UtahIdData>} */
+  let result = Promise.resolve(utahIdData);
+  const settings = getUtahHeaderSettings();
+  const fetchStyle = determineFetchStyle(settings.utahId);
+
+  if (utahIdData.isDefinitive === false) {
+    // working on it... come back later...
+    result = Promise.resolve(utahIdData);
+  } else if (waitingForLaunch) {
+    clearTimeout(fetchUserTimeoutId);
+    result = new Promise((resolve) => {
+      fetchUserTimeoutId = window.setTimeout(
+        () => {
+          // if the app hasn't called setUtahHeaderSettings() by now, too bad for them...
+          waitingForLaunch = false;
+          fetchUtahIdUserDataAsync()
+            .then((data) => resolve(data))
+            // eslint-disable-next-line no-console
+            .catch((e) => console.error(e));
+        },
+        WAIT_FOR_LAUNCH_MS
+      );
+    });
+  } else if (settings.utahId === false) {
+    // if utahId is set and currentUser is undefined then the header has control of the user
+    // otherwise, if utahId is false then it is turned off
+    // otherwise, if utahId is an object and currentUser is not undefined, then the application will control the current user
+    // utahId is turned off (probably shouldn't even have gotten here?)
+    result = Promise.resolve({
+      isDefinitive: true,
+      lastError: 'Utah ID is off',
+      userInfo: null,
+    });
+  } else if (settings.utahId === true || settings.utahId?.currentUser === undefined) {
+    // 👆 catches true && null cases, both of which allow a refetch 👆
+
+    // header is "on" OR utahId settings has an `undefined` user: Header controls the user!
+    if (fetchStyle !== lastFetchStyle || utahIdData.isDefinitive === null) {
+      utahIdData.isDefinitive = false;
+      result = fetch(utahIdUrls.USER_INFO, { credentials: 'include' })
+        .then((resp) => resp.json())
+        .then((authResult) => {
+          if (authResult.status === 200) {
+            utahIdData.lastError = null;
+            utahIdData.userInfo = /** @type {UserInfo} */ (authResult.data);
+          } else {
+            throw new Error(authResult.err);
+          }
+          return utahIdData;
+        })
+        .catch((error) => {
+          utahIdData.lastError = error;
+          utahIdData.userInfo = null;
+          return utahIdData;
+        })
+        .finally(() => {
+          utahIdData.isDefinitive = true;
+          maybeTriggerAuthEvent(utahIdData);
+          return utahIdData;
+        });
+    }
+  } else {
+    // utahId settings have currentUser as null or a user, either way the application will be controlling the user, not the header
+    const resultData = {
+      isDefinitive: true,
+      lastError: null,
+      userInfo: settings.utahId?.currentUser,
+    };
+    result = Promise.resolve(resultData);
+    maybeTriggerAuthEvent(resultData);
+  }
+  lastFetchStyle = fetchStyle;
+  return result;
+}
+
+/**
+ * @returns {UtahIdData}
+ */
+export function getCurrentUtahIdData() {
+  return utahIdData;
+}