//<nowiki> /******************************************************************************  * ColourfulMarkers  * Färbt Marker um  *  * Maintainer: Nw520  ******************************************************************************/ mw.hook( 'wikipage.content' ).add( async function hook( $container ) { 	mw.hook( 'wikipage.content' ).remove( hook ); 	mw.hook( 'wikipage.content' ).add( main );  	await mw.loader.using( [ 'mediawiki.util' ] );  	const bases = window.nw520_config?.colourfulMarkers_bases ?? { 		see: [ 207, 44, 49 ] 	}; 	const colourLookup = {}; 	const types = window.nw520_config?.colourfulMarkers_types ?? [ 		{ 			base: 'see', 			offset: -35, 			types: [ 				'castle', 				'chateau', 				'city wall', 				'fort', 				'wall' 			] 		}, { 			base: 'see', 			offset: 70, 			types: [ 				'archive', 				'botanical_garden', 				'exhibition', 				'gallery', 				'open_air_museum', 				'mining_museum', 				'museum', 				'museum_ship' 			] 		}, { 			base: 'see', 			offset: 35, 			types: [ 				'bahai_temple', 				'basilica', 				'cathedral', 				'chapel', 				'church', 				'hindu_temple', 				'minaret', 				'monastery', 				'mosque', 				'nunnery', 				'religious_site', 				'sanctuary', 				'shinto_shrine', 				'shrine', 				'synagogue', 				'temple', 				'wat' 			] 		} 	];  	function main() { 		const mapLinks = $container[ 0 ].querySelectorAll( '.mw-kartographer-maplink' );  		applyColoursToMap( mapLinks ); // Apply once for all embedded maps  		for ( const maplink of [ ...mapLinks, ...document.querySelectorAll( '.oo-ui-icon-fullScreen' ) ] ) { 			maplink.addEventListener( 'click', async function eventHandler() { 				mapLinks.forEach( ( maplink ) => maplink.removeEventListener( 'click', eventHandler ) ); // Remove handler, running once should suffice  				applyColoursToMap( mapLinks ); // Apply for fullscreen map 			} ); 		} 	}  	function addCss() { 		for ( const subgroup of types ) { 			const base = bases[ subgroup.base ];  			for ( const member of subgroup.types ) { 				const newColour = subgroup.offset !== undefined ? `hsl(calc(${base[ 0 ]} + ${subgroup.offset}), ${base[ 1 ]}%, ${base[ 2 ]}%)` : subgroup.colour; 				 				mw.util.addCSS( `.mw-parser-output .vcard[data-type=${member}] .listing-map, .mw-parser-output .vcard[data-type=${member}] .listing-map .mw-kartographer-maplink { 	background-color: ${newColour} !important; 	border-color: ${newColour} !important; }` ); 			} 		} 	}  	async function applyColoursToMap() { 		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );  		for ( const vcard of $container[ 0 ].querySelectorAll( '.vcard' ) ) { 			const vcardColour = vcard.dataset.color; 			const vcardTitle = vcard.dataset.name; 			const vcardType = vcard.dataset.type;  			const newColour = colourLookup[ vcardType ];  			if ( newColour === undefined ) { 				continue; 			}  			for ( const pin of document.querySelectorAll( `.mw-kartographer-map .leaflet-marker-icon[src$="${vcardColour.slice( 1 )}.png"][title="${vcardTitle.replace( /"/g, '' )}"], .mw-kartographer-mapDialog-map .leaflet-marker-icon[src$="${vcardColour.slice( 1 )}.png"][title="${vcardTitle.replace( /"/g, '' )}"]` ) ) { 				const counter = pin.src.match( /pin-m-(\d+)\+[\dA-F]{6}\.png$/ )[ 1 ]; 				pin.src = `https://maps.wikimedia.org/v4/marker/pin-m-${counter}+${newColour}.png`; 			} 		} 	}  	/** 	 * https://stackoverflow.com/a/44134328 	 * 	 * @param {number} h 	 * @param {number} s 	 * @param {number} l 	 * @return {string} 	 */ 	function hslToHex( h, s, l ) { 		l /= 100; 		const a = s * Math.min( l, 1 - l ) / 100; 		const f = ( n ) => { 			const k = ( n + h / 30 ) % 12; 			const color = l - a * Math.max( Math.min( k - 3, 9 - k, 1 ), -1 ); 			return Math.round( 255 * color ).toString( 16 ).padStart( 2, '0' ); // convert to Hex and prefix "0" if needed 		}; 		return `#${f( 0 )}${f( 8 )}${f( 4 )}`; 	}  	function index() { 		for ( const subgroup of types ) { 			const base = bases[ subgroup.base ];  			for ( const member of subgroup.types ) { 				const newColour = subgroup.offset !== undefined ? hslToHex( base[ 0 ] + subgroup.offset, base[ 1 ], base[ 2 ] ).slice( 1 ) : subgroup.colour; 				colourLookup[ member ] = newColour; 			} 		} 	}  	addCss(); 	index(); 	main(); } ); //</nowiki>