mediawiki-extensions-Visual.../modules/ve-mw/ui/elements/ve.ui.MWFloatingHelpElement.js
Andrew Kostka 8da9661e11 Add a title to the templates help button
Bug: T299499
Change-Id: Ibb4aca479674668d6c14b8ace037433fa305dc35
2022-01-21 11:11:46 +01:00

76 lines
1.9 KiB
JavaScript

/*!
* VisualEditor UserInterface MWFloatingHelpElement class.
*
* @copyright 2011-2021 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* @class
* @extends OO.ui.Element
*
* @constructor
* @param {Object} config
* @cfg {string} label
* @cfg {jQuery} $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() ) {
$( document.body ).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' ) ) {
var window = this.windowManager.openWindow( this.helpDialog ),
element = this;
window.opening.then( function () {
element.updateButton( true );
} );
window.closing.then( function () {
element.updateButton( false );
} );
} else {
this.windowManager.closeWindow( this.helpDialog );
}
};
ve.ui.MWFloatingHelpElement.prototype.updateButton = function ( isOpen ) {
this.helpButton
.setIcon( isOpen ? 'expand' : 'help' )
.setFlags( { primary: isOpen } );
};