diff --git a/assets/js/anchorlinks.js b/assets/js/anchorlinks.js
new file mode 100644
index 00000000..973eed1e
--- /dev/null
+++ b/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();
+ }
+ });
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index ab847018..800b6bd0 100644
--- a/assets/js/main.js
+++ b/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';
\ No newline at end of file
diff --git a/assets/js/mobileMenu.js b/assets/js/mobileMenu.js
index bd0321e3..d86076db 100644
--- a/assets/js/mobileMenu.js
+++ b/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();
}
diff --git a/assets/sass/anchorlink.scss b/assets/sass/anchorlink.scss
new file mode 100644
index 00000000..01ae03aa
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 7a6e0519..46346947 100644
--- a/assets/sass/main.scss
+++ b/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";
\ No newline at end of file
+@import "expander.scss";
+@import "anchorlink.scss";
\ No newline at end of file
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 789a2995..27bf04f8 100644
--- a/assets/sass/styles.scss
+++ b/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%;
}
-}
-
+}
\ No newline at end of file
diff --git a/assets/svg/default/link.svg b/assets/svg/default/link.svg
new file mode 100644
index 00000000..fb8bf00b
--- /dev/null
+++ b/assets/svg/default/link.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/i18n/de.yaml b/i18n/de.yaml
index af6aa706..8643c857 100644
--- a/i18n/de.yaml
+++ b/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.
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 6d5e7935..598964fc 100644
--- a/i18n/en.yaml
+++ b/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.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 0c9d3818..5a2d5ff7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,5 +10,8 @@
{{ block "main" . }}{{ end }}
+ {{ if and (eq .Kind "page") (or (eq .Page.Type "country") (eq .Page.Type "operator")) }}
+ {{ partial "snackbar" . }}
+ {{ end }}