all files / src/src/tools/ PopupTool.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
1×
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
1×
 
 
 
 
/**
 * Popup tools open a popup window when they are selected from the {@link OO.ui.Toolbar toolbar}.
 * Each popup tool is configured with a static name, title, and icon, as well with as any popup
 * configurations. Unlike other tools, popup tools do not require that developers specify an
 * #onSelect or #onUpdateState method, as these methods have been implemented already.
 *
 *     // Example of a popup tool. When selected, a popup tool displays
 *     // a popup window.
 *     function HelpTool( toolGroup, config ) {
 *        OO.ui.PopupTool.call( this, toolGroup, $.extend( { popup: {
 *            padded: true,
 *            label: 'Help',
 *            head: true
 *        } }, config ) );
 *        this.popup.$body.append( '<p>I am helpful!</p>' );
 *     };
 *     OO.inheritClass( HelpTool, OO.ui.PopupTool );
 *     HelpTool.static.name = 'help';
 *     HelpTool.static.icon = 'help';
 *     HelpTool.static.title = 'Help';
 *     toolFactory.register( HelpTool );
 *
 * For an example of a toolbar that contains a popup tool, see {@link OO.ui.Toolbar toolbars}.
 * For more information about toolbars in general, please see the
 * [OOUI documentation on MediaWiki][1].
 *
 * [1]: https://www.mediawiki.org/wiki/OOUI/Toolbars
 *
 * @abstract
 * @class
 * @extends OO.ui.Tool
 * @mixes OO.ui.mixin.PopupElement
 *
 * @constructor
 * @param {OO.ui.ToolGroup} toolGroup
 * @param {Object} [config] Configuration options
 */
OO.ui.PopupTool = function OoUiPopupTool( toolGroup, config ) {
	// Allow passing positional parameters inside the config object
	if ( OO.isPlainObject( toolGroup ) && config === undefined ) {
		config = toolGroup;
		toolGroup = config.toolGroup;
	}
 
	// Parent constructor
	OO.ui.PopupTool.super.call( this, toolGroup, config );
 
	// Mixin constructors
	OO.ui.mixin.PopupElement.call( this, config );
 
	// Events
	this.popup.connect( this, {
		toggle: 'onPopupToggle'
	} );
 
	// Initialization
	this.popup.setAutoFlip( false );
	this.popup.setPosition( toolGroup.getToolbar().position === 'bottom' ? 'above' : 'below' );
	this.$element.addClass( 'oo-ui-popupTool' );
	this.popup.$element.addClass( 'oo-ui-popupTool-popup' );
	this.toolbar.$popups.append( this.popup.$element );
};
 
/* Setup */
 
OO.inheritClass( OO.ui.PopupTool, OO.ui.Tool );
OO.mixinClass( OO.ui.PopupTool, OO.ui.mixin.PopupElement );
 
/* Methods */
 
/**
 * Handle the tool being selected.
 *
 * @inheritdoc
 */
OO.ui.PopupTool.prototype.onSelect = function () {
	if ( !this.isDisabled() ) {
		this.popup.toggle();
	}
	return false;
};
 
/**
 * Handle the toolbar state being updated.
 *
 * @inheritdoc
 */
OO.ui.PopupTool.prototype.onUpdateState = function () {
};
 
/**
 * Handle popup visibility being toggled.
 *
 * @param {boolean} isVisible
 */
OO.ui.PopupTool.prototype.onPopupToggle = function ( isVisible ) {
	this.setActive( isVisible );
	this.toolGroup.emit( 'active', isVisible );
};