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