https://www.inverantwortung.de/site/pbs-bw-rebrush2024/resourceCac…/externalLinkDialog/externalLinkDialog.js

1// Initialize a flag to control scrolling and store the previously focused element
2let isScrollDisabled = false;
3let previouslyFocusedElement = null;
4
5// Function to disable body scrolling
6function disableBodyScrollEL() {
7    if (!isScrollDisabled) {
8        document.body.style.overflow = 'hidden';
9
10        isScrollDisabled = true;
11    }
12}
13
14// Function to enable body scrolling
15function enableBodyScrollEL() {
16    if (isScrollDisabled) {
17        document.body.style.overflow = '';
18
19        isScrollDisabled = false;
20    }
21}
22
23// Function to close the dialog
24function closeDialogEL() {
25    // Hide the dialog with the ID 'dialog__external-link'
26    $("#dialog__external-link").css("display", "none");
27
28    // Restore focus to the previously focused element
29    if (previouslyFocusedElement) {
30        previouslyFocusedElement.focus();
31        previouslyFocusedElement = null;
32    }
33
34    // Re-enable body scrolling
35    enableBodyScrollEL();
36}
37
38function addOverlayCustomLink($firstDialogElement, $link) {
39    const $target = $link.closest(`.${$link.getAttribute('data-custom-overlay-target')}`);
40
41    if (!$target) {
42        return;
43    }
44
45    $link.addEventListener('click', (event) => {
46        event.preventDefault();
47        event.stopPropagation();
48
49        // Display the dialog
50        $("#dialog__external-link").css("display", "block");
51
52        // Disable body scrolling
53        disableBodyScrollEL();
54        previouslyFocusedElement = $link;
55
56        // Set the 'href' attribute of the dialog's link
57        let href = $link.getAttribute("href");
58        $(".dialog__external-link--agreed").attr("href", href);
59
60        // Focus the first element within the dialog
61        $firstDialogElement.focus();
62    });
63
64    $target.addEventListener('mouseover', () => {
65        $target.classList.add('active-overlay');
66        $target.style.cursor = 'pointer';
67    });
68
69    $target.addEventListener('mouseout', () => {
70        $target.classList.remove('active-overlay');
71        $target.removeAttribute('style');
72    });
73
74    $target.addEventListener('focusin', (event) => {
75        if (event.target === $link) {
76            $target.classList.add('active-focus-overlay');
77        }
78    });
79
80    $target.addEventListener('focusout', () => {
81        $target.classList.remove('active-focus-overlay');
82    });
83
84    $target.addEventListener('mouseup', (event) => {
85        const anotherLinkClicked = event.target.closest('a, button, .copyright--interactive');
86        if (event.button === 2 || (anotherLinkClicked && anotherLinkClicked !== $link)) {
87            return;
88        }
89
90        // Display the dialog
91        $("#dialog__external-link").css("display", "block");
92
93        // Disable body scrolling
94        disableBodyScrollEL();
95        previouslyFocusedElement = $link;
96
97        // Set the 'href' attribute of the dialog's link
98        let href = $link.getAttribute("href");
99        $(".dialog__external-link--agreed").attr("href", href);
100
101        // Focus the first element within the dialog
102        $firstDialogElement.focus();
103    });
104}
105
106// Execute code when the document is ready
107$(document).ready(function() {
108    // Find all focusable elements within the dialog
109    let dialogElements = $("#dialog__external-link").find("a, button, input, select, textarea, [tabindex]:not([tabindex='-1'])");
110    let firstDialogElement = dialogElements.first();
111    let lastDialogElement = dialogElements.last();
112
113    // Handle click event on links with class 'dialog__external-link--open'
114    document.querySelectorAll('.dialog__external-link--open').forEach(($link) => {
115        addOverlayCustomLink(firstDialogElement[0], $link);
116    });
117
118    $(".figure__play--off.dialog__external-link--open, .dialog__external-link--open.link--external").click(function(e) {
119        e.preventDefault();
120
121        // Display the dialog
122        $("#dialog__external-link").css("display", "block");
123
124        // Disable body scrolling
125        disableBodyScrollEL();
126        previouslyFocusedElement = $(this);
127
128        // Set the 'href' attribute of the dialog's link
129        var href = $(this).attr("href");
130        $(".dialog__external-link--agreed").attr("href", href);
131
132        // Focus the first element within the dialog
133        firstDialogElement.focus();
134    });

135
136    // Handle click event on links with class 'dialog__external-link--agreed'
137    $(".dialog__external-link--agreed").click(function(e) {
138        e.preventDefault();
139
140        // Close the dialog
141        closeDialogEL();
142
143        // Open the link in a new tab or window
144        var href = $(this).attr("href");
145        window.open(href, '_blank');
146    });
147
148    // Handle click event on elements with class 'dialog__external-link-close' or 'dialog__external-link--rejected'
149    $(".dialog__external-link-close, .dialog__external-link--rejected").click(function(e) {
150        // Close the dialog
151        closeDialogEL();
152    });
153
154    // Handle click event on the dialog overlay
155    $(".dialog__external-link-overlay").click(function(e) {
156        if (e.target === this) {
157            // Close the dialog when clicking outside of it
158            closeDialogEL();
159        }
160    });
161
162    // Handle keydown event for keyboard navigation within the dialog
163    $(document).on('keydown', function(e) {
164        if ($("#dialog__external-link").css("display") === "block" && e.key === "Tab") {
165            if (e.shiftKey) {
166                if (document.activeElement === firstDialogElement[0]) {
167                    // If the focus is on the first element, shift focus to the last element
168                    e.preventDefault();
169                    lastDialogElement.focus();
170                }
171            } else {
172                if (document.activeElement === lastDialogElement[0]) {
173                    // If the focus is on the last element, shift focus to the first element
174                    e.preventDefault();
175                    firstDialogElement.focus();
176                }
177            }
178        }
179    });
180});