Widget:MapaViewer - Histórico de revisão

Ceu azul em 17h15min de 11 de abril de 2026

2026-04-11T17:15:22Z

← Edição anterior		Edição das 17h15min de 11 de abril de 2026
Linha 477:		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) => {

Ceu azul em 15h16min de 11 de abril de 2026

2026-04-11T15:16:41Z

← Edição anterior		Edição das 15h16min de 11 de abril de 2026
Linha 1:		Linha 1:
	<includeonly>		<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 id="mapa-viewer-<!--{$id\|escape:'quotes'\|default:'mapa-default'}-->" style="width: <!--{$largura\|escape:'quotes'\|default:'100%'}-->; height: <!--{$altura\|escape:'quotes'\|default:'500px'}-->;"></div>
	~~<button onclick="window.mapaViewer_<!--{$id\|escape:'quotes'\|default:'mapa-default'}-->.prevFloor()">⬆️ Subir</button>~~
	~~<button onclick="window.mapaViewer_{{{id\|}}}.nextFloor()">⬇️ Descer</button>~~
	<script>		<script>
	class MapaViewer {		class MapaViewer {

Ceu azul em 13h53min de 11 de abril de 2026

2026-04-11T13:53:36Z

← Edição anterior		Edição das 13h53min de 11 de abril de 2026
Linha 1:		Linha 1:
	<includeonly>		<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 id="mapa-viewer-<!--{$id\|escape:'quotes'\|default:'mapa-default'}-->" style="width: <!--{$largura\|escape:'quotes'\|default:'100%'}-->; height: <!--{$altura\|escape:'quotes'\|default:'500px'}-->;"></div>
			<button onclick="window.mapaViewer_<!--{$id\|escape:'quotes'\|default:'mapa-default'}-->.prevFloor()">⬆️ Subir</button>
			<button onclick="window.mapaViewer_{{{id\|}}}.nextFloor()">⬇️ Descer</button>
	<script>		<script>
	class MapaViewer {		class MapaViewer {

Ceu azul em 13h38min de 11 de abril de 2026

2026-04-11T13:38:24Z

← Edição anterior		Edição das 13h38min de 11 de abril de 2026
Linha 1:		Linha 1:
	<includeonly>		<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 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>

Ceu azul em 12h33min de 11 de abril de 2026

2026-04-11T12:33:37Z

← Edição anterior		Edição das 12h33min de 11 de abril de 2026
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>

Ceu azul em 12h25min de 11 de abril de 2026

2026-04-11T12:25:12Z

← Edição anterior		Edição das 12h25min de 11 de abril de 2026
Linha 540:		Linha 540:
	initMapaViewer();		initMapaViewer();
	}		}
			console.log('Mapa processado')
	})();		})();
	</script></includeonly>		</script></includeonly>

Ceu azul em 12h24min de 11 de abril de 2026

2026-04-11T12:24:00Z

← Edição anterior		Edição das 12h24min de 11 de abril de 2026
Linha 4:		Linha 4:
	(function() {		(function() {
	// Classe MapaViewer completa		// Classe MapaViewer completa
			console.log('Iniciando Mapa')
	class MapaViewer {		class MapaViewer {
	constructor(containerId, configOrUrl) {		constructor(containerId, configOrUrl) {

Ceu azul em 12h22min de 11 de abril de 2026

2026-04-11T12:22:00Z

Mostrar alterações

Ceu azul em 12h15min de 11 de abril de 2026

2026-04-11T12:15:37Z

← Edição anterior		Edição das 12h15min de 11 de abril de 2026
Linha 1:		Linha 1:
	<includeonly><div id="mapa-viewer-{{{id\|mapa-default}}}" style="width:{{{largura\|100%}}}; height:{{{altura\|500px}}};"></div>		<includeonly><div id="mapa-viewer-{{{id\|mapa-default}}}" style="width:{{{largura\|100%}}}; height:{{{altura\|500px}}};">Atirei</div>

	<script>		<script>

Ceu azul em 12h05min de 11 de abril de 2026

2026-04-11T12:05:55Z

← Edição anterior		Edição das 12h05min de 11 de abril de 2026
Linha 555:		Linha 555:
	window.MapaViewer = MapaViewer;		window.MapaViewer = MapaViewer;

	~~// Inicializar após o DOM carregar~~		const containerId = 'mapa-viewer-{{{id\|mapa-default}}}';
	~~if (document.readyState === 'loading') {~~
	~~document.addEventListener('DOMContentLoaded', () => {~~		// Aguardar DOM carregar
	const ~~container~~ = ~~document.getElementById(~~'mapa-viewer-{{{id\|mapa-default}}}');		function initMapaViewer() {
	~~if (container && !container.hasAttribute('data-initialized')) {~~		const container = document.getElementById(containerId);
	~~container.setAttribute~~(~~'data-initialized', 'true'~~);
	~~{{{configuracao}}}~~
	}
	~~});~~
	~~} else~~ {
	const container = document.getElementById(~~'mapa-viewer-{{{id\|mapa-default}}}'~~);
	if (container && !container.hasAttribute('data-initialized')) {		if (container && !container.hasAttribute('data-initialized')) {
	container.setAttribute('data-initialized', 'true');		container.setAttribute('data-initialized', 'true');

			// Configuração do mapa
	{{{configuracao}}}		{{{configuracao}}}
	}		}
			}

			if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', initMapaViewer);
			} else {
			initMapaViewer();
	}		}
	})();		})();
	</script></includeonly>		</script></includeonly>