feat: Add support for dialogs (#680)

Dialogs are a helpful element for presenting content without cluttering
the main page. They are basis for the implementation of #446 and #558.

A dialog usually consists of two parts: The trigger and the dialog
content.

If you want to use dialogs in the Markdown content, we provide two
helpers for dialog creation and linking.
To add the dialog content, add the following shortcode to the respective
page content:

```md
{{% dialog
  id="test"
  title="Test"
%}}
This is the content of the dialog.
{{% /dialog %}}
```
**IMPORTANT:** The dialog id must be unique on the relevant page.

As you'll notice, there is no change to the page. We have to create a
trigger. The easiest way is link-based trigger. You can reference the
dialog by ID:

```
[This is the trigger for the dialog](dialog:test)
```

For better visualization, I added the "[FIP Guide Team email inquiry to
Stena
Line](https://deploy-preview-680--fipguide.netlify.app/de/operator/stl/#quellen)"
source as dialog.


TODO:

- [x] z-index of overlay has to be increased to cover the header
- [x] For better contrast add border to dialog
- [x] New lines for email header
- [x] Button alignment on mobile

---------

Co-authored-by: Robert Schuster <77234379+therobrob@users.noreply.github.com>

Author: MoritzWeber0

assets/js/contentNavigation.js

@@ -19,6 +19,8 @@ const initAside = () => {
   let isClosed = true;
 
   const closeSheet = () => {
+    if (isClosed) return;
+
     isClosed = true;
     aside.classList.remove("o-aside--open");
     asideContent.removeAttribute("role");
@@ -107,10 +109,9 @@ const initAside = () => {
       wasMobile = true;
       closeSheet();
     }
-    if (!isMobile()) {
+    if (wasMobile && !isMobile()) {
       wasMobile = false;
-      closeOverlay();
-      aside.classList.remove("o-aside--open");
+      closeSheet();
     }
   };
 

assets/js/dialog.js

@@ -0,0 +1,63 @@
+function getCloseButton(dialog) {
+  return dialog.querySelector(".o-dialog__header > .a-button");
+}
+
+function openDialog(dialogId) {
+  const dialog = document.getElementById(dialogId);
+  if (!dialog) return;
+
+  dialog.showModal();
+}
+
+function openDialogOnHash() {
+  const hash = window.location.hash;
+  if (!hash) return;
+
+  const targetId = decodeURIComponent(hash.substring(1));
+  const targetElement = document.getElementById(targetId);
+
+  if (targetElement) {
+    const dialog = targetElement.closest("dialog");
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+  }
+}
+
+function initDialogs() {
+  document.querySelectorAll("dialog").forEach((dialog) => {
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) {
+        dialog.close();
+      }
+    });
+
+    const closeButton = getCloseButton(dialog);
+    if (closeButton) {
+      closeButton.addEventListener("click", () => dialog.close());
+    }
+  });
+
+  document.querySelectorAll("[data-dialog-trigger]").forEach((trigger) => {
+    const handler = (e) => {
+      if (e.type === "click" || (e.type === "keydown" && e.key === "Enter")) {
+        e.preventDefault();
+        const dialogId = trigger.getAttribute("data-dialog-trigger");
+        openDialog(dialogId);
+      }
+    };
+
+    trigger.addEventListener("click", handler);
+    trigger.addEventListener("keydown", handler);
+  });
+
+  // Initialize hash check
+  openDialogOnHash();
+  window.addEventListener("hashchange", openDialogOnHash);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initDialogs);
+} else {
+  initDialogs();
+}

assets/js/main.js

@@ -9,3 +9,4 @@ import "./dropdown.js";
 import "./search.js";
 import "./interactiveMap.js";
 import "./expander.js";
+import "./dialog.js";

assets/js/mobileMenu.js

@@ -39,6 +39,8 @@ function closeMobileMenu() {
   const navContainer = document.querySelector(".o-header__nav");
   const menuButton = document.querySelector(".o-nav__menu-button");
 
+  if (!navContainer.classList.contains("o-header__nav--open")) return;
+
   navContainer.classList.remove("o-header__nav--open");
   menuButton.setAttribute("aria-expanded", false);
   closeOverlay();

assets/sass/button.scss

@@ -3,7 +3,6 @@
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  border: 0.2rem solid var(--link-default);
   border-radius: var(--border-radius-m);
   font-size: 1.5rem;
   cursor: pointer;
@@ -25,4 +24,12 @@
     padding: 0.6rem;
     display: block;
   }
+
+  &__external {
+    border: 0.2rem solid var(--link-default);
+  }
+
+  &__internal {
+    border: none;
+  }
 }

assets/sass/dialog.scss

@@ -0,0 +1,69 @@
+.o-dialog {
+  max-height: calc(100dvh - 14rem);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+
+  .a-anchorlink {
+    margin-bottom: 0;
+
+    &__link {
+      display: none;
+    }
+
+    > h2 {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .o-divider {
+    display: none;
+  }
+
+  &__wrapper {
+    width: fit-content;
+    border: none;
+    padding: 0;
+    background-color: var(--bg-default);
+    color: var(--color-body);
+    border-radius: var(--border-radius-m);
+    border: var(--border);
+    overflow: hidden;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(4px);
+    }
+  }
+
+  &__header {
+    position: sticky;
+    top: 0;
+    background-color: var(--bg-default);
+    display: flex;
+    column-gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1rem 1rem 2rem;
+    border-bottom: var(--border);
+    border-color: var(--color-table-border);
+
+    .o-divider {
+      display: none;
+    }
+
+    > h1 {
+      margin: 0;
+      font-size: 2.2rem;
+    }
+  }
+
+  &__body {
+    padding: 2rem;
+    overflow: auto;
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

assets/sass/header.scss

@@ -102,6 +102,12 @@
   z-index: 14;
 }
 
-body:has(.overlay--show) {
+#header:has(.overlay--dialog),
+.overlay--dialog {
+  z-index: 10;
+}
+
+body:has(.overlay--show),
+body:has(dialog[open]) {
   overflow: hidden;
 }

assets/sass/main.scss

@@ -23,3 +23,4 @@
 @import "tag.scss";
 @import "floatImage.scss";
 @import "teamMember.scss";
+@import "dialog.scss";

assets/sass/styles.scss

@@ -57,13 +57,16 @@ button {
   @include focus-indicator(0.2rem);
 }
 
-a {
+a,
+.o-link {
   color: var(--link-default);
   transition:
     color 0.3s ease,
     background-color 0.3s ease;
   text-underline-offset: 0.2rem;
   border-radius: var(--border-radius-s);
+  text-decoration: underline;
+  cursor: pointer;
 
   &:hover,
   &:focus {
@@ -80,6 +83,10 @@ a {
       display: none;
     }
   }
+
+  & > .material-symbols-rounded {
+    margin: 0 0.2rem;
+  }
 }
 
 main {

content/country/belgium/index.en.md

@@ -17,7 +17,7 @@ Additionally, international [Eurostar](/operator/eurostar "Eurostar") trains ope
 Furthermore, international `TGV` trains of the [SNCF](/operator/sncf "SNCF") from France operate, for which the FIP Coupon of SNCB are not valid. Only special FIP Global Fares can be booked for these trains. For the Eurocity trains from Brussels to Paris operated by OUIGO, no FIP discounts apply.
 
 {{< identify-operator sources="db-website,vagonweb" >}}
-Not all trains in the country (e. g. `ICE`) are shown in the [SNCB / NMBS online timetable](https://www.belgiantrain.be/en/).
+Not all trains in the country (e.g. `ICE`) are shown in the [SNCB / NMBS online timetable](https://www.belgiantrain.be/en/).
 {{< /identify-operator >}}
 
 ## Interesting