@aarhus-university/au-designsystem-delphinus 0.32.0 → 0.33.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.33.0 (November 14, 2022)
+
+### Core Delphinus Updates
+Content-Toggle and Toolbar scripts updated to reflect Course Catalogue behaviour.
+
+### Delphinus Projects Updates
+None
+
 ## 0.32.0 (November 3, 2022)
 
 ### Core Delphinus Updates

package/build/projects/typo3/js/typo3.js

@@ -1,2 +1,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";n.r(t);(e=>{"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e)})(()=>{const e=document.querySelector(".button-container button:nth-of-type(1)"),t=document.querySelector(".button-container button:nth-of-type(2)"),n=document.querySelector(".button-container button:nth-of-type(3)"),o=document.querySelector(".button-container button:nth-of-type(4)");e&&e.addEventListener("click",()=>{const e=document.getElementById("event-info"),t=document.getElementById("byline");e&&t&&(e.removeAttribute("style"),t.parentNode.removeChild(t))}),t&&t.addEventListener("click",()=>{const e=document.getElementById("hero-image");e&&e.parentNode.removeChild(e)}),n&&n.addEventListener("click",()=>{const e=document.getElementById("first-side-image");e&&e.parentNode.removeChild(e)}),o&&o.addEventListener("click",()=>{const e=document.getElementById("second-side-image");e&&e.parentNode.removeChild(e)})})}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";n.r(t);(e=>{"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e)})(()=>{const e=document.querySelector(".button-container button:nth-of-type(1)"),t=document.querySelector(".button-container button:nth-of-type(2)"),n=document.querySelector(".button-container button:nth-of-type(3)"),o=document.querySelector(".button-container button:nth-of-type(4)");e&&e.addEventListener("click",()=>{const e=document.getElementById("event-info"),t=document.getElementById("byline");e&&t&&(e.removeAttribute("style"),t.parentNode.removeChild(t))}),t&&t.addEventListener("click",()=>{const e=document.getElementById("hero-image");e&&e.parentNode.removeChild(e)}),n&&n.addEventListener("click",()=>{const e=document.getElementById("first-side-image");e&&e.parentNode.removeChild(e)}),o&&o.addEventListener("click",()=>{const e=document.getElementById("second-side-image");e&&e.parentNode.removeChild(e)})})}])}));
 //# sourceMappingURL=typo3.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aarhus-university/au-designsystem-delphinus",
   "sideEffects": false,
-  "version": "0.32.0",
+  "version": "0.33.0",
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",

package/source/js/components/content-toggle.ts

@@ -1,6 +1,10 @@
 /* eslint-env browser */
 /* eslint-disable import/prefer-default-export */
-const setContentToggle = (content: Element): Element | null => {
+const setContentToggle = (
+  content: Element,
+  beforeCallback: (() => void | undefined),
+  afterCallback: ((button: HTMLButtonElement) => void) | undefined,
+): CleanUpPair | null => {
   const setContentClose = (button: HTMLElement, contentClose: HTMLElement, focus: boolean) => {
     if (contentClose) {
       if (focus) {
@@ -21,8 +25,14 @@ const setContentToggle = (content: Element): Element | null => {
   const contentClose = content.querySelector('.content-toggle__close') as HTMLElement;
 
   if (button) {
-    button.addEventListener('click', () => {
+    const clickEvent = () => {
       const ariaExpanded = button.getAttribute('aria-expanded');
+      // Til toolbar: hvis man klikker på en knap, der ikke er foldet ud
+      // Så lukker vi alle åbne content-toggles
+      if (typeof beforeCallback === 'function' && ariaExpanded === 'false') {
+        beforeCallback();
+      }
+      // Og så går vi i gang med folde-ud-logikken
       button.setAttribute('aria-expanded', ariaExpanded === 'false' ? 'true' : 'false');
       if (ariaExpanded === 'true') {
         content.setAttribute('hidden', 'hidden');
@@ -34,11 +44,21 @@ const setContentToggle = (content: Element): Element | null => {
         button.setAttribute('hidden', 'hidden');
         setContentClose(button, contentClose, true);
       }
-    });
+
+      if (typeof afterCallback === 'function') {
+        afterCallback(button as HTMLButtonElement);
+      }
+    };
+
+    button.addEventListener('click', clickEvent);
 
     setContentClose(button, contentClose, false);
+    return {
+      element: button,
+      clickEvent,
+    };
   }
-  return button;
+  return null;
 };
 
 export {

package/source/js/components/toolbar.ts

@@ -1,4 +1,14 @@
+import { isElementWithClassNameInEventPath } from './helpers';
+
 /* eslint-env browser */
+const closeAllContentTogglesInToolbar = (toolbar: HTMLElement): void => {
+  const contentToggles = toolbar.querySelectorAll('.content-toggle__toggle');
+  contentToggles.forEach((toggle) => {
+    const content = toggle.parentElement?.querySelector('.content-toggle__content');
+    toggle.setAttribute('aria-expanded', 'false');
+    content?.setAttribute('hidden', 'hidden');
+  });
+};
 
 const setToolbars = (): void => {
   const setOverflow = (toolbarElement: Element): void => {
@@ -11,10 +21,8 @@ const setToolbars = (): void => {
     let hasOverflown = false;
 
     let overflownCount = 0;
-    for (let i = toolbarItems.length - 1; i >= 0; i -= 1) {
-      const item = toolbarItems[i] as HTMLElement;
+    const addOverflowClass = (item: HTMLElement, index: number) => {
       const top = item.offsetTop;
-
       if (top > 25) {
         item.classList.add(isOverflownClass);
         toolbarElement.classList.add(hasOverflowClass);
@@ -26,8 +34,12 @@ const setToolbars = (): void => {
 
       if (!hasOverflown) {
         toolbarElement.classList.remove(hasOverflowClass);
+      } else if (index - 1 >= 0) {
+        addOverflowClass(toolbarItems[index - 1] as HTMLElement, index - 1);
       }
-    }
+    };
+
+    addOverflowClass(toolbarItems[toolbarItems.length - 1] as HTMLElement, toolbarItems.length - 1);
 
     if (overflownCount > 0 && overflownCount === toolbarItems.length) {
       toolbarElement.classList.add('toolbar--fully-overflown');
@@ -38,6 +50,18 @@ const setToolbars = (): void => {
   toolbarElements.forEach((t) => {
     setOverflow(t);
   });
+
+  const body = document.querySelector('body');
+  const bodyClickEvent = (e: Event) => {
+    if (!(e.target as HTMLElement).classList.contains('content-toggle__toggle')
+      && !isElementWithClassNameInEventPath(e as MouseEvent, 'content-toggle__content')) {
+      toolbarElements.forEach((t) => {
+        closeAllContentTogglesInToolbar(t as HTMLElement);
+      });
+    }
+  };
+
+  body?.addEventListener('click', bodyClickEvent);
 };
 
 const setToolbarToggle = (): CleanUpPair[] => {
@@ -65,7 +89,20 @@ const setToolbarToggle = (): CleanUpPair[] => {
   return cleanUp;
 };
 
+const findToolbar = (element: HTMLElement): HTMLElement => {
+  const parent = element.parentElement;
+  if (parent) {
+    if (parent.classList.contains('toolbar')) {
+      return parent;
+    }
+    return findToolbar(parent);
+  }
+  return element;
+};
+
 export {
   setToolbars,
   setToolbarToggle,
+  findToolbar,
+  closeAllContentTogglesInToolbar as closeAllContentToggledToolbars,
 };

package/source/js/production/app.ts

@@ -9,6 +9,7 @@ import { setMetaThemeColor } from '../components/helpers';
 import { setResponsiveTable } from '../components/table';
 import { setTabbedContent, isBelowViewportLimit, destroyTabs } from '../components/tabs';
 import { setContentToggle } from '../components/content-toggle';
+import { closeAllContentToggledToolbars, findToolbar } from '../components/toolbar';
 
 let windowInnerWidth = 0;
 
@@ -50,7 +51,19 @@ ready(() => {
 
   const toggles = document.querySelectorAll('.content-toggle__content');
   toggles.forEach((toggle) => {
-    setContentToggle(toggle);
+    const toolbar = findToolbar(toggle as HTMLElement);
+    setContentToggle(
+      toggle,
+      () => closeAllContentToggledToolbars(toolbar),
+      (button: HTMLButtonElement) => {
+        const ariaExpanded = button.getAttribute('aria-expanded');
+        if (ariaExpanded === 'true') {
+          toolbar?.classList.add('toolbar--has-popout');
+        } else {
+          toolbar?.classList.remove('toolbar--has-popout');
+        }
+      },
+    );
   });
 
   window.addEventListener('load', () => {