https://bskw.pl/templates/bskw/js/megamenu.js?v=1790686980

1/**
2 * Mega menu: podmenu (Oferta, Bezpieczenstwo, Twoj Bank) jako panel z kafelkami.
3 *
4 * Menu jest zapisane w artykule (id 359), dlatego nie zmieniamy jego HTML w bazie – skrypt dokleja
5 * do kazdej pozycji podmenu ikone i krotki opis (dopasowanie po fragmencie adresu lub nazwie),
6 * a na gorze panelu naglowek z linkiem "Zobacz wszystko". Wyglad: css/style.css (sekcja "Mega menu").
7 * Na telefonie (menu wysuwane z boku) dodane elementy sa ukryte w CSS.
8 */
9(function () {
10    'use strict';
11
12    // [fragment adresu lub nazwy (male litery), ikona Font Awesome, opis]
13    var OPISY = [
14        ['oferta-dla-ciebie', 'fa-user', 'Konta, lokaty, kredyty i karty dla klientów indywidualnych'],
15        ['oferta-dla-firmy', 'fa-briefcase', 'Rachunki, finansowanie i obsługa przedsiębiorców'],
16        ['oferta-dla-agrobiznesu', 'fa-tractor', 'Kredyty i obsługa gospodarstw rolnych'],
17
18        ['bezpieczenstwo-finansow', 'fa-shield-halved', 'Jak chronić swoje pieniądze na co dzień'],
19        ['bezpieczne-korzystanie', 'fa-laptop', 'Zasady bezpiecznego logowania i przelewów'],
20        ['cyber-edukacja', 'fa-graduation-cap', 'Materiały o zagrożeniach w internecie'],
21        ['komunikaty-bezpieczenstwa', 'fa-triangle-exclamation', 'Aktualne ostrzeżenia i komunikaty'],
22
23        ['misja', 'fa-bullseye', 'Nasze wartości i cele'],
24        ['historia', 'fa-landmark', 'Tradycja banku spółdzielczego'],
25        ['wladze-banku', 'fa-users', 'Zarząd i Rada Nadzorcza'],
26        ['czlonkostwo', 'fa-handshake', 'Jak zostać członkiem banku'],
27        ['rynek-lokalny', 'fa-map-location-dot', 'Nasz obszar działania'],
28        ['jubileusz', 'fa-award', 'Jubileusz banku'],
29        ['oferta-pracy', 'fa-user-tie', 'Aktualne oferty pracy'],
30        ['e-doreczenia', 'fa-envelope-open-text', 'Adres do e-Doręczeń'],
31        ['naruszen-prawa', 'fa-scale-balanced', 'Zgłaszanie naruszeń prawa (sygnaliści)']
32    ];
33
34    var IKONA_DOMYSLNA = 'fa-circle-chevron-right';
35
36    function dopasuj(link) {
37        var klucz = ((link.getAttribute('href') || '') + ' ' + link.textContent).toLowerCase()
38            .normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/ł/g, 'l');
39
40        for (var i = 0; i < OPISY.length; i++) {
41            if (klucz.indexOf(OPISY[i][0]) !== -1) {
42                return OPISY[i];
43            }
44        }
45
46        return null;
47    }
48
49    function element(tag, klasa, tekst) {
50        var e = document.createElement(tag);
51        e.className = klasa;
52        if (tekst) {
53            e.textContent = tekst;
54        }
55        return e;
56    }
57
58    document.addEventListener('DOMContentLoaded', function () {
59        var menu = document.getElementById('headernavigation');
60
61        if (!menu) {
62            return;
63        }
64
65        menu.querySelectorAll(':scope > li.dropdown').forEach(function (pozycja) {
66            var rodzic = pozycja.querySelector(':scope > a');
67            var podmenu = pozycja.querySelector(':scope > .dropdown-menu');
68
69            if (!rodzic || !podmenu) {
70                return;
71            }
72
73            podmenu.classList.add('mega-panel');
74
75            // naglowek panelu: nazwa sekcji + "Zobacz wszystko" (gdy sekcja ma wlasna strone)
76            var naglowek = element('li', 'mega-naglowek');
77            naglowek.appendChild(element('span', 'mega-naglowek__tytul', rodzic.textContent.trim()));
78
79            var adresRodzica = rodzic.getAttribute('href');
80            if (adresRodzica && adresRodzica !== '#') {
81                var wszystko = element('a', 'mega-naglowek__link', 'Zobacz wszystko');
82                wszystko.href = adresRodzica;
83                naglowek.appendChild(wszystko);
84            }
85
86            podmenu.insertBefore(naglowek, podmenu.firstChild);
87
88            // kafelki: ikona + tytul + opis
89            // (bez naglowka panelu – "Zobacz wszystko" ma zostac zwyklym napisem)
90            podmenu.querySelectorAll(':scope > li:not(.mega-naglowek) > a').forEach(function (link) {
91                var dane = dopasuj(link);
92                var tytul = link.textContent.trim();
93
94                link.textContent = '';
95                link.classList.add('mega-kafel');
96
97                var ikona = element('span', 'mega-ikona');
98                ikona.setAttribute('aria-hidden', 'true');

99                ikona.appendChild(element('i', 'fa-solid ' + (dane ? dane[1] : IKONA_DOMYSLNA)));
100
101                link.appendChild(ikona);
102                link.appendChild(element('span', 'mega-tytul', tytul));
103
104                if (dane) {
105                    link.appendChild(element('span', 'mega-opis', dane[2]));
106                }
107            });
108        });
109
110        // Esc zamyka panel otwarty z klawiatury
111        document.addEventListener('keydown', function (e) {
112            if (e.key === 'Escape' && menu.contains(document.activeElement)) {
113                var otwarta = document.activeElement.closest('#headernavigation > li.dropdown');
114                if (otwarta) {
115                    otwarta.querySelector(':scope > a').focus();
116                    otwarta.classList.add('mega-zamkniete');
117                }
118            }
119        });
120
121        menu.addEventListener('mouseover', function (e) {
122            var pozycja = e.target.closest('#headernavigation > li.dropdown');
123            if (pozycja) {
124                pozycja.classList.remove('mega-zamkniete');
125            }
126        });
127
128        menu.addEventListener('focusin', function (e) {
129            var pozycja = e.target.closest('#headernavigation > li.dropdown');
130            if (pozycja && e.target.closest('.mega-panel')) {
131                pozycja.classList.remove('mega-zamkniete');
132            }
133        });
134    });
135})();