mediawiki-extensions-Visual.../modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js
Trevor Parscal 3a6e91dfb7 RTL Improvements
Objectives:

* Make option widget icons correctly placed in RTL
* Make embedded context toolbar correctly placed in RTL

Approach:

Use separate elements for icons within option widgets which have more
flexibility when rendering in either LTR or RTL when compared to CSS
background position. The simpler approach, using CSS background
position offsets, isn't cross-browser compatible at this time.

Changes:

ve.ui.OutlineItemWidget.js
* Remove custom icon implementation, using parent class implementation
  instead

ve.ui.OptionWidget.js
* Add icon option, which adds an icon element only if an icon was
  specified

ve.ui.MenuItemWidget.js, ve-mw/ve.ui.MWParameterResultWidget.js
* Add override for icon config option
* Document icon config as private

ve.ui.Context.js
* Add detection and special handling for positioning embedded context
  toolbar when rendering in RTL

ve.ui.Widget.css
* Add styles for option widget's new icon option
* Add styles to make indentation still work for outline item widgets
* Adjust styles for menu item widget as per changes in option widget

ve-mw/ve.ui.Widget.css
* Adjust styles for parameter result widget as per changes in option
  widget

Change-Id: Ibfa4b613e0fd7902f8a2c78b5717de402c5f82b8
2013-07-10 00:09:22 +00:00

93 lines
2 KiB
JavaScript

/*!
* VisualEditor UserInterface OutlineItemWidget class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.OutlineItemWidget object.
*
* @class
* @extends ve.ui.OptionWidget
*
* @constructor
* @param {Mixed} data Item data
* @param {Object} [config] Config options
* @cfg {number} [level] Indentation level
* @cfg {boolean} [moveable] Allow modification from outline controls
*/
ve.ui.OutlineItemWidget = function VeUiOutlineItemWidget( data, config ) {
// Config intialization
config = config || {};
// Parent constructor
ve.ui.OptionWidget.call( this, data, config );
// Properties
this.level = 0;
this.moveable = !!config.moveable;
// Initialization
this.$.addClass( 've-ui-outlineItemWidget' );
this.setLevel( config.level );
};
/* Inheritance */
ve.inheritClass( ve.ui.OutlineItemWidget, ve.ui.OptionWidget );
/* Static Properties */
ve.ui.OutlineItemWidget.static.highlightable = false;
ve.ui.OutlineItemWidget.static.levelClass = 've-ui-outlineItemWidget-level-';
ve.ui.OutlineItemWidget.static.levels = 3;
/* Methods */
/**
* Check if item is moveable.
*
* Moveablilty is used by outline controls.
*
* @returns {boolean} Item is moveable
*/
ve.ui.OutlineItemWidget.prototype.isMoveable = function () {
return this.moveable;
};
/**
* Get indentation level.
*
* @returns {number} Indentation level
*/
ve.ui.OutlineItemWidget.prototype.getLevel = function () {
return this.level;
};
/**
* Set indentation level.
*
* @method
* @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
* @chainable
*/
ve.ui.OutlineItemWidget.prototype.setLevel = function ( level ) {
var levels = this.constructor.static.levels,
levelClass = this.constructor.static.levelClass,
i = levels;
this.level = level ? Math.max( 0, Math.min( levels - 1, level ) ) : 0;
while ( i-- ) {
if ( this.level === i ) {
this.$.addClass( levelClass + i );
} else {
this.$.removeClass( levelClass + i );
}
}
return this;
};