User:JGirault (WMF)/common.js

(function ( mw, $, module ) {

var shouldExit = !(mw.config.get( 'searchTerm' ));

if ( shouldExit ) { return; }

module.dependencies = (function ( module ) {

module.Helpers = (function ( module ) {

module.GeoJSON = (function ( module ) {

module.Point = (function ( mw, $ ) {					var Feature = function {						this.latitude = null;						this.longitude = null;						this.props = {};						this.customProps = {};					};

Feature.prototype.setLatLng = function ( latitude, longitude ) { this.latitude = latitude; this.longitude = longitude; };

Feature.prototype.setTitle = function ( title ) { this._setProperty( 'title', title ); };

Feature.prototype.setDescription = function ( description ) { this._setProperty( 'description', description ); };

Feature.prototype.setMarkerColor = function ( hexcode ) { this._setProperty( 'marker-color', hexcode ); };					Feature.prototype.setMarkerSize = function ( size ) { this._setProperty( 'marker-size', size ); };					Feature.prototype.setMarkerSymbol = function ( symbol ) { this._setProperty( 'marker-symbol', symbol ); };

Feature.prototype.getProperties = function { return $.extend( {}, this.props, this.customProps ); };

Feature.prototype._setProperty = function ( propName, propValue ) { this.customProps[ propName ] = propValue; }

Feature.prototype._hasProperties = function { return Object.keys( this.customProps ).length > 0 || Object.keys( this.props ).length > 0; };

Feature.prototype.getGeoJSON = function { var feature = this; var geoJson = { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ feature.longitude, feature.latitude ]							}						};

if ( this._hasProperties ) { geoJson.properties = this.getProperties; }

return geoJson;

};

return Feature; })( mediaWiki, jQuery );

return module;

})( {} );

module.SinglePointMap = (function ( mw, $ ) {

var Map = function ( container, latitude, longitude, options ) { this.container = container; this.latitude = latitude; this.longitude = longitude; this.options = options || {}; this.map = null; };

Map.prototype.draw = function { var deferred = $.Deferred, that = this;

mw.loader.using( [ 'ext.kartographer.style', 'ext.kartographer.box' ], function {

var kartoBox = mw.loader.require( 'ext.kartographer.box' ), map;

map = kartoBox.map( {							container: that.container,							center: [ +that.latitude, +that.longitude ],							zoom: 11,							allowFullScreen: true						} );

// TODO: this should not be required

// Bind the "ready" hook map.doWhenReady( function {

var marker = new module.GeoJSON.Point; marker.setLatLng( that.latitude, that.longitude ); if ( that.options.title ) { marker.setTitle( that.options.title ); }							if ( that.options.description ) { marker.setDescription( that.options.description ); }							marker.setMarkerColor( '3366cc' );

map.addDataLayer( marker.getGeoJSON ); deferred.resolve; } );					} );

return deferred.promise; };

return Map;

})( mediaWiki, jQuery, {} );

module.MultiplePointMap = (function ( mw, $ ) {

var Map = function ( container, points, options ) { this.container = container; this.points = points; this.options = options || {}; this.map = null; };

Map.prototype.draw = function { var deferred = $.Deferred, that = this;

mw.loader.using( [ 'ext.kartographer.style', 'ext.kartographer.box' ], function {

var kartoBox = mw.loader.require( 'ext.kartographer.box' ), map, marker, poiData, featureCollection = { "type": "FeatureCollection", "features": [] };						for (var i = that.points.length -1 ; i >= 0; i--) { poiData = that.points[ i ]; marker = new module.GeoJSON.Point; marker.setLatLng( poiData[ 0 ], poiData[ 1 ] ); if ( poiData[ 2 ] ) { marker.setTitle( poiData[ 2 ] ); }							if ( poiData[ 3 ] ) { marker.setDescription( poiData[ 3 ] ); }							marker.setMarkerColor( i === 0 ? '3366cc' : 'AEC8EB' ); featureCollection.features.push( marker.getGeoJSON ); }

mw.config.set( 'wgKartographerLiveData', 							$.extend( mw.config.get( 'wgKartographerLiveData' ) || {}, {searchresults: featureCollection} )						);

map = kartoBox.map( {							container: that.container,							zoom: 11,							dataGroups: ['searchresults'],							allowFullScreen: true						} );

// TODO: this should not be required

// Bind the "ready" hook map.doWhenReady( function ( map ) {							deferred.resolve;						} ); } );

return deferred.promise; };

return Map;

})( mediaWiki, jQuery, {} );

module.Html = (function ( mw, $ ) {

var Html = { createMapCard: function ( style ) { var computed;

style = style || {}; style.borderWidth = style.borderWidth || '1px'; style.padding = style.padding || '.5em 1em'; style.margin = style.margin || '.5em 1em'; style.float = style.float || 'none'; style.display = style.display || 'inline-block';

computed = [ 'border: ' + style.borderWidth + ' solid #c8ccd1', 'border-radius: 2px', 'padding: ' + style.padding, 'margin: ' + style.margin, 'float: ' + style.float, 'display: ' + style.display ];

return $( mw.html.element( 'div', { class: 'wd-map-card', style: computed.join( '; ' ) } ) );					},

createMapContainer: function ( options ) { var computed;

options = options || {};

options.className = [ 'wd-map' ].concat( [ options.className || '' ] ).join( ' ' ); options.width = options.width || '336px'; options.height = options.height || '448px';

computed = [ 'width: ' + options.width, 'max-width: ' + options.width, 'height: ' + options.height, 'max-height: ' + options.height ];

return $( mw.html.element( 'div', { class: options.className, style: computed.join( '; ' ) } ) );					}				};

return Html;

})( mediaWiki, jQuery, {} );

return module;

})( {} );

return module;

})( {} );

module.scripts = (function ( module, dependencies ) {

module.searchHook = (function ( module, helpers ) {

mw.hook( 'wikipage.content' ).add( function ( $content ) {

if ( !mw.config.get('searchTerm') ) { return; }				$.ajax( {					dataType: 'jsonp',					url: '/w/api.php?action=query&format=json&prop=coordinates&generator=search&gsrsearch=' + encodeURIComponent( mw.config.get('searchTerm') ),					error: function ( jqXHR, textStatus, errorThrown ) {						console.log('error:', arguments);					},					success: function( response ) {						var key, marker, items;						if ( !response.hasOwnProperty( 'query' ) ) {							// nothing found;							return;						}						items = response['query']['pages'];						var markers = [];						for ( key in items ) {							markers[ items[key].index-1 ] = [ 								items[key]['coordinates'][0].lat,								items[key]['coordinates'][0].lon,								items[key].title							];						}					var $mapCard,						$map,						map;

$mapCard = helpers.Html.createMapCard( {						padding: '0',						margin: '0 0 1em 0',						float: 'none',						display: 'block',						borderWidth: '0'					} );

$map = helpers.Html.createMapContainer( {						width: '100%',						height: '180px',						className: 'wp-search-results-map'					} );

$content.find( 'div.searchresults' ).prepend( $mapCard.append( $map ) );

map = new helpers.MultiplePointMap(						$map[ 0 ],						markers					); map.draw; }				} );			} );

return module; d })( {}, dependencies.Helpers );

return module;

})( {}, module.dependencies );

})( mediaWiki, jQuery, {} );