astrololo/services/presentation/app/static/wheelzoom.js

// 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 wszędzie, gdzie koło się pojawi, 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();
      });
    });
  });
})();