{% comment %}Ożywienie układu "dossier" - wspólne dla stron i wpisów bloga.
   Skrypt: numeruje rozdziały (h2) w treści, buduje z nich spis w szynie,
   podświetla czytany rozdział, wypełnia pasek postępu i składa spisy
   w szynie na małym ekranie.

   Wołanie: {% include 'partials/doc_script.html' %} w bloku `scripts`.
   Szablon musi mieć `#page-body` (treść) - reszta elementów jest
   nieobowiazkowa: `#page-toc` z `#page-toc-list`, `#page-progress`
   i gałęzie `.toc-fold`.{% endcomment %}
<script nonce="{{ csp_nonce }}">
  // Trzy drobiazgi, które ożywiają szynę z lewej: numery rozdziałów w treści,
  // spis treści zbudowany z nagłówków i podświetlenie czytanego rozdziału.
  // Bez skryptu strona jest kompletna - zostaje sama treść i spis działu.
  (function () {
    // Spisy w szynie: na telefonie złożone, od `lg` zawsze otwarte. Bez
    // skryptu zostają otwarte wszędzie - treść jest wtedy niżej, ale cała.
    var folds = document.querySelectorAll('.toc-fold');
    var wide = window.matchMedia('(min-width: 1024px)');

    function fold() {
      Array.prototype.forEach.call(folds, function (item) { item.open = wide.matches; });
    }

    if (folds.length) {
      fold();
      if (wide.addEventListener) wide.addEventListener('change', fold);
    }

    var body = document.getElementById('page-body');
    if (!body) return;

    // Nazwy klas bierzemy z treści strony - dzięki temu ten sam skrypt ożywia
    // spis w każdym szablonie. Bez atrybutu wchodzą klasy `toc-` z base.html,
    // więc szablon, który o nich nie wie, też dostaje gotowy spis.
    function styl(nazwa, domyslna) {
      return body.getAttribute('data-' + nazwa) || domyslna;
    }
    var klasaRozdzialu = styl('chapter-class', 'toc-chapter');
    var klasaNumeru = styl('num-class', 'toc-num');
    var klasaOdnosnika = styl('link-class', 'toc-link');
    var klasaCzytanego = styl('link-on-class', 'toc-link-on');

    var headings = body.querySelectorAll('h2');
    var toc = document.getElementById('page-toc');
    var list = document.getElementById('page-toc-list');
    var links = [];

    if (headings.length > 1) {
      Array.prototype.forEach.call(headings, function (heading, index) {
        var label = ('0' + (index + 1)).slice(-2);
        if (!heading.id) heading.id = 'sekcja-' + (index + 1);

        // Numer rozdziału idzie do wnętrza nagłówka, więc nie rozjeżdża
        // odstepow, które treści nadaje wtyczka typography.
        var mark = document.createElement('span');
        mark.className = klasaRozdzialu;
        mark.textContent = 'Rozdział ' + label;
        heading.insertBefore(mark, heading.firstChild);

        if (!list) return;
        var number = document.createElement('span');
        number.className = klasaNumeru;
        number.textContent = label;
        var text = document.createElement('span');
        text.textContent = heading.textContent.replace('Rozdział ' + label, '');
        var link = document.createElement('a');
        link.href = '#' + heading.id;
        link.className = klasaOdnosnika;
        link.appendChild(number);
        link.appendChild(text);
        var item = document.createElement('li');
        item.appendChild(link);
        list.appendChild(item);
        links.push(link);
      });
      if (toc && links.length) toc.classList.remove('hidden');
    }

    // Czytany rozdział - pierwszy nagłówek nad górną krawędzią ekranu.
    var bar = document.getElementById('page-progress');
    var ticking = false;

    function refresh() {
      ticking = false;

      if (bar) {
        var box = body.getBoundingClientRect();
        var seen = -box.top + window.innerHeight * 0.5;
        var share = Math.min(1, Math.max(0, seen / box.height));
        bar.style.width = (share * 100).toFixed(1) + '%';
      }

      if (!links.length) return;
      var current = 0;
      Array.prototype.forEach.call(headings, function (heading, index) {
        if (heading.getBoundingClientRect().top < 160) current = index;
      });
      links.forEach(function (link, index) {
        link.className = index === current ? klasaCzytanego : klasaOdnosnika;
      });
    }

    function schedule() {
      if (ticking) return;
      ticking = true;
      window.requestAnimationFrame(refresh);
    }

    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule);
    refresh();
  })();
</script>