// Powiększanie kosmogramu na pełne okno (PRE-25). // // Koło rysujemy w kolumnie tekstu, więc na małym ekranie glify i stopnie robią // się nieczytelne. Kliknięcie rozciąga wykres na całe okno, ponowne wraca do // strony. SVG skaluje się bez utraty jakości, więc nie potrzeba drugiej wersji // rysunku ani żadnej biblioteki. // // Podpięte globalnie i osłonięte sprawdzeniem, czy koło w ogóle jest na stronie // — dzięki temu zadziała też na przyszłej zakładce „Skompiluj", bez zmian tutaj. (function () { 'use strict'; var ZOOMED = 'zoomed'; function ready(fn) { if (document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); } ready(function () { var figures = document.querySelectorAll('.wheel-fig'); if (!figures.length) return; Array.prototype.forEach.call(figures, function (fig) { var svg = fig.querySelector('svg.wheel'); if (!svg) return; // Klawiatura ma działać tak samo jak mysz — to nie jest ozdobnik, tylko // jedyny sposób na obejrzenie szczegółów wykresu. svg.setAttribute('tabindex', '0'); svg.setAttribute('role', 'button'); svg.setAttribute('aria-label', 'Kosmogram — kliknij, aby powiększyć na całe okno'); function toggle() { var on = fig.classList.toggle(ZOOMED); // Blokujemy przewijanie strony pod spodem: inaczej scroll „przecieka" // na treść, której i tak nie widać. document.body.classList.toggle('wheel-zoom-open', on); svg.setAttribute('aria-label', on ? 'Kosmogram powiększony — kliknij lub naciśnij Esc, aby wrócić' : 'Kosmogram — kliknij, aby powiększyć na całe okno'); if (on) svg.focus(); } svg.addEventListener('click', toggle); svg.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }); // Klik w tło (poza samym rysunkiem) też zamyka — naturalne dla nakładki. fig.addEventListener('click', function (e) { if (e.target === fig && fig.classList.contains(ZOOMED)) toggle(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && fig.classList.contains(ZOOMED)) toggle(); }); }); }); })();