Benutzer:Nw520/ColourfulMarkers.js

//<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>