MediaWiki:Common.js: mudanças entre as edições

Edição das 13h33min de 4 de novembro de 2024

/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */

/* Organize */
$(document).ready(function () {
  var tables = document.getElementsByClassName("organize");
  Array.prototype.forEach.call(tables, function (table) {
    var rows, switching, i, x, y, shouldSwitch;
    switching = true;
    /* Make a loop that will continue until
        no switching has been done: */
    while (switching) {
      // start by saying: no switching is done:
      switching = false;
      rows = table.rows;
      /* Loop through all table rows (except the
            first, which contains table headers): */
      for (i = 1; i < rows.length - 1; i++) {
        // start by saying there should be no switching:
        shouldSwitch = false;
        /* Get the two elements you want to compare,
                one from current row and one from the next: */
        x = rows[i].querySelector("h3>span.mw-headline");
        y = rows[i + 1].querySelector("h3>span.mw-headline");
        // check if the two rows should switch place:
        if (
          x.getAttribute("id").toLowerCase() >
          y.getAttribute("id").toLowerCase()
        ) {
          // if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
      if (shouldSwitch) {
        /* If a switch has been marked, make the switch
                and mark that a switch has been done: */
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

        var rowIdA = rows[i].querySelector(".mw-headline").getAttribute("id");
        var rowIdB = rows[i + 1]
          .querySelector(".mw-headline")
          .getAttribute("id");
        var floatTOCLinkA = document.querySelector(
          'a[href$="' + rowIdA + '"]'
        ).parentNode;
        var floatTOCLinkB = document.querySelector(
          'a[href$="' + rowIdB + '"]'
        ).parentNode;

        floatTOCLinkB.parentNode.insertBefore(floatTOCLinkA, floatTOCLinkB);

        rowIdA = null;
        rowIdB = null;
        floatTOCLinkA = null;
        floatTOCLinkB = null;

        switching = true;
      }
    }
  });
});

/* Runa TOC */
$(document).ready(function () {
  var $window = $(window),
      $mwPanel = $("#mw-panel"),
      $toc = $("#toc"),
      headingOffsets = [],
      headingThreshold = $window.height() / 5.0,
      $floatTOC;

  if (!$toc.length) {
    return; // Se não houver TOC, saia da função
  }

  // Clona o TOC original e configura
  $floatTOC = $toc
    .clone()
    .removeAttr("id")
    .attr("id", "floatTOC")
    .addClass("floatTOC")
    .appendTo("body");

  $floatTOC.find("ul").show(); // Mostra os itens da TOC

  // Adiciona comportamento de clique nos links da TOC
  $floatTOC.find("a").click(function (e) {
    $("html, body").animate({
      scrollTop: $(this.hash).offset().top - headingThreshold
    }, 500); // Animação suave ao clicar
    return false; // Impede o comportamento padrão
  });

  // Armazenar os offsets dos cabeçalhos
  $(".mw-headline").each(function () {
    headingOffsets.push([$(this).attr("id"), $(this).offset().top]);
  });

  // Lógica de rolagem
  $window.on("scroll", function () {
    var scrollTop = $window.scrollTop(),
        highlight = null;

    // Se a TOC estiver visível
    if (scrollTop > $floatTOC.offset().top) {
      $mwPanel.hide(); // Esconde o painel lateral

      // Verificar qual cabeçalho deve ser destacado
      $.each(headingOffsets, function (i, v) {
        if (scrollTop + headingThreshold < v[1]) {
          highlight = headingOffsets[i - 1][0]; // Captura o ID do cabeçalho atual
          return false; // Sai do loop
        }
      });

      // Destacar o cabeçalho atual
      if (highlight) {
        var $current = $floatTOC.find('a[href="#' + $.escapeSelector(highlight) + '"]');
        $floatTOC.find("a").not($current).css({"font-weight": "", "text-decoration": "", "color": ""}).find('.toc-arrow').remove(); // Remove setas anteriores
        $current.css({"font-weight": "bold", "text-decoration": "underline", "color": "#D9D2E9"}); // Estilos do item atual
        $current.prepend('<span class="toc-arrow" style="margin-right: 5px; color: #D9D2E9;">→</span>'); // Adiciona a seta
      }
    } else {
      $mwPanel.show(); // Mostra o painel lateral novamente
    }
  });
});