Merge pull request #32 from itk-dev/feature/deltag-aarhus-hoeringsdetalje-additions

feat: embed explainer video in Høring glossary tooltip (deltag-aarhus)

Author: yepzdk

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Added — Explainer video in "Høring" glossary tooltip (deltag-aarhus)
+- The "Høring" glossary tooltip now shows an embedded explainer video above the existing definition text, so readers can watch or read. The player is a self-contained mock poster frame (no external video host); clicking play reveals a "mock" note below it while the poster stays in place.
+- Added a close (X) button to every glossary tooltip so it can be dismissed directly, not only by clicking outside.
+
 ### Added — Arbejdsmiljøhandleplan Project
 - Clickable prototype of a digital work-environment action plan for Aarhus Kommune, based on Borgmesterens Afdeling's Word template — copied from the `arbejdsmiljo-handleplan` concept
 - Minimal overview (`index.md`) with background, purpose, what the prototype shows and demo logins, plus a `mocks.md` listing page

docs/public/projects/deltag-aarhus/mocks/css/glossary.css

@@ -34,6 +34,7 @@
   border: 1px solid var(--border-default);
   box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
   padding: 16px;
+  padding-right: 36px; /* room for the close button */
   width: 320px;
   font-family: var(--font-family-inter);
   font-size: var(--fs-small);
@@ -50,6 +51,143 @@
   font-weight: var(--fw-semibold);
 }
 
+/* Close (X) button — top-right of every tooltip */
+.glossary-term__close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+.glossary-term__close:hover {
+  background: var(--gray-100);
+  color: var(--text-primary);
+}
+
+.glossary-term__close:focus-visible {
+  outline: 2px solid var(--petroleum);
+  outline-offset: 1px;
+}
+
 .glossary-term--open > .glossary-term__tooltip {
   display: block;
 }
+
+/* Tooltip with an embedded explainer video — wider so the 16:9 frame is legible.
+   Anchored below the term: the video makes it tall, and the glossary terms sit
+   near the top of the body text where there isn't room to open upward. */
+.glossary-term__tooltip--video {
+  width: 360px;
+  bottom: auto;
+  top: calc(100% + 8px);
+}
+
+.glossary-video {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin-bottom: 12px;
+  border: none;
+  padding: 0;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  /* Mock poster frame — brand-tinted gradient stands in for a real thumbnail */
+  background: linear-gradient(135deg, var(--petroleum-900) 0%, var(--petroleum) 100%);
+  color: var(--white);
+  font-family: var(--font-family-inter);
+}
+
+.glossary-video__play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 92%);
+  color: var(--petroleum-900);
+  font-size: 18px;
+  padding-left: 3px; /* optically center the triangle */
+  transition: transform var(--transition-fast), background var(--transition-fast);
+}
+
+.glossary-video:hover .glossary-video__play,
+.glossary-video:focus-visible .glossary-video__play {
+  transform: translate(-50%, -50%) scale(1.08);
+  background: var(--white);
+}
+
+.glossary-video:focus-visible {
+  outline: 2px solid var(--white);
+  outline-offset: 2px;
+}
+
+.glossary-video__caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px 10px;
+  background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  text-align: left;
+}
+
+.glossary-video__duration {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgb(0 0 0 / 65%);
+  font-size: var(--fs-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Definition text under the video — keep it clearly separated and readable.
+   A <span> (block via CSS) because the tooltip itself is an inline <span>,
+   which cannot legally contain block elements like <p>. */
+.glossary-video__text {
+  display: block;
+}
+
+/* Mock "playing" note — appears under the poster when play is clicked.
+   The poster stays in place; this just signals it's a mock. */
+.glossary-video__note {
+  display: none;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--petroleum-100);
+  color: var(--petroleum-900);
+  font-size: var(--fs-xs);
+  line-height: 16px;
+}
+
+.glossary-video__note i {
+  margin-right: 6px;
+}
+
+.glossary-term--video-played .glossary-video__note {
+  display: block;
+}

docs/public/projects/deltag-aarhus/mocks/index.html

@@ -146,11 +146,11 @@ <h1 class="hearing-header__title">Forslag til Lokalplan nr. 1237 med miljøvurde
   <div class="body-section">
     <div class="body-section__content">
       <div class="body-section__text">
-        <p><span class="glossary-term" data-glossary="hoering">Høringen<button class="glossary-term__icon" aria-label="Forklaring af høring"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip">En høring er en periode hvor borgere, organisationer og myndigheder kan komme med kommentarer og forslag til et bestemt planforslag, før det vedtages endeligt. <a href="#">Læs mere om høringer</a></span></span> vedrører Forslag til Lokalplan nr. 1237 med tilhørende miljøvurderingsrapport for opstilling af vindmøller ved Vosnæs nord for Aarhus. Bemærk at høringssvar først gennemgås efter endt høringsfrist.</p>
+        <p><span class="glossary-term" data-glossary="hoering">Høringen<button class="glossary-term__icon" aria-label="Forklaring af høring"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip glossary-term__tooltip--video"><button type="button" class="glossary-term__close" aria-label="Luk forklaring"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button><button type="button" class="glossary-video" aria-label="Afspil video: Hvad er en høring? (1:32)"><span class="glossary-video__duration">1:32</span><span class="glossary-video__play" aria-hidden="true"><i class="fa-solid fa-play"></i></span><span class="glossary-video__caption">Hvad er en høring?</span></button><span class="glossary-video__note"><i class="fa-solid fa-circle-info" aria-hidden="true"></i>Dette er en mock — videoen afspilles ikke.</span><span class="glossary-video__text">En høring er en periode hvor borgere, organisationer og myndigheder kan komme med kommentarer og forslag til et bestemt planforslag, før det vedtages endeligt. <a href="#">Læs mere om høringer</a></span></span></span> vedrører Forslag til Lokalplan nr. 1237 med tilhørende miljøvurderingsrapport for opstilling af vindmøller ved Vosnæs nord for Aarhus. Bemærk at høringssvar først gennemgås efter endt høringsfrist.</p>
       </div>
       <div class="body-section__text">
-        <p>Aarhus Kommune har udarbejdet forslag til lokalplan for Vosnæs-området samt tillæg nr. 169 til <span class="glossary-term" data-glossary="kommuneplan">Kommuneplan 2017<button class="glossary-term__icon" aria-label="Forklaring af Kommuneplan 2017"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip">Kommuneplanen er kommunens overordnede plan for arealanvendelse de næste 12 år. Den sætter rammerne for hvad der må bygges hvor. <a href="#">Læs mere om kommuneplanen</a></span></span>. Der er gennemført en samlet <span class="glossary-term" data-glossary="miljoevurdering">miljøvurdering<button class="glossary-term__icon" aria-label="Forklaring af miljøvurdering"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip">En miljøvurdering er en systematisk vurdering af, hvordan et planforslag eller projekt påvirker miljøet — fx natur, støj, landskab og menneskers sundhed. Den er lovpligtig ved væsentlig miljøpåvirkning. <a href="#">Læs mere om miljøvurdering</a></span></span> for alle planer og projekter i området.</p>
-        <p>Planerne kan ses på Aarhus Lokalplanportal samt fysisk på Dokk1 Hovedbibliotek fra den 5. juni 2025. Lokalplanen udlægger området til <span class="glossary-term" data-glossary="tekniske-anlaeg">tekniske anlæg<button class="glossary-term__icon" aria-label="Forklaring af tekniske anlæg"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip">Tekniske anlæg dækker over installationer som vindmøller, solcelleanlæg, transformerstationer og lignende infrastruktur, der er nødvendig for energiforsyning og teknisk drift. <a href="#">Læs mere om tekniske anlæg</a></span></span> og muliggør opstilling af tre vindmøller med en totalhøjde på op til 150 meter.</p>
+        <p>Aarhus Kommune har udarbejdet forslag til lokalplan for Vosnæs-området samt tillæg nr. 169 til <span class="glossary-term" data-glossary="kommuneplan">Kommuneplan 2017<button class="glossary-term__icon" aria-label="Forklaring af Kommuneplan 2017"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip"><button type="button" class="glossary-term__close" aria-label="Luk forklaring"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>Kommuneplanen er kommunens overordnede plan for arealanvendelse de næste 12 år. Den sætter rammerne for hvad der må bygges hvor. <a href="#">Læs mere om kommuneplanen</a></span></span>. Der er gennemført en samlet <span class="glossary-term" data-glossary="miljoevurdering">miljøvurdering<button class="glossary-term__icon" aria-label="Forklaring af miljøvurdering"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip"><button type="button" class="glossary-term__close" aria-label="Luk forklaring"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>En miljøvurdering er en systematisk vurdering af, hvordan et planforslag eller projekt påvirker miljøet — fx natur, støj, landskab og menneskers sundhed. Den er lovpligtig ved væsentlig miljøpåvirkning. <a href="#">Læs mere om miljøvurdering</a></span></span> for alle planer og projekter i området.</p>
+        <p>Planerne kan ses på Aarhus Lokalplanportal samt fysisk på Dokk1 Hovedbibliotek fra den 5. juni 2025. Lokalplanen udlægger området til <span class="glossary-term" data-glossary="tekniske-anlaeg">tekniske anlæg<button class="glossary-term__icon" aria-label="Forklaring af tekniske anlæg"><i class="fa-solid fa-circle-question" aria-hidden="true"></i></button><span class="glossary-term__tooltip"><button type="button" class="glossary-term__close" aria-label="Luk forklaring"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>Tekniske anlæg dækker over installationer som vindmøller, solcelleanlæg, transformerstationer og lignende infrastruktur, der er nødvendig for energiforsyning og teknisk drift. <a href="#">Læs mere om tekniske anlæg</a></span></span> og muliggør opstilling af tre vindmøller med en totalhøjde på op til 150 meter.</p>
       </div>
 
       <div class="body-section__dates">

docs/public/projects/deltag-aarhus/mocks/js/glossary.js

@@ -23,10 +23,31 @@ DM.initGlossary = function() {
     });
   });
 
+  // Mock video player — reveal a "this is a mock" note under the poster.
+  // The poster stays in place; clicking play does not close the tooltip.
+  document.querySelectorAll(".glossary-video").forEach(function(player) {
+    player.addEventListener("click", function(e) {
+      e.stopPropagation();
+      var term = player.closest(".glossary-term");
+      term.classList.add("glossary-term--video-played");
+    });
+  });
+
+  // Close (X) button inside a tooltip
+  document.querySelectorAll(".glossary-term__close").forEach(function(btn) {
+    btn.addEventListener("click", function(e) {
+      e.stopPropagation();
+      var term = btn.closest(".glossary-term");
+      term.classList.remove("glossary-term--open");
+      term.classList.remove("glossary-term--video-played");
+    });
+  });
+
   // Close tooltips on outside click
   document.addEventListener("click", function() {
     document.querySelectorAll(".glossary-term--open").forEach(function(t) {
       t.classList.remove("glossary-term--open");
+      t.classList.remove("glossary-term--video-played");
     });
   });
 };