User

Difference between revisions of "Nicolas NALLET"

(revert)
Tag: Undo
Line 1: Line 1:
// Development in final phase of the interface for displaying contributions
+
Consultant MediaWiki chez [https://wiki-valley.com Wiki Valley]
$( function (){
 
if( mw.config.get( 'wgPageName' ) !== 'User:Nicolas_NALLET' ) {
 
return;
 
}
 
var userLanguage = mw.config.get( 'wgUserLanguage' );
 
var messages = {
 
'no-results': {
 
en: 'No results.',
 
de: 'Keine Ergebnisse.',
 
fr: 'Pas de résultat.',
 
}
 
};
 
mw.loader.using( ['oojs', 'oojs-ui'], function () {
 
  
oouiSelectors = {
+
<span class="mwc">MediaWiki Consultant</span> at [https://en.wiki-valley.com Wiki Valley]
'speaker': null,
 
'gender': null,
 
'language': null,
 
'proficiency': null,
 
};
 
var sparqlGlobal = {
 
'speaker': 'SELECT DISTINCT ?speaker ?speakerLabel WHERE { ?speaker prop:P2 entity:Q3 . ?speaker rdfs:label ?speakerLabel . FILTER( LANG(?speakerLabel) = "en" ) } ORDER BY ?speakerLabel',
 
'gender': 'SELECT DISTINCT ?gender ?genderLabel WHERE { ?gender prop:P2 entity:Q7 . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } } ORDER BY ?gender',
 
'language': 'SELECT DISTINCT ?language ?languageLabel WHERE { ?language prop:P2 entity:Q4 . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } } ORDER BY ?languageLabel',
 
'proficiency': 'SELECT DISTINCT ?proficiency ?proficiencyLabel WHERE { ?proficiency prop:P2 entity:Q5 . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } } ORDER BY ?proficiency',
 
};
 
var placeholders = {
 
'en': {
 
'speaker': '👤 Speaker',
 
'gender': '♀️ ♂️ Speaker\'s gender',
 
'language': '🏳️ Language',
 
'proficiency': '🥇 Level of proficiency',
 
},
 
'fr': {
 
'speaker': '👤 Locuteur',
 
'gender': '♀️ ♂️ Genre du locuteur',
 
'language': '🏳️ Langue',
 
'proficiency': '🥇 Niveau de compétence',
 
},
 
};
 
var htmlElements = {
 
'speaker': '#filteruser',
 
'gender': '#filtergender',
 
'language': '#filterlanguage',
 
'proficiency': '#filterlevelofproficiency',
 
};
 
var lastRequest = {
 
'speaker': '',
 
'gender': '',
 
'language': '',
 
'proficiency': '',
 
};
 
  
function getValueWidget( type ) {
+
<h1 id="firstHeading">Find a record by language, user or level of proficiency</h1>
if( !oouiSelectors[type] ) {
 
return '';
 
}
 
var widgetCombobox = type === 'speaker' || type === 'language';
 
if( widgetCombobox ) {
 
return oouiSelectors[type].getValue();
 
} else {
 
return oouiSelectors[type].getMenu().findSelectedItem() ? oouiSelectors[type].getMenu().findSelectedItem().getData() : '';
 
}
 
 
}
 
  
function updateSelector( type ) {
+
<div style="float:right">
return function( values ) {
+
==Results==
if( ( getValueWidget( 'speaker' ) != lastRequest['speaker'] ) ||
+
<div id="audioresults"></div>
    ( getValueWidget( 'gender' ) != lastRequest['gender'] ) ||
+
<!--<div class="audiobox">
    ( getValueWidget( 'language' ) != lastRequest['language'] ) ||
+
    <div class="ab-playbutton"><i></i></div>
    ( getValueWidget( 'proficiency' ) != lastRequest['proficiency'] ) ) {
+
    <div>
return;
+
        <div class="ab-title">...</div>
}
+
        <div class="ab-metadata">...</div>
 +
    </div>
 +
</div>-->
  
var widgetType = type === 'speaker' || type === 'language' ? 'ComboBoxInputWidget' : 'DropdownWidget';
+
</div>
var v = values.results.bindings;
 
console.log( type );
 
console.log( v );
 
console.log( v.length === 1 ? v[0][ type + 'Label' ].value + " (" + v[0][type].value.substr( 31 ) + ")" : null );
 
oouiSelectors[type] = new OO.ui[widgetType]( {
 
placeholder: placeholders[userLanguage][type] ? placeholders[userLanguage][type] : placeholders['en'][type],
 
disabled: v.length === 1,
 
value: v.length === 1 ? v[0][ type + 'Label' ].value + " (" + v[0][type].value.substr( 31 ) + ")" : null,
 
menu: {
 
filterFromInput: true,
 
items: v.map( function( x ) {
 
return new OO.ui.MenuOptionWidget( {
 
data: x[ type + 'Label' ].value + " (" + x[type].value.substr( 31 ) + ")",
 
label: x[ type + 'Label' ].value
 
} );
 
} )
 
}
 
} );
 
  
$( htmlElements[type] ).html('').append(
+
<div style="background-color: #206ae2; color: white; height:500px; width: 300px">
oouiSelectors[type].$element
+
<span style="margin-left: 40px;color: white;">Select a Speaker<span id="filteruser"></span></span>
);
 
  
oouiSelectors[type].on( 'change', function() { doQuery(); doQuery( 'speaker' ); doQuery( 'gender' ); doQuery( 'language' ); doQuery( 'proficiency' ); } );
+
<span style=" margin-left: 40px;color: white;">Select a Speaker's genre<span id="filtergender"></span></span>
  
};
+
<span style=" margin-left: 40px;color: white;">Select a Language<span id="filterlanguage"></span></span>
}
 
  
$.getJSON(
+
<span style=" margin-left: 40px;color: white;">Select a Level of proficiency<span id="filterlevelofproficiency"></span></span>
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
{
 
query: sparqlGlobal['speaker']
 
}
 
).done( updateSelector( 'speaker' ) );
 
  
$.getJSON(
+
<span id="savefiltersearch" style=" margin-left: 40px;color: white;"> 💾 Export this query in csv </span>
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
{
 
query: sparqlGlobal['gender']
 
}
 
).done( updateSelector( 'gender' ) );
 
  
$.getJSON(
+
</div>
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
{
 
query: sparqlGlobal['language']
 
}
 
).done( updateSelector( 'language' ) );
 
  
$.getJSON(
+
----
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
+
End of records page
{
+
__NOTOC__
query: sparqlGlobal['proficiency']
+
==Sandbox==
}
+
https://en.wikipedia.org/wiki/fr:H%C3%B4tel+de+la+Roche-Guyon
).done( updateSelector( 'proficiency' ) );
 
  
// Display results
+
==OOui==
function createAudioBoxesForSearch( data ) {
+
<div class="wrapper">
if ( data.results === undefined || data.results.bindings === undefined ) {
+
<h1>Demo ToDo app with OOUI</h1>
displayError( 'error: no result from SPARQL' );
+
</div>
return;
 
}
 
if ( data.results.bindings.length < 1 ) {
 
$( '#audioresults' ).html( messages['no-results'][userLanguage] ? messages['no-results'][userLanguage] : messages['no-results']['en'] );
 
return;
 
}
 
var length = data.results.bindings.length < 100 ? data.results.bindings.length : 100;
 
$( '#audioresults' ).html( '' );
 
for (var i = 0; i < length; i++) {
 
var box = $( '<div class="audiobox"> <div class="ab-playbutton"><i></i></div> <div> <div class="ab-title">...</div> <div class="ab-metadata">...</div> </div> </div>' );
 
var audiobox = new AudioBox( data.results.bindings[ i ].record.value.substr( 31 ), box );
 
$( '#audioresults' ).append( box );
 
//ab1 = new AudioBox( data.query.rwrecords[ i ], $( '.audiobox' ).eq( i ) );
 
//$("body").append('<div class="audiobox"> <div class="ab-playbutton"><i></i></div> <div> <div class="ab-title">...</div> <div class="ab-metadata">...</div> </div> </div>');
 
}
 
}
 
  
// Do SPARQL request from filters
 
function doQuery( variable ){
 
  
// Do not modify a selector where there is a value
 
if( variable && getValueWidget( variable ) ) {
 
return;
 
}
 
  
function getQ( type ) {
+
===[https://lingualibre.org/wiki/LinguaLibre:Chat_room#Browsing_the_sound_library Cahier des charges]===
if( variable === type ) {
+
* liste des enregistrements pour la sélection (avec un design similaire aux 2 derniers enregistrements sur la page d’accueil)
return '?' + type;
+
* sélecteurs :
}
+
** by language
var text = getValueWidget( type );
+
** by speaker
if( !text ) {
+
*** by speaker's language proficiency (beginner, etc.)
return '';
+
*** by speaker's genre (male, female, etc.)
}
+
** by cat (deepcat, incategory)
text = text.trim();
+
** by coord (nearcoord, boost-nearcoord)
if( /^Q[0-9]+$/.test( text ) ) {
+
** by link (linksto)
return 'entity:' + text;
 
} else if( /\((Q[0-9]+)\)$/.test( text ) ) {
 
return 'entity:' + text.replace( /.*\((Q[0-9]+)\)$/, '$1' );
 
} else {
 
console.warn( 'Bad input “' + text + '”' );
 
return '';
 
}
 
}
 
  
var speaker = getQ( 'speaker' ),
+
===Prototype===
    gender = getQ( 'gender' ),
 
    language = getQ( 'language' ),
 
    proficiency = getQ( 'proficiency' ),
 
    somevalue = false;
 
if( ! variable ) {
 
lastRequest = {
 
'speaker': getValueWidget( 'speaker' ),
 
'gender': getValueWidget( 'gender' ),
 
'language': getValueWidget( 'language' ),
 
'proficiency': getValueWidget( 'proficiency' ),
 
};
 
}
 
  
var query = "SELECT " + ( variable ? 'DISTINCT ?' + variable + ' ?' + variable + 'Label' : "?record" ) + " WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . ";
 
if( speaker ) {
 
query += "?record prop:P5 " + speaker + " . ";
 
somevalue = true;
 
}
 
if( gender ) {
 
query += "?record prop:P5 [ prop:P8 " + gender + " ] . ";
 
somevalue = true;
 
}
 
if( language ) {
 
query += "?record prop:P4 " + language + " . ";
 
somevalue = true;
 
}
 
if( proficiency ) {
 
query += "?speaker llp:P4 [ llv:P4 ?language ; llq:P16 " + proficiency + " ] . ";
 
somevalue = true;
 
}
 
query += "SERVICE wikibase:label { bd:serviceParam wikibase:language '" + userLanguage + ",en,fr' } } LIMIT 100";
 
  
if( variable ) {
+
<nowiki><div class="wrapper"></nowiki>
if( !somevalue ) {
+
<div class="wrapper">
query = sparqlGlobal[variable];
+
<h1>Demo ToDo app with OOUI</h1>
}
+
</div>
} else {
 
if( !variable && !somevalue ) {
 
return;
 
}
 
$( '#audioresults' ).html( '' ); // TODO replace by a spinner
 
}
 
  
// Execute the request
 
var result = $.getJSON(
 
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
{
 
query: query,
 
//Accept: 'application/sparql-results+json'
 
}
 
);
 
  
// Depending if we want the whole results or update on selector
+
Voir code dans [[MediaWiki:Common.js]]
if( variable ) {
 
result.then( updateSelector( variable ), displayError );
 
} else {
 
result.then( createAudioBoxesForSearch, displayError );
 
}
 
}
 
  
} );
+
==Voir aussi==
 
+
*Autres outils dispos dans [[Special:Version]] : [https://lingualibre.org/index.php?title=LinguaLibre:Stats&action=edit Exemple de requête].
} );
+
*le JS de l’extension QueryViz pour faire une requête SPARQL [https://github.com/lingua-libre/QueryViz/blob/master/modules/ext.queryViz.QueryViz.js], notamment la fonction postQuery mais aussi loadFilterValues pour la façon de récupérer les résultats.
 +
*Une requête SPARQL qui charge indéfiniment LinguaLibre:Records

Revision as of 08:43, 27 August 2021

Consultant MediaWiki chez Wiki Valley

MediaWiki Consultant at Wiki Valley

Find a record by language, user or level of proficiency

Results

Select a Speaker

Select a Speaker's genre

Select a Language

Select a Level of proficiency

💾 Export this query in csv


End of records page

Sandbox

https://en.wikipedia.org/wiki/fr:H%C3%B4tel+de+la+Roche-Guyon

OOui

Demo ToDo app with OOUI


Cahier des charges

  • liste des enregistrements pour la sélection (avec un design similaire aux 2 derniers enregistrements sur la page d’accueil)
  • sélecteurs :
    • by language
    • by speaker
      • by speaker's language proficiency (beginner, etc.)
      • by speaker's genre (male, female, etc.)
    • by cat (deepcat, incategory)
    • by coord (nearcoord, boost-nearcoord)
    • by link (linksto)

Prototype

<div class="wrapper">

Demo ToDo app with OOUI


Voir code dans MediaWiki:Common.js

Voir aussi

  • Autres outils dispos dans Special:Version : Exemple de requête.
  • le JS de l’extension QueryViz pour faire une requête SPARQL [1], notamment la fonction postQuery mais aussi loadFilterValues pour la façon de récupérer les résultats.
  • Une requête SPARQL qui charge indéfiniment LinguaLibre:Records