MediaWiki:Gadget-OpenStreetMap.js

Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.

Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
Internet Explorer / Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5
Opera: premi Ctrl-F5.

/**
 * OpenStreetMap: aggiunge il link "Mappa" a lato delle coordinate visualizzate
 * in alto a destra nelle voci georeferenziate, per aprire la mappa di OpenStreetMap.
 * Basato in parte su [[meta:MediaWiki:OSM.js]] e [[fr:MediaWiki:Gadget-osm.js]]
 * e ampiamente modificato da [[it:User:Rotpunkt]].
 */
/*jshint unused: false */
/*global mediaWiki, jQuery */

( function ( mw, $ ) {
	'use strict';

	function showOpenStreetMap( geohackParams ) {
		var url, $topDiv, $iframe, $osmDiv;
	
		// top div
		$topDiv = $( '<div>' ).css( { position: 'relative', top: '0', width: '100%', height: '10%' } );
		$( '<a>' )
			.attr( 'href', '#' )
			.attr( 'title', 'Nascondi la mappa' )
			.text( 'Nascondi' )
			.css( { float: 'right', margin: '10px' } )
			.click( function ( e ) {
				e.preventDefault();
				$( '#OpenStreetMap' ).hide();
			} )
			.appendTo( $topDiv );
	
		// iframe
		url = '//tools.wmflabs.org/wiwosm/osm-on-ol/kml-on-ol.php?' +
			  'lang=' + mw.config.get( 'wgPageContentLanguage' ) +
			  '&uselang=' + mw.util.rawurlencode( mw.config.get( 'wgUserLanguage' ) ) +
			  '&params=' + geohackParams +
			  '&title=' + mw.util.wikiUrlencode( mw.config.get( 'wgTitle' ) ) +
			  ( window.location.protocol === 'https:' ? '&secure=1' : '' );
		$iframe = $( '<iframe>' )
			.attr( 'src', url )
			.css( { width: '100%', height: '90%', clear: 'both' } );

		var scrollX, scrollY;
		// Impedisci lo scroll della pagina quando il puntatore è sulla mappa
		var scrollBlock = function() {
			window.scrollTo( scrollX, scrollY );
		};

		// container div
		$osmDiv = $( '<div>' )
			.attr( 'id', 'OpenStreetMap' )
			.attr( 'title', 'Clicca e trascina per ridimensionare la mappa' )
			.css( {
				position : 'absolute',
				zIndex : 5000,
				top: '10%',
				left: '15%',
				width : '70%',
				height : '80%',
				border : '2px solid black',
				backgroundColor : 'white',
				overflow : 'hidden',
				cursor: 'move'
			} )
			.append( $topDiv )
			.append( $iframe )
			.mouseenter( function() {
				scrollX = window.scrollX;
				scrollY = window.scrollY;
				$( document ).on( 'scroll', scrollBlock );
			} )
			.mouseleave( function() {
				$( document ).off( 'scroll', scrollBlock );
    		} );
			
		mw.loader.using( ['jquery.ui'] )
			.done( function () {
				$osmDiv.draggable();
				$osmDiv.resizable( { minWidth: 150, minHeight: 200 } );
			} )
			.fail( function () {
				console.error( 'Impossibile avviare l\'accessorio OpenStreetMap.' );
			} );
		$( 'body' ).append( $osmDiv );
	}
	
	// ritorna i parametri geohack, cercandoli nel tag anchor creato dal template coord
	function getGeohackParams() {
		var ret;
		$( '#coordinates a' ).each( function( i, el ) {
			if ( el.href.match( /geohack/ ) && !el.href.match( /(skyhack|_globe:(?!earth))/ ) ) {
				ret = el.href.split( 'params=' )[1];
				return false;
			}
		} );
		return ret;
	}
	
	$( function () {
		var $toggleAnchor, $coordinates = $( '#coordinates' ), geohackParams = getGeohackParams();
		// se è stato utilizzato il template coord e se sono presenti parametri geohack validi
		if ( $coordinates.length && geohackParams ) {
			$toggleAnchor = $( '<a>' )
				.attr( 'href', '#' )
				.attr( 'title', 'Mostrare / nascondere la mappa' )
				.text( 'Mappa' )
				.click( function ( e ) {
					e.preventDefault();
					var $osmDiv = $( '#OpenStreetMap' );
					if ( $osmDiv.length ) {
						$osmDiv.toggle();
					} else {
						showOpenStreetMap( geohackParams );
					}
				} );
			$coordinates.append( ' (', $toggleAnchor, ')' );
		}
	} );
}( mediaWiki, jQuery ) );