MediaWiki:Gadget-MapaLPAInteractivo.js

/* * MapaLPAInteractivo v1.7 * Copyright (c) 2022 Jesús Martínez (User:Ciencia_Al_Poder) * * Mapa interactivo para Leyendas Pokémon: Arceus * * This program is free software; you can redistribute it and/or modify *  it under the terms of the GNU General Public License as published by *   the Free Software Foundation; either version 2 of the License, or *   (at your option) any later version (function( $ ) { 'use strict';

// WARNING: No soporta múltiples mapas en una página var _buckets = {}, _mapData = {}, _svg = null, _downCoords = null, _sensibility = 5, _pointRadius = 15, _originalWidth = 2048, _originalHeight = 2048, _selectedPoint = null, _useMapUpFallback = true, _expandedPointTypes = { s: 'm_estrella', a: 'm_arbol', c: 'm_caja', r: 'm_roca', w: 'm_distorsion', l: 'm_alfa', p: 'm_pokeball', m: 'm_estrellam', u: 'm_estrellas' }, _init = function { $( 'table.LPAinteractivo' ).each( _initializeTable ); }, _initializeTable = function { var $table = $( this ), origTablePosition, localPoints; origTablePosition = _detachElement( $table ); try { $table.find( '> tbody > tr[data-principal]' ).each( function {			var $tr = $( this ), $td = $tr.find( '> td:eq(2)' );			if ( $tr.data( 'principal' ) === 1 ) {				$( ' Detalles ' ).prependTo( $td );			}			$( '  Mapa ' ).prependTo( $td );		} ).filter( '[data-principal="0"]' ).each( function {			// Hide secondary			var $tr = $( this ).hide, $prev = $tr.prev;			if ( $prev.hasClass( 'sep' ) ) {				$prev.hide;			}			localPoints = _parsePointData( $tr.data( 'pointdata' ) );			// Generate id for coordinates			$tr.data( 'ids', $.map( localPoints, function( el ) {				return el.id;			} ).join( ',' ) );		} ); $table.on( 'change', _onChange ); _loadBaseImageDimensions; _generateMap; } catch( e ) { console.log(e); }	if (window.console) { console.log('_reattachElement', $table, origTablePosition); }	_reattachElement( $table, origTablePosition ); $( '.lpamap .markupmap' ).eq( 0 ).on( {		mousedown: _mapDown,		mouseup: _mapUp	} ).closest( '.zoomablemap' ).on( {		mapclick: _zoomableMapClick	} ); }, _loadBaseImageDimensions = function { var $img = $( '.lpamap .basemap img' ).eq(0); if ( $img.length === 0 ) { return; }	_originalWidth = parseInt( $img.attr( 'width' ), 10); _originalHeight = parseInt( $img.attr( 'height' ), 10); }, _detachElement = function( $el ) { var $prev, $parent; $prev = $el.prev; $parent = $el.parent; $el.detach; if ( $prev.length > 0 ) { return [ $prev, null ]; }	return [ null, $parent ]; }, _reattachElement = function( $el, origPosition ) { if ( origPosition[0] ) { $el.insertAfter( origPosition[0] ); } else { $el.prependTo( origPosition[1] ); } }, _onChange = function( e ) { var $target = $( e.target ), $label = $target.closest( 'label' ), checked = $target.is( ':checked' ), $tr; $tr = $target.closest( 'tr' ); if ( $label.hasClass( 'det' ) ) { _detailsChange( $tr, checked ); } else if ( $label.hasClass( 'map' ) ) { _mapChange( $tr, $target, checked ); } }, _detailsChange = function( $tr, checked ) { var pp, fn, $prev; fn = checked ? 'show' : 'hide'; while ( 1 ) { $tr = $tr.next.next; pp = $tr.data( 'principal' ); if ( $tr.length === 0 || pp === 1 ) { break; }		if ( typeof( pp ) == 'undefined' ) { continue; }		$tr[ fn ]; $prev = $tr.prev; if ( $prev.hasClass( 'sep' ) ) { $prev[ fn ]; }	} }, _mapChange = function( $tr, $target, checked ) { var $lch, $input2, recomputeList = false, $tr2, $tr3, points, $table; $table = $tr.closest( 'table' ); $lch = $table.find( 'label.map > input:checked' ); if ( _selectedPoint ) { _reapplyTableRowVisibility( $table ); _selectedPoint = null; }	if ( !checked ) { if ( _selectedPoint || $tr.data( 'principal' ) === 1 ) { // If there's a selected point, or it's the group heading, uncheck all $lch.each( function {				this.checked = false;			} ); $lch = $; } else { // If it's the detail row, unckeck the group heading $tr2 = $tr; while ( 1 ) { $tr2 = $tr2.prev.prev; if ( $tr2.length === 0 ) { break; }				if ( $tr2.data( 'principal' ) === 1 ) { $input2 = $tr2.find( 'label.map > input' ); if ( $input2[0].checked ) { $input2[0].checked = false; recomputeList = true; }					break; }			}		}	} else { if ( $tr.data( 'principal' ) === 1 ) { // If it's the group heading, mark all from the group, but first unmark everything $lch.each( function {				this.checked = false;			} ); $tr2 = $tr; while ( 1 ) { $tr2 = $tr2.next.next; if ( $tr2.length === 0 || $tr2.data( 'principal' ) === 1 ) { break; }				$input2 = $tr2.find( 'label.map > input' ); $input2[0].checked = true; recomputeList = true; }			$target[0].checked = true; } else { // Secondary check marked if ( $lch.length > 1 ) { // Check a *different* row if ( $lch[0] === $target[0] ) { $tr2 = $lch.eq( 1 ).closest( 'tr' ); } else { $tr2 = $lch.eq( 0 ).closest( 'tr' ); }				while ( 1 ) { if ( $tr2.length === 0 || $tr2.data( 'principal' ) === 1 ) { break; }					$tr2 = $tr2.prev.prev; }				// Check against our row $tr3 = $tr; while ( 1 ) { if ( $tr3.length === 0 || $tr3.data( 'principal' ) === 1 ) { break; }					$tr3 = $tr3.prev.prev; }				if ( $tr3.length === 0 || $tr2.length === 0 || $tr3[0] !== $tr2[0] ) { // Different group. Unmark all $lch.each( function {						this.checked = false;					} ); $lch = $target.prop( 'checked', true ); }			}		}	}	if ( recomputeList ) { $lch = $tr.closest( 'table' ).find( 'label.map > input:checked' ); }	points = $lch.map( function {		var ids = $( this ).closest( 'tr' ).data( 'ids' );		if ( ids ) {			return ids.split( ',' );		}	} ).get; _generateMap( points ); }, _parsePointData = function( str ) { var coords = str.split( ',' ), ret; ret = $.map( coords, function( coord ) {		var parts, x, y, id, el;		parts = coord.split( ':' );		x = parseFloat( parts[1] );		y = parseFloat( parts[2] );		id = _createIdForCoords( x, y );		el = { id: id, t: parts[0], x: x, y: y };		_mapData[ id ] = el;		return el;	} ); return ret; }, _createIdForCoords = function( x, y ) { var xx, yy, bkey, seq, id, point; xx = String.fromCharCode( 65 + Math.trunc( x * 26 / _originalWidth ) ); yy = String( Math.trunc( y * 26 / _originalHeight ) + 1 ); bkey = xx + yy; if ( ! ( bkey in _buckets ) ) { _buckets[ bkey ] = []; }	seq = _buckets[ bkey ].length; for ( var i = 0; i < seq; i++ ) { id = _buckets[ bkey ][ i ]; point = _mapData[ id ]; if ( point.x == x && point.y == y ) { return id; }	}	id = bkey + String.fromCharCode( 97 + seq ); _buckets[ bkey ].push( id ); return id; }, _generateMap = function( filterIds ) { var svgData, blob; svgData = '  ' + '' + '<path d="m 10.898436,-19.664347 c -0.677587,-0.0649 -1.573603,0.42932 -2.251952,0.66016 -1.51606,0.5159 -3.107422,1.29207 -5.808594,1.26367 -2.25520899,-0.0237 -4.683473,-0.51286 -6.755859,0.37695 -2.257217,0.96917 -4.243107,2.86657 -5.367188,5.05078 -1.360569,2.64373 -1.032942,5.87122 -1.199219,8.83985 -0.02794,0.49879 -0.154571,1.08489 -0.294922,1.6875 -0.207206,-0.15406 -0.405503,-0.306 -0.564453,-0.45313 -0.85685,-1.14842 -0.646419,-2.92869 -1.261719,-4.29297 -0.69805,-1.54775 -2.319055,-3.10109 -4.546875,-4.41992 -0.65018,-0.38489 -1.650675,-1.01298 -2.208985,-0.5039 -0.70597,0.64374 0.07113,1.93537 0.378907,2.83984 0.5159,1.51606 1.290118,3.10741 1.261719,5.80859 -0.02371,2.2551999 -0.510904,4.68347 0.378906,6.75586 0.96917,2.25722 2.866571,4.2431 5.050781,5.36719 2.643731,1.36056 5.871215,1.03295 8.839845,1.19922 0.49827,0.0279 1.083594,0.15474 1.685547,0.29492 -0.153504,0.20634 -0.304551,0.40605 -0.451172,0.56445 -1.148414,0.85685 -2.928688,0.64642 -4.292969,1.26172 -1.547744,0.69805 -3.101094,2.31906 -4.419923,4.54688 -0.384895,0.65018 -1.014948,1.65067 -0.505859,2.20898 0.643733,0.70597 1.937333,-0.0711 2.841798,-0.3789 1.51606,-0.5159 3.107421,-1.29012 5.808593,-1.26172 2.25520901,0.0237 4.683474,0.5109 6.75586,-0.37891 2.257217,-0.96917 4.241153,-2.86657 5.365234,-5.05078 1.360567,-2.6437298 1.032941,-5.87121 1.199218,-8.83984 0.02791,-0.49827 0.15669,-1.0836 0.296875,-1.68555 0.20625,0.15345 0.404152,0.3046 0.5625,0.45117 0.85685,1.14842 0.648372,2.92869 1.263672,4.29297 0.69805,1.54775 2.317102,3.1010902 4.544922,4.41992 0.65018,0.38489 1.652627,1.01299 2.210937,0.50391 0.70597,-0.64374 -0.07113,-1.9353798 -0.378906,-2.83985 -0.5159,-1.51606 -1.292072,-3.10741 -1.263672,-5.80859 0.02371,-2.25520005 0.510904,-4.68347 -0.378906,-6.75586 -0.96917,-2.25722 -2.866572,-4.24114 -5.050781,-5.36523 -2.64373,-1.36056 -5.86926,-1.03491 -8.83789,-1.20118 -0.498789,-0.0279 -1.084888,-0.15457 -1.6875,-0.29492 0.153549,-0.20641 0.306462,-0.406 0.453125,-0.56445 1.148414,-0.85685 2.928688,-0.64642 4.292969,-1.26172 1.547744,-0.69805 3.101094,-2.31905 4.41992,-4.54687 0.384896,-0.65018 1.012996,-1.65068 0.503907,-2.20899 -0.160933,-0.17649 -0.362028,-0.25962 -0.587891,-0.28125 z M 0,-8.549107 A 8.5714283,8.5714283 0 0 1 8.570312,0.0212029 8.5714283,8.5714283 0 0 1 0,8.593463 8.5714283,8.5714283 0 0 1 -8.572266,0.0212029 8.5714283,8.5714283 0 0 1 0,-8.549107 Z" style="fill:#fcf7db;stroke:#000000;stroke-width:1" />' + '<path d="m -0.19533227,-19.90606 c -0.99263503,0.0139 -2.00287793,0.10422 -3.01562493,0.26954 -0.463143,0.0783 -0.925867,0.17216 -1.386719,0.28125 -0.355533,2.09759 -2.33e-4,3.54672 0.643581,4.99609 l -1.294071,0.18821 c -1.723492,-2.38726 -2.139709,-5.31489 -2.147505,-8.18333 -2.7873118,-0.72381 -5.1244078,-0.40649 -6.9571998,1.04456 0.10172,4.35807 2.022044,7.58509 5.0637888,10.01114 l -0.9787828,1.0417 c -1.62928,-0.7875 -3.019008,-1.54784 -4.400123,-3.65889 -2.396701,2.42115 -3.717804,5.2353396 -3.720703,7.9257796 5.98e-4,6.17023988 6.795591,10.06483 15.1777338,8.69922 8.38303,-1.36564 15.1792642,-7.47543 15.1796882,-13.6464896 1.28e-4,-5.31558 -5.0869382,-9.06635 -12.16406327,-8.96875 z" style="fill:#fcf7db;stroke:#000000;stroke-width:1;" />' + '<rect ry="1.8" y="-7.2464285" x="-23.099108" height="14.27" width="3.6500001" style="fill:#fcf7db;stroke:#000000;stroke-width:1;" /><rect style="fill:#fcf7db;stroke:#000000;stroke-width:1;" width="3.6500001" height="14.27" x="19.450891" y="-7.2464285" ry="1.8" /></g>' + '<path d="m -14.910709,22.571429 5.8035696,-5.71429 -11.2499996,-10.7142804 3.125,-8.83929 7.05357,2.49999996 6.4285691,12.14286044 1.25,-0.35714 -3.39285,-25.80358 6.24999987,-8.03571 H 4.0617301 l 8.3489909,8.30357 -4.9107209,25.53572 0.71429,0.53571 5.6250009,-6.5178604 6.42857,-1.42857 0.26786,6.5178604 -6.51786,6.25 4.53639,5.62503 z" style="fill:#fcf7db;stroke:#000000;stroke-width:1;" /></g>' + '<path d="m -0.00585938,-25.996094 c -0.12677514,0.002 -0.25169133,0.05638 -0.3515625,0.15625 l -9.10742192,11.16211 -4.6425782,-4.419922 c -0.405506,-0.345982 -1.067708,-0.07952 -1.25,0.40039 l -6.052734,20.3359379 c -0.07401,0.2762148 -0.162371,0.5143005 -0.173828,0.7929687 l -0.15625,3.4257813 c -0.05208,2.0982142 0.386068,3.347657 1.583984,4.2851561 l 15.8710938,11.25 h 8.5703124 l 15.8710938,-11.25 C 21.354166,9.2050789 21.792314,7.9556361 21.740234,5.8574219 L 21.583984,2.4316406 C 21.572527,2.1529724 21.484166,1.9148867 21.410156,1.6386719 L 15.357422,-18.697266 c -0.182292,-0.47991 -0.844494,-0.746372 -1.25,-0.40039 l -4.6425782,4.419922 -9.10742192,-11.16211 c -0.10787203,-0.107872 -0.23650611,-0.15825 -0.36328126,-0.15625 z M -14.990234,-3.1660156 -2.7226562,7.5761719 -5.8027344,9.6523438 c -3.22008,2.0037362 -8.9481386,0.5098352 -9.0624996,-6.5175782 z m 29.980468,0 -0.125,6.3007812 C 14.750873,10.162179 9.0228144,11.65608 5.8027344,9.6523438 L 2.7226562,7.5761719 Z" style="fill:#fcf7db;stroke:#000000;stroke-width:1" /></g>' + '<circle cx="0" cy="0" r="26" style="fill:#fcf7db;stroke:#000000;stroke-width:1;" /><path d="m 26,0 a 26,7 0 0 1 -13,6.0621779 26,7 0 0 1 -26.000001,-2e-7 A 26,7 0 0 1 -26,-3.2487145e-7" style="fill:#fcf7db;stroke:#000000;stroke-width:1;" /><circle cx="0" cy="7" r="4" style="fill:#fcf7db;stroke:#000000;stroke-width:1;" /></g>' + '<path d="M -0.00164411,-27.941229 6.5673111,-9.0431814 26.570342,-8.63555 10.627149,3.4517155 16.420745,22.601693 -0.00164481,11.173986 -16.424036,22.601692 -10.630439,3.4517155 -26.573631,-8.6355515 -6.5706009,-9.0431814 Z" style="fill:#fffd3c;stroke:#000000;stroke-width:1" /></g>' + '<path d="M -0.00164411,-27.941229 6.5673111,-9.0431814 26.570342,-8.63555 10.627149,3.4517155 16.420745,22.601693 -0.00164481,11.173986 -16.424036,22.601692 -10.630439,3.4517155 -26.573631,-8.6355515 -6.5706009,-9.0431814 Z" style="fill:#ff7271;stroke:#000000;stroke-width:1" /></g>' + ' ';	for ( var id in _mapData ) { if ( _mapData.hasOwnProperty( id ) ) { if ( !filterIds || filterIds.length == 0 || filterIds.indexOf( id ) != -1 ) { if ( id != _selectedPoint ) { svgData += _pointToSvgEl( _mapData[ id ], false ); }			}		}	}	if ( _selectedPoint ) { svgData += _pointToSvgEl( _mapData[ _selectedPoint ], true ); }	svgData += ' '; blob = new Blob( [ svgData ], { type : 'image/svg+xml' } ); if ( _svg ) { URL.revokeObjectURL( _svg ); }	_svg = URL.createObjectURL( blob ); $( '.lpamap .markupmap' ).eq( 0 ).empty.append( $( ' ' ).attr( { src: _svg, width: _originalWidth, height: _originalHeight } ) ); }, _pointToSvgEl = function( point, selected ) { var extra = ''; if ( selected ) { extra = ' style="filter:url(#invertColor)"'; }	return '<use xlink:href="#' + _expandedPointTypes[ point.t ] + '" x="' + point.x + '" y="' + point.y + '" w:id="' + point.id + '"' + extra + '/>'; }, _mapDown = function( e ) { _downCoords = [ e.clientX, e.clientY ]; }, _mapUp = function( e ) { var upCoords; upCoords = [ e.clientX, e.clientY ]; // Discard event if it's scrolling for ( var i = 0; i < 2; i++ ) { if ( Math.abs( upCoords[ i ] - _downCoords[ i ] ) > _sensibility ) { return; }	}	_downCoords = null; _mapUpFiltered.call( this, e ); return false; }, _zoomableMapClick = function( e ) { if ( _useMapUpFallback ) { $( '.lpamap .markupmap' ).eq( 0 ).off( 'mousedown mouseup' ); _useMapUpFallback = false; }	_mapUpFiltered.call( this, e ); }, _mapUpFiltered = function( e ) { var upCoords, hit, points, idx, newSelection = null; upCoords = [ e.clientX, e.clientY ]; hit = _translateToMap( upCoords ); points = _getPointsInHit( hit ); if ( points.length > 0 ) { if ( _selectedPoint && points.indexOf( _selectedPoint ) != -1 ) { // One of the target points is the one previously selected // Force changing the selection, or unselect if ( points.length > 1 ) { idx = points.indexOf( _selectedPoint ); if ( idx == points.length - 1 ) { idx = 0; } else { idx++; }				newSelection = points[ idx ]; }		} else { newSelection = points[ 0 ]; }	}	if ( !_selectedPoint && !newSelection ) { return; }	_selectedPoint = newSelection; _generateMap; _filterTableWithPoint; }, _translateToMap = function( coords ) { var rect = $( '.lpamap .markupmap img' )[ 0 ].getClientRects[ 0 ], factor = 1; factor = ( rect.right - rect.left ) / _originalWidth; return [ ( coords[ 0 ] - rect.left ) / factor, ( coords[ 1 ] - rect.top ) / factor, factor ]; }, _getPointsInHit = function( hit ) { var sensibility = _sensibility / hit[ 2 ], points = [], c1, c2; for ( var id in _mapData ) { if ( _mapData.hasOwnProperty( id ) ) { c1 = Math.abs( _mapData[ id ].x - hit[ 0 ] ); c2 = Math.abs( _mapData[ id ].y - hit[ 1 ] ); if ( Math.sqrt( c1 * c1 + c2 * c2 ) - _pointRadius <= sensibility ) { points.push( id ); }		}	}	return points; }, _filterTableWithPoint = function { var $table = $( 'table.LPAinteractivo' ).eq( 0 ), origTablePosition; origTablePosition = _detachElement( $table ); try { $table.find( 'label.map > input:checked' ).each( function {			this.checked = false;		} ); if ( _selectedPoint ) { $table.find( '> tbody > tr[data-principal]' ).each( function( idx ) {				var $tr = $( this ), ids = $tr.data( 'ids' );				if ( !ids || ids.split( ',' ).indexOf( _selectedPoint ) === -1 ) {					$tr.hide;					$tr = $tr.prev;					if ( $tr.hasClass( 'sep' ) ) {						$tr.hide;					}				} else {					$tr.show.prev.show;					$tr.find( 'label.map > input' )[ 0 ].checked = true;				}			} ); } else { _reapplyTableRowVisibility( $table ); }	} catch( e ) { console.log(e); }	_reattachElement( $table, origTablePosition ); }, _reapplyTableRowVisibility = function( $table ) { $table.find( '> tbody > tr[data-principal="1"]' ).each( function {		var $tr = $( this ).show, $prev, op;		$prev = $tr.prev;		if ( $prev.hasClass( 'sep' ) ) {			$prev.show;		}		op = $tr.find( 'label.det > input' )[0].checked ? 'show' : 'hide';		// Hide secondary		while ( 1 ) {			$tr = $tr.next.next;			if ( $tr.length === 0 || $tr.data( 'principal' ) !== 0 ) {				break;			}			$tr[ op ].prev[ op ];		}	} ); };

$(_init);

})( jQuery );