MediaWiki:Common.js

From GDPRhub
Revision as of 22:22, 10 September 2021 by GB (talk | contribs) (Show random items instead of fixed list in “New on GDPRhub” area)

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 randomBannerContainers = Array.from(document.querySelectorAll('.random-banner-container'));
randomBannerContainers.forEach(function (randomBannerContainer) {
	var elements = randomBannerContainer.querySelectorAll('.random-banner-option');
	if (elements.length === 0) {
		randomBannerContainer.replaceChildren(); // remove any children
	} else {
		var index = Math.floor(Math.random() * elements.length);
		randomBannerContainer.replaceChildren(elements[index]);
	}
	randomBannerContainer.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'));
    items.forEach(function (item) {
    	item.classList.add('preview-loading');
    });
	return fetch('/gdprhubomatic/news.json')
		.then(function (response) {
			if (!response.ok) throw new Error('fetch got ' + response.status);
			return response.json();
		}).then(function (json) {
			// remove incomplete entries
			json = json.filter(function (obj) {
				return obj['Page Title'];
			});
			// for each card, render content of a json item
			items.forEach(function (item) {
				// Pull out a random item
				var i = Math.floor(Math.random()*items.length);
				var jsonItem = json.splice(i,1)[0];
				if (jsonItem === undefined) item.remove();
				var props = {
					href: jsonItem['URL'],
					description: jsonItem['Summary'],
					image: jsonItem['Logo URL'],
					title: jsonItem['Page Title'],
				};
				updateContent(item, props);
				item.classList.add('preview-loaded');
				item.classList.remove('preview-loading');
			});
		}).catch(function (error) {
			console.log('Failed to fetch/display “new on gdprhub” items: ' + error.message);
		});

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