mediawiki-extensions-Revisi.../modules/ext.RevisionSlider.HelpButtonView.js
libraryupgrader f5de8ee108 build: Updating npm dependencies
* eslint-config-wikimedia: 0.27.0 → 0.28.0
  The following rules are failing and were disabled:
  * modules:
    * no-mixed-spaces-and-tabs
    * no-jquery/no-extend
    * implicit-arrow-linebreak
  * tests/qunit:
    * no-jquery/no-extend

* grunt-stylelint: 0.19.0 → 0.20.0
* stylelint-config-wikimedia: 0.16.1 → 0.17.1

Change-Id: I3fd3c4a2cbb03d3aa4c8efb658e33d14d24cd518
2024-06-08 12:04:26 +00:00

50 lines
1.2 KiB
JavaScript

/**
* @class HelpButtonView
* Module containing presentation logic for the helper button
*/
const HelpButtonView = {
/**
* Renders the help button and renders and adds the popup for it.
*
* @return {jQuery} the help button object
*/
render: function () {
const helpButton = new OO.ui.ButtonWidget( {
icon: 'helpNotice',
framed: false,
classes: [ 'mw-revslider-show-help' ]
} );
const helpPopup = new OO.ui.PopupWidget( {
$content: $( '<p>' ).text( mw.msg( 'revisionslider-show-help-tooltip' ) ),
$floatableContainer: helpButton.$element,
width: 200,
classes: [ 'mw-revslider-tooltip', 'mw-revslider-help-tooltip' ]
} );
helpButton.connect( this, {
click: 'showDialog'
} );
helpButton.$element
.on( 'mouseover', () => {
helpPopup.toggle( true );
} )
.on( 'mouseout', () => {
helpPopup.toggle( false );
} )
.children().attr( {
'aria-haspopup': 'true',
'aria-label': mw.msg( 'revisionslider-show-help-tooltip' )
} );
$( document.body ).append( helpPopup.$element );
return helpButton.$element;
},
showDialog: function () {
require( './ext.RevisionSlider.HelpDialog.js' ).show();
}
};
module.exports = HelpButtonView;