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

Edição das 05h10min de 6 de dezembro de 2025

/**
 * MediaWikiCitizen.js
 * Adds a functional "Copy" button to code blocks (pre, .mw-highlight, .mw-code).
 */

(function () {
  'use strict';

  function addCopyButtons() {
    // Select all code block containers
    const codeBlocks = document.querySelectorAll('pre, .mw-highlight, .mw-code');

    codeBlocks.forEach(function (block) {
      // Check if button already exists to prevent duplicates
      if (block.querySelector('.mw-copy-btn')) return;

      // Create the button
      const button = document.createElement('button');
      button.className = 'mw-copy-btn';
      button.type = 'button';
      button.ariaLabel = 'Copiar código';

      // Icon (SVG)
      button.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
        </svg>
      `;

      // Add click event
      button.addEventListener('click', function () {
        // Get text content
        const code = block.innerText || block.textContent;

        // Copy to clipboard
        navigator.clipboard.writeText(code).then(function () {
          // Success feedback
          button.classList.add('copied');
          const originalHTML = button.innerHTML;

          // Change icon to checkmark temporarily
          button.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          `;

          setTimeout(function () {
            button.classList.remove('copied');
            button.innerHTML = originalHTML;
          }, 2000);
        }).catch(function (err) {
          console.error('Failed to copy: ', err);
        });
      });

      // Append button to the block
      // Ensure relative positioning on block so button positions correctly
      if (getComputedStyle(block).position === 'static') {
        block.style.position = 'relative';
      }
      block.appendChild(button);
    });
  }

  // Run on load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', addCopyButtons);
  } else {
    addCopyButtons();
  }

  // Optional: Observer for dynamic content (if MediaWiki loads content via AJAX)
  const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.addedNodes.length) {
        addCopyButtons();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });

})();

/* --- CELTA SISTEMA: Lógica de Abas (SPA) --- */

// Torna a função global para ser chamada nos onlicks do HTML
window.abrirAbaCelta = function(id, elementoBotao) {
    console.log('Abrindo aba:', id); // Debug
    
    // 1. Esconde todas as abas de conteúdo
    var todasAbas = document.querySelectorAll('.erp-tab-content');
    todasAbas.forEach(function(aba) {
        aba.style.display = 'none';
        aba.classList.remove('active');
    });
    
    // 2. Esconde todos os submenus
    var todosSubmenus = document.querySelectorAll('.erp-submenu');
    todosSubmenus.forEach(function(submenu) {
        submenu.style.display = 'none';
        submenu.classList.remove('active');
    });
    
    // 3. Mostra a aba desejada
    var alvo = document.getElementById('tab-' + id);
    if (alvo) {
        alvo.style.display = 'block';
        alvo.classList.add('active');
    } else {
        console.warn('Aba não encontrada: tab-' + id);
    }

    // 4. Se for "principal", mostra o submenu lateral
    if (id === 'principal') {
        var submenu = document.getElementById('submenu-principal');
        if (submenu) {
            submenu.style.display = 'block';
            submenu.classList.add('active');
        }
    }

    // 5. Atualiza o Menu Lateral (se o clique veio dele)
    if (elementoBotao) {
        var todosMenus = document.querySelectorAll('.erp-menu-item');
        todosMenus.forEach(function(item) {
            item.classList.remove('active');
        });
        elementoBotao.classList.add('active');
    }
};

// Inicialização: Garante que a primeira aba abra se nenhuma estiver ativa
document.addEventListener('DOMContentLoaded', function() {
    var abaAtiva = document.querySelector('.erp-tab-content.active');
    if (!abaAtiva) {
        var tabPrincipal = document.getElementById('tab-principal');
        if (tabPrincipal) {
            var primeiroMenuItem = document.querySelectorAll('.erp-sidebar .erp-menu-item')[1];
            abrirAbaCelta('principal', primeiroMenuItem);
        }
    }
});