@qhealth-design-system/core 1.22.2 → 1.23.0

package/src/components/_global/js/legacyGlobal.js

@@ -0,0 +1,63 @@
+/**
+ * @module _global/legacyGlobal
+ *
+ * Single home for the legacy `window.QLD.*` global namespace.
+ *
+ * Historically each component registered itself onto `window.QLD` as a side
+ * effect at module-eval time, scattered across a dozen files. That surface is
+ * still part of the public (non-bundled) contract for external callers, so it
+ * is preserved here — but centralised, so the individual component modules can
+ * stay side-effect-free and independently testable.
+ *
+ * This module must be imported early (see `component-loader.js`) so the globals
+ * exist before any component init runs. Component initialisation itself lives in
+ * `component-loader.js`.
+ */
+
+// `import * as` for the modules whose legacy aggregate is a slice of their named
+// exports; the object is then spelled out member-by-member below so the legacy
+// contract stays explicit and a removed source export surfaces here.
+import utils from "./global.js";
+import * as animate from "./animate/global.js";
+import { tabs } from "./tabs/global.js";
+import { Modal } from "./modal/global.js";
+import { toggleToolTips } from "./popover/controller.js";
+
+// Feature components
+import * as accordion from "../../accordion/js/global.js";
+import { fileUploads } from "../../file_upload/js/global.js";
+import initCode from "../../code/js/global.js";
+import initBasicSearch from "../../basic_search/js/global.js";
+import initTab from "../../tab/js/global.js";
+import initToolTip from "../../tool_tip/js/global.js";
+import initToggleTip from "../../toggle_tip/js/global.js";
+
+// Expose the legacy `window.QLD.*` namespace for any external (non-bundled) callers.
+// Objects that exist solely for this legacy surface are assembled here rather than
+// in the component modules.
+window.QLD = window.QLD || {};
+window.QLD.utils = utils;
+window.QLD.animate = {
+  CalculateAnimationSpecs: animate.CalculateAnimationSpecs,
+  GetCSSPropertyBecauseIE: animate.GetCSSPropertyBecauseIE,
+  CalculateAuto: animate.CalculateAuto,
+  Stop: animate.Stop,
+  Run: animate.Run,
+  Toggle: animate.Toggle,
+};
+window.QLD.tabs = tabs;
+window.QLD.Modal = Modal;
+window.QLD.toggleToolTips = toggleToolTips;
+window.QLD.accordion = {
+  Toggle: accordion.Toggle,
+  ToggleAll: accordion.ToggleAll,
+  Open: accordion.Open,
+  Close: accordion.Close,
+  initAccordion: accordion.initAccordion,
+};
+window.QLD.code = { init: initCode };
+window.QLD.basicSearch = { init: initBasicSearch };
+window.QLD.fileUploads = fileUploads;
+window.QLD.tab = { init: () => initTab(document), initTab };
+window.QLD.toolTip = { init: () => initToolTip(document), initToolTip };
+window.QLD.toggleTip = { init: () => initToggleTip(document), initToggleTip };

package/src/components/_global/js/modal/global.js

@@ -1,253 +1,248 @@
 /**
- * Modal module
+ * @module Modal
  */
-(function (QLD) {
+
+const Modal = {
+  // Vars
+  events: {},
+  callbackFns: {},
+
   /**
-   * @module Modal
+   * Initialise a specific modal
+   *
+   * @memberof module:Modal
+   *
+   * @param {Node} modalBtn The modal button element
    */
-  var Modal = {
-    // Vars
-    events: {},
-    callbackFns: {},
-
-    /**
-     * Initialise a specific modal
-     *
-     * @memberof module:Modal
-     *
-     * @param {Node} modalBtn The modal button element
-     */
-    init: function (modalBtn) {
-      // Init single modal btn
-      if (typeof modalBtn !== "undefined") {
+  init: function (modalBtn) {
+    // Init single modal btn
+    if (typeof modalBtn !== "undefined") {
+      modalBtn.addEventListener("click", Modal.open);
+
+      // Else init all modal buttons on the page
+    } else {
+      var modalBtns = document.querySelectorAll(".qld__open-modal");
+      modalBtns.forEach((modalBtn) => {
         modalBtn.addEventListener("click", Modal.open);
+      });
+    }
+  },
 
-        // Else init all modal buttons on the page
-      } else {
-        var modalBtns = document.querySelectorAll(".qld__open-modal");
-        modalBtns.forEach((modalBtn) => {
-          modalBtn.addEventListener("click", Modal.open);
-        });
-      }
-    },
-
-    /**
-     * Open the modal
-     *
-     * @memberof module:Modal
-     *
-     * @param {Document.event} e
-     */
-    open: function (e) {
-      let modalOpenBtn = e.currentTarget ? e.currentTarget : null;
-
-      if (modalOpenBtn !== null) {
-        var modalTarget = modalOpenBtn.getAttribute("data-modaltarget");
-        var modalEl = document.querySelector(`#${modalTarget}`);
-        var modalCloseBtns = modalEl.querySelectorAll(
-          'button[data-action="close"]',
-        );
-        var modalUnderlay = modalEl.querySelector(".qld__modal__underlay");
-      } else {
-        var modalEl = e.get(0);
-        var modalCloseBtns = modalEl.querySelectorAll(
-          'button[data-action="close"], button[data-action="deny-location"]',
-        );
-        var modalUnderlay = modalEl.querySelector(".qld__modal__underlay");
+  /**
+   * Open the modal
+   *
+   * @memberof module:Modal
+   *
+   * @param {Document.event} e
+   */
+  open: function (e) {
+    let modalOpenBtn = e.currentTarget ? e.currentTarget : null;
+
+    let modalEl;
+    let modalCloseBtns;
+    let modalUnderlay;
+
+    if (modalOpenBtn !== null) {
+      var modalTarget = modalOpenBtn.getAttribute("data-modaltarget");
+      modalEl = document.querySelector(`#${modalTarget}`);
+      modalCloseBtns = modalEl.querySelectorAll('button[data-action="close"]');
+      modalUnderlay = modalEl.querySelector(".qld__modal__underlay");
+    } else {
+      modalEl = e.get(0);
+      modalCloseBtns = modalEl.querySelectorAll(
+        'button[data-action="close"], button[data-action="deny-location"]',
+      );
+      modalUnderlay = modalEl.querySelector(".qld__modal__underlay");
+    }
+
+    // trap focus
+    // add all the elements inside modal that are focusable
+    let focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    let firstFocusableElement = modalEl.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
+    let focusableContent = modalEl.querySelectorAll(focusableElements);
+    let lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
+
+    // Add keydown listener
+    Modal.events.keydown = Modal.addEvent(document, "keydown", function (e) {
+      // ESC
+      if (e.keyCode === 27) {
+        modalOpenBtn.focus();
+        Modal.close(e);
+        return;
       }
 
-      // trap focus
-      // add all the elements inside modal that are focusable
-      let focusableElements =
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-      let firstFocusableElement =
-        modalEl.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
-      let focusableContent = modalEl.querySelectorAll(focusableElements);
-      let lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
-
-      // Add keydown listener
-      Modal.events.keydown = Modal.addEvent(document, "keydown", function (e) {
-        // ESC
-        if (e.keyCode === 27) {
-          modalOpenBtn.focus();
-          Modal.close(e);
-          return;
-        }
+      let isTabPressed = e.key === "Tab" || e.keyCode === 9;
 
-        let isTabPressed = e.key === "Tab" || e.keyCode === 9;
+      if (!isTabPressed) {
+        return;
+      }
 
-        if (!isTabPressed) {
-          return;
+      if (e.shiftKey) {
+        // if shift key pressed for shift + tab combination
+        if (
+          document.activeElement === firstFocusableElement ||
+          document.activeElement === modalEl
+        ) {
+          lastFocusableElement.focus(); // add focus for the last focusable element
+          e.preventDefault();
         }
-
-        if (e.shiftKey) {
-          // if shift key pressed for shift + tab combination
-          if (
-            document.activeElement === firstFocusableElement ||
-            document.activeElement === modalEl
-          ) {
-            lastFocusableElement.focus(); // add focus for the last focusable element
-            e.preventDefault();
-          }
-        } else {
-          // if tab key is pressed
-          if (document.activeElement === lastFocusableElement) {
-            // if focused has reached to last focusable element then focus first focusable element after pressing tab
-            firstFocusableElement.focus(); // add focus for the first focusable element
-            e.preventDefault();
-          }
+      } else {
+        // if tab key is pressed
+        if (document.activeElement === lastFocusableElement) {
+          // if focused has reached to last focusable element then focus first focusable element after pressing tab
+          firstFocusableElement.focus(); // add focus for the first focusable element
+          e.preventDefault();
         }
-      });
+      }
+    });
+
+    // Open modal
+    modalEl.classList.add("active");
+    modalEl.focus();
+
+    // Close button click listener
+    modalCloseBtns.forEach(function (button, index) {
+      Modal.events["close-" + index] = Modal.addEvent(
+        button,
+        "click",
+        function (e) {
+          modalOpenBtn !== null ? modalOpenBtn.focus() : null;
+          Modal.close(e);
+        },
+      );
+    });
+
+    // Modal underlay listener
+    if (modalUnderlay) {
+      Modal.events.underlay = Modal.addEvent(
+        modalUnderlay,
+        "click",
+        Modal.close,
+      );
+    }
 
-      // Open modal
-      modalEl.classList.add("active");
-      modalEl.focus();
+    // Add callback events
+    for (var key in Modal.callbackFns) {
+      var button = modalEl.querySelector('button[data-callback="' + key + '"]');
 
-      // Close button click listener
-      modalCloseBtns.forEach(function (button, index) {
-        Modal.events["close-" + index] = Modal.addEvent(
+      if (button !== null) {
+        Modal.events["callback-" + key] = Modal.addEvent(
           button,
           "click",
           function (e) {
-            modalOpenBtn !== null ? modalOpenBtn.focus() : null;
             Modal.close(e);
+            var callbackKey = e.target.getAttribute("data-callback");
+            Modal.callbackFns[callbackKey](e);
           },
         );
-      });
-
-      // Modal underlay listener
-      if (modalUnderlay) {
-        Modal.events.underlay = Modal.addEvent(
-          modalUnderlay,
-          "click",
-          Modal.close,
-        );
       }
+    }
+  },
 
-      // Add callback events
-      for (var key in Modal.callbackFns) {
-        var button = modalEl.querySelector(
-          'button[data-callback="' + key + '"]',
-        );
+  /**
+   * Close the modal
+   *
+   * @memberof module:Modal
+   *
+   * @param {Document.event} e
+   */
+  close: function (e) {
+    var modalEl = e.target.closest(".qld__modal");
+    modalEl.classList.remove("active");
 
-        if (button !== null) {
-          Modal.events["callback-" + key] = Modal.addEvent(
-            button,
-            "click",
-            function (e) {
-              Modal.close(e);
-              var callbackKey = e.target.getAttribute("data-callback");
-              Modal.callbackFns[callbackKey](e);
-            },
-          );
-        }
-      }
-    },
-
-    /**
-     * Close the modal
-     *
-     * @memberof module:Modal
-     *
-     * @param {Document.event} e
-     */
-    close: function (e) {
-      console.log("close");
-      var modalEl = e.target.closest(".qld__modal");
-      modalEl.classList.remove("active");
-
-      for (var i in Modal.events) {
-        var event = Modal.events[i];
-        Modal.removeEvent(event);
-      }
-    },
-
-    /**
-     * Object representing an event listener
-     *
-     * @typedef {Object} event
-     * @property {Node} element             Element the event is attached to
-     * @property {function} handler         Event handler function
-     * @property {document#event} event     DOM event to listen for
-     */
-
-    /**
-     * Add event listener
-     *
-     * @memberof module:Modal
-     * @instance
-     * @private
-     *
-     * @param {Node} element            DOM element to add event to
-     * @param {document#event} event    The event to listen for
-     * @param {function} rawHandler     The raw handler function
-     * @return {event}
-     */
-    addEvent: function (element, event, rawHandler) {
-      // Using local functions instead of anonymous for event handler
-      function listenHandler(event) {
-        var handler = rawHandler.apply(this, arguments);
-        if (handler === false) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        return handler;
-      }
+    for (var i in Modal.events) {
+      var event = Modal.events[i];
+      Modal.removeEvent(event);
+    }
+  },
 
-      // Make sure attachHandler is also going to work
-      function attachHandler() {
-        var handler = rawHandler.call(element, window.event);
-        if (handler === false) {
-          window.event.returnValue = false;
-          window.event.cancelBubble = true;
-        }
-        return handler;
-      }
+  /**
+   * Object representing an event listener
+   *
+   * @typedef {Object} event
+   * @property {Node} element             Element the event is attached to
+   * @property {function} handler         Event handler function
+   * @property {document#event} event     DOM event to listen for
+   */
 
-      // Return the token and add the correct listener
-      if (element.addEventListener) {
-        element.addEventListener(event, listenHandler, false);
-        return {
-          element: element,
-          handler: listenHandler,
-          event: event,
-        };
-      } else {
-        element.attachEvent("on" + event, attachHandler);
-        return {
-          element: element,
-          handler: attachHandler,
-          event: event,
-        };
+  /**
+   * Add event listener
+   *
+   * @memberof module:Modal
+   * @instance
+   * @private
+   *
+   * @param {Node} element            DOM element to add event to
+   * @param {document#event} event    The event to listen for
+   * @param {function} rawHandler     The raw handler function
+   * @return {event}
+   */
+  addEvent: function (element, event, rawHandler) {
+    // Using local functions instead of anonymous for event handler
+    function listenHandler(event) {
+      var handler = rawHandler.apply(this, arguments);
+      if (handler === false) {
+        event.stopPropagation();
+        event.preventDefault();
       }
-    },
-
-    /**
-     * Remove event listener
-     *
-     * @memberof module:Modal
-     * @instance
-     * @private
-     *
-     * @param {event} token     The event to remove
-     */
-    removeEvent: function (token) {
-      if (token.element.removeEventListener) {
-        token.element.removeEventListener(token.event, token.handler);
-      } else {
-        token.element.detachEvent("on" + token.event, token.handler);
+      return handler;
+    }
+
+    // Make sure attachHandler is also going to work
+    function attachHandler() {
+      var handler = rawHandler.call(element, window.event);
+      if (handler === false) {
+        window.event.returnValue = false;
+        window.event.cancelBubble = true;
       }
-    },
-  };
+      return handler;
+    }
 
-  // Add to global QLD module
-  var QLD = QLD ? QLD : {};
-  QLD.Modal = Modal;
-  window.QLD = QLD;
+    // Return the token and add the correct listener
+    if (element.addEventListener) {
+      element.addEventListener(event, listenHandler, false);
+      return {
+        element: element,
+        handler: listenHandler,
+        event: event,
+      };
+    } else {
+      element.attachEvent("on" + event, attachHandler);
+      return {
+        element: element,
+        handler: attachHandler,
+        event: event,
+      };
+    }
+  },
 
-  window.addEventListener("DOMContentLoaded", function () {
-    if (document.querySelector(".qld__open-modal") !== null) {
-      QLD.Modal.init();
+  /**
+   * Remove event listener
+   *
+   * @memberof module:Modal
+   * @instance
+   * @private
+   *
+   * @param {event} token     The event to remove
+   */
+  removeEvent: function (token) {
+    if (token.element.removeEventListener) {
+      token.element.removeEventListener(token.event, token.handler);
+    } else {
+      token.element.detachEvent("on" + token.event, token.handler);
     }
-  });
-})(window.QLD);
+  },
+};
+
+/**
+ * Initialise modal buttons.
+ *
+ * @param {Node} [modalBtn] - A specific modal button to wire up; omit to wire
+ *                            up every `.qld__open-modal` button on the page.
+ */
+export default function initModal(modalBtn) {
+  Modal.init(modalBtn);
+}
+
+export { Modal };

package/src/components/_global/js/popover/controller.js

@@ -152,10 +152,10 @@ export function createPopoverController({ componentName, marginFromTrigger }) {
   return { init };
 }
 
-// Back-compat: the old shared helper was exposed as window.QLD.toggleToolTips.
-// Preserve that surface for any external (non-bundled) callers.
-window.QLD = window.QLD || {};
-window.QLD.toggleToolTips = {
+// Back-compat surface: the old shared helper was exposed as
+// window.QLD.toggleToolTips. Exported here and registered in
+// ../legacyGlobal.js for any external (non-bundled) callers.
+export const toggleToolTips = {
   openToggleToolTip: show,
   closeToggleToolTip: hide,
   closeAllToggleToolTips(componentName, triggers) {