Nicolas NALLET/bluell.js

$( function (){
	var userLanguage = mw.config.get( 'wgUserLanguage' );
	var messages = {
		'no-results': {
			en: 'No results.',
			de: 'Keine Ergebnisse.',
			fr: 'Pas de résultat.',
		}
	};
	mw.loader.using( ['oojs', 'oojs-ui'], function () {

		var oouiSpeaker, oouiGender, oouiLanguage, oouiProficiency;

		$.getJSON(
			'https://lingualibre.org/bigdata/namespace/wdq/sparql',
			{
				query: 'SELECT DISTINCT ?speaker ?speakerLabel WHERE { ?speaker prop:P2 entity:Q3 . ?speaker rdfs:label ?speakerLabel . FILTER( LANG(?speakerLabel) = "en" ) } ORDER BY ?speakerLabel'
			}
		).done( function( speakers ) {
			oouiSpeaker = new OO.ui.ComboBoxInputWidget( {
				placeholder: '👤 Speaker',
				menu: {
					filterFromInput: true,				
					items: speakers.results.bindings.map( function( x ) {
						return new OO.ui.MenuOptionWidget( {
							data: x.speakerLabel.value + " (" + x.speaker.value.substr( 31 ) + ")",
							label: x.speakerLabel.value
						} );
					} )
				}
			} );

			$( '#filteruser' ).append(
				oouiSpeaker.$element
			);

			oouiSpeaker.on( 'change', doQuery );

		} );

		$.getJSON(
			'https://lingualibre.org/bigdata/namespace/wdq/sparql',
			{
				query: 'SELECT DISTINCT ?gender ?genderLabel WHERE { ?gender prop:P2 entity:Q7 . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } } ORDER BY ?gender'
			}
		).done( function( genders ) {
			oouiGender = new OO.ui.ComboBoxInputWidget( {
				placeholder: '♀️ ♂️ Speaker\'s gender',
				menu: {
					filterFromInput: true,	
					items: genders.results.bindings.map( function( x ) {
						return new OO.ui.MenuOptionWidget( {
							data: x.genderLabel.value + " (" + x.gender.value.substr( 31 ) + ")",
							label: x.genderLabel.value
						} );
					} )
				}
			} );

			$( '#filtergender' ).append(
				oouiGender.$element
			);

			oouiGender.on( 'change', doQuery );

		} );

		$.getJSON(
			'https://lingualibre.org/bigdata/namespace/wdq/sparql',
			{
				query: 'SELECT DISTINCT ?language ?languageLabel WHERE { ?language prop:P2 entity:Q4 . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } } ORDER BY ?languageLabel'
			}
		).done( function( languages ) {
			oouiLanguage = new OO.ui.ComboBoxInputWidget( {
				placeholder: '🏳️ Language',
				menu: {
					filterFromInput: true,	
					items: languages.results.bindings.map( function( x ) {
						return new OO.ui.MenuOptionWidget( {
							data: x.languageLabel.value + " (" + x.language.value.substr( 31 ) + ")",
							label: x.languageLabel.value
						} );
					} )
				}
			} );

			$( '#filterlanguage' ).append(
				oouiLanguage.$element
			);

			oouiLanguage.on( 'change', doQuery );

		} );

		$.getJSON(
			'https://lingualibre.org/bigdata/namespace/wdq/sparql',
			{
				query: 'SELECT DISTINCT ?proficiency ?proficiencyLabel WHERE { ?proficiency prop:P2 entity:Q5 . SERVICE wikibase:label { bd:serviceParam wikibase:language "' + userLanguage + ',fr,en" } } ORDER BY ?proficiency'
			}
		).done( function( proficiencies ) {
			oouiProficiency = new OO.ui.ComboBoxInputWidget( {
				placeholder: '🥇 Level of proficiency',
				menu: {
					filterFromInput: true,	
					items: proficiencies.results.bindings.map( function( x ) {
						return new OO.ui.MenuOptionWidget( {
							data: x.proficiencyLabel.value + " (" + x.proficiency.value.substr( 31 ) + ")",
							label: x.proficiencyLabel.value
						} );
					} )
				}
			} );

			$( '#filterlevelofproficiency' ).append(
				oouiProficiency.$element
			);

			oouiProficiency.on( 'change', doQuery );

		} );

		// Display results
		function createAudioBoxesForSearch( data ) {
			if ( data.results === undefined || data.results.bindings === undefined ) {
				displayError( 'error: no result from SPARQL' );
				return;
			}
			if ( data.results.bindings.length < 1 ) {
				$( '#audioresults' ).html( messages['no-results'][userLanguage] ? messages['no-results'][userLanguage] : messages['no-results']['en'] );
				return;
			}
			for (var i = 0; i < 100; i++) {
				var box = $( '<div class="audiobox"> <div class="ab-playbutton"><i></i></div> <div> <div class="ab-title">...</div> <div class="ab-metadata">...</div> </div> </div>' );
				var audiobox = new AudioBox( data.results.bindings[ i ].record.value.substr( 31 ), box );
				$( '#audioresults' ).append( box );
				//ab1 = new AudioBox( data.query.rwrecords[ i ], $( '.audiobox' ).eq( i ) );
				//$("body").append('<div class="audiobox"> <div class="ab-playbutton"><i></i></div> <div> <div class="ab-title">...</div> <div class="ab-metadata">...</div> </div> </div>');	
			}
			//ab1 = new AudioBox( data.query.rwrecords[ 0 ], $( '.audiobox' ).eq( 0 ) );
			//ab2 = new AudioBox( data.query.rwrecords[ 1 ], $( '.audiobox' ).eq( 1 ) );
		}

		// Do SPARQL request from filters
		function doQuery(){
			
			function getQ( text ) {
				if( !text ) {
					return '';
				}
				text = text.trim();
				if( /^Q[0-9]+$/.test( text ) ) {
					return text;
				} else if( /\((Q[0-9]+)\)$/.test( text ) ) {
					return text.replace( /.*\((Q[0-9]+)\)$/, '$1' );
				} else {
					console.warn( 'Bad input “' + text + '”' );
					return '';
				}
			}

			var speaker = getQ( oouiSpeaker.getValue() ),
			    gender = getQ( oouiGender.getValue() ),
			    language = getQ( oouiLanguage.getValue() ),
			    proficiency = getQ( oouiProficiency.getValue() ),
			    somevalue = false;

			var query = "SELECT ?record WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . ";
			if( speaker ) {
				query += "?record prop:P5 entity:" + speaker + " .";
				somevalue = true;
			}
			if( gender ) {
				query += "?record prop:P5 [ prop:P8 entity:" + gender + " ] .";
				somevalue = true;
			}
			if( language ) {
				query += "?record prop:P4 entity:" + language + " .";
				somevalue = true;
			}
			if( proficiency ) {
				query += "?speaker llp:P4 [ llv:P4 ?language ; llq:16 entity:" + proficiency + " ] .";
				somevalue = true;
			}
			query += "SERVICE wikibase:label { bd:serviceParam wikibase:language '[AUTO_LANGUAGE],en,fr' } } LIMIT 100";

			$( '#audioresults' ).html( '' );

			if( !somevalue ) {
				return;
			}

			$.getJSON(
				'https://lingualibre.org/bigdata/namespace/wdq/sparql',
				{
					query: query,
					//Accept: 'application/sparql-results+json'
				}
			).then( createAudioBoxesForSearch, displayError );
		}

	} );

} );