mediawiki-extensions-Visual.../modules/ve/ui/elements/ve.ui.GroupElement.js
Trevor Parscal ac26f5fc69 Outline controls
Objectives:

* Allow reordering items in outline widgets using an outline control
  widget
* Use an outline control widget to reorder transclusion parts

Changes:

ve.ui.SelectWidget.js
* Emit add and remove events

ve.ui.OutlineItemWidget.js
* Add movable config options
* Add isMovable method

ve.ui.OutlineControlsWidget.js
* New class
* Displays move up/down buttons which are synchronized with an outline
  widget
* Doesn't actually move items (since an outline widget is probably
  data-driven) just emits events

ve.ui.Widget.css
* Add disabled style for icon button widgets
* Add styles for outline controls widget

ve.ui.Icons*.css
* Add missing icon styles

ve.ui.Dialog.css
* Add styles for outline and controls in editable paged dialogs

ve.ui.GroupElement.js
* Fix bug where items are insertions are in the wrong place when "moving"
  them

ve.ui.PagedDialog.js
* Add editable config option which shows outline controls under the
  outline
* Pass through movable config option when creating pages

ve.ui.MWTranclusionDialog.js
* Configure paged dialog outline as editable
* Add initialize method to connect outline controls widget events
* Make addPart method automatically add parameters when templates are
  added
* Add handler for outline controls move event which re-orders parts
* Make parts movable (params are automatically ordered, so they aren't
  movable)

ve.dm.MWTransclusionModel.js
* Add addPart method and use it within the addContent and addTemplate
  methods
* Fix documentation lies
* Add getPartFromId method

*.php
* Add links to new files and messages

Change-Id: I919d4c3e9b85d07a97a99c0b2e8739a859bdf2b1
2013-06-14 11:56:30 -07:00

119 lines
2.5 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.Element[]} Items
*/
ve.ui.GroupElement.prototype.getItems = function () {
return this.items.slice( 0 );
};
/**
* Add items.
*
* @method
* @param {ve.Element[]} items Item
* @param {number} [index] Index to insert items after
* @chainable
*/
ve.ui.GroupElement.prototype.addItems = function ( items, index ) {
var i, len, item, currentIndex,
$items = $( [] );
for ( i = 0, len = items.length; i < len; i++ ) {
item = items[i];
// Check if item exists then remove it first, effectively "moving" it
currentIndex = this.items.indexOf( item );
if ( currentIndex >= 0 ) {
this.removeItems( [ item ] );
// Adjust index to compensate for removal
if ( currentIndex < index ) {
index--;
}
}
// 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.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;
};