User:0x010C/scripts/QuickLoc.js

Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
if( mw.config.get( 'wgCanonicalNamespace' ) === 'File' ) {
	mw.loader.using( [ 'ext.kartographer.box', 'oojs-ui' ], function () {
		var kartoBox = mw.loader.require( 'ext.kartographer.box' ),
			map,
			popup,
			lat,
			lng;
		
		function openMap() {
			// Prepare the popup
			var cameraButton = new OO.ui.ButtonWidget( {
				label: 'Camera location',
				icon: 'next',
				iconTitle: 'Save',
				flags:['primary','progressive']
			} );
			cameraButton.on('click', function() {
				addTemplate('{{Location|'+lat+'|'+lng+'}}');
			} );
			var objectButton = new OO.ui.ButtonWidget( {
				label: 'Object location',
				icon: 'next',
				iconTitle: 'Save'
			} );
			objectButton.on('click', function() {
				addTemplate('{{Object location|'+lat+'|'+lng+'}}');
			} );
			var container = document.createElement( 'div' );
			container.append(cameraButton.$element[0]);
			container.append(objectButton.$element[0]);
			popup = L.popup();
			popup.setContent(container);
			
			// Choose the coordinates of the map
			lat = 37.7868;
			lng = -122.3995;
			var zoom = 11;
			if ( $.cookie( 'quickloc' ) !== null ) {
				var coords = $.cookie( 'quickloc' ).split( ',' );
				lat = parseFloat(coords[0]);
				lng = parseFloat(coords[1]);
				zoom = parseFloat(coords[2]);
			}
			
			// Open the map
			map = kartoBox.map( {
				container: $( '#qlContainer' ).empty().css( { height: 400 } )[ 0 ],
				center: [ lat, lng ],
				zoom: zoom,
				allowFullScreen: false,
			} );
			map.on('click', onMapClick);
		}
		
		function onMapClick( e ) {
		    lat = e.latlng.lat;
		    lng = e.latlng.lng;
		    $.cookie("quickloc", e.latlng.lat.toString() + ',' + e.latlng.lng.toString() + ',' + map.getZoom(), { expires: 365 });
		    popup.setLatLng( e.latlng ).openOn( map );
		}
		
		function addTemplate( template ) {
			var api = new mw.Api();
			api.postWithToken( 'csrf', {
				action: 'edit',
				format: 'json',
				title: mw.config.get("wgPageName"),
				section: 1,
				summary: 'adding location informations using [[User:0x010C/scripts/QuickLoc.js|QuickLoc]]',
				nocreate: 1,
				appendtext: '\n'+template,
			} ).done( function ( data ) {
				mw.notify("The location was successfully added!");
				setTimeout(function() {
					location.reload();
				}, 750);
			} );
		}
		
		// Initialise the gadget
		var startButton = new OO.ui.ButtonWidget( {
				label: 'Add a geolocation',
				icon: 'search',
				iconTitle: 'Search',
				flags:['primary','progressive'],
			} );
		
		startButton.on( 'click', function() {
			openMap();
		} );
		
		$( '.commons-file-information-table' ).last().after( $( '<div>' ).attr( 'id', 'qlContainer').append( startButton.$element[0] ) );
	} );
}