User:Nikki/UserPronouns.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* This script shows on user pages which option that user has selected for how
   to refer to them, i.e. using male, female or gender-neutral language.

   To use it, add the following line to your global.js on Meta-Wiki if you want
   it to work on all wikis, or to your common.js on a specific wiki if you only
   want to use it on that wiki:
   mw.loader.load("//meta.wikimedia.org/w/index.php?title=User:Nikki/UserPronouns.js&action=raw&ctype=text/javascript");

   License: CC0
*/

(function () {
	"use strict";

	let translations = {
		"en": {
			"male": "use male language forms (e.g. “$1”)",
			"female": "use female language forms (e.g. “$1”)",
			"unknown": "use gender-neutral language forms (e.g. “$1”)",
		},
		"de": {
			"male": "männliche Sprachformen benutzen (z.B. „$1“)",
			"female": "weibliche Sprachformen benutzen (z.B. „$1“)",
			"unknown": "genderneutrale Sprachformen benutzen (z.B. „$1“)",
		},
	};

	let user = mw.config.get("wgRelevantUserName");
	if (!user) // No user information found - probably not on a user page
		return;

	mw.loader.using(["jquery.i18n", "mediawiki.api", "mediawiki.jqueryMsg"], function () {
		$.i18n().load(translations);

		let api = new mw.Api();
		api.get({
			action: "query",
			list: "users",
			usprop: "gender",
			ususers: user,
			formatversion: "2"
		}).then(function (data) {
			let u = data.query.users[0];
			if (u.hasOwnProperty("invalid"))
				return; // Invalid user - probably an IP address

			let gender = data.query.users[0].gender;

			api.loadMessagesIfMissing(["Gender-male", "Gender-female", "Gender-notknown"]).then(function () {
				let example = mw.msg("Gender-" + (gender == "unknown" ? "notknown" : gender));
				let css = {
					"color": "#2a4b8d",
					"display": "block",
					"font-family": "sans-serif",
					"font-size": "0.8rem",
					"margin-bottom": "0.2em",
					"padding-left": "1em",
				};
				let $span = $("<span/>").css(css).appendTo("#firstHeading");
				$span.text($.i18n(gender, example));
			});
		});
	});

}());