MediaWiki
Difference between revisions of "LanguagesGallery.js"
m |
m |
||
Line 9: | Line 9: | ||
/* *************************************************************** */ | /* *************************************************************** */ | ||
− | /* | + | /* TOOLS ********************************************************* */ |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* *************************************************************** */ | /* *************************************************************** */ | ||
// Clean data | // Clean data | ||
Line 52: | Line 37: | ||
/* *************************************************************** */ | /* *************************************************************** */ | ||
// SORT ? | // SORT ? | ||
− | + | ||
+ | /* *************************************************************** */ | ||
+ | /* HTML TEMPLATE ************************************************* */ | ||
+ | // Beautity numbers | ||
+ | //console.log(10000.toLocaleString()); // "10,000" | ||
+ | |||
+ | // Template | ||
+ | var tpl = function(lang){ | ||
+ | return `<div> | ||
+ | <h2>${lang.label} (${lang.iso||lang.qid})</h2> | ||
+ | <span>Recordings: ${lang.recordsF+lang.recordsM} (${lang.recordsF}|${lang.recordsM})</span> | ||
+ | <span>Speakers: ${lang.speakersF+lang.speakersM} (${lang.speakersF}|${lang.speakersM})</span> | ||
+ | <span>Population: ${lang.population.toLocaleString()}</span> | ||
+ | <div>` | ||
+ | } | ||
+ | |||
Line 74: | Line 74: | ||
+ | /* *************************************************************** */ | ||
+ | /* DATA ********************************************************** */ | ||
+ | // Sources | ||
+ | var sources = [ | ||
+ | { page: 'LanguagesGalleryData.js'}, | ||
+ | { page: 'LanguagesGalleryData.js'},/* | ||
+ | { page: 'LanguageSpeakersFemaleData.js'}, | ||
+ | { page: 'LanguageSpeakersMaleData.js'}, | ||
+ | { page: 'LanguageWikidataData.js'},*/ | ||
+ | ]; | ||
+ | var datas = {}; // final object containing consolidated result | ||
+ | var pings = []; | ||
+ | |||
+ | var storeData = function(store,key,data){ | ||
+ | console.log(`Data ${key}: ${JSON.stringify(data)}`); | ||
+ | store[key]=data; | ||
+ | }; | ||
+ | // Fetch resources (json data) | ||
const rawPageFetcher = new apiContentFetcher(); | const rawPageFetcher = new apiContentFetcher(); | ||
rawPageFetcher.page('MediaWiki:'+sources[0].page) | rawPageFetcher.page('MediaWiki:'+sources[0].page) | ||
− | .then(d=> storeData(d, sources[ | + | .then(d=> storeData(datas, sources[0].page), d); |
+ | rawPageFetcher.page('MediaWiki:'+sources[1].page) | ||
+ | .then(d=> storeData(datas, sources[1].page+'B', d)); | ||
+ | |||
+ | // Note: When all the expected objects are in stored, then the dataviz code is ran. | ||
/* *************************************************************** */ | /* *************************************************************** */ | ||
− | // Native Javascript | + | /* 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=*'; | var url = 'https://lingualibre.org/api.php?action=query&list=users&ususers=yug&usprop=groups|editcount|registration&format=json&origin=*'; | ||
fetch(url) | fetch(url) | ||
Line 87: | Line 111: | ||
}); | }); | ||
− | + | // JQuery Javascript (on mediawiki: not tested) | |
− | + | $.getJSON(url, | |
− | + | { format: 'json', origin: '*' }, | |
− | + | function(data){ console.log('JQuery: ',data)} | |
− | + | ); | |
− | + | */ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
//Temporary fake data, clean: | //Temporary fake data, clean: | ||
Line 134: | Line 130: | ||
console.log(JSON.stringify(final)) | console.log(JSON.stringify(final)) | ||
+ | |||
+ | /* *************************************************************** */ | ||
+ | /* INJECTIONS **************************************************** */ | ||
var _10k = final.filter(item => item.recordsF+item.recordsM > 9999); | var _10k = final.filter(item => item.recordsF+item.recordsM > 9999); | ||
console.log('_10k: ', _10k) | console.log('_10k: ', _10k) | ||
Line 147: | Line 146: | ||
+ | |||
+ | /* *************************************************************** */ | ||
+ | /* MAIN RUN ****************************************************** */ | ||
+ | var waitDataThenFire = setInterval(function() { | ||
+ | console.log('ping'); | ||
+ | pings.push('pong'); | ||
+ | console.log(datas) | ||
+ | if(Object.keys(datas).length==sources.length){ | ||
+ | console.log(pings); | ||
+ | console.log(JSON.stringify(datas)); | ||
+ | console.log('run dataviz'); | ||
+ | clearInterval(waitDataThenFire); | ||
+ | } | ||
+ | }, 500); | ||
+ | |||
+ | |||
/* *************************************************************** */ | /* *************************************************************** */ | ||
/* PAGE INTERACTIONS ********************************************* */ | /* PAGE INTERACTIONS ********************************************* */ | ||
// Show more/less cards for this section | // Show more/less cards for this section | ||
// Show more/less infor overall | // Show more/less infor overall |
Revision as of 14:29, 20 January 2022
/* *************************************************************** */
/* 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 merge2ArraysBySameId = function(arr1,arr2,id1){
return arr1.map( item1 => {
var identical = arr2.find(obj => obj[id1] === item1[id1]);
return Object.assign(identical, item1)
} );
}
/* *************************************************************** */
// SORT ?
/* *************************************************************** */
/* HTML TEMPLATE ************************************************* */
// Beautity numbers
//console.log(10000.toLocaleString()); // "10,000"
// Template
var tpl = function(lang){
return `<div>
<h2>${lang.label} (${lang.iso||lang.qid})</h2>
<span>Recordings: ${lang.recordsF+lang.recordsM} (${lang.recordsF}|${lang.recordsM})</span>
<span>Speakers: ${lang.speakersF+lang.speakersM} (${lang.speakersF}|${lang.speakersM})</span>
<span>Population: ${lang.population.toLocaleString()}</span>
<div>`
}
/* *************************************************************** */
// Native Javascript
// CREATES CLASS for API fetching
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( body => body.json() )
.catch(function(err){ console.error(`Error in API call on ${page}:\n${err}`)});
}
}
/* *************************************************************** */
/* DATA ********************************************************** */
// Sources
var sources = [
{ page: 'LanguagesGalleryData.js'},
{ page: 'LanguagesGalleryData.js'},/*
{ page: 'LanguageSpeakersFemaleData.js'},
{ page: 'LanguageSpeakersMaleData.js'},
{ page: 'LanguageWikidataData.js'},*/
];
var datas = {}; // final object containing consolidated result
var pings = [];
var storeData = function(store,key,data){
console.log(`Data ${key}: ${JSON.stringify(data)}`);
store[key]=data;
};
// Fetch resources (json data)
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+'B', d));
// Note: When all the expected objects are in stored, then the dataviz code is ran.
/* *************************************************************** */
/* 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)}
);
*/
//Temporary fake data, clean:
const languages = [{ qid: 'Q209', label: 'Breton', iso:'bre' }, { qid: 'Q21', label: 'French', iso: 'fra' }],
speakersFemales = [{ qid: 'Q209', speakersF: 3, recordsF: 60 }, { qid: 'Q21', speakersF: 21, recordsF:15046 }],
speakersMales = [{ qid: 'Q209', speakersM: 7, recordsM: 112 }, { qid: 'Q21', speakersM: 85, recordsM:82964 }],
natives = [{ qid: 'Q209', population: 300000 }, { qid: 'Q21', population:80000000 }];
// Mergings
var merge1 = merge2ArraysBySameId(languages,speakersFemales,'qid');
var merge2 = merge2ArraysBySameId(merge1,speakersMales,'qid');
var final = merge2ArraysBySameId(merge2,natives,'qid');
console.log(JSON.stringify(final))
/* *************************************************************** */
/* INJECTIONS **************************************************** */
var _10k = final.filter(item => item.recordsF+item.recordsM > 9999);
console.log('_10k: ', _10k)
_10k.forEach(item => $('#lg-10k').append(tpl(item)) )
var _1k = final.filter(item => item.recordsF+item.recordsM > 999 && item.recordsF+item.recordsM <10000);
console.log('_1k: ', _1k)
_1k.forEach(item => $('#lg-1k').append(tpl(item)) )
var _1 = final.filter(item => item.recordsF+item.recordsM > 0 && item.recordsF+item.recordsM <1000);
console.log('_1: ', _1)
_1.forEach(item => $('#lg-1').append(tpl(item)) )
/* *************************************************************** */
/* MAIN RUN ****************************************************** */
var waitDataThenFire = setInterval(function() {
console.log('ping');
pings.push('pong');
console.log(datas)
if(Object.keys(datas).length==sources.length){
console.log(pings);
console.log(JSON.stringify(datas));
console.log('run dataviz');
clearInterval(waitDataThenFire);
}
}, 500);
/* *************************************************************** */
/* PAGE INTERACTIONS ********************************************* */
// Show more/less cards for this section
// Show more/less infor overall