MediaWiki:Citizen.js: Difference between revisions

/* All JavaScript here will be loaded for users of the Citizen skin. */

// Community shortcuts using Citizen's current header button markup.
$( function () {
	const drawer = document.querySelector( '.citizen-drawer' );
	if ( !drawer ) {
		return;
	}

	let previous = drawer;
	[
		{ name: 'discord', label: 'Join us on Discord!', href: 'https://discord.gg/sarkic' },
		{ name: 'roblox', label: 'Sarkic Cults on Roblox', href: 'https://www.roblox.com/groups/3388048' }
	].forEach( function ( service ) {
		const existing = document.querySelector( '.citizen-social--' + service.name );
		if ( existing ) {
			previous = existing;
			return;
		}

		const item = document.createElement( 'div' );
		item.className = 'citizen-social citizen-social--' + service.name + ' citizen-header__item';
		const link = document.createElement( 'a' );
		link.className = 'citizen-' + service.name + ' citizen-cdx-button--size-large cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet';
		link.href = service.href;
		link.target = '_blank';
		link.rel = 'noopener noreferrer';
		link.title = service.label;
		link.setAttribute( 'aria-label', service.label );
		const icon = document.createElement( 'span' );
		icon.className = 'citizen-social__icon citizen-social__icon--' + service.name;
		icon.setAttribute( 'aria-hidden', 'true' );
		link.appendChild( icon );
		item.appendChild( link );
		previous.insertAdjacentElement( 'afterend', item );
		previous = item;
	} );
} );