Feat/sprungmarken

assets/js/anchorlinks.js

@@ -0,0 +1,45 @@
+function initAnchorlinkEventListener() {
+
+  const anchorLinks = document.querySelectorAll(".a-anchorlink__link");
+  const snackbar = document.getElementById('snackbar');
+  const snackbarButton = document.getElementById('snackbar-button');
+
+  anchorLinks.forEach((element) => {
+
+    element.addEventListener('click', () => {
+      navigator.clipboard.writeText(element.href).then(() => {
+        showSnackbar();
+      }).catch(err => {
+        console.error("Fehler beim Kopieren des Textes:", err);
+      });
+    });
+  });
+
+  snackbarButton.addEventListener('click', () => {
+    closeSnackbar();
+  });
+}
+
+function showSnackbar() {
+  snackbar.setAttribute('aria-hidden', 'false');
+  snackbar.classList.add('a-snackbar--show');
+
+  setTimeout(closeSnackbar, 5000);
+}
+
+function closeSnackbar() {
+  snackbar.setAttribute('aria-hidden', 'true');
+  snackbar.classList.remove('a-snackbar--show');
+}
+
+if (document.readyState === "interactive") {
+  if (document.querySelectorAll(".a-anchorlink__link").length) {
+    initAnchorlinkEventListener();
+  }
+} else {
+  window.addEventListener("DOMContentLoaded", () => {
+    if (document.querySelectorAll(".a-anchorlink__link").length) {
+      initAnchorlinkEventListener();
+    }
+  });
+}

assets/js/main.js

@@ -3,4 +3,5 @@ import './countrySelector.js';
 import './resizeObserver.js';
 import './mediaqueries.js';
 import './highlightHeadline.js';
+import './anchorlinks.js';
 //import './aside.js';

assets/js/mobileMenu.js

@@ -1,4 +1,3 @@
-import * as mq from './mediaqueries';
 //import {initWindowOnClick} from './windowOnClickHandling';
 
 function initMobileMenu() {
@@ -18,7 +17,7 @@ function initMobileMenu() {
   //const target =  initWindowOnClick();
 
   window.onclick = e => {
-    console.log(e.target);
+    //console.log(e.target);
     if (e.target.classList.contains('o-header__curtain')) {
       closeMobileMenu();
     }

assets/sass/anchorlink.scss

@@ -0,0 +1,60 @@
+.a-anchorlink {
+  display: flex;
+}
+
+.a-anchorlink__link {
+  display: inline-flex;
+  width: 3.2rem;
+  height: 3.2rem;
+  align-items: center;
+  justify-content: center;
+  margin-left: .8rem;
+  border-radius: var(--border-radius-s);
+  opacity: .8;
+
+  &:hover,
+  &:focus {
+    background-color: var(--bg-neutral);
+    opacity: 1;
+  }
+}
+
+.a-snackbar {
+  position: fixed;
+  bottom: 0;
+  background-color: var(--bg-accent);
+  color: var(--color-onLight);
+  padding: 1.6rem;
+  border-radius: var(--border-radius-s);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(2rem);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  margin: 1rem;
+  text-wrap: balance;
+}
+
+.a-snackbar--show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.a-snackbar_button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  margin-left: 1rem;
+  padding: 0;
+  width: 2.4rem;
+  height: 2.4rem;
+  display: flex;
+
+  svg {
+    fill: var(--color-onLight);
+  }
+}

assets/sass/main.scss

@@ -15,4 +15,5 @@ $icon-remove: '{{(resources.Get "svg/default/remove.svg" | fingerprint "md5").Re
 @import "toc.scss";
 @import "headings.scss";
 @import "form.scss";
-@import "expander.scss";
+@import "expander.scss";
+@import "anchorlink.scss";

assets/sass/styles.scss

@@ -16,7 +16,7 @@ header {
 
 a:not(.m-teaser) {
   color: var(--link-default);
-  transition: fill 0.3s ease;
+  transition: all 0.3s ease;
   text-underline-offset: .2rem;
 
   &:hover,
@@ -178,7 +178,7 @@ section p:last-child {
 }
 
 .o-single__header__title h1 {
-  margin-bottom: 0rem;
+  margin-bottom: 0;
 }
 
 .o-single__header__title img {
@@ -202,5 +202,4 @@ section p:last-child {
     height: 2.4rem;
     opacity: 50%;
   }
-}
-
+}

i18n/de.yaml

@@ -27,6 +27,9 @@ toc-backlink: Zurück zu
 editPage: Seite bearbeiten
 list-disclaimer: Momemtan sind noch nicht für alle Länder und Betreiber Informationen verfügbar. Den aktuellen Bearbeitungsstand findest du auf
 list-disclaimer-link: GitHub
+anchorLink:
+  copy: Link zu diesem Abschnitt kopieren
+  copied: Link wurde in die Zwischenablage kopiert
 meta-description:
   country: Überblick über die Länder, in denen FIP-Vergünstigungen genutzt werden können.
   operator: Überblick über die Betreiber, die FIP-Vergünstigungen anbieten.

i18n/en.yaml

@@ -27,6 +27,9 @@ toc-backlink: Back to
 editPage: Edit page
 list-disclaimer: Currently, information is not yet available for all countries and operators. You can see the current information status on
 list-disclaimer-link: GitHub
+anchorLink:
+  copy: Copy link to this section
+  copied: Link has been copied to the clipboard
 meta-description:
   country: Overview of the countries where FIP benefits are available.
   operator: Overview of the operators providing FIP benefits.

layouts/_default/baseof.html

@@ -10,5 +10,8 @@
     <header id="header" class="o-header">{{ partial "header.html" . }}</header>
     <main id="content">{{ block "main" . }}{{ end }}</main>
     <footer>{{ partial "footer.html" . }}</footer>
+    {{ if and (eq .Kind "page") (or (eq .Page.Type "country") (eq .Page.Type "operator")) }}
+      {{ partial "snackbar" . }}
+    {{ end }}
   </body>
 </html>

layouts/country/single.html

@@ -21,7 +21,9 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
                 </div>
 
                 <div class="content" data-pagefind-weight="2">
-                    {{ .Content }}
+                    {{- with .Content -}}
+                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "ico" (dict "icon" "link")) `</a></span>`) | safeHTML }}
+                    {{- end -}}
                 </div>
             </div>
             <div class="o-single__container">

layouts/operator/single.html

@@ -19,7 +19,9 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
                 </div>
 
                 <div class="content" data-pagefind-weight="2.5">
-                    {{ .Content }}
+                    {{- with .Content -}}
+                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "copyAnchorLink") `">` (partial "ico" (dict "icon" "link")) `</a></span>`) | safeHTML }}
+                    {{- end -}}
                 </div>
             </div>
         </div>

layouts/partials/snackbar.html

@@ -0,0 +1,6 @@
+<div id="snackbar" role="status" aria-live="polite" class="a-snackbar" aria-hidden="true">
+  <span>{{ T "anchorLink.copied" }}</span>
+  <button id="snackbar-button" title='{{ T "menu-close" }}' class="a-snackbar_button">
+    {{ partial "ico" (dict "icon" "close" ) }}
+  </button>
+</div>