mediawiki-extensions-Visual.../modules/ve/ui/elements/ve.ui.GroupElement.js
Trevor Parscal e888d7b985 Category UI improvements
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
2013-05-10 00:19:46 +00:00

114 lines
2.3 KiB
JavaScript

/*!
* VisualEditor UserInterface GroupElement class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Group element.
*
* @class
* @abstract
*
* @constructor
* @param {jQuery} $group Group element
*/
ve.ui.GroupElement = function VeUiGroupElement( $group ) {
// Properties
this.$group = $group;
this.items = [];
this.$items = this.$$( [] );
};
/* Methods */
/**
* Get items.
*
* @method
* @returns {ve.ui.Element[]} Items
*/
ve.ui.GroupElement.prototype.getItems = function () {
return this.items.slice( 0 );
};
/**
* Add items.
*
* @method
* @param {ve.ui.Element[]} items Item
* @param {number} [index] Index to insert items after
* @chainable
*/
ve.ui.GroupElement.prototype.addItems = function ( items, index ) {
var i, len, item,
$items = $( [] );
for ( i = 0, len = items.length; i < len; i++ ) {
item = items[i];
// Check if item exists then remove it first, effectively "moving" it
if ( this.items.indexOf( item ) !== -1 ) {
this.removeItems( [ item ] );
}
// Add the item
$items = $items.add( item.$ );
}
if ( index === undefined || index < 0 || index >= this.items.length ) {
this.$group.append( $items );
this.items.push.apply( this.items, items );
} else if ( index === 0 ) {
this.$group.prepend( $items );
this.items.unshift.apply( this.items, items );
} else {
this.$items.eq( index ).before( $items );
this.items.splice.apply( this.items, [ index, 0 ].concat( items ) );
}
this.$items = this.$items.add( $items );
return this;
};
/**
* Remove items.
*
* Items will be detached, not removed, so they can be used later.
*
* @method
* @param {ve.ui.Element[]} items Items to remove
* @chainable
*/
ve.ui.GroupElement.prototype.removeItems = function ( items ) {
var i, len, item, index;
// Remove specific items
for ( i = 0, len = items.length; i < len; i++ ) {
item = items[i];
index = this.items.indexOf( item );
if ( index !== -1 ) {
this.items.splice( index, 1 );
item.$.detach();
this.$items = this.$items.not( item.$ );
}
}
return this;
};
/**
* Clear all items.
*
* Items will be detached, not removed, so they can be used later.
*
* @method
* @chainable
*/
ve.ui.GroupElement.prototype.clearItems = function () {
this.items = [];
this.$items.detach();
return this;
};