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

/* Any JavaScript here will be loaded for all users on every page load. */

/* Show random banner (see MediaWiki:Sitenotice, and MediaWiki:Common.css) */
var randomContainer = document.querySelector('.show-random-element');
if (randomContainer) {
	var elements = randomContainer.children;
	var index = Math.floor(Math.random() * elements.length);
	randomContainer.replaceChildren(elements[index]);
	randomContainer.classList.add('ready');
}


/* “New on GDPRhub” list on main page
 Functionality defined by multiple pieces: 
 - the NewPages extension
 - MediaWiki:Common.js to load the content to preview
	- relies on OpenGraphMeta+Description2 extensions to provide those contents
 - MediaWiki:Common.css to style the items as cards
*/
var newOnGdprHubContainer = document.getElementById('new-on-gdprhub');
if (newOnGdprHubContainer) loadNewOnGdprHubItems(); // only on the main page
function loadNewOnGdprHubItems() {
	items = Array.from(newOnGdprHubContainer.querySelectorAll('li a'));
	var parser = new DOMParser();
	var promises = items.map(function (item) {
		var pageTitle = item.textContent;
		updateContent(item, {
			title: pageTitle,
		});
		item.classList.add('preview-loading');
		var pageUrl = '/index.php?title=' + encodeURIComponent(pageTitle);
		return fetch(pageUrl)
			.then(function (response) {
				if (!response.ok) throw new Error('fetch got ' + response.status);
				return response.text();
			}).then(function (html) {
				// Cut off html source to only parse content of each page’s <head>
				html = html.slice(0, html.indexOf('</head>'));
				var dom = parser.parseFromString(html, 'text/html');

				var props = getOpenGraphData(dom, ['title', 'description', 'image']);
				props.title = pageTitle; // overwrite title to keep title of redirects
				updateContent(item, props);
				item.classList.add('preview-loaded');
				item.classList.add('preview-loading');
			}).catch(function (error) {
				console.log('Failed to load page preview for "' + pageTitle + '": ' + error);
				updateContent(item, {
					title: pageTitle,
					description: '',
				});
			});
	});
	return Promise.all(promises);

	function updateContent(item, props) {
		item.innerHTML =
			'<div class="card-text">'
				+ (props.title ? '<h4 class="card-title">' + props.title + '</h4>' : '')
				+ (props.description ? '<p class="card-description">' + props.description + '</p>' : '')
			+ '</div>'
			+ '<div class="card-image">'
				+ (props.image ? '<img src="' + props.image + '"/>' : '')
			+ '</div>'
		;
	}

	function getOpenGraphData(dom, propertyNames) {
		var ns = 'og'; // techinaclly we should read this from an xmlns attribute.
		var props = {};
	    propertyNames.forEach(function (name) {
	    	var el = dom.head.querySelector('meta[property="' + ns + ':' + name + '"]');
	    	if (el) props[name] = el.content;
	    });
	    return props;
	}
}