MediaWiki:Common.js: Difference between revisions
From GDPRhub
(Add scripts for loading “New on GDPRhub” previews, and for loading a random banner) |
No edit summary |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
/* Show random banner (see MediaWiki:Sitenotice, and MediaWiki:Common.css) */ | /* Show random banner (see MediaWiki:Sitenotice, and MediaWiki:Common.css) */ | ||
var | var randomBannerContainers = Array.from(document.querySelectorAll('.random-banner-container')); | ||
randomBannerContainers.forEach(function (randomBannerContainer) { | |||
var elements = | var elements = randomBannerContainer.querySelectorAll('.random-banner-option'); | ||
var index = Math.floor(Math.random() * elements.length); | 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 | /* “New on GDPRhub” list on main page | ||
Line 21: | Line 24: | ||
if (newOnGdprHubContainer) loadNewOnGdprHubItems(); // only on the main page | if (newOnGdprHubContainer) loadNewOnGdprHubItems(); // only on the main page | ||
function loadNewOnGdprHubItems() { | function loadNewOnGdprHubItems() { | ||
items = Array.from(newOnGdprHubContainer.querySelectorAll('li | items = Array.from(newOnGdprHubContainer.querySelectorAll('li')); | ||
items.forEach(function (item) { | |||
item.classList.add('preview-loading'); | |||
}); | |||
return fetch('/gdprhubnews/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']; | |||
//}); | |||
json = json[0]['json']; | |||
// for each card, render content of a json item | |||
items.forEach(function (item) { | |||
var | // Pull out a random item | ||
var i = Math.floor(Math.random()*items.length); | |||
var props = | 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); | updateContent(item, props); | ||
item.classList.add('preview-loaded'); | item.classList.add('preview-loaded'); | ||
item.classList. | item.classList.remove('preview-loading'); | ||
}); | }); | ||
}).catch(function (error) { | |||
console.log('Failed to fetch/display “new on gdprhub” items: ' + error.message); | |||
}); | |||
function updateContent(item, props) { | function updateContent(item, props) { | ||
item.innerHTML = | item.innerHTML = | ||
'<div class="card-text">' | '<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>' | |||
; | ; | ||
} | } | ||
} | } |
Latest revision as of 11:53, 17 November 2023
/* 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('/gdprhubnews/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'];
//});
json = json[0]['json'];
// 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>'
;
}
}