Merge pull request #1562 from ASU/uds-1316a

Uds 1316: fix long accordion scroll issue

Author: davidornelas11

packages/shared/utils/index.d.ts

@@ -6,3 +6,4 @@ export * from "./numbers";
 export * from "./script-utils";
 export * from "./timers";
 export * from "./deep-cloner";
+export * from "./scroll-helper";

packages/shared/utils/index.js

@@ -6,3 +6,4 @@ export * from "./numbers";
 export * from "./script-utils";
 export * from "./timers";
 export * from "./deep-cloner";
+export * from "./scroll-helper";

packages/shared/utils/scroll-helper.d.ts

@@ -0,0 +1 @@
+export function adjustShrinkingElementIfAboveViewport(element: any): void;

packages/shared/utils/scroll-helper.js

@@ -0,0 +1,19 @@
+// @ts-check
+export function adjustShrinkingElementIfAboveViewport(element) {
+  if (element && typeof element.getBoundingClientRect === "function") {
+    const { bottom: inViewportHeight, top } = element.getBoundingClientRect();
+    const { offsetTop } = element;
+    if (top < 0 && inViewportHeight > 0) {
+      const savedStyle = element.style;
+      element.style = `${savedStyle};transition: height 0s !important; overflow:hidden; height:${inViewportHeight}px!important;max-height:${inViewportHeight}px!important`;
+      window.scrollTo({ behavior: "instant", top: offsetTop });
+      setTimeout(() => {
+        element.style = savedStyle;
+        window.scrollTo({
+          behavior: "smooth",
+          top: element.offsetTop - inViewportHeight / 2,
+        });
+      }, 50);
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { adjustShrinkingElementIfAboveViewport } from "@asu/shared";
+
+import { EventHandler } from "./bootstrap-helper";
+
+function initCollapse() {
+  function accordionClick({ target }) {
+    const targetHref = target.getAttribute("href");
+    if (
+      target.getAttribute("data-bs-toggle") !== "collapse" ||
+      !targetHref ||
+      !targetHref.includes("#")
+    ) {
+      return; // Exit the function - not a collapse link
+    }
+
+    /**
+     * Find the first accordion that is currently collapsing or expanding
+     * Function will determine if scroll adjustment is needed
+     */
+    adjustShrinkingElementIfAboveViewport(
+      document.querySelector(".collapsing")
+    );
+  }
+  EventHandler.on(document, "click.uds.collapse", accordionClick);
+}
+
+EventHandler.on(window, "load.uds.collapse", initCollapse);
+
+export { initCollapse };

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

@@ -5,6 +5,7 @@ import { initCalendar } from "./calendar.js";
 import { initCardBodies } from "./card-bodies.js";
 import { initRankingCard } from "./card-ranking.js";
 import { initChart } from "./charts-and-graphs.js";
+import { initCollapse } from "./collapse.js";
 import { initDataLayer } from "./data-layer.js";
 import { initGlobalHeader } from "./global-header.js";
 import { initHeroesVideo } from "./heroes-video.js";
@@ -19,6 +20,7 @@ const unityBootstrap = {
   initAnchorMenu,
   initBlockquoteAnimation,
   initCalendar,
+  initCollapse,
   initChart,
   initDataLayer,
   initFixedTable,

packages/unity-bootstrap-theme/src/scss/extends/_cards.scss

@@ -696,7 +696,13 @@ Cards - Table of Contents
 7. Accordion
 --------------------------------------------------------------------*/
 .accordion {
-
+  &:focus {
+    outline: none!important;
+    box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important;
+    border: 1px solid $uds-color-base-gray-7 !important;
+    margin: 4px;
+    width: -webkit-fill-available;
+  }
   .accordion-item {
     border-bottom: 1px solid $uds-color-base-gray-3;
     border-top: 1px solid $uds-color-base-gray-3;