User

Difference between revisions of "Mathis Back/bluell.js"

(update of the code)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
 
// Development in final phase of the interface for displaying contributions
 
// Development in final phase of the interface for displaying contributions
 
$( function (){
 
$( function (){
if( mw.config.get( 'wgPageName' ) !== 'User:Nicolas_NALLET' && mw.config.get( 'wgPageName' ) !== 'LinguaLibre:Explorer_la_sonothèque' && mw.config.get( 'wgPageName' ) !== 'LinguaLibre:Explore_the_sound_library' ) {
+
if( !/^LinguaLibre:Explore_the_sound_library(\/[a-z_-]+)?$/.test( mw.config.get( 'wgPageName' ) ) ) {
 
return;
 
return;
 
}
 
}
const userLanguage = mw.config.get( 'wgUserLanguage' );
+
 
 +
// Parameters
 +
const nbTotalResults = 100;  // Total number of results requested to SPARQL endpoint
 +
const nbResultsPerPage = 10; // Number of results displayed per page
 +
 
 +
// User messages to be translated
 
const messages = {
 
const messages = {
'msg-no-results': {
+
'msg-no-results': 'No results.',
en: 'No results.',
+
'msg-error': 'Error',
de: 'Keine Ergebnisse.',
+
'msg-no-record-in-language': 'We don’t have any recordings in this language yet. If you speak it, [[$1|please start recording here]]!',
fr: 'Pas de résultat.',
+
'msg-other-records': ' (and many other results)',
//qqq: 'Message when there are no results.',
+
'button-gosearch': 'Search',
},
+
'button-gosearch-last-records': 'Last records',
'button-gosearch': {
+
'button-resetsearch': 'Reset',
en: 'Search',
+
'button-datasets': 'Datasets',
de: 'Suchen',
+
'placeholder': 'Select or type',
fr: 'Rechercher',
+
};
//qqq: 'Button where the user clicks to search.',
+
 
},
+
function i18n( msg ) {
'button-resetsearch': {
+
var element = $( '#' + msg );
en: 'Reset',
+
if( element.length && element.text() !== messages[msg] ) {
de: 'Löschen',
+
return element.text();
fr: 'Effacer',
+
}
//qqq: 'Button where the user clicks to reset the form.',
+
return messages[msg];
},
+
}
'placeholder-speaker': {
+
 
    en: ' Select or type',
+
const userLanguage = mw.config.get( 'wgPageContentLanguage' );
    fr: ' Sélectionner ou écrire',
 
    //qqq: 'Placeholder for the field Speaker.',
 
},
 
'placeholder-gender': {
 
  en: ' Select',
 
    fr: ' Sélectionner',
 
    //qqq: 'Placeholder for the field Gender.',
 
},
 
'placeholder-language': {
 
    en: ' Select or type',
 
    fr: ' Sélectionner ou écrire',
 
    //qqq: 'Placeholder for the field Language.',
 
},
 
'placeholder-proficiency': {
 
    en: ' Select',
 
    fr: ' Sélectionner',
 
    //qqq: 'Placeholder for the field Proficiency.',
 
},
 
};
 
 
mw.loader.using( ['oojs', 'oojs-ui', 'mediawiki.api', 'ext.recordWizard.wikibase'], function () {
 
mw.loader.using( ['oojs', 'oojs-ui', 'mediawiki.api', 'ext.recordWizard.wikibase'], function () {
  
Line 60: Line 46:
 
};
 
};
 
const htmlElements = {
 
const htmlElements = {
'speaker': '#filteruser',
+
'speaker': '#sndlib-filteruser',
'gender': '#filtergender',
+
'gender': '#sndlib-filtergender',
'language': '#filterlanguage',
+
'language': '#sndlib-filterlanguage',
'proficiency': '#filterlevelofproficiency',
+
'proficiency': '#sndlib-filterlevelofproficiency',
 
};
 
};
 
const unknown = {};
 
const unknown = {};
  
 
request = {
 
request = {
'speaker': '',
 
'gender': '',
 
'language': '',
 
'proficiency': '',
 
};
 
lastRequest = {
 
 
'speaker': '',
 
'speaker': '',
 
'gender': '',
 
'gender': '',
Line 87: Line 67:
 
};
 
};
 
mapping = {
 
mapping = {
 +
'speaker': null,
 +
'gender': null,
 +
'language': null,
 +
'proficiency': null,
 +
};
 +
automaticField = {
 
'speaker': null,
 
'speaker': null,
 
'gender': null,
 
'gender': null,
Line 103: Line 89:
 
rawValue = rawValue.trim();
 
rawValue = rawValue.trim();
 
if( !rawValue ) {
 
if( !rawValue ) {
return '';
+
return null;
 
} else if( /^Q[0-9]+$/.test( rawValue ) ) {
 
} else if( /^Q[0-9]+$/.test( rawValue ) ) {
 
return rawValue;
 
return rawValue;
Line 133: Line 119:
 
return list[type][x];
 
return list[type][x];
 
} );
 
} );
console.log( 'getListSelectorFromQids', type, qids, indexes, r );
 
 
return r;
 
return r;
 
}
 
}
Line 139: Line 124:
 
// Initialise a selector and keep the list in memory the result for later reuse
 
// Initialise a selector and keep the list in memory the result for later reuse
 
function updateSelector( type, force ) {
 
function updateSelector( type, force ) {
return function( values ) {
+
return function( values, emptyValue ) {
 +
 
 +
if( emptyValue === undefined ) {
 +
emptyValue = true;
 +
}
 +
 
 +
console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values,'+(emptyValue===true?'true':(emptyValue===null?'null':(emptyValue===false?'false':'autre')))+')' );
  
 
const widgetType = type === 'speaker' || type === 'language' ? 'ComboBoxInputWidget' : 'DropdownWidget';
 
const widgetType = type === 'speaker' || type === 'language' ? 'ComboBoxInputWidget' : 'DropdownWidget';
Line 158: Line 149:
  
 
// Save the mapping Qxx → index to update the list from a list of Qxx (see doQuery)
 
// Save the mapping Qxx → index to update the list from a list of Qxx (see doQuery)
console.log( type, list[type] );
+
console.debug( type, list[type] );
 
mapping[type] = list[type].reduce( function( o, x, i ) {
 
mapping[type] = list[type].reduce( function( o, x, i ) {
 
o[ x[type].value.substr( 31 ) ] = i;
 
o[ x[type].value.substr( 31 ) ] = i;
Line 177: Line 168:
 
}
 
}
  
if( !force && getQValue( type ) ) {
+
// Never update manual selectors (except if the user forces the reset)
 +
if( !force && getQValue( type ) && automaticField[type] === false ) {
 +
console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): abort1' );
 
return;
 
return;
 
}
 
}
  
// If there are at least one unknown value, do not change the selector
+
if( force || values === null ) {
if( values.filter( function( x ) { return x === undefined; } ).length ) {
+
values = list[type];
return;
+
}
 +
 
 +
// If there are at least one unknown value, reset the selector
 +
else if( values.filter( function( x ) { return x === undefined; } ).length ) {
 +
values = list[type];
 +
console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): abort2' );
 
}
 
}
  
 +
// For dropdowns, add an empty item if there is none
 
if( widgetType === 'DropdownWidget' && values.length && values[0][type].value ) {
 
if( widgetType === 'DropdownWidget' && values.length && values[0][type].value ) {
 
var emptyItem = [ {} ];
 
var emptyItem = [ {} ];
Line 195: Line 194:
 
// Create the OOUI selector
 
// Create the OOUI selector
 
oouiSelectors[type] = new OO.ui[widgetType]( {
 
oouiSelectors[type] = new OO.ui[widgetType]( {
placeholder: messages['placeholder-'+type][userLanguage] ? messages['placeholder-'+type][userLanguage] : messages['placeholder-'+type].en,
+
placeholder: i18n( 'placeholder' ),
 
menu: {
 
menu: {
 
filterFromInput: true,
 
filterFromInput: true,
Line 210: Line 209:
 
}
 
}
  
if( widgetType === 'ComboBoxInputWidget' && values.length === 1 ) {
+
if( widgetType === 'ComboBoxInputWidget' && values.length === 1 && automaticField[type] !== false ) {
 
oouiSelectors[type].setValue( values[0][ type + 'Label' ].value + " (" + values[0][type].value.substr( 31 ) + ")" );
 
oouiSelectors[type].setValue( values[0][ type + 'Label' ].value + " (" + values[0][type].value.substr( 31 ) + ")" );
 
// For dropdown, when there is one real value, there is also the empty value as first option
 
// For dropdown, when there is one real value, there is also the empty value as first option
} else if( widgetType === 'DropdownWidget' && values.length === 2 ) {
+
} else if( widgetType === 'DropdownWidget' && values.length === 2 && automaticField[type] !== false ) {
 
oouiSelectors[type].getMenu().selectItemByData( values[1][type].value.substr( 31 ) );
 
oouiSelectors[type].getMenu().selectItemByData( values[1][type].value.substr( 31 ) );
 
}
 
}
Line 220: Line 219:
 
oouiSelectors[type].$element
 
oouiSelectors[type].$element
 
);
 
);
 +
if( !force ) {
 +
console.debug( '!force', type, getQValue( type ), automaticField[type] );
 +
if( automaticField[type] !== false ) {
 +
automaticField[type] = getQValue( type ) ? true : emptyValue;
 +
}
 +
console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): on passe en automatique' );
 +
} else {
 +
automaticField[type] = null;
 +
console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): on passe en manuel' );
 +
}
  
 
if( widgetType === 'ComboBoxInputWidget' ) {
 
if( widgetType === 'ComboBoxInputWidget' ) {
 
oouiSelectors[type].on( 'change', function() {
 
oouiSelectors[type].on( 'change', function() {
if( !getQValue( type ) ) {
+
if( getQValue( type ) === '' ) {
 
return;
 
return;
 
}
 
}
onChange();
+
onChange( type );
 
} );
 
} );
 
} else {
 
} else {
Line 235: Line 244:
 
oouiSelectors[type].getMenu().items[0].toggle( true );
 
oouiSelectors[type].getMenu().items[0].toggle( true );
 
}
 
}
onChange();
+
onChange( type );
 
} );
 
} );
 
}
 
}
Line 242: Line 251:
 
}
 
}
  
function onChange() {
+
function onChange( type ) {
 +
 
 +
// Logique ternaire pour les sélecteurs :
 +
// - null := sélecteur indéterminé, pouvant être réduit sous l’influence d’autres sélecteurs
 +
// - false := sélecteur manuel, n’étant jamais réduit sous l’influence d’autres sélecteurs et étant toujours étendus (=comprend toutes les valeurs possibles)
 +
// - true := sélecteur automatique, étant toujours réduit sous l’influence d’autres sélecteurs
  
request = {
+
console.debug( 'onChange('+type+')' );
 +
var state = {
 
speaker: getQValue( 'speaker' ),
 
speaker: getQValue( 'speaker' ),
 
gender: getQValue( 'gender' ),
 
gender: getQValue( 'gender' ),
Line 250: Line 265:
 
proficiency: getQValue( 'proficiency' ),
 
proficiency: getQValue( 'proficiency' ),
 
};
 
};
if( JSON.stringify( request ) === JSON.stringify( lastRequest ) ) {
+
var nbFilled = 1, emptyValue = true;
 +
if( !state.speaker && !state.gender && !state.language && !state.proficiency ) {
 +
reset();
 
return;
 
return;
 +
} else if( state[type] ) {
 +
if( state[type] != request[type] ) {
 +
automaticField[type] = false;
 +
console.debug( 'onChange('+type+'): on passe en manuel' );
 +
}
 +
} else {
 +
automaticField[type] = null;
 +
emptyValue = null;
 +
nbFilled = ( automaticField.language === false && state.language ? 1 : 0 )
 +
+ ( automaticField.speaker === false && state.speaker ? 1 : 0 )
 +
+ ( automaticField.gender === false && state.gender ? 1 : 0 )
 +
+ ( automaticField.proficiency === false && state.proficiency ? 1 : 0 );
 +
if( nbFilled >= 1 ) {
 +
automaticField[type] = false;
 +
emptyValue = true;
 +
if( type !== 'speaker' && !state.speaker && automaticField.speaker !== false ) {
 +
automaticField.speaker = emptyValue;
 +
}
 +
if( type !== 'gender' && !state.gender && automaticField.gender !== false ) {
 +
automaticField.gender = emptyValue;
 +
}
 +
if( type !== 'language' && !state.language && automaticField.language !== false ) {
 +
automaticField.language = emptyValue;
 +
}
 +
if( type !== 'proficiency' && !state.proficiency && automaticField.proficiency !== false ) {
 +
automaticField.proficiency = emptyValue;
 +
}
 +
} else {
 +
emptyValue = null;
 +
if( !state.speaker ) {
 +
automaticField.speaker = emptyValue;
 +
}
 +
if( !state.gender ) {
 +
automaticField.gender = emptyValue;
 +
}
 +
if( !state.language ) {
 +
automaticField.language = emptyValue;
 +
}
 +
if( !state.proficiency ) {
 +
automaticField.proficiency = emptyValue;
 +
}
 +
}
 
}
 
}
 +
console.debug( nbFilled, state[type], request[type], emptyValue, automaticField );
 +
 +
// Do not reduce fields above one change by the user, else it leads to a bad User Experience
 +
// because fields change themselves with a hardly-understandable logic
 +
//var nbFilled = ( state.language ? 1 : 0 ) + ( state.speaker ? 1 : 0 ) + ( state.gender ? 1 : 0 ) + ( state.proficiency ? 1 : 0 );
 +
//if( nbFilled > 1 ) {
 +
// return;
 +
//}
  
 
var potentialSpeakers = speakersCriteria;
 
var potentialSpeakers = speakersCriteria;
  
if( request.language ) {
+
if( state.language && automaticField.language === false ) {
potentialSpeakers = reduceSpeakers( 2, request.language, potentialSpeakers );
+
potentialSpeakers = reduceSpeakers( 2, state.language, potentialSpeakers );
 
}
 
}
if( request.speaker ) {
+
if( state.speaker && automaticField.speaker === false ) {
potentialSpeakers = reduceSpeakers( 0, request.speaker, potentialSpeakers );
+
potentialSpeakers = reduceSpeakers( 0, state.speaker, potentialSpeakers );
 
}
 
}
if( request.gender ) {
+
if( state.gender && automaticField.gender === false ) {
potentialSpeakers = reduceSpeakers( 1, request.gender, potentialSpeakers );
+
potentialSpeakers = reduceSpeakers( 1, state.gender, potentialSpeakers );
 
}
 
}
if( request.proficiency ) {
+
if( state.proficiency && automaticField.proficiency === false ) {
potentialSpeakers = reduceSpeakers( 3, request.proficiency, potentialSpeakers );
+
potentialSpeakers = reduceSpeakers( 3, state.proficiency, potentialSpeakers );
 
}
 
}
 +
console.debug( potentialSpeakers, state );
  
console.log( potentialSpeakers );
+
// Language where there are no records
 +
if( potentialSpeakers.length === 0 && !state.speaker && !state.gender && state.language && !state.proficiency ) {
 +
var msg = i18n( 'msg-no-record-in-language' ).replace( /\$1/, 'Special:RecordWizard' ).replace( /\[\[([^|]+)\|([^|]+)\]\]/, '<a href="$1">$2</a>' );
 +
$( '#sndlib-audioresults' ).html( msg );
 +
$( '#sndlib-audioPages' ).html( '' );
 +
$( '#sndlib-savefiltersearch' ).html( $( '#sndlib-savefiltersearch' ).text() );
 +
} else {
 +
var listSpeaker = getListSelectorFromQids( 'speaker', dedupe( potentialSpeakers.map( function( x ) { return x[0]; } ) ) );
 +
var listGender = getListSelectorFromQids( 'gender', dedupe( potentialSpeakers.map( function( x ) { return x[1]; } ) ) );
 +
var listLanguage = getListSelectorFromQids( 'language', dedupe( potentialSpeakers.map( function( x ) { return x[2]; } ) ) );
 +
var listProficiency = getListSelectorFromQids( 'proficiency', dedupe( potentialSpeakers.map( function( x ) { return x[3]; } ) ) );
  
// Update the selectors with the restricted values
+
// Update the selectors with the restricted values
updateSelector( 'speaker' )( getListSelectorFromQids( 'speaker', dedupe( potentialSpeakers.map( function( x ) { return x[0]; } ) ) ) );
+
updateSelector( 'speaker' )( listSpeaker, emptyValue );
updateSelector( 'gender' )( getListSelectorFromQids( 'gender', dedupe( potentialSpeakers.map( function( x ) { return x[1]; } ) ) ) );
+
updateSelector( 'gender' )( listGender, emptyValue );
updateSelector( 'language' )( getListSelectorFromQids( 'language', dedupe( potentialSpeakers.map( function( x ) { return x[2]; } ) ) ) );
+
updateSelector( 'language' )( listLanguage, emptyValue );
updateSelector( 'proficiency' )( getListSelectorFromQids( 'proficiency', dedupe( potentialSpeakers.map( function( x ) { return x[3]; } ) ) ) );
+
updateSelector( 'proficiency' )( listProficiency, emptyValue );
 +
}
  
 +
request = {
 +
speaker: getQValue( 'speaker' ),
 +
gender: getQValue( 'gender' ),
 +
language: getQValue( 'language' ),
 +
proficiency: getQValue( 'proficiency' ),
 +
};
 +
console.debug( automaticField );
 
}
 
}
  
Line 286: Line 372:
 
query: sparqlGlobal['speaker']
 
query: sparqlGlobal['speaker']
 
}
 
}
).done( updateSelector( 'speaker', true ) );
+
).then( updateSelector( 'speaker', true ), displayErrorToUser );
  
 
$.getJSON(
 
$.getJSON(
Line 293: Line 379:
 
query: sparqlGlobal['gender']
 
query: sparqlGlobal['gender']
 
}
 
}
).done( updateSelector( 'gender', true ) );
+
).then( updateSelector( 'gender', true ), displayErrorToUser );
  
 
$.getJSON(
 
$.getJSON(
Line 300: Line 386:
 
query: sparqlGlobal['language']
 
query: sparqlGlobal['language']
 
}
 
}
).done( updateSelector( 'language', true ) );
+
).then( updateSelector( 'language', true ), displayErrorToUser );
  
 
$.getJSON(
 
$.getJSON(
Line 307: Line 393:
 
query: sparqlGlobal['proficiency']
 
query: sparqlGlobal['proficiency']
 
}
 
}
).done( updateSelector( 'proficiency', true ) );
+
).then( updateSelector( 'proficiency', true ), displayErrorToUser );
 
}
 
}
  
 
function reset() {
 
function reset() {
lastRequest = {
+
request = {
 
speaker: '',
 
speaker: '',
 
gender: '',
 
gender: '',
 
language: '',
 
language: '',
 
proficiency: '',
 
proficiency: '',
 +
};
 +
automaticField = {
 +
'speaker': null,
 +
'gender': null,
 +
'language': null,
 +
'proficiency': null,
 
};
 
};
 
updateSelector( 'speaker', true )( list.speaker );
 
updateSelector( 'speaker', true )( list.speaker );
Line 321: Line 413:
 
updateSelector( 'language', true )( list.language );
 
updateSelector( 'language', true )( list.language );
 
updateSelector( 'proficiency', true )( list.proficiency );
 
updateSelector( 'proficiency', true )( list.proficiency );
$( '#audioresults' ).html( '' );
+
$( '#sndlib-audioresults' ).html( '' );
 +
$( '#sndlib-audioPages' ).html( '' );
 +
$( '#sndlib-savefiltersearch' ).html( $( '#sndlib-savefiltersearch' ).text() );
 
}
 
}
  
Line 330: Line 424:
 
}
 
}
  
// Add button 'Datasets'
+
// Add button 'Search'
$( '#datasetsButton' ).html('').append(
+
$( '#sndlib-gosearch' ).html('').append(
( new OO.ui.ButtonWidget( {
+
( new OO.ui.ButtonInputWidget( {
label: 'Datasets',
+
label: i18n( 'button-gosearch' )
href: 'https://doc.wikimedia.org'
+
} ) ).on( 'click', factoryDoQuery( 'random' ) ).$element
} ) )
 
 
);
 
);
  
// Add button 'Search'
+
$( '#sndlib-gosearch-last-records' ).html('').append(
$( '#gosearch' ).html('').append(
 
 
( new OO.ui.ButtonInputWidget( {
 
( new OO.ui.ButtonInputWidget( {
label: messages['button-gosearch'][userLanguage] ? messages['button-gosearch'][userLanguage] : messages['button-gosearch'].en
+
label: i18n( 'button-gosearch-last-records' )
} ) ).on( 'click', doQuery ).$element
+
} ) ).on( 'click', factoryDoQuery( 'last' ) ).$element
 
);
 
);
  
 
// Add button 'Reset'
 
// Add button 'Reset'
$( '#resetsearch' ).html('').append(
+
$( '#sndlib-resetsearch' ).html('').append(
 
( new OO.ui.ButtonInputWidget( {
 
( new OO.ui.ButtonInputWidget( {
label: messages['button-resetsearch'][userLanguage] ? messages['button-resetsearch'][userLanguage] : messages['button-resetsearch'].en
+
label: i18n( 'button-resetsearch' )
 
} ) ).on( 'click', reset ).$element
 
} ) ).on( 'click', reset ).$element
 
);
 
);
 +
 +
// Add button 'Datasets' - it seems that OOUI ButtonWidget.setHref does not work
 +
var buttonDatasetsA = $( '<a href="https://lingualibre.org/datasets/"></a>' );
 +
var buttonDatasets = new OO.ui.ButtonInputWidget( {
 +
label: i18n( 'button-datasets' )
 +
} );
 +
var buttonDatasetsLinked = buttonDatasetsA.append( buttonDatasets.$element );
 +
$( '#sndlib-datasetsButton' ).html('').append( buttonDatasetsLinked );
 +
 +
function setDownloadLink( data ) {
 +
if ( data.results === undefined || data.results.bindings === undefined ) {
 +
displayErrorToUser( 'error: no result from SPARQL' );
 +
return;
 +
}
 +
 +
function escapeCsv( val ) {
 +
if( !val ) {
 +
return '""';
 +
}
 +
return '"' + val.value.replaceAll( '"', '""' ) + '"';
 +
}
 +
 +
var csv = 'data:application/csv;charset=utf-8,' + encodeURIComponent( data.results.bindings.map( function( x ) {
 +
return [
 +
escapeCsv( x.speakerName ),
 +
escapeCsv( x.genderLabel ),
 +
escapeCsv( x.languageLabel ),
 +
escapeCsv( x.proficiencyLabel ),
 +
escapeCsv( x.word ),
 +
escapeCsv( x.file ),
 +
escapeCsv( x.date ),
 +
].join( ',' );
 +
} ).join( "\n" ) );
 +
 +
$('#sndlib-savefiltersearch').wrapInner( '<a style="color:white"></a>' );
 +
$('#sndlib-savefiltersearch a').attr( {
 +
download: 'export-lili.csv',
 +
href: csv,
 +
} );
 +
}
 +
 +
function displayErrorToUser( obj, error ) {
 +
displayError( obj, error );
 +
var code = obj;
 +
if( obj && obj.status ) {
 +
code = '' + obj.status;
 +
}
 +
if( obj && obj.statusText ) {
 +
code = '' + code + ' ' + obj.statusText;
 +
}
 +
$( '#sndlib-audioresults' ).html( i18n( 'msg-error' ) + ' (' + code + ')' + ( error ? ' ' + error : '' ) );
 +
}
  
 
// Display results
 
// Display results
 
function createAudioBoxesForSearch( data ) {
 
function createAudioBoxesForSearch( data ) {
 
if ( data.results === undefined || data.results.bindings === undefined ) {
 
if ( data.results === undefined || data.results.bindings === undefined ) {
displayError( 'error: no result from SPARQL' );
+
displayErrorToUser( 'error: no result from SPARQL' );
 
return;
 
return;
 
}
 
}
 
if ( data.results.bindings.length < 1 ) {
 
if ( data.results.bindings.length < 1 ) {
$( '#audioresults' ).html( messages['msg-no-results'][userLanguage] ? messages['msg-no-results'][userLanguage] : messages['msg-no-results'].en );
+
$( '#sndlib-audioresults' ).html( i18n( 'msg-no-results' ) );
 +
$( '#sndlib-audioPages' ).html( '' );
 
return;
 
return;
 
}
 
}
var length = data.results.bindings.length;
+
var length = data.results.bindings.length <= nbTotalResults ? data.results.bindings.length : nbTotalResults;
console.log( data.results.bindings );
+
var moreResults = data.results.bindings.length > nbTotalResults;
 +
console.debug( 'SPARQL results', data.results.bindings );
 
function displayAudioBoxes( index ) {
 
function displayAudioBoxes( index ) {
$( '#audioresults' ).html( '' );
+
$( '#sndlib-audioresults' ).html( '' );
console.log( 'index', index );
+
for( var i = 0; i < nbResultsPerPage && i+index*nbResultsPerPage < length; i++ ) {
for( var i = 0; i < 10 && i+index*10 < length; i++ ) {
 
console.log( 'i effectif', i+index*10 );
 
 
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 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+index*10 ].record.value.substr( 31 ), box );
+
var audiobox = new AudioBox( data.results.bindings[ i+index*nbResultsPerPage ].record.value.substr( 31 ), box );
$( '#audioresults' ).append( box );
+
$( '#sndlib-audioresults' ).append( box );
 
}
 
}
 
function applyFn( i ) {
 
function applyFn( i ) {
 
return function() {
 
return function() {
console.log( i );
 
 
displayAudioBoxes( i );
 
displayAudioBoxes( i );
 
return false;
 
return false;
 
}
 
}
 
}
 
}
for( var i = 0; i < Math.ceil( length/10 ); i++ ) {
+
$( '#sndlib-audioPages' ).html( '' );
var link = $( '<a href="#">' + (i+1) + '</a>' ).on( 'click', applyFn( i ) );
+
if( length > nbResultsPerPage ) {
$( '#audioPages' ).append( link ).append( ' ' );
+
for( var i = 0; i < Math.ceil( length/nbResultsPerPage ); i++ ) {
 +
var link = $( '<a href="#"' + ( i === index ? ' class="selected"' : '' ) + '>' + (i+1) + '</a>' ).on( 'click', applyFn( i ) );
 +
$( '#sndlib-audioPages' ).append( link ).append( i < Math.ceil( length/nbResultsPerPage )-1 ? '&nbsp;' : '' );
 +
}
 +
}
 +
if( moreResults ) {
 +
$( '#sndlib-audioPages' ).append( i18n( 'msg-other-records' ) );
 
}
 
}
 
}
 
}
 
displayAudioBoxes( 0 );
 
displayAudioBoxes( 0 );
 +
 +
setDownloadLink( data );
 
}
 
}
  
 
// Do SPARQL request from filters
 
// Do SPARQL request from filters
function doQuery() {
+
function factoryDoQuery( order ) {
  
request = {
+
return function doQuery() {
speaker: getQValue( 'speaker' ),
+
 
gender: getQValue( 'gender' ),
+
request = {
language: getQValue( 'language' ),
+
speaker: getQValue( 'speaker' ),
proficiency: getQValue( 'proficiency' ),
+
gender: getQValue( 'gender' ),
};
+
language: getQValue( 'language' ),
if( JSON.stringify( request ) === JSON.stringify( lastRequest ) ) {
+
proficiency: getQValue( 'proficiency' ),
return;
+
order: order,
}
+
};
 +
console.debug( 'doQuery', request );
  
lastRequest = request;
+
var potentialSpeakers = speakersCriteria;
  
console.log( request );
+
var query = 'SELECT ?record ?date ?speakerName ?genderLabel ?languageLabel ?proficiencyLabel ?word ?file WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . OPTIONAL { ?speaker llp:P4 [ llv:P4 ?language ; llq:P16 ?proficiency ] ; rdfs:label ?speakerName ; prop:P8 ?gender . FILTER( LANG( ?speakerName ) = "en" ) . ?record prop:P7 ?word ; prop:P3 ?file ; prop:P6 ?date } . ';
 +
if( request.language ) {
 +
query += "?record prop:P4 entity:" + request.language + " . ";
 +
potentialSpeakers = reduceSpeakers( 2, request.language, potentialSpeakers );
 +
}
 +
if( request.speaker ) {
 +
query += "?record prop:P5 entity:" + request.speaker + " . ";
 +
potentialSpeakers = reduceSpeakers( 0, request.speaker, potentialSpeakers );
 +
}
 +
if( request.gender ) {
 +
query += "?speaker prop:P8 entity:" + request.gender + " . ";
 +
potentialSpeakers = reduceSpeakers( 1, request.gender, potentialSpeakers );
 +
}
 +
if( request.proficiency ) {
 +
query += "?speaker llp:P4 [ llv:P4 ?language ; llq:P16 entity:" + request.proficiency + " ] . ";
 +
potentialSpeakers = reduceSpeakers( 3, request.proficiency, potentialSpeakers );
 +
}
 +
if( potentialSpeakers.length < speakersCriteria.length ) {
 +
var listSpeakers = dedupe( potentialSpeakers.map( function( x ) {
 +
return 'entity:' + x[0];
 +
} ) ).join();
 +
console.debug( speakersCriteria, potentialSpeakers, listSpeakers );
 +
if( listSpeakers.length < 70 ) {
 +
query += 'FILTER( ?speaker IN (' + listSpeakers + ') )';
 +
}
 +
}
 +
query += 'SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } }';
 +
if( order === 'random' ) {
 +
query += ' ORDER BY RAND()';
 +
} else if( order === 'last' ) {
 +
query += ' ORDER BY DESC(?date)';
 +
}
 +
query += ' LIMIT ' + (nbTotalResults+1);
 +
if( order === 'random' ) {
 +
query += '\n# ' + Date.now();
 +
}
  
// When all fields are empty, do not query
+
// Voir https://commons.wikimedia.org/wiki/Category:Throbbers - il faut que le fond soit transparent
if( !request.speaker && !request.gender && !request.language && !request.proficiency ) {
+
$( '#sndlib-audioresults' ).html( '' ).append( '<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Balls.gif" width="50" />' );
return;
+
$( '#sndlib-audioPages' ).html( '' );
}
+
$( '#sndlib-savefiltersearch' ).html( $( '#sndlib-savefiltersearch' ).text() );
  
var potentialSpeakers = speakersCriteria;
+
// Execute the request
 +
var result = $.getJSON(
 +
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 +
{
 +
query: query,
 +
//Accept: 'application/sparql-results+json'
 +
}
 +
);
  
var query = "SELECT ?record WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . ";
+
result.then( createAudioBoxesForSearch, displayErrorToUser );
if( request.language ) {
 
query += "?record prop:P4 entity:" + request.language + " . ";
 
potentialSpeakers = reduceSpeakers( 2, request.language, potentialSpeakers );
 
}
 
if( request.speaker ) {
 
query += "?record prop:P5 entity:" + request.speaker + " . ";
 
potentialSpeakers = reduceSpeakers( 0, request.speaker, potentialSpeakers );
 
 
}
 
}
if( request.gender ) {
 
potentialSpeakers = reduceSpeakers( 1, request.gender, potentialSpeakers );
 
}
 
if( request.proficiency ) {
 
potentialSpeakers = reduceSpeakers( 3, request.proficiency, potentialSpeakers );
 
query += "?speaker llp:P4 [ llv:P4 ?language ; llq:P16 entity:" + request.proficiency + " ] . ";
 
}
 
if( potentialSpeakers.length < speakersCriteria.length ) {
 
var listSpeakers = dedupe( potentialSpeakers.map( function( x ) {
 
return 'entity:' + x[0];
 
} ) ).join();
 
query += 'FILTER( ?speaker IN (' + listSpeakers + ') )';
 
}
 
query += "} LIMIT 100";
 
 
// Voir https://commons.wikimedia.org/wiki/Category:Throbbers - il faut que le fond soit transparent
 
$( '#audioresults' ).html( '' ).append( '<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Balls.gif" width="50" />' );
 
 
console.log( potentialSpeakers );
 
console.log( listSpeakers );
 
 
// Execute the request
 
var result = $.getJSON(
 
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
{
 
query: query,
 
//Accept: 'application/sparql-results+json'
 
}
 
);
 
 
result.then( createAudioBoxesForSearch, displayError );
 
 
}
 
}
  

Latest revision as of 10:22, 8 October 2021

// Development in final phase of the interface for displaying contributions
$( function (){
	if( !/^LinguaLibre:Explore_the_sound_library(\/[a-z_-]+)?$/.test( mw.config.get( 'wgPageName' ) ) ) {
		return;
	}

	// Parameters
	const nbTotalResults = 100;  // Total number of results requested to SPARQL endpoint
	const nbResultsPerPage = 10; // Number of results displayed per page

	// User messages to be translated
	const messages = {
		'msg-no-results': 'No results.',
		'msg-error': 'Error',
		'msg-no-record-in-language': 'We don’t have any recordings in this language yet. If you speak it, [[$1|please start recording here]]!',
		'msg-other-records': '&nbsp;(and many other results)',
		'button-gosearch': 'Search',
		'button-gosearch-last-records': 'Last records',
		'button-resetsearch': 'Reset',
		'button-datasets': 'Datasets',
		'placeholder': 'Select or type',
	};

	function i18n( msg ) {
		var element = $( '#' + msg );
		if( element.length && element.text() !== messages[msg] ) {
			return element.text();
		}
		return messages[msg];
	}

	const userLanguage = mw.config.get( 'wgPageContentLanguage' );
	mw.loader.using( ['oojs', 'oojs-ui', 'mediawiki.api', 'ext.recordWizard.wikibase'], function () {

		oouiSelectors = {
			'speaker': null,
			'gender': null,
			'language': null,
			'proficiency': null,
		};
		var sparqlGlobal = {
			'speaker': 'SELECT ?speaker ?speakerLabel ?gender ?language ?proficiency WHERE { ?speaker prop:P2 entity:Q3 . OPTIONAL { ?speaker prop:P8 ?gender } . OPTIONAL { ?speaker llp:P4 ?statement . ?statement llv:P4 ?language . OPTIONAL { ?statement llq:P16 ?proficiency } } . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,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',
		};
		const htmlElements = {
			'speaker': '#sndlib-filteruser',
			'gender': '#sndlib-filtergender',
			'language': '#sndlib-filterlanguage',
			'proficiency': '#sndlib-filterlevelofproficiency',
		};
		const unknown = {};

		request = {
			'speaker': '',
			'gender': '',
			'language': '',
			'proficiency': '',
		};
		speakersCriteria = [];
		list = {
			'speaker': null,
			'gender': null,
			'language': null,
			'proficiency': null,
		};
		mapping = {
			'speaker': null,
			'gender': null,
			'language': null,
			'proficiency': null,
		};
		automaticField = {
			'speaker': null,
			'gender': null,
			'language': null,
			'proficiency': null,
		};

		// Helper function to obtain the Qvalue of some selector
		function getQValue( type ) {
			var rawValue;
			if( type === 'speaker' || type === 'language' ) {
				rawValue = oouiSelectors[type].getValue();
			} else {
				rawValue = oouiSelectors[type].getMenu().findSelectedItem() ? oouiSelectors[type].getMenu().findSelectedItem().getData() : '';
			}
			rawValue = rawValue.trim();
			if( !rawValue ) {
				return null;
			} else if( /^Q[0-9]+$/.test( rawValue ) ) {
				return rawValue;
			} else if( /\((Q[0-9]+)\)$/.test( rawValue ) ) {
				return rawValue.replace( /.*\((Q[0-9]+)\)$/, '$1' );
			} else {
				return '';
			}
		}

		// Helper function to dedupe a sorted list
		function dedupe( arr, fn ) {
			if( fn ) {
				return arr.filter( function( x, i, a ) {
					return !i || fn( x ) !== fn( a[i-1] );
				} );
			}
			return arr.filter( function( x, i, a ) {
				return !i || x !== a[i-1];
			} );
		}

		// Returns the list of items of a given type for a restricted list of Qids
		function getListSelectorFromQids( type, qids ) {
			const indexes = dedupe( qids.map( function( x ) {
				return mapping[type][x];
			} ).sort( function( a, b ) { return a-b; } ) );
			const r = indexes.map( function( x ) {
				return list[type][x];
			} );
			return r;
		}

		// Initialise a selector and keep the list in memory the result for later reuse
		function updateSelector( type, force ) {
			return function( values, emptyValue ) {

				if( emptyValue === undefined ) {
					emptyValue = true;
				}

				console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values,'+(emptyValue===true?'true':(emptyValue===null?'null':(emptyValue===false?'false':'autre')))+')' );

				const widgetType = type === 'speaker' || type === 'language' ? 'ComboBoxInputWidget' : 'DropdownWidget';

				if( !list[type] ) {

					// Save the list in a global variable to quickly filter then
					// We dedupe because the 'speaker' (only) has duplicate (ordered) values
					const v = values.results.bindings;
					list[type] = dedupe( v, function( x ) { return x[type].value; } );
					if( widgetType === 'DropdownWidget' ) {
						var emptyItem = [ {} ];
						emptyItem[0][type] = { value: '' };
						emptyItem[0][type+'Label'] = { value: ' ' };
						list[type] = emptyItem.concat( list[type] );
					}
					values = list[type];

					// Save the mapping Qxx → index to update the list from a list of Qxx (see doQuery)
					console.debug( type, list[type] );
					mapping[type] = list[type].reduce( function( o, x, i ) {
						o[ x[type].value.substr( 31 ) ] = i;
						return o;
					}, {} );

					// Save the global matrix: speaker x gender x language x proficiency
					if( type === 'speaker' ) {
						speakersCriteria = v.map( function( x ) {
							return [
								x.speaker.value.substr( 31 ),
								!x.gender || x.gender.type === 'bnode' ? unknown : x.gender.value.substr( 31 ),
								!x.language || x.language.type === 'bnode' ? unknown : x.language.value.substr( 31 ),
								!x.proficiency || x.proficiency.type === 'bnode' ? unknown : x.proficiency.value.substr( 31 ),
							];
						} );
					}
				}

				// Never update manual selectors (except if the user forces the reset)
				if( !force && getQValue( type ) && automaticField[type] === false ) {
					console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): abort1' );
					return;
				}

				if( force || values === null ) {
					values = list[type];
				}

				// If there are at least one unknown value, reset the selector
				else if( values.filter( function( x ) { return x === undefined; } ).length ) {
					values = list[type];
					console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): abort2' );
				}

				// For dropdowns, add an empty item if there is none
				if( widgetType === 'DropdownWidget' && values.length && values[0][type].value ) {
					var emptyItem = [ {} ];
					emptyItem[0][type] = { value: '' };
					emptyItem[0][type+'Label'] = { value: ' ' };
					values = emptyItem.concat( values );
				}

				// Create the OOUI selector
				oouiSelectors[type] = new OO.ui[widgetType]( {
					placeholder: i18n( 'placeholder' ),
					menu: {
						filterFromInput: true,				
						items: values.map( function( x ) {
							return new OO.ui.MenuOptionWidget( {
								data: widgetType === 'ComboBoxInputWidget' ? x[ type + 'Label' ].value + " (" + x[type].value.substr( 31 ) + ")" : x[type].value.substr( 31 ),
								label: x[ type + 'Label' ].value
							} );
						} )
					}
				} );
				if( widgetType === 'DropdownWidget' && values.length > 2 ) {
					oouiSelectors[type].getMenu().items[0].toggle( false );
				}

				if( widgetType === 'ComboBoxInputWidget' && values.length === 1 && automaticField[type] !== false ) {
					oouiSelectors[type].setValue( values[0][ type + 'Label' ].value + " (" + values[0][type].value.substr( 31 ) + ")" );
				// For dropdown, when there is one real value, there is also the empty value as first option
				} else if( widgetType === 'DropdownWidget' && values.length === 2 && automaticField[type] !== false ) {
					oouiSelectors[type].getMenu().selectItemByData( values[1][type].value.substr( 31 ) );
				}

				$( htmlElements[type] ).html('').append(
					oouiSelectors[type].$element
				);
				if( !force ) {
					console.debug( '!force', type, getQValue( type ), automaticField[type] );
					if( automaticField[type] !== false ) {
						automaticField[type] = getQValue( type ) ? true : emptyValue;
					}
					console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): on passe en automatique' );
				} else {
					automaticField[type] = null;
					console.debug( 'updateSelector('+type+','+force+')('+(values?values.length:'null')+' values): on passe en manuel' );
				}

				if( widgetType === 'ComboBoxInputWidget' ) {
					oouiSelectors[type].on( 'change', function() {
						if( getQValue( type ) === '' ) {
							return;
						}
						onChange( type );
					} );
				} else {
					oouiSelectors[type].getMenu().on( 'select', function( item ) {
						if( item.getData() === '' ) {
							item.toggle( false );
						} else {
							oouiSelectors[type].getMenu().items[0].toggle( true );
						}
						onChange( type );
					} );
				}

			};
		}

		function onChange( type ) {

			// Logique ternaire pour les sélecteurs :
			// - null := sélecteur indéterminé, pouvant être réduit sous l’influence d’autres sélecteurs
			// - false := sélecteur manuel, n’étant jamais réduit sous l’influence d’autres sélecteurs et étant toujours étendus (=comprend toutes les valeurs possibles)
			// - true := sélecteur automatique, étant toujours réduit sous l’influence d’autres sélecteurs

			console.debug( 'onChange('+type+')' );
			var state = {
				speaker: getQValue( 'speaker' ),
				gender: getQValue( 'gender' ),
				language: getQValue( 'language' ),
				proficiency: getQValue( 'proficiency' ),
			};
			var nbFilled = 1, emptyValue = true;
			if( !state.speaker && !state.gender && !state.language && !state.proficiency ) {
				reset();
				return;
			} else if( state[type] ) {
				if( state[type] != request[type] ) {
					automaticField[type] = false;
					console.debug( 'onChange('+type+'): on passe en manuel' );
				}
			} else {
				automaticField[type] = null;
				emptyValue = null;
				nbFilled = ( automaticField.language === false && state.language ? 1 : 0 )
					+ ( automaticField.speaker === false && state.speaker ? 1 : 0 )
					+ ( automaticField.gender === false && state.gender ? 1 : 0 )
					+ ( automaticField.proficiency === false && state.proficiency ? 1 : 0 );
				if( nbFilled >= 1 ) {
					automaticField[type] = false;
					emptyValue = true;
					if( type !== 'speaker' && !state.speaker && automaticField.speaker !== false ) {
						automaticField.speaker = emptyValue;
					}
					if( type !== 'gender' && !state.gender && automaticField.gender !== false ) {
						automaticField.gender = emptyValue;
					}
					if( type !== 'language' && !state.language && automaticField.language !== false ) {
						automaticField.language = emptyValue;
					}
					if( type !== 'proficiency' && !state.proficiency && automaticField.proficiency !== false ) {
						automaticField.proficiency = emptyValue;
					}
				} else {
					emptyValue = null;
					if( !state.speaker ) {
						automaticField.speaker = emptyValue;
					}
					if( !state.gender ) {
						automaticField.gender = emptyValue;
					}
					if( !state.language ) {
						automaticField.language = emptyValue;
					}
					if( !state.proficiency ) {
						automaticField.proficiency = emptyValue;
					}
				}
			}
			console.debug( nbFilled, state[type], request[type], emptyValue, automaticField );

			// Do not reduce fields above one change by the user, else it leads to a bad User Experience
			// because fields change themselves with a hardly-understandable logic
			//var nbFilled = ( state.language ? 1 : 0 ) + ( state.speaker ? 1 : 0 ) + ( state.gender ? 1 : 0 ) + ( state.proficiency ? 1 : 0 );
			//if( nbFilled > 1 ) {
			//	return;
			//}

			var potentialSpeakers = speakersCriteria;

			if( state.language && automaticField.language === false ) {
				potentialSpeakers = reduceSpeakers( 2, state.language, potentialSpeakers );
			}
			if( state.speaker && automaticField.speaker === false ) {
				potentialSpeakers = reduceSpeakers( 0, state.speaker, potentialSpeakers );
			}
			if( state.gender && automaticField.gender === false ) {
				potentialSpeakers = reduceSpeakers( 1, state.gender, potentialSpeakers );
			}
			if( state.proficiency && automaticField.proficiency === false ) {
				potentialSpeakers = reduceSpeakers( 3, state.proficiency, potentialSpeakers );
			}
			console.debug( potentialSpeakers, state );

			// Language where there are no records
			if( potentialSpeakers.length === 0 && !state.speaker && !state.gender && state.language && !state.proficiency ) {
				var msg = i18n( 'msg-no-record-in-language' ).replace( /\$1/, 'Special:RecordWizard' ).replace( /\[\[([^|]+)\|([^|]+)\]\]/, '<a href="$1">$2</a>' );
				$( '#sndlib-audioresults' ).html( msg );
				$( '#sndlib-audioPages' ).html( '' );
				$( '#sndlib-savefiltersearch' ).html( $( '#sndlib-savefiltersearch' ).text() );
			} else {
				var listSpeaker = getListSelectorFromQids( 'speaker', dedupe( potentialSpeakers.map( function( x ) { return x[0]; } ) ) );
				var listGender = getListSelectorFromQids( 'gender', dedupe( potentialSpeakers.map( function( x ) { return x[1]; } ) ) );
				var listLanguage = getListSelectorFromQids( 'language', dedupe( potentialSpeakers.map( function( x ) { return x[2]; } ) ) );
				var listProficiency = getListSelectorFromQids( 'proficiency', dedupe( potentialSpeakers.map( function( x ) { return x[3]; } ) ) );

				// Update the selectors with the restricted values
				updateSelector( 'speaker' )( listSpeaker, emptyValue );
				updateSelector( 'gender' )( listGender, emptyValue );
				updateSelector( 'language' )( listLanguage, emptyValue );
				updateSelector( 'proficiency' )( listProficiency, emptyValue );
			}

			request = {
				speaker: getQValue( 'speaker' ),
				gender: getQValue( 'gender' ),
				language: getQValue( 'language' ),
				proficiency: getQValue( 'proficiency' ),
			};
			console.debug( automaticField );
		}

		function initSelectors() {

			$.getJSON(
				'https://lingualibre.org/bigdata/namespace/wdq/sparql',
				{
					query: sparqlGlobal['speaker']
				}
			).then( updateSelector( 'speaker', true ), displayErrorToUser );

			$.getJSON(
				'https://lingualibre.org/bigdata/namespace/wdq/sparql',
				{
					query: sparqlGlobal['gender']
				}
			).then( updateSelector( 'gender', true ), displayErrorToUser );

			$.getJSON(
				'https://lingualibre.org/bigdata/namespace/wdq/sparql',
				{
					query: sparqlGlobal['language']
				}
			).then( updateSelector( 'language', true ), displayErrorToUser );

			$.getJSON(
				'https://lingualibre.org/bigdata/namespace/wdq/sparql',
				{
					query: sparqlGlobal['proficiency']
				}
			).then( updateSelector( 'proficiency', true ), displayErrorToUser );
		}

		function reset() {
			request = {
				speaker: '',
				gender: '',
				language: '',
				proficiency: '',
			};
			automaticField = {
				'speaker': null,
				'gender': null,
				'language': null,
				'proficiency': null,
			};
			updateSelector( 'speaker', true )( list.speaker );
			updateSelector( 'gender', true )( list.gender );
			updateSelector( 'language', true )( list.language );
			updateSelector( 'proficiency', true )( list.proficiency );
			$( '#sndlib-audioresults' ).html( '' );
			$( '#sndlib-audioPages' ).html( '' );
			$( '#sndlib-savefiltersearch' ).html( $( '#sndlib-savefiltersearch' ).text() );
		}

		function reduceSpeakers( index, value, arr ) {
			return arr.filter( function( x ) {
				return x[index] === value;
			} );
		}

		// Add button 'Search'
		$( '#sndlib-gosearch' ).html('').append(
			( new OO.ui.ButtonInputWidget( {
				label: i18n( 'button-gosearch' )
			} ) ).on( 'click', factoryDoQuery( 'random' ) ).$element
		);

		$( '#sndlib-gosearch-last-records' ).html('').append(
			( new OO.ui.ButtonInputWidget( {
				label: i18n( 'button-gosearch-last-records' )
			} ) ).on( 'click', factoryDoQuery( 'last' ) ).$element
		);

		// Add button 'Reset'
		$( '#sndlib-resetsearch' ).html('').append(
			( new OO.ui.ButtonInputWidget( {
				label: i18n( 'button-resetsearch' )
			} ) ).on( 'click', reset ).$element
		);

		// Add button 'Datasets' - it seems that OOUI ButtonWidget.setHref does not work
		var buttonDatasetsA = $( '<a href="https://lingualibre.org/datasets/"></a>' );
		var buttonDatasets = new OO.ui.ButtonInputWidget( {
				label: i18n( 'button-datasets' )
			} );
		var buttonDatasetsLinked = buttonDatasetsA.append( buttonDatasets.$element );
		$( '#sndlib-datasetsButton' ).html('').append( buttonDatasetsLinked );

		function setDownloadLink( data ) {
			if ( data.results === undefined || data.results.bindings === undefined ) {
				displayErrorToUser( 'error: no result from SPARQL' );
				return;
			}

			function escapeCsv( val ) {
				if( !val ) {
					return '""';
				}
				return '"' + val.value.replaceAll( '"', '""' ) + '"';
			}
			
			var csv = 'data:application/csv;charset=utf-8,' + encodeURIComponent( data.results.bindings.map( function( x ) {
					return [
						escapeCsv( x.speakerName ),
						escapeCsv( x.genderLabel ),
						escapeCsv( x.languageLabel ),
						escapeCsv( x.proficiencyLabel ),
						escapeCsv( x.word ),
						escapeCsv( x.file ),
						escapeCsv( x.date ),
					].join( ',' );
				} ).join( "\n" ) );

			$('#sndlib-savefiltersearch').wrapInner( '<a style="color:white"></a>' );
			$('#sndlib-savefiltersearch a').attr( {
				download: 'export-lili.csv',
				href: csv,
			} );
		}

		function displayErrorToUser( obj, error ) {
			displayError( obj, error );
			var code = obj;
			if( obj && obj.status ) {
				code = '' + obj.status;
			}
			if( obj && obj.statusText ) {
				code = '' + code + ' ' + obj.statusText;
			}
			$( '#sndlib-audioresults' ).html( i18n( 'msg-error' ) + ' (' + code + ')' + ( error ? ' ' + error : '' ) );
		}

		// Display results
		function createAudioBoxesForSearch( data ) {
			if ( data.results === undefined || data.results.bindings === undefined ) {
				displayErrorToUser( 'error: no result from SPARQL' );
				return;
			}
			if ( data.results.bindings.length < 1 ) {
				$( '#sndlib-audioresults' ).html( i18n( 'msg-no-results' ) );
				$( '#sndlib-audioPages' ).html( '' );
				return;
			}
			var length = data.results.bindings.length <= nbTotalResults ? data.results.bindings.length : nbTotalResults;
			var moreResults = data.results.bindings.length > nbTotalResults;
			console.debug( 'SPARQL results', data.results.bindings );
			function displayAudioBoxes( index ) {
				$( '#sndlib-audioresults' ).html( '' );
				for( var i = 0; i < nbResultsPerPage && i+index*nbResultsPerPage < 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+index*nbResultsPerPage ].record.value.substr( 31 ), box );
					$( '#sndlib-audioresults' ).append( box );
				}
				function applyFn( i ) {
					return function() {
						displayAudioBoxes( i );
						return false;
					}
				}
				$( '#sndlib-audioPages' ).html( '' );
				if( length > nbResultsPerPage ) {
					for( var i = 0; i < Math.ceil( length/nbResultsPerPage ); i++ ) {
						var link = $( '<a href="#"' + ( i === index ? ' class="selected"' : '' ) + '>' + (i+1) + '</a>' ).on( 'click', applyFn( i ) );
						$( '#sndlib-audioPages' ).append( link ).append( i < Math.ceil( length/nbResultsPerPage )-1 ? '&nbsp;' : '' );
					}
				}
				if( moreResults ) {
					$( '#sndlib-audioPages' ).append( i18n( 'msg-other-records' ) );
				}
			}
			displayAudioBoxes( 0 );

			setDownloadLink( data );
		}

		// Do SPARQL request from filters
		function factoryDoQuery( order ) {

			return function doQuery() {

				request = {
					speaker: getQValue( 'speaker' ),
					gender: getQValue( 'gender' ),
					language: getQValue( 'language' ),
					proficiency: getQValue( 'proficiency' ),
					order: order,
				};
				console.debug( 'doQuery', request );

				var potentialSpeakers = speakersCriteria;

				var query = 'SELECT ?record ?date ?speakerName ?genderLabel ?languageLabel ?proficiencyLabel ?word ?file WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . OPTIONAL { ?speaker llp:P4 [ llv:P4 ?language ; llq:P16 ?proficiency ] ; rdfs:label ?speakerName ; prop:P8 ?gender . FILTER( LANG( ?speakerName ) = "en" ) . ?record prop:P7 ?word ; prop:P3 ?file ; prop:P6 ?date } . ';
				if( request.language ) {
					query += "?record prop:P4 entity:" + request.language + " . ";
					potentialSpeakers = reduceSpeakers( 2, request.language, potentialSpeakers );
				}
				if( request.speaker ) {
					query += "?record prop:P5 entity:" + request.speaker + " . ";
					potentialSpeakers = reduceSpeakers( 0, request.speaker, potentialSpeakers );
				}
				if( request.gender ) {
					query += "?speaker prop:P8 entity:" + request.gender + " . ";
					potentialSpeakers = reduceSpeakers( 1, request.gender, potentialSpeakers );
				}
				if( request.proficiency ) {
					query += "?speaker llp:P4 [ llv:P4 ?language ; llq:P16 entity:" + request.proficiency + " ] . ";
					potentialSpeakers = reduceSpeakers( 3, request.proficiency, potentialSpeakers );
				}
				if( potentialSpeakers.length < speakersCriteria.length ) {
					var listSpeakers = dedupe( potentialSpeakers.map( function( x ) {
						return 'entity:' + x[0];
					} ) ).join();
					console.debug( speakersCriteria, potentialSpeakers, listSpeakers );
					if( listSpeakers.length < 70 ) {
						query += 'FILTER( ?speaker IN (' + listSpeakers + ') )';
					}
				}
				query += 'SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } }';
				if( order === 'random' ) {
					query += ' ORDER BY RAND()';
				} else if( order === 'last' ) {
					query += ' ORDER BY DESC(?date)';
				}
				query += ' LIMIT ' + (nbTotalResults+1);
				if( order === 'random' ) {
					query += '\n# ' + Date.now();
				}

				// Voir https://commons.wikimedia.org/wiki/Category:Throbbers - il faut que le fond soit transparent
				$( '#sndlib-audioresults' ).html( '' ).append( '<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Balls.gif" width="50" />' );
				$( '#sndlib-audioPages' ).html( '' );
				$( '#sndlib-savefiltersearch' ).html( $( '#sndlib-savefiltersearch' ).text() );

				// Execute the request
				var result = $.getJSON(
					'https://lingualibre.org/bigdata/namespace/wdq/sparql',
					{
						query: query,
						//Accept: 'application/sparql-results+json'
					}
				);

				result.then( createAudioBoxesForSearch, displayErrorToUser );
			}
		}

		initSelectors();

	} );

} );