MediaWiki:Timeless.js

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Internet Explorer/Edge: PressioneCtrl enquanto clica Recarregar, ou Pressione Ctrl-F5
• Opera: Pressione Ctrl-F5.

/* Todo o JavaScript aqui será carregado para os usuários do tema Timeless */
$(document).ready(function () {
  $(function () {
    var $window,
      $mwPanel,
      $floatTOC,
      scrollHandler,
      tocLimit,
      headingOffsets,
      headingThreshold,
      $toc = $("#toc");

    if (!$toc.length) {
      return;
    }

    $window = $(window);
    $mwPanel = $("#mw-panel");

    headingThreshold = $window.height() / 5.0;

    $floatTOC = $toc
      .clone()
      .removeAttr("id")
      .attr("id", "floatTOC")
      .addClass("floatTOC")
      .appendTo("body");

    $floatTOC.find("ul").show();

    const tocToggleButton = document.createElement("button");
    tocToggleButton.setAttribute("id", "toctogglebutton");
    tocToggleButton.setAttribute("onclick", "toggleTOCVisibility()");

    const tocToggleButtonIconNode = document.createElement("i");
    tocToggleButtonIconNode.setAttribute("class", "material-icons");

    var tocToggleButtonIconNodeContent;

    if (getCookie("showTOC") == "false") {
      tocToggleButtonIconNodeContent = document.createTextNode("chevron_left");
      $floatTOC.addClass("hiddenFloatTOC");
    } else {
      tocToggleButtonIconNodeContent = document.createTextNode("chevron_right");
    }

    tocToggleButtonIconNode.appendChild(tocToggleButtonIconNodeContent);
    tocToggleButton.appendChild(tocToggleButtonIconNode);

    $floatTOC.prepend(tocToggleButton);

    $floatTOC.find("a").click(function (e) {
      e.preventDefault(); // Impede o comportamento padrão do clique

      // Decodifica a hash
      var targetId = decodeURIComponent(this.hash);
      var targetElement = $(targetId.replace(/\./g, "\\."));
      
      if (targetElement.length) {
        $("html, body").animate({
          scrollTop: targetElement.offset().top - headingThreshold,
        });
      }

      return false;
    });

    tocLimit = $toc.offset().top + $toc.height();
    headingOffsets = [];

    $(".mw-headline").each(function () {
      headingOffsets.push([$(this).attr("id"), $(this).offset().top]);
    });

    scrollHandler = function () {
      var $current,
        scrollTop = $window.scrollTop();

      if (scrollTop > tocLimit) {
        $mwPanel.hide();

        var highlight = false;

        $.each(headingOffsets, function (i, v) {
          if (i !== 0 && scrollTop + headingThreshold < v[1]) {
            highlight = headingOffsets[i - 1][0];
            return false;
          }
        });

        if (highlight) {
          $current = $floatTOC.find('a[href="#' + highlight + '"]');
          $floatTOC.find("a").not($current).removeClass("active");
          $current.addClass("active");
          
          // Centralizar o item ativo na visão do TOC
          var activeItemOffset = $current.position().top;
          var tocScrollTop = $floatTOC.scrollTop();
          var tocHeight = $floatTOC.height();

          if (activeItemOffset < tocScrollTop || activeItemOffset > tocScrollTop + tocHeight) {
            $floatTOC.scrollTop(activeItemOffset - tocHeight / 2);
          }
        }
      } else {
        $mwPanel.show();
      }
    };

    // Use the custom throttle function
    $window.on("scroll", throttle(scrollHandler, 250));
  });
});

// Throttle function
function throttle(func, limit) {
  let lastFunc;
  let lastRan;

  return function() {
    const context = this;
    const args = arguments;

    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

function toggleTOCVisibility() {
  var $floatTOC = $("#floatTOC");
  var $tocToggleButton = $("#toctogglebutton");

  if ($floatTOC.hasClass("hiddenFloatTOC")) {
    $floatTOC.removeClass("hiddenFloatTOC");

    const tocToggleButtonIconNode = document.createElement("i");
    tocToggleButtonIconNode.setAttribute("class", "material-icons");

    const tocToggleButtonIconNodeContent =
      document.createTextNode("chevron_right");
    tocToggleButtonIconNode.appendChild(tocToggleButtonIconNodeContent);

    $tocToggleButton.html("");
    $tocToggleButton.append(tocToggleButtonIconNode);

    setCookie("showTOC", "true");
  } else {
    $floatTOC.addClass("hiddenFloatTOC");

    const tocToggleButtonIconNode = document.createElement("i");
    tocToggleButtonIconNode.setAttribute("class", "material-icons");

    const tocToggleButtonIconNodeContent =
      document.createTextNode("chevron_left");
    tocToggleButtonIconNode.appendChild(tocToggleButtonIconNodeContent);

    $tocToggleButton.html("");
    $tocToggleButton.append(tocToggleButtonIconNode);

    setCookie("showTOC", "false");
  }
}

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays || 365) * 24 * 60 * 60 * 1000);
  const expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}