User
Difference between revisions of "Mathis Back/bluell.js"
Mathis Back (talk | contribs) |
(update of the code) |
||
(7 intermediate revisions 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( | + | if( !/^LinguaLibre:Explore_the_sound_library(\/[a-z_-]+)?$/.test( mw.config.get( 'wgPageName' ) ) ) { |
return; | return; | ||
} | } | ||
− | const | + | |
+ | // 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.', |
− | + | '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': ' (and many other results)', | |
− | + | 'button-gosearch': 'Search', | |
− | + | 'button-gosearch-last-records': 'Last records', | |
− | + | 'button-resetsearch': 'Reset', | |
− | + | 'button-datasets': 'Datasets', | |
− | + | 'placeholder': 'Select or type', | |
− | |||
− | |||
− | |||
− | 'button- | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | ' | ||
− | |||
− | |||
− | |||
− | |||
− | ' | ||
− | |||
− | |||
− | |||
− | |||
− | ' | ||
− | |||
− | |||
− | |||
− | |||
− | 'placeholder | ||
− | |||
− | |||
− | |||
− | |||
}; | }; | ||
+ | |||
+ | 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 () { | 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': '', | '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]; | ||
} ); | } ); | ||
− | |||
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. | + | 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, | + | if( force || values === null ) { |
− | if( values.filter( function( x ) { return x === undefined; } ).length ) { | + | 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 ) { | 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: | + | 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( | + | 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 | ||
− | + | 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( | + | 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( | + | if( state.language && automaticField.language === false ) { |
− | potentialSpeakers = reduceSpeakers( 2, | + | potentialSpeakers = reduceSpeakers( 2, state.language, potentialSpeakers ); |
} | } | ||
− | if( | + | if( state.speaker && automaticField.speaker === false ) { |
− | potentialSpeakers = reduceSpeakers( 0, | + | potentialSpeakers = reduceSpeakers( 0, state.speaker, potentialSpeakers ); |
} | } | ||
− | if( | + | if( state.gender && automaticField.gender === false ) { |
− | potentialSpeakers = reduceSpeakers( 1, | + | potentialSpeakers = reduceSpeakers( 1, state.gender, potentialSpeakers ); |
} | } | ||
− | if( | + | if( state.proficiency && automaticField.proficiency === false ) { |
− | potentialSpeakers = reduceSpeakers( 3, | + | 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 ); | ||
} | } | ||
Line 286: | Line 372: | ||
query: sparqlGlobal['speaker'] | query: sparqlGlobal['speaker'] | ||
} | } | ||
− | ). | + | ).then( updateSelector( 'speaker', true ), displayErrorToUser ); |
$.getJSON( | $.getJSON( | ||
Line 293: | Line 379: | ||
query: sparqlGlobal['gender'] | query: sparqlGlobal['gender'] | ||
} | } | ||
− | ). | + | ).then( updateSelector( 'gender', true ), displayErrorToUser ); |
$.getJSON( | $.getJSON( | ||
Line 300: | Line 386: | ||
query: sparqlGlobal['language'] | query: sparqlGlobal['language'] | ||
} | } | ||
− | ). | + | ).then( updateSelector( 'language', true ), displayErrorToUser ); |
$.getJSON( | $.getJSON( | ||
Line 307: | Line 393: | ||
query: sparqlGlobal['proficiency'] | query: sparqlGlobal['proficiency'] | ||
} | } | ||
− | ). | + | ).then( updateSelector( 'proficiency', true ), displayErrorToUser ); |
} | } | ||
function reset() { | function reset() { | ||
− | + | 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 331: | Line 425: | ||
// Add button 'Search' | // Add button 'Search' | ||
− | $( '#gosearch' ).html('').append( | + | $( '#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( { | ( new OO.ui.ButtonInputWidget( { | ||
− | label: | + | label: i18n( 'button-gosearch-last-records' ) |
− | } ) ).on( 'click', | + | } ) ).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: | + | 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 ) { | ||
− | + | displayErrorToUser( 'error: no result from SPARQL' ); | |
return; | return; | ||
} | } | ||
if ( data.results.bindings.length < 1 ) { | if ( data.results.bindings.length < 1 ) { | ||
− | $( '#audioresults' ).html( | + | $( '#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. | + | 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( '' ); |
− | + | for( var i = 0; i < nbResultsPerPage && i+index*nbResultsPerPage < length; i++ ) { | |
− | for( var i = 0; 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 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* | + | 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() { | ||
− | |||
displayAudioBoxes( i ); | displayAudioBoxes( i ); | ||
return false; | return false; | ||
} | } | ||
} | } | ||
− | for( var i = 0; i < Math.ceil( length/ | + | $( '#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 ? ' ' : '' ); | ||
+ | } | ||
+ | } | ||
+ | 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 | + | function factoryDoQuery( order ) { |
− | request = { | + | 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 ); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
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': ' (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 ? ' ' : '' );
}
}
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();
} );
} );