mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-28 04:36:49 +00:00
6ec34a3dee
Objectives: * Use widgets to render toolbar actions * Remove labels next to help notices and edit notices buttons * Add a close button to the help notices and edit notices Overview: * ve.ui.ButtonWidget is now abstract, use ve.ui.PushButtonWidget instead * ve.ui.IconButtonWidget now inherits from ve.ui.ButtonWidget * ve.ui.PopupWidget's display method no longer takes x and y arguments * Fixup naming issues in MWCategoryPopupWidget * Fixup naming issues with some ve-init-mw CSS classes * Rename ve-mw/ui/styles/ve.ui.Widget.css to ve.ui.MWWidget.css * Change uses of "callout" to "tail" * Add hyperlink functionality to buttons * Make buttons accessible through focusing, but make unfocusable by clicking * Add head option to popup for rendering a title and close button Bug: 52386 Change-Id: Iea2c8df1be64d40f9c039873d89ee540cc56e687
135 lines
3 KiB
JavaScript
135 lines
3 KiB
JavaScript
/*!
|
|
* VisualEditor UserInterface ButtonWidget class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* Creates an ve.ui.ButtonWidget object.
|
|
*
|
|
* @class
|
|
* @abstract
|
|
* @extends ve.ui.Widget
|
|
* @mixins ve.ui.FlaggableElement
|
|
* @mixins ve.ui.LabeledElement
|
|
*
|
|
* @constructor
|
|
* @param {Object} [config] Configuration options
|
|
* @cfg {number} [tabIndex] Button's tab index
|
|
* @cfg {string} [title=''] Title text
|
|
* @cfg {string} [href] Hyperlink to visit when clicked
|
|
* @cfg {string} [target] Target to open hyperlink in
|
|
*/
|
|
ve.ui.ButtonWidget = function VeUiButtonWidget( config ) {
|
|
// Configuration initialization
|
|
config = ve.extendObject( { 'target': '_blank' }, config );
|
|
|
|
// Parent constructor
|
|
ve.ui.Widget.call( this, config );
|
|
|
|
// Mixin constructors
|
|
ve.ui.FlaggableElement.call( this, config );
|
|
ve.ui.LabeledElement.call( this, this.$$( '<span>' ), config );
|
|
|
|
// Properties
|
|
this.$button = this.$$( '<a>' );
|
|
this.isHyperlink = typeof config.href === 'string';
|
|
this.tabIndex = null;
|
|
|
|
// Events
|
|
this.$button.on( {
|
|
'mousedown': ve.bind( this.onMouseDown, this ),
|
|
'mouseup': ve.bind( this.onMouseUp, this ),
|
|
'click': ve.bind( this.onClick, this ),
|
|
'keypress': ve.bind( this.onKeyPress, this )
|
|
} );
|
|
|
|
// Initialization
|
|
this.$button
|
|
.addClass( 've-ui-buttonWidget-button' )
|
|
.append( this.$label )
|
|
.attr( {
|
|
'role': 'button',
|
|
'tabIndex': config.tabIndex || 0,
|
|
'title': config.title,
|
|
'href': config.href,
|
|
'target': config.target
|
|
} );
|
|
this.$
|
|
.addClass( 've-ui-buttonWidget' )
|
|
.append( this.$button );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
ve.inheritClass( ve.ui.ButtonWidget, ve.ui.Widget );
|
|
|
|
ve.mixinClass( ve.ui.ButtonWidget, ve.ui.FlaggableElement );
|
|
ve.mixinClass( ve.ui.ButtonWidget, ve.ui.LabeledElement );
|
|
|
|
/* Events */
|
|
|
|
/**
|
|
* @event click
|
|
*/
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Handles mouse down events.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Mouse down event
|
|
*/
|
|
ve.ui.ButtonWidget.prototype.onMouseDown = function () {
|
|
this.tabIndex = this.$button.attr( 'tabIndex' );
|
|
// Remove the tab-index while the button is down to prevent the button from stealing focus
|
|
this.$button.removeAttr( 'tabIndex' );
|
|
};
|
|
|
|
/**
|
|
* Handles mouse up events.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Mouse up event
|
|
*/
|
|
ve.ui.ButtonWidget.prototype.onMouseUp = function () {
|
|
// Restore the tab-index after the button is up to restore the button's accesssibility
|
|
this.$button.attr( 'tabIndex', this.tabIndex );
|
|
};
|
|
|
|
/**
|
|
* Handles mouse click events.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Mouse click event
|
|
* @emits click
|
|
*/
|
|
ve.ui.ButtonWidget.prototype.onClick = function () {
|
|
if ( !this.disabled ) {
|
|
this.emit( 'click' );
|
|
if ( this.isHyperlink ) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Handles keypress events.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Keypress event
|
|
* @emits click
|
|
*/
|
|
ve.ui.ButtonWidget.prototype.onKeyPress = function ( e ) {
|
|
if ( !this.disabled && e.which === ve.Keys.SPACE ) {
|
|
if ( this.isHyperlink ) {
|
|
this.onClick();
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|