User

Difference between revisions of "Seb35/bluell.js"

< User:Seb35

(intégration de User:NavidBoyWiki/bluell.js en paramétrisant la requête SPARQL - en espérant ne pas avoir commis d’injection SPARQL :-D)
Line 2: Line 2:
 
var userLanguage = mw.config.get( 'wgUserLanguage' );
 
var userLanguage = mw.config.get( 'wgUserLanguage' );
 
mw.loader.using( ['oojs', 'oojs-ui'], function () {
 
mw.loader.using( ['oojs', 'oojs-ui'], function () {
 +
 +
var oouiSpeaker, oouiGender, oouiLanguage, oouiProficiency;
  
 
$.getJSON(
 
$.getJSON(
 
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
'https://lingualibre.org/bigdata/namespace/wdq/sparql',
 
{
 
{
query: 'SELECT DISTINCT ?user ?userLabel WHERE { ?user prop:P2 entity:Q3 . ?user rdfs:label ?userLabel . FILTER( LANG(?userLabel) = "en" ) } ORDER BY ?userLabel'
+
query: 'SELECT DISTINCT ?speaker ?speakerLabel WHERE { ?user prop:P2 entity:Q3 . ?speaker rdfs:label ?speakerLabel . FILTER( LANG(?speakerLabel) = "en" ) } ORDER BY ?speakerLabel'
 
}
 
}
).done( function( users ) {
+
).done( function( speakers ) {
console.log( users );
+
console.log( speakers );
var combobox = new OO.ui.ComboBoxInputWidget( {
+
oouiSpeaker = new OO.ui.ComboBoxInputWidget( {
placeholder: '👤 Speaker',
+
placeholder: '👤 Speaker',
 
menu: {
 
menu: {
 
+
filterFromInput: true,
filterFromInput: true,
+
items: users.results.bindings.map( function( x ) {
items: users.results.bindings.map( function( x ) {
 
 
return new OO.ui.MenuOptionWidget( {
 
return new OO.ui.MenuOptionWidget( {
data: x.user.value.substr( 31 ),
+
data: x.speaker.value.substr( 31 ),
label: x.userLabel.value
+
label: x.speakerLabel.value
 
} );
 
} );
 
} )
 
} )
Line 25: Line 26:
  
 
$( '#filteruser' ).append(
 
$( '#filteruser' ).append(
combobox.$element
+
oouiSpeaker.$element
 
);
 
);
  
Line 37: Line 38:
 
).done( function( genders ) {
 
).done( function( genders ) {
 
console.log( genders );
 
console.log( genders );
var combobox = new OO.ui.ComboBoxInputWidget( {
+
oouiGender = new OO.ui.ComboBoxInputWidget( {
placeholder: '♀️ ♂️ Speaker\'s gender',
+
placeholder: '♀️ ♂️ Speaker\'s gender',
 
menu: {
 
menu: {
filterFromInput: true,
+
filterFromInput: true,
 
items: genders.results.bindings.map( function( x ) {
 
items: genders.results.bindings.map( function( x ) {
 
return new OO.ui.MenuOptionWidget( {
 
return new OO.ui.MenuOptionWidget( {
Line 51: Line 52:
  
 
$( '#filtergender' ).append(
 
$( '#filtergender' ).append(
combobox.$element
+
oouiGender.$element
 
);
 
);
  
Line 63: Line 64:
 
).done( function( languages ) {
 
).done( function( languages ) {
 
console.log( languages );
 
console.log( languages );
var combobox = new OO.ui.ComboBoxInputWidget( {
+
oouiLanguage = new OO.ui.ComboBoxInputWidget( {
placeholder: '🏳️ Language',
+
placeholder: '🏳️ Language',
 
menu: {
 
menu: {
filterFromInput: true,
+
filterFromInput: true,
 
items: languages.results.bindings.map( function( x ) {
 
items: languages.results.bindings.map( function( x ) {
 
return new OO.ui.MenuOptionWidget( {
 
return new OO.ui.MenuOptionWidget( {
Line 77: Line 78:
  
 
$( '#filterlanguage' ).append(
 
$( '#filterlanguage' ).append(
combobox.$element
+
oouiLanguage.$element
 
);
 
);
  
Line 89: Line 90:
 
).done( function( proficiencies ) {
 
).done( function( proficiencies ) {
 
console.log( proficiencies );
 
console.log( proficiencies );
var combobox = new OO.ui.ComboBoxInputWidget( {
+
oouiProficiency = new OO.ui.ComboBoxInputWidget( {
placeholder: '🥇 Level of proficiency',
+
placeholder: '🥇 Level of proficiency',
 
menu: {
 
menu: {
filterFromInput: true,
+
filterFromInput: true,
 
items: proficiencies.results.bindings.map( function( x ) {
 
items: proficiencies.results.bindings.map( function( x ) {
 
return new OO.ui.MenuOptionWidget( {
 
return new OO.ui.MenuOptionWidget( {
Line 103: Line 104:
  
 
$( '#filterlevelofproficiency' ).append(
 
$( '#filterlevelofproficiency' ).append(
combobox.$element
+
oouiProficiency.$element
 
);
 
);
  
 
} );
 
} );
  
} );
+
// Display results
 +
function createAudioBoxesForSearch( data ) {
 +
if ( data.results === undefined || data.results.bindings === undefined ) {
 +
displayError( 'error: no result from SPARQL' );
 +
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>' );
 +
box = new AudioBox( data.results.bindings[ i ].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(){
 +
 +
var speaker = oouiSpeaker.getValue(),
 +
    gender = oouiGender.getValue(),
 +
    language = oouiLanguage.getValue(),
 +
    proficiency = oouiProficiency.getValue();
  
 +
var query = "SELECT ?record WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . ";
 +
if( speaker && /^Q[0-9]+$/.test( speaker ) ) {
 +
query += "?record prop:P5 " + speaker + " .";
 +
}
 +
if( gender && /^Q[0-9]+$/.test( gender ) ) {
 +
query += "?record prop:P5 [ prop:P8 " + gender + " ] .";
 +
}
 +
if( language && /^Q[0-9]+$/.test( language ) ) {
 +
query += "?record prop:P4 " + language + " .";
 +
}
 +
if( proficiency && /^Q[0-9]+$/.test( proficiency ) ) {
 +
query += "?speaker llp:P4 [ llv:P4 ?language ; llq:16 " + proficiency + " ] .";
 +
}
 +
query += "SERVICE wikibase:label { bd:serviceParam wikibase:language '[AUTO_LANGUAGE],en,fr' } }";
  
 +
$.ajax({
 +
dataType: 'json',
 +
data: {
 +
query: query ,
 +
//Accept: 'application/sparql-results+json'
 +
},
 +
success: createAudioBoxesForSearch,
 +
error: displayError
 +
});
 +
}
  
 +
} );
  
lang = mw.config.get( 'wgUserLanguage' );
+
} );
 
 
AudioBox.prototype.display = function() {
 
this.$node.find( '.ab-title' ).text( "un label" + lang ); //this.label
 
this.$node.find( '.ab-metadata' ).text( this.lang + ' - ' + this.speaker );
 
 
this.audioNode.src = this.media;
 
this.$node.find( '.ab-playbutton' ).click( this.audioNode.play.bind( this.audioNode ) );
 
}
 
 
 
 
 
function createAudioBoxes( data ) {
 
if ( data.query === undefined || data.query.rwrecords === undefined || data.query.rwrecords.length < 2 ) {
 
displayError( 'nodata' );
 
return;
 
}
 
 
 
ab1 = new AudioBox( data.query.rwrecords[ 0 ], $( '.audiobox' ).eq( 0 ) );
 
ab2 = new AudioBox( data.query.rwrecords[ 1 ], $( '.audiobox' ).eq( 1 ) );
 
}
 
 
 
function getRecords() {
 
    var api = new mw.Api();
 
api.get( {
 
        action: 'query',
 
        format: 'json',
 
lang: 'fr',
 
        list: 'rwrecords',
 
        rwrlimit: '2',
 
rwrsort: 'pageid',
 
rwrdir: 'descending',
 
rwrformat: 'qid'
 
  } ).then( createAudioBoxes, displayError );
 
}
 
 
 
function displayError( code, error ) {
 
console.warn( code, error );
 
}
 
 
 
 
 
if ( mw.config.get( 'wgPageName' ) === 'User:Nicolas_NALLET' ) {
 
    mw.loader.using( [ 'mediawiki.api', 'ext.recordWizard.wikibase' ] ).then( getRecords );
 
$('.selectors').append(lang.$element);
 
$('.selectors').append(list.$element);
 
}
 

Revision as of 13:25, 2 August 2021

$( function (){
	var userLanguage = mw.config.get( 'wgUserLanguage' );
	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 { ?user prop:P2 entity:Q3 . ?speaker rdfs:label ?speakerLabel . FILTER( LANG(?speakerLabel) = "en" ) } ORDER BY ?speakerLabel'
			}
		).done( function( speakers ) {
			console.log( speakers );
			oouiSpeaker = new OO.ui.ComboBoxInputWidget( {
				placeholder: '👤 Speaker',
				menu: {
					filterFromInput: true,				
					items: users.results.bindings.map( function( x ) {
						return new OO.ui.MenuOptionWidget( {
							data: x.speaker.value.substr( 31 ),
							label: x.speakerLabel.value
						} );
					} )
				}
			} );

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

		} );

		$.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 ) {
			console.log( 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.gender.value.substr( 31 ),
							label: x.genderLabel.value
						} );
					} )
				}
			} );

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

		} );

		$.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 ) {
			console.log( 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.language.value.substr( 31 ),
							label: x.languageLabel.value
						} );
					} )
				}
			} );

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

		} );

		$.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 ) {
			console.log( 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.proficiency.value.substr( 31 ),
							label: x.proficiencyLabel.value
						} );
					} )
				}
			} );

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

		} );

		// Display results
		function createAudioBoxesForSearch( data ) {
			if ( data.results === undefined || data.results.bindings === undefined ) {
				displayError( 'error: no result from SPARQL' );
				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>' );
				box = new AudioBox( data.results.bindings[ i ].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(){
			
			var speaker = oouiSpeaker.getValue(),
			    gender = oouiGender.getValue(),
			    language = oouiLanguage.getValue(),
			    proficiency = oouiProficiency.getValue();

			var query = "SELECT ?record WHERE { ?record prop:P2 entity:Q2 ; prop:P4 ?language ; prop:P5 ?speaker . ";
			if( speaker && /^Q[0-9]+$/.test( speaker ) ) {
				query += "?record prop:P5 " + speaker + " .";
			}
			if( gender && /^Q[0-9]+$/.test( gender ) ) {
				query += "?record prop:P5 [ prop:P8 " + gender + " ] .";
			}
			if( language && /^Q[0-9]+$/.test( language ) ) {
				query += "?record prop:P4 " + language + " .";
			}
			if( proficiency && /^Q[0-9]+$/.test( proficiency ) ) {
				query += "?speaker llp:P4 [ llv:P4 ?language ; llq:16 " + proficiency + " ] .";
			}
			query += "SERVICE wikibase:label { bd:serviceParam wikibase:language '[AUTO_LANGUAGE],en,fr' } }";

			$.ajax({
				dataType: 'json',
				data: {
					query: query ,
					//Accept: 'application/sparql-results+json'
				},
				success: createAudioBoxesForSearch,
				error: displayError
			});
		}

	} );

} );