mediawiki-extensions-Visual.../modules/ve/ui/ve.ui.Toolbar.js
Trevor Parscal 7233ea8f1b EventEmitter API cleanup
The EventEmitter API we inherited from Node.js and then bastardized was
getting awkward and cumbersome. The number of uses of ve.bind was getting
out of control, and removing events meant caching the bound method in a
property. Many of the "features" of EventEmitter wasn't even being used,
some causing overhead, others just causing bloat. This change cleans up
how EventEmitter is used throughout the codebase.

The new event emitter API includes:
* emit - identical to the previous API, no longer throws an error if you
  emit error without a handler
* once - identical to the previous API, still introduces a wrapper* on -
  compatible with the previous API but has some new features
* off - identical to removeListener in the previous API
* connect - very similar to addListenerMethods but doesn't wrap callbacks
  in closures anymore
* disconnect - new, basically the opposite of addListenerMethods

Another change that is made in this commit is mixing in rather than
inheriting from EventEmitter.

Finally, there are changes throughout the codebase anywhere
connect/disconnect could be used.

Change-Id: Ic3085d39172a8a719ce7f036690f673e59848d3a
2013-05-02 15:05:59 -07:00

123 lines
3 KiB
JavaScript

/*!
* VisualEditor UserInterface Toolbar class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* UserInterface toolbar.
*
* @class
* @mixins ve.EventEmitter
*
* @constructor
* @param {jQuery} $container
* @param {ve.Surface} surface
* @param {Array} config
*/
ve.ui.Toolbar = function VeUiToolbar( $container, surface, config ) {
// Mixin constructors
ve.EventEmitter.call( this );
// Properties
this.surface = surface;
this.$ = $container;
this.$groups = $( '<div>' );
this.config = config || {};
// Events
this.surface.getModel().connect( this, { 'contextChange': 'onContextChange' } );
// Initialization
this.$groups.addClass( 've-ui-toolbarGroups' );
this.$.prepend( this.$groups );
this.setup();
};
/* Inheritance */
ve.mixinClass( ve.ui.Toolbar, ve.EventEmitter );
/* Events */
/**
* @event updateState
* @see ve.dm.SurfaceFragment#getAnnotations
* @param {ve.dm.Node[]} nodes List of nodes covered by the current selection
* @param {ve.dm.AnnotationSet} full Annotations that cover all of the current selection
* @param {ve.dm.AnnotationSet} partial Annotations that cover some or all of the current selection
*/
/* Methods */
/**
* Gets the surface the toolbar controls.
*
* @method
* @returns {ve.Surface} Surface being controlled
*/
ve.ui.Toolbar.prototype.getSurface = function () {
return this.surface;
};
/**
* Handle context changes on the surface.
*
* @method
* @emits updateState
*/
ve.ui.Toolbar.prototype.onContextChange = function () {
var i, len, leafNodes,
fragment = this.surface.getModel().getFragment( null, false ),
nodes = [];
leafNodes = fragment.getLeafNodes();
for ( i = 0, len = leafNodes.length; i < len; i++ ) {
if ( len === 1 || !leafNodes[i].range || leafNodes[i].range.getLength() ) {
nodes.push( leafNodes[i].node );
}
}
this.emit( 'updateState', nodes, fragment.getAnnotations(), fragment.getAnnotations( true ) );
};
/**
* Initialize all tools and groups.
*
* @method
*/
ve.ui.Toolbar.prototype.setup = function () {
var i, j, group, $group, tool;
for ( i = 0; i < this.config.length; i++ ) {
group = this.config[i];
// Create group
$group = $( '<div class="ve-ui-toolbarGroup"></div>' )
.addClass( 've-ui-toolbarGroup-' + group.name );
if ( group.label ) {
$group.append( $( '<div class="ve-ui-toolbarLabel"></div>' ).html( group.label ) );
}
// Add tools
for ( j = 0; j < group.items.length; j++ ) {
tool = ve.ui.toolFactory.create( group.items[j], this );
if ( !tool ) {
throw new Error( 'Unknown tool: ' + group.items[j] );
}
$group.append( tool.$ );
}
// Append group
this.$groups.append( $group );
}
};
/**
* Destroys toolbar, removing event handlers and DOM elements.
*
* Call this whenever you are done using a toolbar.
*
* @method
*/
ve.ui.Toolbar.prototype.destroy = function () {
this.surface.getModel().disconnect( this, { 'contextChange': 'onContextChange' } );
this.$.remove();
};