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

Edição das 16h48min de 5 de janeiro de 2026

/* Código Javascript colocado aqui será carregado para todos os utilizadores em cada carregamento de página */
 
 



mw.loader.using(['mediawiki.util', 'jquery'], function() {
    
    // 1. Carregar CSS do Bootstrap e Bootstrap ICONS (Faltava os ícones)
    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">');
    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">');

    // 2. Injetar o CSS das Abas (Usando mw.util.addCSS)
    mw.util.addCSS(`
        /* Container Azul da Barra */
        .custom-topbar-wrapper {
            background-color: #000080; /* Azul Principal */
            border-bottom: 4px solid #ffffff;
            width: 100%;
            margin-bottom: 0;
        }

        /* Ajuste do container interno */
        .folder-tabs-nav {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            padding-top: 10px;
            padding-left: 20px; /* Margem esquerda para não colar na borda */
        }

        /* O Estilo da "Pontinha" da Pasta */
        .folder-tab {
            display: inline-flex;
            align-items: center;
            padding: 8px 24px 6px 24px;
            
            /* Cores e Fundo */
            background-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.9) !important; /* Força cor branca */
            text-decoration: none !important; /* Remove sublinhado padrão do Wiki */
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            
            /* O Formato de Pasta */
            border-radius: 12px 12px 0 0; 
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: none;
            
            transition: all 0.2s ease-in-out;
            position: relative;
            top: 0;
        }

        /* Hover */
        .folder-tab:hover {
            background-color: rgba(255, 255, 255, 0.4);
            color: #fff !important;
            transform: translateY(-3px);
        }

        /* Aba Ativa */
        .folder-tab.active {
            background-color: #ffffff;
            color: #000080 !important; /* Texto Azul */
            font-weight: 800;
            padding-top: 12px;
            border-bottom: 4px solid #fff; /* Conecta com o fundo */
            margin-bottom: -4px; /* Truque para sobrepor a borda */
            z-index: 10;
        }

        .folder-tab i {
            font-size: 1.1em;
            margin-right: 8px;
        }

        /* Ajuste Mobile */
        @media (max-width: 768px) {
            .folder-tabs-nav {
                overflow-x: auto;
                white-space: nowrap;
            }
        }
    `);

    // 3. Inserir o HTML na página
    $(function() {
        // Verifica se já não foi inserido para evitar duplicidade
        if ($('.custom-topbar-wrapper').length === 0) {
            
            var html = `
            <div class="custom-topbar-wrapper">
                <div class="container-fluid">
                    <nav class="folder-tabs-nav">

                        <a href="https://atom.prefeitura.sp.gov.br" target="_blank" class="folder-tab">
                            <i class="bi bi-box-seam-fill"></i>Atom
                        </a>

                        <a href="#" class="folder-tab active">
                            <i class="bi bi-journal-text"></i>Wiki
                        </a>

                        <a href="#" class="folder-tab">
                            <i class="bi bi-hash"></i>Número
                        </a>

                        <a href="#" class="folder-tab">
                            <i class="bi bi-globe"></i>Sites
                        </a>

                    </nav>
                </div>
            </div>
            `;

            // Insere antes do cabeçalho padrão do MediaWiki (Skin Vector 2022)
            if ($('.mw-page-container').length) {
                // Vector 2022
                $(html).insertBefore('.mw-page-container');
            } else if ($('#content').length) {
                // Skins antigas (Vector Legacy / MonoBook)
                $(html).insertBefore('#content'); 
            } else {
                // Fallback genérico
                $('body').prepend(html);
            }
        }
    });
});


$(function () {
  // Remove o footer padrão do Vector
  $('.vector-footer').remove();

  // Adiciona o seu footer no final da página
  var html = `
  <footer id="footer" class="footer position-relative dark-background" style='background-color:#000000; color:#FFF;padding: 1px 4px;height:136;font-family:sans-serif;'>
    <div class="container copyright text-center mt-4">
      <p style='margin:0'>Plataforma mantida pelo </p>
      <p style='margin:0'><strong class="px-1 sitename">Arquivo Público Municipal "Jornalista Paulo Roberto Dutra"</strong></p>
      <p style='margin:0'>Rua Balsa, 331 - Freguesia do Ó</p>
      <p>São Paulo/SP- Brasil</p>
    </div>
  </footer>
  `;

  $('body').append(html);
});

$(function() {
    const container = document.getElementById("leitor-json");
    if (!container) return;

    let dados = [];
    let dadosFiltrados = [];
    let paginaAtual = 1;

    container.innerHTML = `
        <h1 class="mb-4">Consulta de Pareceres</h1>
        <div id="filtros" class="row g-3 mb-2">
            <div class="col-md-2"><input type="text" id="filtroProcesso" class="form-control" placeholder="Buscar por processo"></div>
            <div class="col-md-2"><input type="text" id="filtroDocumento" class="form-control" placeholder="Buscar por documento"></div>
            <div class="col-md-2"><select id="filtroVeiculo" class="form-select"><option value="">Todos os veículos</option></select></div>
            <div class="col-md-2"><select id="filtroSerie" class="form-select"><option value="">Todas as séries</option></select></div>
            <div class="col-md-2"><select id="filtroUnidade" class="form-select"><option value="">Todas as unidades</option></select></div>
            <div class="col-md-2"><select id="filtroOrgao" class="form-select"><option value="">Todos os órgãos</option></select></div>
            <div class="col-md-2 mt-2"><input type="text" id="filtroConteudo" class="form-control" placeholder="Buscar no conteúdo"></div>
        </div>
        <div class="mb-4 row g-2 align-items-center">
            <div class="col-auto"><button class="btn btn-primary btn-sm" id="btnPesquisar">Pesquisar</button></div>
            <div class="col-auto"><button class="btn btn-secondary btn-sm" id="btnLimpar">Limpar filtros</button></div>
            <div class="col-auto">
                <label for="resultadosPorPagina" class="form-label mb-0">Resultados por página:</label>
                <select id="resultadosPorPagina" class="form-select form-select-sm">
                    <option value="5">5</option>
                    <option value="10" selected>10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </div>
        </div>
        <div id="dados"></div>
        <div class="pagination-buttons mt-3" id="paginacaoNumerica"></div>
    `;

    fetch("/images/dados.json")
        .then(res => res.json())
        .then(json => {
            dados = json;
            preencherSelects();
            aplicarFiltros();
        })
        .catch(err => console.error("Erro ao carregar dados.json:", err));

    function preencherSelects() {
        const veiculoSelect = document.getElementById("filtroVeiculo");
        const serieSelect = document.getElementById("filtroSerie");
        const unidadeSelect = document.getElementById("filtroUnidade");
        const orgaoSelect = document.getElementById("filtroOrgao");

        [...new Set(dados.map(item => item.veiculo))].forEach(v => {
            const opt = document.createElement("option"); opt.value = v; opt.textContent = v; veiculoSelect.appendChild(opt);
        });
        [...new Set(dados.map(item => item.serie))].forEach(s => {
            const opt = document.createElement("option"); opt.value = s; opt.textContent = s; serieSelect.appendChild(opt);
        });
        [...new Set(dados.map(item => item.unidade))].forEach(u => {
            const opt = document.createElement("option"); opt.value = u; opt.textContent = u; unidadeSelect.appendChild(opt);
        });
        [...new Set(dados.map(item => item.orgao))].forEach(o => {
            const opt = document.createElement("option"); opt.value = o; opt.textContent = o; orgaoSelect.appendChild(opt);
        });
    }

    function exibirDados() {
        const containerDados = document.getElementById("dados");
        containerDados.innerHTML = "";
        const resultadosPorPagina = parseInt(document.getElementById("resultadosPorPagina").value) || 10;
        const inicio = (paginaAtual-1)*resultadosPorPagina;
        const fim = inicio + resultadosPorPagina;
        const paginaDados = dadosFiltrados.slice(inicio,fim);

        if(!paginaDados.length){
            containerDados.innerHTML="<p class='text-muted'>Nenhum resultado encontrado.</p>";
            return;
        }

        paginaDados.forEach(item=>{
            const card=document.createElement("div");
            card.className="card mb-2";
            const body=document.createElement("div");
            body.className="card-body";
            body.innerHTML=`
                <h5 class="card-title">${item.veiculo}</h5>
                <h6 class="card-subtitle mb-2 text-muted">${item.orgao}</h6>
                <p><b>Unidade:</b> ${item.unidade}</p>
                <p><b>Série:</b> ${item.serie}</p>
                <p><b>Processo:</b> ${item.processo}</p>
                <p><b>Documento:</b> ${item.documento}</p>
                <div><b>Conteúdo:</b><br>${item.conteudo}</div>
            `;
            card.appendChild(body);
            containerDados.appendChild(card);
        });

        criarPaginacao();
    }

    function aplicarFiltros() {
        const processo=document.getElementById("filtroProcesso").value.toLowerCase();
        const documento=document.getElementById("filtroDocumento").value.toLowerCase();
        const veiculo=document.getElementById("filtroVeiculo").value;
        const serie=document.getElementById("filtroSerie").value;
        const unidade=document.getElementById("filtroUnidade").value;
        const orgao=document.getElementById("filtroOrgao").value;
        const conteudo=document.getElementById("filtroConteudo").value.toLowerCase();

        dadosFiltrados=dados.filter(item =>
            (!processo || item.processo.toLowerCase().includes(processo)) &&
            (!documento || item.documento.toLowerCase().includes(documento)) &&
            (!veiculo || item.veiculo===veiculo) &&
            (!serie || item.serie===serie) &&
            (!unidade || item.unidade===unidade) &&
            (!orgao || item.orgao===orgao) &&
            (!conteudo || item.conteudo.toLowerCase().includes(conteudo))
        );

        paginaAtual=1;
        exibirDados();
    }

    function limparFiltros() {
        ["filtroProcesso","filtroDocumento","filtroVeiculo","filtroSerie","filtroUnidade","filtroOrgao","filtroConteudo"].forEach(id=>document.getElementById(id).value="");
        aplicarFiltros();
    }

    function mudarPagina(n) {
        paginaAtual = n;
        exibirDados();
        document.getElementById("leitor-json").scrollIntoView({ behavior: "smooth" });
    }

    function criarPaginacao() {
    const resultadosPorPagina = parseInt(document.getElementById("resultadosPorPagina").value) || 10;
    const totalPaginas = Math.ceil(dadosFiltrados.length / resultadosPorPagina);
    const pagDiv = document.getElementById("paginacaoNumerica");
    pagDiv.innerHTML = "";

    if (totalPaginas <= 1) return;

    // Botão anterior
    const btnAnt = document.createElement("button");
    btnAnt.textContent = "«";
    btnAnt.className = "btn btn-outline-primary btn-sm me-1";
    btnAnt.disabled = paginaAtual === 1;
    btnAnt.onclick = () => mudarPagina(paginaAtual - 1);
    pagDiv.appendChild(btnAnt);

    // Primeira página
    const btn1 = document.createElement("button");
    btn1.textContent = "1";
    btn1.className = "btn btn-outline-primary btn-sm me-1" + (paginaAtual === 1 ? " active" : "");
    btn1.onclick = () => mudarPagina(1);
    pagDiv.appendChild(btn1);

    // Pontos antes, se necessário
    if (paginaAtual > 4) {
        const dots = document.createElement("span");
        dots.textContent = "...";
        dots.className = "mx-1";
        pagDiv.appendChild(dots);
    }

    // Páginas ao redor da atual (3 antes e 3 depois)
    const inicio = Math.max(2, paginaAtual - 3);
    const fim = Math.min(totalPaginas - 1, paginaAtual + 3);
    for (let i = inicio; i <= fim; i++) {
        const btn = document.createElement("button");
        btn.textContent = i;
        btn.className = "btn btn-outline-primary btn-sm me-1" + (i === paginaAtual ? " active" : "");
        btn.onclick = () => mudarPagina(i);
        pagDiv.appendChild(btn);
    }

    // Pontos depois, se necessário
    if (paginaAtual < totalPaginas - 3) {
        const dots = document.createElement("span");
        dots.textContent = "...";
        dots.className = "mx-1";
        pagDiv.appendChild(dots);
    }

    // Última página
    if (totalPaginas > 1) {
        const btnLast = document.createElement("button");
        btnLast.textContent = totalPaginas;
        btnLast.className = "btn btn-outline-primary btn-sm" + (paginaAtual === totalPaginas ? " active" : "");
        btnLast.onclick = () => mudarPagina(totalPaginas);
        pagDiv.appendChild(btnLast);
    }

    // Botão próximo
    const btnProx = document.createElement("button");
    btnProx.textContent = "»";
    btnProx.className = "btn btn-outline-primary btn-sm ms-1";
    btnProx.disabled = paginaAtual === totalPaginas;
    btnProx.onclick = () => mudarPagina(paginaAtual + 1);
    pagDiv.appendChild(btnProx);
}
 

    // Eventos filtros
    document.getElementById("btnPesquisar").onclick = aplicarFiltros;
    document.getElementById("btnLimpar").onclick = limparFiltros;
    document.getElementById("resultadosPorPagina").onchange = aplicarFiltros;
});

// Função para ativar o Hand Talk no MediaWiki
function ativarHandTalk(token) {
    if (!token) {
        console.warn("Hand Talk: token não informado.");
        return;
    }

    // Verifica se o HT já foi carregado
    if (typeof HT !== 'undefined') {
        console.log("Hand Talk já carregado.");
        return;
    }

    // Cria o script do Hand Talk
    var htScript = document.createElement('script');
    htScript.src = "https://plugin.handtalk.me/web/latest/handtalk.min.js";
    htScript.type = "text/javascript";

    // Inicializa o Hand Talk quando o script carregar
    htScript.onload = function() {
        var ht = new HT({
            token: "aa1f4871439ba18dabef482aae5fd934",
            align: "left", // canto inferior direito
            size: "medium",           // tamanho do avatar
            voice: "pt-BR"            // voz
        });
        console.log("Hand Talk ativado com sucesso!");
    };

    // Adiciona o script ao body
    document.body.appendChild(htScript);
}

// Exemplo de uso
ativarHandTalk("aa1f4871439ba18dabef482aae5fd934"); // substitua pelo token real
// Move o conteúdo despinned para não aparecer o pinned

document.addEventListener("DOMContentLoaded", function() {
    var menu = document.getElementById("vector-main-menu");
    if(menu){
        menu.innerHTML = ""; // limpa o menu que foi “pinned”
    }
});