MediaWiki
LanguagesGallery.js
Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* *************************************************************** */
/* LanguageGallery script **************************************** */
// Description: given json data provided in MediaWiki pages, merge those data, project language cards.
// Usage: [[Template:LanguagesGallery]]
// Usage: open [[Template:LanguagesGallery]] > Open, loads > Click for more.
// Hack pad:https://jsfiddle.net/hugolpz/vnz238xq/
// Documentations:
// Author: Yug
/* *************************************************************** */
/* TOOLS ********************************************************* */
/* *************************************************************** */
// Clean data
var cleanResponseDataBindings = function(dataBindings) {
var res = dataBindings.map(item => {
var keys = Object.keys(item);
var obj = {};
for (var i = 0; i < keys.length; i++) {
var key = keys[i],
val = item[key].value;
obj[key] = val;
}
return obj
});
return res;
}
/* *************************************************************** */
// Merge data by common property
var mergeTwoArraysById = function(arr1, arr2, id1) {
return arr1.map(item1 => {
var identical = arr2.find(obj => obj[id1] === item1[id1]) || '';
return identical ? Object.assign(identical, item1): item1;
});
}
/* *************************************************************** */
// SORT ?
/* *************************************************************** */
/* HTML TEMPLATE ************************************************* */
// Beautity numbers
//console.log(10000.toLocaleString()); // "10,000"
// Template
var tpl = function(lang) {
var language = lang.language.split('entity/')[1],
languageLabel = lang.languageLabel,//
wikidata = lang.wikidata, //
iso = lang.iso,//
wiki = lang.wiki,
records = Number(lang.records),
words = Number(lang.words).toLocaleString(),
speakers = Number(lang.speakers),
//speakersMales = Number(lang.speakersMales),
//speakersOthers = Number(lang.speakersOthers),
malesSpeakers = Number(lang.malesSpeakers || 0),
femalesSpeakers = Number(lang.femalesSpeakers || 0),
othersSpeakers = speakers - (malesSpeakers + femalesSpeakers),
malesRecords = Number(lang.malesRecords || 0),
femalesRecords = Number(lang.femalesRecords || 0),
othersRecords = records - (malesRecords + femalesRecords),
percentFemalesRecords = Number(femalesSpeakers/speakers),
population = Number(lang.population || 'n.a.'),
populationQualifier = lang.populationQualifier;
return `<div>
<h2>${languageLabel} (${iso||language})</h2>
<span>Recordings: ${records.toLocaleString()} (f:${femalesRecords||0}|m:${malesRecords||0}${othersRecords?'|o:'+othersRecords:''})</span>
<span>Voices: ${speakers.toLocaleString()} (f:${femalesSpeakers||0}|m:${malesSpeakers||0}${othersSpeakers?'|o:'+othersSpeakers:''})</span>
<span>Population: ${population.toLocaleString()}</span>
<div>`
}
/* *************************************************************** */
// Native Javascript
// CREATES CLASS for API fetching, returns text to decode and parse
class apiContentFetcher {
constructor(prefix, suffix) {
this.prefix = prefix || 'https://lingualibre.org/index.php?title=';
this.suffix = suffix || '&action=raw&ctype=text/json';
}
page(page) {
page = encodeURIComponent(page);
//const fullUrl = 'https://lingualibre.org/api.php?action=query&list=users&ususers=yug&usprop=groups|editcount|registration&format=json&origin=*';
const fullUrl = this.prefix + page + this.suffix + '&origin=*';
const headers = {
'Accept': 'text/javascript,text/json,text/xml,text/csv,application/javascript,application/json,application/xml,application/csv'
};
return fetch(fullUrl, {
headers
}).then(response => response.text())
.catch(function(err) {
console.error(`Error in API call on ${page}:\n${err}`)
});
}
}
/* *************************************************************** */
/* ALTERNATIVE FETCH ******************************************** * /
// Note: I used the class creation above to learn it, but alternatives below work too.
// Native Javascript (on mediawiki : works)
var url = 'https://lingualibre.org/api.php?action=query&list=users&ususers=yug&usprop=groups|editcount|registration&format=json&origin=*';
fetch(url)
.then(d=> d.json())
.then(d=> storeData(d,'Fetchy 1') )
.catch(function(err){ console.error('Error in API call, fetch 1: '+err);
});
// JQuery Javascript (on mediawiki: not tested)
$.getJSON(url,
{ format: 'json', origin: '*' },
function(data){ console.log('JQuery: ',data)}
);
*/
/* *************************************************************** */
/* DATA ********************************************************** */
// Sources
var sources = [
{ page: 'LanguagesRecordsData.js' },
{ page: 'LanguagesGenderData.js' },
{ page: 'LanguagesSpeakersData.js' },
{ page: 'LanguagesPopulationData.js' }
];
var datas = {}; // final object containing consolidated result
var pings = [];
var removeJsComments = function(text) {
return text.replace(/\n*(\/\*.+)+(\n.+)+\*\/(\n)*/g, '')
}
var storeData = function(store, key, text) {
console.log(`Response text from ${key}: ${text}`);
console.log(`Without comments ${key}: ${removeJsComments(text)}`);
store[key] = JSON.parse(removeJsComments(text));
};
// Fetch json resources, store into var `datas={}`
const rawPageFetcher = new apiContentFetcher();
rawPageFetcher.page('MediaWiki:' + sources[0].page)
.then(d => storeData(datas, sources[0].page, d));
rawPageFetcher.page('MediaWiki:' + sources[1].page)
.then(d => storeData(datas, sources[1].page, d));
rawPageFetcher.page('MediaWiki:' + sources[2].page)
.then(d => storeData(datas, sources[2].page, d));
rawPageFetcher.page('MediaWiki:' + sources[3].page)
.then(d => storeData(datas, sources[3].page, d));
// Note: When all the expected objects are stored, then the dataviz code is ran.
/* *************************************************************** */
/* MAIN RUN ****************************************************** */
var waitDataThenFire = setInterval(function() {
console.log('ping');
pings.push('pong');
console.log(datas)
if (Object.keys(datas).length == sources.length || pings.length == 20) {
clearInterval(waitDataThenFire);
// pings
console.log(pings);
// Data merging
var final = datas[sources[0].page];
final = mergeTwoArraysById(final, datas[sources[1].page], 'wikidata')
final = mergeTwoArraysById(final, datas[sources[2].page], 'wikidata')
final = mergeTwoArraysById(final, datas[sources[3].page], 'wikidata')
console.log(datas);
console.log(final);
//Dataviz
console.log('run dataviz');
/* *************************************************************** */
/* INJECTIONS **************************************************** */
var injection = function(consolidatedData, min, max, htmlHook) {
//
};
var _10k = final.filter(item => item.records > 9999 && item.records < 10000000);
var _1k = final.filter(item => item.records > 999 && item.records < 10000);
var _1 = final.filter(item => item.records > 0 && item.records < 1000);
console.log('_10k: ', _10k)
console.log('_1k: ', _1k)
console.log('_1: ', _1)
_10k.forEach(item => $('#lg-10k').append(tpl(item)))
_1k.forEach(item => $('#lg-1k').append(tpl(item)))
_1.forEach(item => $('#lg-1').append(tpl(item)))
}
}, 500);
/* *************************************************************** */
/* PAGE INTERACTIONS ********************************************* */
// Show more/less cards for this section
// Show more/less infor overall