wikimedia/mediawiki-extensions-TemplateData
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/TemplateData synced 2024-09-24 10:49:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update language search/result widget

Browse source 
Change-Id: I646d89aa1dddbd31577810f0a8a1d8ddbabe3baa
This commit is contained in:
Ed Sanders 2016-02-19 13:18:04 +00:00 committed by James D. Forrester
parent 2ea0e0e475
commit 384c9af747
4 changed files with 50 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
modules/ext.templateDataGenerator.ui.css
View file

@ -72,6 +72,10 @@
color: #777;
}
.tdg-languageResultWidget-highlight {
font-weight: bold;
}
/* Icons */
.oo-ui-icon-parameter {

2
modules/ext.templateDataGenerator.ui.tdDialog.js
View file

@ -836,6 +836,8 @@ mw.TemplateData.Dialog.prototype.getSetupProcess = function ( data ) {
// Setup the dialog
this.setupDetailsFromModel();
this.newLanguageSearch.addResults();
languageItems = [];
language = this.model.getDefaultLanguage();
languages = this.model.getExistingLanguageCodes();

12
modules/widgets/ext.templateDataGenerator.languageResultWidget.js
View file

@ -10,7 +10,7 @@
*/
mw.TemplateData.LanguageResultWidget = function mwTemplateDataLanguageResultWidget( config ) {
// Parent constructor
OO.ui.OptionWidget.call( this, config );
mw.TemplateData.LanguageResultWidget.parent.call( this, config );
// Initialization
this.$element.addClass( 'tdg-languageResultWidget' );
@ -41,7 +41,7 @@ mw.TemplateData.LanguageResultWidget.prototype.updateLabel = function ( query, m
// Highlight where applicable
if ( matchedProperty ) {
$highlighted = this.highlightQuery( data[matchedProperty], query );
$highlighted = this.constructor.static.highlightQuery( data[ matchedProperty ], query );
if ( matchedProperty === 'name' ) {
this.$name.empty().append( $highlighted );
} else {
@ -55,11 +55,13 @@ mw.TemplateData.LanguageResultWidget.prototype.updateLabel = function ( query, m
/**
* Highlight text where a substring query matches
*
* Copied from ve#highlightQuery
*
* @param {string} text Text
* @param {string} query Query to find
* @returns {jQuery} Text with query substring wrapped in highlighted span
* @return {jQuery} Text with query substring wrapped in highlighted span
*/
mw.TemplateData.LanguageResultWidget.prototype.highlightQuery = function ( text, query ) {
mw.TemplateData.LanguageResultWidget.static.highlightQuery = function ( text, query ) {
var $result = $( '<span>' ),
offset = text.toLowerCase().indexOf( query.toLowerCase() );
@ -70,7 +72,7 @@ mw.TemplateData.LanguageResultWidget.prototype.highlightQuery = function ( text,
document.createTextNode( text.slice( 0, offset ) ),
$( '<span>' )
.addClass( 'tdg-languageResultWidget-highlight' )
.text( text.substr( offset, query.length ) ),
.text( text.slice( offset, offset + query.length ) ),
document.createTextNode( text.slice( offset + query.length ) )
);
return $result.contents();

53
modules/widgets/ext.templateDataGenerator.languageSearchWidget.js
View file

@ -9,22 +9,24 @@
* @param {Object} [config] Configuration options
*/
mw.TemplateData.LanguageSearchWidget = function mwTemplateDataLanguageSearchWidget( config ) {
var i, l, languageCode, languageCodes;
// Configuration intialization
config = $.extend( {
placeholder: mw.msg( 'templatedata-modal-search-input-placeholder' )
}, config );
// Parent constructor
OO.ui.SearchWidget.call( this, config );
mw.TemplateData.LanguageSearchWidget.parent.call( this, config );
// Properties
this.languageResultWidgets = [];
this.filteredLanguageResultWidgets = [];
var i, l, languageCode,
languageCodes = Object.keys( $.uls.data.getAutonyms() ).sort();
languageCodes = Object.keys( $.uls.data.getAutonyms() ).sort();
for ( i = 0, l = languageCodes.length; i < l; i++ ) {
languageCode = languageCodes[i];
languageCode = languageCodes[ i ];
this.languageResultWidgets.push(
new mw.TemplateData.LanguageResultWidget( {
data: {
@ -35,7 +37,7 @@ mw.TemplateData.LanguageSearchWidget = function mwTemplateDataLanguageSearchWidg
} )
);
}
this.addResults();
this.setAvailableLanguages();
// Initialization
this.$element.addClass( 'tdg-languageSearchWidget' );
@ -48,26 +50,45 @@ OO.inheritClass( mw.TemplateData.LanguageSearchWidget, OO.ui.SearchWidget );
/* Methods */
/**
* Handle select widget select events.
*
* Clears existing results. Subclasses should repopulate items according to new query.
*
* @param {string} value New value
*/
mw.TemplateData.LanguageSearchWidget.prototype.onQueryChange = function () {
// Parent method
OO.ui.SearchWidget.prototype.onQueryChange.call( this );
mw.TemplateData.LanguageSearchWidget.parent.prototype.onQueryChange.apply( this, arguments );
// Populate
this.addResults();
};
/**
* Set available languages to show
*
* @param {string[]} availableLanguages Available language codes to show, all if undefined
*/
mw.TemplateData.LanguageSearchWidget.prototype.setAvailableLanguages = function ( availableLanguages ) {
var i, iLen, languageResult, data;
if ( !availableLanguages ) {
this.filteredLanguageResultWidgets = this.languageResultWidgets.slice();
return;
}
this.filteredLanguageResultWidgets = [];
for ( i = 0, iLen = this.languageResultWidgets.length; i < iLen; i++ ) {
languageResult = this.languageResultWidgets[ i ];
data = languageResult.getData();
if ( availableLanguages.indexOf( data.code ) !== -1 ) {
this.filteredLanguageResultWidgets.push( languageResult );
}
}
};
/**
* Update search results from current query
*/
mw.TemplateData.LanguageSearchWidget.prototype.addResults = function () {
var i, iLen, j, jLen, languageResult, data, matchedProperty,
matchProperties = ['name', 'autonym', 'code'],
matchProperties = [ 'name', 'autonym', 'code' ],
query = this.query.getValue().trim(),
matcher = new RegExp( '^' + this.constructor.static.escapeRegex( query ), 'i' ),
hasQuery = !!query.length,
@ -76,13 +97,13 @@ mw.TemplateData.LanguageSearchWidget.prototype.addResults = function () {
this.results.clearItems();
for ( i = 0, iLen = this.languageResultWidgets.length; i < iLen; i++ ) {
languageResult = this.languageResultWidgets[i];
languageResult = this.languageResultWidgets[ i ];
data = languageResult.getData();
matchedProperty = null;
for ( j = 0, jLen = matchProperties.length; j < jLen; j++ ) {
if ( matcher.test( data[matchProperties[j]] ) ) {
matchedProperty = matchProperties[j];
if ( matcher.test( data[ matchProperties[ j ] ] ) ) {
matchedProperty = matchProperties[ j ];
break;
}
}
@ -109,7 +130,7 @@ mw.TemplateData.LanguageSearchWidget.prototype.addResults = function () {
* Ported from Languagefilter#escapeRegex in jquery.uls.
*
* @param {string} value Text
* @returns {string} Text escaped for use in regex
* @return {string} Text escaped for use in regex
*/
mw.TemplateData.LanguageSearchWidget.static.escapeRegex = function ( value ) {
return value.replace( /[\-\[\]{}()*+?.,\\\^$\|#\s]/g, '\\$&' );