MediaWiki:Common.js

$(document).ready(function() {
  
  const $document = $(document);
  const $window = $(window);
  const $referencia_tip = $('#referencia_tip');
  const $mw_head = $('#mw-head');
  const $mw_body = $('.mw-body, #p-personal, #right-navigation');
  const $toc = $('.toc');
  const $relacionados = $('.relacionados');
  
  function abrirOculto(element) {
    $(element).closest('.oculto-conteudo').removeClass('mw-collapsed').show();
  };
  
  function scrollToElement(element) {
    window.scrollTo({top: $(element).offset().top, behavior: 'smooth'});
  };
  
  function abrirAba() {
    const hash = location.hash.slice(1).trim();
    if (!hash) return; 
    
    const parametros = location.hash.slice(1).trim().split('/');
    let abas_id = '';
    let abas_num = '';
    let aba_nome = '';
    
    parametros.forEach(param => {
      const [key, value] = param.split('=');
      switch (key) {
        case 'abas_id': abas_id = value; break;
        case 'abas_num': abas_num = value; break;
        case 'aba_nome': aba_nome = decodeURIComponent(value).replace(/_/g, ' '); break;
      }
    });
    
    let $aba;
    if (abas_id) {
      $aba = $(`.tabs-tabbox[id="${abas_id}"] .tabs-label:contains("${aba_nome}")`);
    } else {
      $aba = $(`.tabs-tabbox:has(input[name="tabs-${abas_num}"]) .tabs-label:contains("${aba_nome}")`);
    };
    
    $aba.each(function () {
      abrirOculto($(this));
      this.click(); 
      scrollToElement(this);
    });
    
    $(document.querySelectorAll('.oculto-conteudo :target, .tabs-content :target')).each(function () {
      const $this = $(this);
      const dentroOculto = $this.closest('.oculto-conteudo').length > 0;
      const dentroAba = $this.closest('.tabs-content').length > 0;
      
      if (dentroOculto) {
        abrirOculto(this);
        scrollToElement(this);
      }
      
      if (dentroAba) {
        let aba = $this.closest('.tabs-content').attr('class').split('-')[3];
        $this.closest('.tabs-container').siblings(`[data-tabpos="${aba}"]`).click();
        scrollToElement(this);
      }
    });
  };
  
  $document.on('click', '.tabs-tabbox .tabs-label', function() {
    const $this = $(this);
    const abas_id = $this.closest('div').prop('id');
    const abas_num = $this.attr('for').split('-')[2];
    const aba_nome = $this.text();
    const hash = abas_id ? `abas_id=${abas_id}/abas_num=${abas_num}/aba_nome=${aba_nome}` : `abas_num=${abas_num}/aba_nome=${aba_nome}`;
    history.replaceState(null, null, document.location.pathname + '#' + hash)
  });
  
  /* Fecha o box "Relacionados" */
  $document.on('click', '#botao-fechar', () => {
    $relacionados.hide();
    checarTOCeRelacionados();
  });
  
  /* Oculta o Índice totalmente */
  $document.on('click', 'input#toctogglecheckbox.toctogglecheckbox', () => {
    if ($('.toc ul').is(":hidden")) {
      $toc.hide();
    };
    checarTOCeRelacionados();
  });
  
  /* Obtém os dados da referência no fim da página e exibe como pop-up ao passar o mouse sobre o seu número*/
  $document.on('mouseenter', '.reference', function() {
    const $this = $(this);
    const referencia_id = $this.children().eq(0).attr('href').substring(1);
    const referencia_nome = $('#' + referencia_id);
    const referencia_conteudo = referencia_nome.find('.reference-text').html();
    
    const topo     = ($this.offset().top  - 140) + "px";
    const esquerda = ($this.offset().left - 115) + "px"; 
    
    $referencia_tip.html(referencia_conteudo).css({
      top: topo,
      left: esquerda  
    }).hide().dequeue().show();
  });
  
  /* Oculta o pop-up da referência ao tirar o mouse do número*/
  $document.on('mouseout', '.reference', () => {
    $referencia_tip.delay(1000).hide(1);
  });
  
  /* Mantém o pop-up aberto enquanto estiver com o mouse*/
  $document.on('mouseover', '#referencia_tip', () => {
    $referencia_tip.hide().dequeue().show();
  });
  
  /* Oculta o pop-up da referência ao tirar o mouse do pop-up*/
  $document.on('mouseout', '#referencia_tip', () =>{
    $referencia_tip.hide();
  });
  
  /* Confere se o ìndice e o box Relacionados estão ocultos e muda a margem direita*/
  const checarTOCeRelacionados = () => {
    const tocOculto = !$toc.is(':visible') || !$toc.length;
    const relacionadosOculto = !$relacionados.is(':visible') || !$relacionados.length;
    $mw_body.css('margin-right', (tocOculto && relacionadosOculto) ? '1em' : '');
  };
  
  /* Exibe texto do logo DCOM e altera posição índice ao rolar tela*/
  $.fn.estaVisivel = function() {
    var elementTop = this.offset().top;
    var elementBottom = elementTop + this.outerHeight();
    var viewportTop = $window.scrollTop();
    var viewportBottom = viewportTop + $window.height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };
  
  $window.on('ready resize load scroll', function () {
    const estaVisivel = $mw_head.estaVisivel();
    $toc.css('top', estaVisivel ? '55px' : '10px');
    $('.mw-wiki-logo').css('opacity', estaVisivel ? 0 : 1);
  });
  
  $window.on('hashchange', abrirAba);
  
  $(abrirAba);
  $(checarTOCeRelacionados);
  
});