mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-29 00:30:44 +00:00
db9f941fa6
Objectives: * Rename this.$ to this.$element * Rename this.$$ to this.$ * Get rid of the need to use this.frame.$$ * Rename OO.ui.Element.get$$ to OO.ui.Element.getJQuery Changes: (using Sublime Text regex patterns) * Replace "get$$" with "getJQuery" * Replace "\.(\$)([^\$a-zA-Z])" with ".$element$2" * Replace "\.(\$\$)" with ".$" * Replace "'$$'" with "'$'" * Set this.$ to null in constructor of OO.ui.Window * Set this.$ to this.frame.$ in initialize method of OO.ui.Window * Replace "\.(frame.\$)([^\$a-zA-Z])" with ".\$$2" Bonus: * Use this.$() in a bunch of places where $() was erroneously used Change-Id: If3d870124ab8d10f8223532cda95c2b2b075db94
185 lines
4.2 KiB
JavaScript
185 lines
4.2 KiB
JavaScript
/*!
|
|
* ObjectOriented UserInterface OptionWidget class.
|
|
*
|
|
* @copyright 2011-2013 OOJS Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* Creates an OO.ui.OptionWidget object.
|
|
*
|
|
* @class
|
|
* @abstract
|
|
* @extends OO.ui.Widget
|
|
* @mixins OO.ui.LabeledElement
|
|
*
|
|
* @constructor
|
|
* @param {Mixed} data Option data
|
|
* @param {Object} [config] Configuration options
|
|
* @cfg {jQuery|string} [label] Option label
|
|
* @cfg {string} [icon] Symbolic name of icon
|
|
* @cfg {boolean} [selected=false] Select option
|
|
* @cfg {boolean} [highlighted=false] Highlight option
|
|
* @cfg {string} [rel] Value for `rel` attribute in DOM, allowing per-option styling
|
|
*/
|
|
OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
|
|
// Config intialization
|
|
config = config || {};
|
|
|
|
// Parent constructor
|
|
OO.ui.Widget.call( this, config );
|
|
|
|
// Mixin constructors
|
|
OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
|
|
|
|
// Properties
|
|
this.data = data;
|
|
this.selected = false;
|
|
this.highlighted = false;
|
|
|
|
// Initialization
|
|
this.$element
|
|
.data( 'oo-ui-optionWidget', this )
|
|
.attr( 'rel', config.rel )
|
|
.addClass( 'oo-ui-optionWidget' )
|
|
.append( this.$label );
|
|
this.setSelected( config.selected );
|
|
this.setHighlighted( config.highlighted );
|
|
|
|
// Options
|
|
if ( config.icon ) {
|
|
this.$icon = this.$( '<div>' )
|
|
.addClass( 'oo-ui-optionWidget-icon oo-ui-icon-' + config.icon )
|
|
.appendTo( this.$element );
|
|
}
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget );
|
|
|
|
OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement );
|
|
|
|
/* Static Properties */
|
|
|
|
OO.ui.OptionWidget.static.tagName = 'li';
|
|
|
|
OO.ui.OptionWidget.static.selectable = true;
|
|
|
|
OO.ui.OptionWidget.static.highlightable = true;
|
|
|
|
OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false;
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Check if option can be selected.
|
|
*
|
|
* @method
|
|
* @returns {boolean} Item is selectable
|
|
*/
|
|
OO.ui.OptionWidget.prototype.isSelectable = function () {
|
|
return this.constructor.static.selectable && !this.disabled;
|
|
};
|
|
|
|
/**
|
|
* Check if option can be highlighted.
|
|
*
|
|
* @method
|
|
* @returns {boolean} Item is highlightable
|
|
*/
|
|
OO.ui.OptionWidget.prototype.isHighlightable = function () {
|
|
return this.constructor.static.highlightable && !this.disabled;
|
|
};
|
|
|
|
/**
|
|
* Check if option is selected.
|
|
*
|
|
* @method
|
|
* @returns {boolean} Item is selected
|
|
*/
|
|
OO.ui.OptionWidget.prototype.isSelected = function () {
|
|
return this.selected;
|
|
};
|
|
|
|
/**
|
|
* Check if option is highlighted.
|
|
*
|
|
* @method
|
|
* @returns {boolean} Item is highlighted
|
|
*/
|
|
OO.ui.OptionWidget.prototype.isHighlighted = function () {
|
|
return this.highlighted;
|
|
};
|
|
|
|
/**
|
|
* Set selected state.
|
|
*
|
|
* @method
|
|
* @param {boolean} [state=false] Select option
|
|
* @chainable
|
|
*/
|
|
OO.ui.OptionWidget.prototype.setSelected = function ( state ) {
|
|
if ( !this.disabled && this.constructor.static.selectable ) {
|
|
this.selected = !!state;
|
|
if ( this.selected ) {
|
|
this.$element.addClass( 'oo-ui-optionWidget-selected' );
|
|
if ( this.constructor.static.scrollIntoViewOnSelect ) {
|
|
this.scrollElementIntoView();
|
|
}
|
|
} else {
|
|
this.$element.removeClass( 'oo-ui-optionWidget-selected' );
|
|
}
|
|
}
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Set highlighted state.
|
|
*
|
|
* @method
|
|
* @param {boolean} [state=false] Highlight option
|
|
* @chainable
|
|
*/
|
|
OO.ui.OptionWidget.prototype.setHighlighted = function ( state ) {
|
|
if ( !this.disabled && this.constructor.static.highlightable ) {
|
|
this.highlighted = !!state;
|
|
if ( this.highlighted ) {
|
|
this.$element.addClass( 'oo-ui-optionWidget-highlighted' );
|
|
} else {
|
|
this.$element.removeClass( 'oo-ui-optionWidget-highlighted' );
|
|
}
|
|
}
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Make the option's highlight flash.
|
|
*
|
|
* @method
|
|
* @param {Function} [done] Callback to execute when flash effect is complete.
|
|
*/
|
|
OO.ui.OptionWidget.prototype.flash = function ( done ) {
|
|
var $this = this.$element;
|
|
|
|
if ( !this.disabled && this.constructor.static.highlightable ) {
|
|
$this.removeClass( 'oo-ui-optionWidget-highlighted' );
|
|
setTimeout( OO.ui.bind( function () {
|
|
$this.addClass( 'oo-ui-optionWidget-highlighted' );
|
|
if ( done ) {
|
|
setTimeout( done, 100 );
|
|
}
|
|
}, this ), 100 );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get option data.
|
|
*
|
|
* @method
|
|
* @returns {Mixed} Option data
|
|
*/
|
|
OO.ui.OptionWidget.prototype.getData = function () {
|
|
return this.data;
|
|
};
|