mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-25 23:05:35 +00:00
e888d7b985
Objectives: * Ensure items don't get moved to the end when their sort-key is edited * Add placeholder text and pending styling to input * Auto-expand input to the end of the line * Make the minimum input width smaller Changes: ve.ui.MWMetaDialog.js * Added calls to fitInput on initialize * Fixed sort key update and insert handlers to maintain item position when updating ve.ui.GroupElement.js * Added index argument to addItems, allowing items to be inserted at a specific location ve.ui.PagePanelLayout.js * Fixed CSS class name ve.ui.StackPanelLayout.js, ve.ui.MenuWidget.js, ve.ui.SelectWidget.js * Passed index argument through to group element ve.ui.PanelLayout.js * Fixed overflow direction for scrolling option ve.ui.Inspector.css * Moved border-box properties to text input widget class * Set input widget within inspectors to be 100% by default ve.ui.Layout.css * Updated CSS class name * Whitespace fixes ve.ui.Widget.css * Made text input widgets's wrapper default to 20em wide and the input inside it be 100%, using border-box to ensure proper sizing * Adjusted category list item and input styles to make input appear more like a category item * Whitespace fixes ve.ui.MWCategoryInputWidget.js * Made category input widget inherit text input widget, rather than just input widget ve.ui.MWCategoryWidget.js * Replaced group functionality by mixing in group element * Added fitInput, which automatically make the input fill the rest of the line or take up the entire next line depending on how much space is left VisualEditor.i18n.php * Adjusted placeholder text for category input Change-Id: I79a18a7b849804027473084a42c36133fdacad57
191 lines
5.2 KiB
JavaScript
191 lines
5.2 KiB
JavaScript
/*!
|
|
* VisualEditor UserInterface MWCategoryInputWidget class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/*global mw*/
|
|
|
|
/**
|
|
* Creates an ve.ui.MWCategoryInputWidget object.
|
|
*
|
|
* @class
|
|
* @extends ve.ui.TextInputWidget
|
|
* @mixins ve.ui.PendingInputWidget
|
|
* @mixins ve.ui.LookupInputWidget
|
|
*
|
|
* @constructor
|
|
* @param {Object} [config] Config options
|
|
*/
|
|
ve.ui.MWCategoryInputWidget = function VeUiMWCategoryInputWidget( categoryWidget, config ) {
|
|
// Config intialization
|
|
config = ve.extendObject( {
|
|
'placeholder': ve.msg( 'visualeditor-category-input-placeholder' )
|
|
}, config );
|
|
|
|
// Parent constructor
|
|
ve.ui.TextInputWidget.call( this, config );
|
|
|
|
// Mixin constructors
|
|
ve.ui.PendingInputWidget.call( this );
|
|
ve.ui.LookupInputWidget.call( this, this, config );
|
|
|
|
// Properties
|
|
this.categoryWidget = categoryWidget;
|
|
this.forceCapitalization = mw.config.get( 'wgCaseSensitiveNamespaces' ).indexOf( 14 ) === -1;
|
|
this.categoryPrefix = 'Category:';
|
|
|
|
// Initialization
|
|
this.$.addClass( 've-ui-mwCategoryInputWidget' );
|
|
this.lookupMenu.$.addClass( 've-ui-mwCategoryInputWidget-menu' );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
ve.inheritClass( ve.ui.MWCategoryInputWidget, ve.ui.TextInputWidget );
|
|
|
|
ve.mixinClass( ve.ui.MWCategoryInputWidget, ve.ui.PendingInputWidget );
|
|
ve.mixinClass( ve.ui.MWCategoryInputWidget, ve.ui.LookupInputWidget );
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Gets a new request object of the current lookup query value.
|
|
*
|
|
* @method
|
|
* @returns {jQuery.Deferred} Deferred object with success and fail handlers already attached
|
|
*/
|
|
ve.ui.MWCategoryInputWidget.prototype.getLookupRequest = function () {
|
|
return $.ajax( {
|
|
'url': mw.util.wikiScript( 'api' ),
|
|
'data': {
|
|
'format': 'json',
|
|
'action': 'opensearch',
|
|
'search': this.categoryPrefix + this.value,
|
|
'suggest': ''
|
|
},
|
|
'dataType': 'json'
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Get lookup cache item from server response data.
|
|
*
|
|
* @method
|
|
* @param {Mixed} data Response from server
|
|
*/
|
|
ve.ui.MWCategoryInputWidget.prototype.getLookupCacheItemFromData = function ( data ) {
|
|
return ve.isArray( data ) && data.length ?
|
|
data[1].map( ve.bind( function ( item ) {
|
|
return item.replace( new RegExp( this.categoryPrefix, 'gi' ), '' );
|
|
}, this ) ) :
|
|
[];
|
|
};
|
|
|
|
/**
|
|
* Get list of menu items from a server response.
|
|
*
|
|
* @param {Object} data Query result
|
|
* @returns {ve.ui.MenuItemWidget[]} Menu items
|
|
*/
|
|
ve.ui.MWCategoryInputWidget.prototype.getLookupMenuItemsFromData = function ( data ) {
|
|
var i, len, item,
|
|
exactMatch = false,
|
|
newCategoryItems = [],
|
|
existingCategoryItems = [],
|
|
matchingCategoryItems = [],
|
|
items = [],
|
|
menu$$ = this.lookupMenu.$$,
|
|
category = this.getCategoryItemFromValue( this.value ),
|
|
existingCategories = this.categoryWidget.getCategories(),
|
|
matchingCategories = data || [],
|
|
pattern = new RegExp( '^' + category.value );
|
|
|
|
// Existing categories
|
|
for ( i = 0, len = existingCategories.length; i < len; i++ ) {
|
|
item = existingCategories[i];
|
|
if ( item.match( pattern ) ) {
|
|
if ( item === category.value ) {
|
|
exactMatch = true;
|
|
}
|
|
existingCategoryItems.push( item );
|
|
}
|
|
}
|
|
// Matching categories
|
|
for ( i = 0, len = matchingCategories.length; i < len; i++ ) {
|
|
item = matchingCategories[i];
|
|
if (
|
|
existingCategoryItems.indexOf( item ) === -1 &&
|
|
item.match( pattern )
|
|
) {
|
|
if ( item === category.value ) {
|
|
exactMatch = true;
|
|
}
|
|
matchingCategoryItems.push( item );
|
|
}
|
|
}
|
|
// New category
|
|
if ( !exactMatch ) {
|
|
newCategoryItems.push( category.value );
|
|
}
|
|
|
|
// Add sections for non-empty groups
|
|
if ( newCategoryItems.length ) {
|
|
items.push( new ve.ui.MenuSectionItemWidget(
|
|
'newCategory', { '$$': menu$$, 'label': 'New category' }
|
|
) );
|
|
for ( i = 0, len = newCategoryItems.length; i < len; i++ ) {
|
|
item = newCategoryItems[i];
|
|
items.push( new ve.ui.MenuItemWidget( item, { '$$': menu$$, 'label': item } ) );
|
|
}
|
|
}
|
|
if ( existingCategoryItems.length ) {
|
|
items.push( new ve.ui.MenuSectionItemWidget(
|
|
'inArticle', { '$$': menu$$, 'label': 'Move this category here' }
|
|
) );
|
|
for ( i = 0, len = existingCategoryItems.length; i < len; i++ ) {
|
|
item = existingCategoryItems[i];
|
|
items.push( new ve.ui.MenuItemWidget( item, { '$$': menu$$, 'label': item } ) );
|
|
}
|
|
}
|
|
if ( matchingCategoryItems.length ) {
|
|
items.push( new ve.ui.MenuSectionItemWidget(
|
|
'matchingCategories', { '$$': menu$$, 'label': 'Matching categories' }
|
|
) );
|
|
for ( i = 0, len = matchingCategories.length; i < len; i++ ) {
|
|
item = matchingCategories[i];
|
|
items.push( new ve.ui.MenuItemWidget( item, { '$$': menu$$, 'label': item } ) );
|
|
}
|
|
}
|
|
|
|
return items;
|
|
};
|
|
|
|
/**
|
|
* Get a category item.
|
|
*
|
|
* @method
|
|
* @param {string} value Category name
|
|
* @returns {Object} Category item with name, value and metaItem properties
|
|
*/
|
|
ve.ui.MWCategoryInputWidget.prototype.getCategoryItemFromValue = function ( value ) {
|
|
var title;
|
|
|
|
// Normalize
|
|
try {
|
|
title = new mw.Title( this.categoryPrefix + value );
|
|
return {
|
|
'name': title.getPrefixedText(),
|
|
'value': title.getNameText(),
|
|
'metaItem': {}
|
|
};
|
|
} catch ( e ) { }
|
|
|
|
if ( this.forceCapitalization ) {
|
|
value = value.substr( 0, 1 ).toUpperCase() + value.substr( 1 );
|
|
}
|
|
|
|
return { 'name': this.categoryPrefix + value, 'value': value, 'metaItem': {} };
|
|
};
|