https://bskw.pl/templates/bskw/js/kalkulator-boczny.js?v=1791209347

1/**
2 * Wysuwany kalkulator raty (BSI) – zakladka "Oblicz rate" przy lewej krawedzi ekranu.
3 *
4 * Ramka BSI i jej skrypt (iframe.js – dopasowuje wysokosc ramki) laduja sie dopiero przy pierwszym
5 * otwarciu panelu, zeby nie spowalniac strony. Zamykanie: krzyzyk, Esc, klikniecie poza panelem.
6 * Wyglad: css/style.css (sekcja "Wysuwany kalkulator").
7 */
8(function () {
9    'use strict';
10
11    // identyfikator z kodu osadzenia BSI – musi pasowac do kalkulatora z data-src w index.php
12    // (teraz: nr 2302 "Szybki Kredyt"; wczesniej nr 1137 "Kredyt Gotowkowy ELASTYCZNY": bsi-901e5f5c...29471)
13    var ID_RAMKI = 'bsi-594686bcfe8a1c52aa5c6ab2feadeac31c7fbc9815ad68487b60d946a12e4765';
14
15    document.addEventListener('DOMContentLoaded', function () {
16        var zakladka = document.getElementById('kalk-zakladka');
17        var panel = document.getElementById('kalk-panel');
18
19        if (!zakladka || !panel) {
20            return;
21        }
22
23        var ramka = panel.querySelector('.kalk-panel__ramka');
24        var zamknij = panel.querySelector('.kalk-panel__zamknij');
25        var zaladowany = false;
26        var iframe = null;
27
28        /*
29         * Dopasowanie do okna (wysokosc kalkulatora podaje BSI):
30         * - komputer: gdy kalkulator z naglowkiem nie miesci sie w oknie, jest proporcjonalnie pomniejszany
31         *   (transform: scale) i wysrodkowany – BEZ zmiany szerokosci ramki. Zmiana szerokosci zmienia uklad
32         *   kalkulatora, BSI podaje nowa wysokosc, skala sie zmienia… – ta petla powodowala miganie.
33         * - telefon: kalkulator w pelnym rozmiarze (pomniejszony bylby nieczytelny), panel przewija sie w srodku.
34         */
35        var TELEFON = 768;
36
37        function dopasuj() {
38            if (!iframe) {
39                return;
40            }
41
42            var wysokosc = parseInt(iframe.style.height, 10) || 580;
43            var telefon = window.innerWidth < TELEFON;
44            var skala = 1;
45
46            if (!telefon) {
47                var reszta = panel.offsetHeight - ramka.offsetHeight;
48                var dostepne = window.innerHeight - 16 - reszta;
49                skala = Math.min(1, dostepne / wysokosc);
50            }
51
52            panel.classList.toggle('kalk-panel--przewijany', telefon);
53            iframe.style.width = '100%';
54            iframe.style.transform = skala < 1 ? 'scale(' + skala + ')' : '';
55            iframe.style.marginLeft = skala < 1 ? ((1 - skala) * 50) + '%' : '';
56            ramka.style.height = Math.ceil(wysokosc * skala) + 'px';
57        }
58
59        function zaladujKalkulator() {
60            if (zaladowany) {
61                return;
62            }
63            zaladowany = true;
64
65            iframe = document.createElement('iframe');
66            iframe.id = ID_RAMKI;
67            iframe.src = ramka.getAttribute('data-src');
68            iframe.title = 'Kalkulator raty kredytu';
69            iframe.setAttribute('frameborder', '0');
70            iframe.setAttribute('scrolling', 'no');
71            iframe.style.height = '580px';
72
73            // BSI po zaladowaniu podaje wlasciwa wysokosc (iframe.js ustawia ja w style.height) – wtedy dopasowujemy
74            window.addEventListener('message', function (e) {
75                if (e.origin === 'https://bsi.gs-net.pl') {
76                    window.requestAnimationFrame(dopasuj);
77                }
78            });
79
80            // iframe.js od razu wysyla wiadomosc do ramki, wiec ladujemy go dopiero, gdy ramka jest gotowa;
81            // potem wiadomosc "resize" prosi kalkulator o podanie swojej wysokosci (tak samo robi iframe.js)
82            iframe.addEventListener('load', function () {
83                window._bsi_iframes = window._bsi_iframes || [];
84                window._bsi_iframes.push(ID_RAMKI);
85
86                var skrypt = document.createElement('script');
87                skrypt.src = 'https://bsi.gs-net.pl/calc/js/iframe.js';
88                skrypt.onload = function () {
89                    iframe.contentWindow.postMessage('resize', 'https://bsi.gs-net.pl');
90                };
91                document.body.appendChild(skrypt);
92            }, { once: true });
93
94            ramka.appendChild(iframe);
95            dopasuj();
96        }
97
98        window.addEventListener('resize', dopasuj);
99
100        /*
101         * Pokaz na start: 1 s po zaladowaniu strony panel sam sie rozwija na 5 s i zwija (bez przenoszenia fokusu).
102         * Tylko raz na wizyte (sessionStorage) – nie przy kazdym przejsciu na inna podstrone.
103         * Nie zwija sie, gdy uzytkownik z niego korzysta (kursor nad panelem, fokus lub klikniecie w panelu).
104         * WCAG 2.2.2: ruch uruchomiony automatycznie trwa krocej niz 5 s, a panel mozna zamknac (krzyzyk, Esc).
105         */
106        var POKAZ_PO = 1000;
107        var POKAZ_PRZEZ = 5000;
108        var KLUCZ_POKAZU = 'bskw-kalk-pokazany';
109        var autoZwiniecie = null;
110        var uzywany = false;

111
112        function bylPokazany() {
113            try {
114                return window.sessionStorage.getItem(KLUCZ_POKAZU) === '1';
115            } catch (e) {
116                return false;
117            }
118        }
119
120        function zapamietajPokaz() {
121            try {
122                window.sessionStorage.setItem(KLUCZ_POKAZU, '1');
123            } catch (e) {
124                // brak dostepu do pamieci przegladarki – trudno, pokaz bedzie przy kazdej stronie
125            }
126        }
127
128        function anulujAutoZwiniecie() {
129            uzywany = true;
130            window.clearTimeout(autoZwiniecie);
131        }
132
133        ['pointerenter', 'focusin', 'pointerdown', 'touchstart'].forEach(function (zdarzenie) {
134            panel.addEventListener(zdarzenie, anulujAutoZwiniecie, { passive: true });
135        });
136
137        if (!bylPokazany()) {
138            window.addEventListener('load', function () {
139                window.setTimeout(function () {
140                    if (panel.classList.contains('kalk-panel--otwarty')) {
141                        return;
142                    }
143                    zapamietajPokaz();
144                    otworz(false);
145                    autoZwiniecie = window.setTimeout(function () {
146                        if (!uzywany && panel.classList.contains('kalk-panel--otwarty') && !panel.matches(':hover')) {
147                            zamknijPanel(false);
148                        }
149                    }, POKAZ_PRZEZ);
150                }, POKAZ_PO);
151            }, { once: true });
152        } else {
153            // juz pokazany w tej wizycie – zamiast tego zakladka raz "odbija sie" od krawedzi 3 s po wejsciu
154            // (krocej niz 5 s – WCAG 2.2.2) – animacja w style.css
155            window.setTimeout(function () {
156                zakladka.classList.add('kalk-zakladka--zaczepka');
157            }, 3000);
158        }
159
160        function otworz(ustawFokus) {
161            zaladujKalkulator();
162            panel.removeAttribute('inert');
163            panel.classList.add('kalk-panel--otwarty');
164            zakladka.classList.add('kalk-zakladka--ukryta');
165            zakladka.setAttribute('aria-expanded', 'true');
166            dopasuj();
167            if (ustawFokus) {
168                zamknij.focus();
169            }
170        }
171
172        function zamknijPanel(oddajFokus) {
173            panel.classList.remove('kalk-panel--otwarty');
174            panel.setAttribute('inert', '');
175            zakladka.classList.remove('kalk-zakladka--ukryta');
176            zakladka.setAttribute('aria-expanded', 'false');
177            if (oddajFokus) {
178                zakladka.focus();
179            }
180        }
181
182        // panel domyslnie zwiniety – rozwija sie po kliknieciu zakladki
183        zakladka.addEventListener('click', function () {
184            otworz(true);
185        });
186        zamknij.addEventListener('click', function () {
187            zamknijPanel(true);
188        });
189
190        document.addEventListener('keydown', function (e) {
191            if (e.key === 'Escape' && panel.classList.contains('kalk-panel--otwarty')) {
192                zamknijPanel(true);
193            }
194        });
195
196        // klikniecie poza panelem (np. w tresc strony) zamyka go
197        document.addEventListener('click', function (e) {
198            if (panel.classList.contains('kalk-panel--otwarty') && !panel.contains(e.target) && !zakladka.contains(e.target)) {
199                zamknijPanel(false);
200            }
201        });
202    });
203})();