MediaWiki:Countdown.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.

$(function() {
	function calcDiff(d1, d2) {
		let remDiff = d2 - d1;
		const days = Math.floor(remDiff / (1000*60*60*24));
		remDiff = remDiff % (1000*60*60*24);
		const hours = Math.floor(remDiff / (1000*60*60));
		remDiff = remDiff % (1000*60*60);
		const minutes = Math.floor(remDiff / (1000*60));
		
		return { days: days, hours: hours, minutes: minutes };
	}
	
	
	const daySuffixes = new Map([
		['one',   'day'],
		['other', 'days'],
	]);
	const hourSuffixes = new Map([
		['one', 'hour'],
		['other', 'hours']
	]);
	const minuteSuffixes = new Map([
		['one', 'minute'],
		['other', 'minutes']
	]);
	
	function format(n, suffixes) {
		const pr = new Intl.PluralRules('en-US');
		return `${n} ${suffixes.get(pr.select(n))}`;
	}
	
	var intervals = [];
	
	function updateHTML(targetDate, countdownNode, index) {
		var diff = calcDiff(new Date(), targetDate);
		
		countdownNode.html(
			`
			${format(diff.days, daySuffixes)}, 
			${format(diff.hours, hourSuffixes)}, 
			${format(diff.minutes, minuteSuffixes)}
			`
		);
		if (diff.days <= 0 && diff.hours <= 0 && diff.minutes <= 0) {
			intervals[index] = clearInterval(intervals[index]);
			countdownNode.html('Event has ended');
		}
	}
	
	$('.js-countdown-wrapper').each(function(idx) {
		
		var countdown = $(this).children('.js-countdown');
		var d1 = new Date(countdown.data('event-end'));
		
		updateHTML(d1, countdown, idx);
		$(this).css({ 'display': 'block'});
		
		var interval = setInterval(function() {
			updateHTML(d1, countdown, idx);
		}, 30000);
		intervals.push(interval);
	});

}());