Mudanças entre as edições de "Widget:MapaViewer"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<includeonly><div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div>
<includeonly>
<div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div>
 
<div style="margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;">
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.zoomIn()" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">🔍 Zoom +</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.zoomOut()" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">🔍 Zoom -</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.resetView()" style="padding: 8px 16px; background: #6b7280; color: white; border: none; border-radius: 6px; cursor: pointer;">🔄 Resetar</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.prevFloor()" style="padding: 8px 16px; background: #8b5cf6; color: white; border: none; border-radius: 6px; cursor: pointer;">⬆️ Andar Anterior</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.nextFloor()" style="padding: 8px 16px; background: #8b5cf6; color: white; border: none; border-radius: 6px; cursor: pointer;">⬇️ Próximo Andar</button>
</div>


<script>
<script>
(function() {
class MapaViewer {
    // Classe MapaViewer completa
    console.log('Iniciando Mapa')
    class MapaViewer {
         constructor(containerId, configOrUrl) {
         constructor(containerId, configOrUrl) {
             this.container = document.getElementById(containerId);
             this.container = document.getElementById(containerId);
Linha 512: Linha 518:
     }
     }


     // Adicionar CSS da animação
(function() {
     const style = document.createElement('style');
    var containerId = 'mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->';
    style.textContent = `
    var configJSON = <!--{$configJSON|default:'null'}-->;  // Recebe o JSON
         @keyframes mapa-highlight-pulse {
     var urlJSON = '<!--{$url|escape:'quotes'}-->';        // Recebe URL do JSON
             0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
   
             100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
    // Nome da variável global única para este mapa
    var globalVarName = 'mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->';
      
    function iniciarMapa() {
        var container = document.getElementById(containerId);
        if (!container) return;
        if (container.hasAttribute('data-iniciado')) return;
       
        container.setAttribute('data-iniciado', 'true');
       
        var viewer = null;
       
        if (configJSON && configJSON !== 'null') {
            // Configuração inline
            viewer = new MapaViewer(containerId, configJSON);
         } else if (urlJSON) {
             // Configuração via URL
            fetch(urlJSON)
                .then(response => response.json())
                .then(config => {
                    window[globalVarName] = new MapaViewer(containerId, config);
                })
                .catch(error => {
                    console.error('Erro ao carregar mapa:', error);
                    container.innerHTML = '<div style="color:red;padding:20px;">❌ Erro ao carregar mapa: ' + error.message + '</div>';
                });
             return; // Sai porque o fetch é assíncrono
        } else {
            container.innerHTML = '<div style="color:red;padding:20px;">❌ Nenhuma configuração fornecida</div>';
            return;
         }
         }
    `;
       
    document.head.appendChild(style);
        // Guarda a instância globalmente para acesso externo
 
        if (viewer) {
    window.MapaViewer = MapaViewer;
            window[globalVarName] = viewer;
 
            console.log('Mapa inicializado! Use window.' + globalVarName + ' para controlar');
    // Inicializar
             console.log('Exemplo: window.' + globalVarName + '.nextFloor()');
    const containerId = 'mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->';
   
    function initMapaViewer() {
        const container = document.getElementById(containerId);
        if (container && !container.hasAttribute('data-initialized')) {
             container.setAttribute('data-initialized', 'true');
            <!--{$configuracao}-->
         }
         }
     }
     }
      
      
     if (document.readyState === 'loading') {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', initMapaViewer);
         document.addEventListener('DOMContentLoaded', iniciarMapa);
     } else {
     } else {
         initMapaViewer();
         iniciarMapa();
     }
     }
console.log('Mapa processado')
})();
})();
</script></includeonly>
</script>
</includeonly>

Edição das 12h33min de 11 de abril de 2026

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:MapaViewer&oldid=45982”