MediaWiki:Gadget-MainPageDynamicContent.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Handles dynamic content for the main page (Did You Know? and On This Day)
 * This is based on Fire Emblem Wiki's https://fireemblemwiki.org/wiki/MediaWiki:Gadget-MainPageRandomizer.js
 * by the user Peter Samuels and it was modified for Megami Tensei Wiki by its original author.
 */
const api = new mw.Api();
const didYouKnow = require('./DidYouKnowData.js');
const { gameAnniversaries, characterBirthdays, miscEvents } = require('./OnThisDayData.js');
function doRandomization(idName, listName) {
	const element = document.getElementById(idName);
	if (!element) {
		return;
	}
	const randomItem = listName[Math.floor(Math.random() * listName.length)];
	
	api.parse(randomItem).done(function (parsedHtml) {
		element.innerHTML = parsedHtml;
	});
}
$(function () {
	/* Did You Know? randomizer for main page */
	for(const [key, value] of Object.entries(didYouKnow)) {
		doRandomization(key, value);
	}
	
	/* "On this day" for main page */
	let otdElement = document.getElementById("onThisDay");
	if (!otdElement) {
		return;
	}
	function makeList(array, separator, prefix, suffix) {
		const items = array.map(item => `${prefix}${item}${suffix}`);
	
		if (items.length === 1) {
			return items[0];
		} else if (items.length === 2) {
			return `${items[0]} and ${items[1]}`;
		} else {
			return items.slice(0, -1).join(separator) + separator + "and " + items[items.length - 1];
		}
	}
	const clientDate = new Date();
	const month = clientDate.getMonth() + 1;
	const day = clientDate.getDate();
	
	var anniOutput = "";
	if (gameAnniversaries && gameAnniversaries[month] && gameAnniversaries[month][day]) {
		let length = gameAnniversaries[month][day].length;
		let gameList = makeList(gameAnniversaries[month][day], ", ", '{{Link|Game|', '}}');
		let verb = "was";
		if (length > 1) {
			verb = "were";
		}
		anniOutput = `<p>${gameList} ${verb} released.</p>`;
	} else {
		anniOutput = "";
	}
	
	var bdayOutput = "";
	if (characterBirthdays && characterBirthdays[month] && characterBirthdays[month][day]) {
		let charList = makeList(characterBirthdays[month][day], ", ", '[[', ']]');
		bdayOutput = `<p>It is the birthday of ${charList}.</p>`;
	} else {
		bdayOutput = "";
	}
	
	var miscOutput = "";
	if (miscEvents && miscEvents[month] && miscEvents[month][day]) {
		let miscList = makeList(miscEvents[month][day], "; ", '', '');
		miscOutput = `<p>${miscList}.</p>`;
	} else {
		miscOutput = "";
	}
	
	var otdOutput = `${anniOutput}${bdayOutput}${miscOutput}`;
	var isEmpty = otdOutput === "";
	if (isEmpty) {
		otdOutput = "Sorry nothing";
		otdElement.innerHTML = otdOutput;
		return;
	}
	/* Add pic */
	api.parse(otdOutput).done(function (parsedOtd) {
		const $parsed = $(parsedOtd);
		const $firstLink = $parsed.find('a').first();
		if ($firstLink.length > 0) {
			var pageTitle = $firstLink.attr('title') || $firstLink.text().trim();
			var preferredPages = {
				"Kuma no Megane": "Persona 5",
				"Giten Megami Tensei: Tokyo Revelation": "Shin Megami Tensei: Imagine"
			};
			if (preferredPages[pageTitle]) {
				pageTitle = preferredPages[pageTitle];
			}
			const apiParameters = {
				action: 'query',
				titles: pageTitle,
				prop: 'pageimages',
				format: 'json'
			};
			api.get(apiParameters).done(function (data) {
				const pages = data.query.pages;
				const pageId = Object.keys(pages)[0];
				const fileName = pages[pageId].pageimage;
				if (fileName) { // Check if image exists
					api.parse(`[[File:${fileName}|right|200x180px]]`).done(function (parsedImg) {
						otdElement.innerHTML = parsedImg + parsedOtd;
					});
				} else {
					otdElement.innerHTML = parsedOtd;
				}
			});
		}
	});
});

/* Refresh button */
const span = document.getElementById('dyk-refresh');

span.addEventListener('click', function() {
	for(const [key, value] of Object.entries(didYouKnow)) {
		doRandomization(key, value);
	}
});

span.addEventListener('keydown', function(e) {
	if (e.key === 'Enter') {
		for(const [key, value] of Object.entries(didYouKnow)) {
			doRandomization(key, value);
		}
	}
});