From 384c9af747374793daa363bf4bbdf7ed74ff84ba Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Fri, 19 Feb 2016 13:18:04 +0000 Subject: [PATCH] Update language search/result widget Change-Id: I646d89aa1dddbd31577810f0a8a1d8ddbabe3baa --- modules/ext.templateDataGenerator.ui.css | 4 ++ .../ext.templateDataGenerator.ui.tdDialog.js | 2 + ...plateDataGenerator.languageResultWidget.js | 12 +++-- ...plateDataGenerator.languageSearchWidget.js | 53 +++++++++++++------ 4 files changed, 50 insertions(+), 21 deletions(-) diff --git a/modules/ext.templateDataGenerator.ui.css b/modules/ext.templateDataGenerator.ui.css index 04ff8c07..38a1f8bb 100644 --- a/modules/ext.templateDataGenerator.ui.css +++ b/modules/ext.templateDataGenerator.ui.css @@ -72,6 +72,10 @@ color: #777; } +.tdg-languageResultWidget-highlight { + font-weight: bold; +} + /* Icons */ .oo-ui-icon-parameter { diff --git a/modules/ext.templateDataGenerator.ui.tdDialog.js b/modules/ext.templateDataGenerator.ui.tdDialog.js index 2bf8948f..39a8a855 100644 --- a/modules/ext.templateDataGenerator.ui.tdDialog.js +++ b/modules/ext.templateDataGenerator.ui.tdDialog.js @@ -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(); diff --git a/modules/widgets/ext.templateDataGenerator.languageResultWidget.js b/modules/widgets/ext.templateDataGenerator.languageResultWidget.js index a9ea6c78..f6743b60 100644 --- a/modules/widgets/ext.templateDataGenerator.languageResultWidget.js +++ b/modules/widgets/ext.templateDataGenerator.languageResultWidget.js @@ -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 = $( '' ), offset = text.toLowerCase().indexOf( query.toLowerCase() ); @@ -70,7 +72,7 @@ mw.TemplateData.LanguageResultWidget.prototype.highlightQuery = function ( text, document.createTextNode( text.slice( 0, offset ) ), $( '' ) .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(); diff --git a/modules/widgets/ext.templateDataGenerator.languageSearchWidget.js b/modules/widgets/ext.templateDataGenerator.languageSearchWidget.js index 3a12e9bd..e7d8178c 100644 --- a/modules/widgets/ext.templateDataGenerator.languageSearchWidget.js +++ b/modules/widgets/ext.templateDataGenerator.languageSearchWidget.js @@ -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, '\\$&' );