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

Edição das 13h51min de 23 de setembro de 2025

/* Código Javascript colocado aqui será carregado para todos os utilizadores em cada carregamento de página */
mw.loader.using('mediawiki.util', function() {
    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">');
    $('head').append('<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>');
});
$(function() {
    var html = `
    <div id="top-banner" class="container-fluid d-flex justify-content-center justify-content-md-between">
        <div class="contact-info d-flex align-items-center">
            <i class="d-flex align-items-center">
                <a href="https://prefeitura.sp.gov.br">Prefeitura de São Paulo</a>
            </i>
            <i class="d-flex align-items-center ms-4">
                <a href="https://esic.prefeitura.sp.gov.br">E-Sic</a>
            </i>
            <i class="d-flex align-items-center ms-4">
                <a href="https://arquip.prefeitura.sp.gov.br">Arquip</a>
            </i>
        </div>
    </div>
    `;
    $(html).insertBefore($('.vector-header-container').first());
 // coloca acima do header
});


$(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:#3c3c3c; 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);
}
if (typeof HT === 'undefined') {
    // Carrega 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";
    htScript.onload = function() {
        // Inicializa o Hand Talk assim que o script carregar
        var ht = new HT({
            token: "aa1f4871439ba18dabef482aae5fd934", // substitua pelo seu token
            position: "bottom-right", // opcional: posição do avatar
            size: "medium",           // opcional: tamanho
            voice: "pt-BR"            // opcional: voz
        });
    };
    document.body.appendChild(htScript);
}

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