OOUI is supposed to be a library that allows to rapidly create front-end web applications that operate consistently across a multitude of browsers.
I'd like to create a toolbar consisting of multiple groups (here just: a-group
) and I am struggling filtering tools by their groups, or more precisely, filtering references to tool instances given their group name.
var toolFactory = new OO.ui.ToolFactory(),
toolGroupFactory = new OO.ui.ToolGroupFactory(),
toolbar = new OO.ui.Toolbar( toolFactory, toolGroupFactory, { actions: true } );
function doSthOnToolsByGroup( groupName ) {
// Get a string[] consisting of tool names
var tools = toolFactory.getTools( [ { group: groupName } ] );
tools.forEach( function( toolName ) {
// Now I'd like to get a reference to the
// tool, instead I am getting a static reference
// to the constructor
var tool = toolFactory.lookup( toolName );
// can't call 'setActive' on tool,
// although tool.prototype.setActive is defined
} );
}
function ATool() {
ATool.parent.apply( this, arguments );
}
OO.inheritClass( ATool, OO.ui.Tool );
$.extend( ATool.static, {
name: 'a-tool-name',
icon: 'some-icon',
title: 'the title',
group: 'a-group'
} );
ATool.prototype.onSelect = function () {
doSthOnToolsByGroup( 'a-group' );
};
toolFactory.register( ATool );
// The same for BTool, just BTool belonging to 'a-group'
// ...
toolbar.setup( ... );
// append toolbar to DOM
toolbar.initialize();
toolbar.emit( 'updateState' );
// and now click a toolbar button to trigger `doSthOnToolsByGroup`