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
|
/*!
* VisualEditor UserInterface MWFloatingHelpElement class.
*
* @copyright See AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Question-mark button which floats over content, currently used in the
* template dialog. Clicking pops up a help screen.
*
* @class
* @extends OO.ui.Element
*
* @constructor
* @param {Object} config
* @param {string} config.label
* @param {jQuery} config.$message
*/
ve.ui.MWFloatingHelpElement = function VeUiMWFloatingHelpElement( config ) {
// Parent constructor
ve.ui.MWFloatingHelpElement.super.call( this, config );
this.helpDialog = new ve.ui.MWFloatingHelpDialog( config );
this.helpButton = new OO.ui.ButtonWidget( {
icon: 'help',
label: config.label,
title: config.title,
invisibleLabel: true,
flags: 'progressive',
rel: 'help',
classes: [ 've-ui-mwFloatingHelpElement-toggle' ]
} ).connect(
this, { click: 'onClick' }
);
this.windowManager = new OO.ui.WindowManager();
this.windowManager.addWindows( [ this.helpDialog ] );
this.windowManager.$element.addClass( 've-ui-mwFloatingHelpElement-windowManager' );
if ( OO.ui.isMobile() ) {
$( OO.ui.getTeleportTarget() ).append( this.windowManager.$element );
} else {
this.$element.append( this.windowManager.$element );
}
this.$element
.addClass( 've-ui-mwFloatingHelpElement' )
.append( this.helpButton.$element );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWFloatingHelpElement, OO.ui.Element );
/* Methods */
ve.ui.MWFloatingHelpElement.prototype.onClick = function () {
if ( !this.helpButton.hasFlag( 'primary' ) ) {
const window = this.windowManager.openWindow( this.helpDialog );
window.opening.then( this.updateButton.bind( this, true ) );
window.closing.then( this.updateButton.bind( this, false ) );
} else {
this.windowManager.closeWindow( this.helpDialog );
}
};
ve.ui.MWFloatingHelpElement.prototype.updateButton = function ( isOpen ) {
this.helpButton
.setIcon( isOpen ? 'expand' : 'help' )
.setFlags( { primary: isOpen } );
};
|
