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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
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>


<script>
<script>
(function() {
class MapaViewer {
    // Classe MapaViewer completa
    class MapaViewer {
         constructor(containerId, configOrUrl) {
         constructor(containerId, configOrUrl) {
             this.container = document.getElementById(containerId);
             this.container = document.getElementById(containerId);
Linha 478: Linha 477:
             this.viewport.scrollLeft = Math.max(0, targetScrollX);
             this.viewport.scrollLeft = Math.max(0, targetScrollX);
             this.viewport.scrollTop = Math.max(0, targetScrollY);
             this.viewport.scrollTop = Math.max(0, targetScrollY);
         }
         this.showTemporaryHighlight(x, y);
    }
 
    showTemporaryHighlight(x, y) {
        const highlight = document.createElement('div');
        highlight.style.cssText = `
            position: absolute;
            width: 60px;
            height: 60px;
            left: ${(x + (this.currentFloor?.offsetX || 0)) * this.currentZoom}px;
            top: ${(y + (this.currentFloor?.offsetY || 0)) * this.currentZoom}px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 200;
            animation: mapa-highlight-pulse 0.6s ease-out 3;
        `;
 
        this.layersContainer.appendChild(highlight);


        setTimeout(() => {
            highlight.remove();
        }, 1800);
    }
         setupKeyboardShortcuts() {
         setupKeyboardShortcuts() {
             const handler = (e) => {
             const handler = (e) => {
Linha 511: Linha 533:
     }
     }


     // 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();
     }
     }
})();
})();
</script></includeonly>
</script>
</includeonly>

Edição atual tal como às 17h15min de 11 de abril de 2026

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