Convert more functions to arrow callbacks

Change-Id: I983e2c774fe8cdfebbb8de28adbb00b744dc11d8
This commit is contained in:
Ed Sanders 2024-11-15 12:11:02 +00:00
parent c56593d4c6
commit f922f8e861
3 changed files with 72 additions and 61 deletions

View file

@ -12,10 +12,10 @@ const toolbarModule = require( './jquery.wikiEditor.toolbar.js' ),
insertLinkLinkTypeField = new LinkTypeField(),
configData = require( './data.json' );
function triggerButtonClick( element ) {
function triggerButtonClick( $element ) {
// The dialog action should always be a DOMElement.
const dialogAction = $( element ).data( 'dialogaction' );
const $button = dialogAction ? $( dialogAction ) : $( element ).find( 'button' ).first();
const dialogAction = $element.data( 'dialogaction' );
const $button = dialogAction ? $( dialogAction ) : $element.find( 'button' ).first();
// Since we're reading from data attribute, make sure we got an element before clicking.
// Note when closing a dialog this can be false leading to TypeError: $button.trigger is not a function
// (T261529)
@ -326,17 +326,18 @@ module.exports = {
$( this ).data( 'dialogkeypressset', true );
// Execute the action associated with the first button
// when the user presses Enter
$( this ).closest( '.ui-dialog' ).on( 'keypress', function ( e ) {
const $dialog = $( this ).closest( '.ui-dialog' );
$dialog.on( 'keypress', ( e ) => {
if ( ( e.keyCode || e.which ) === 13 ) {
triggerButtonClick( this );
triggerButtonClick( $dialog );
e.preventDefault();
}
} );
// Make tabbing to a button and pressing
// Enter do what people expect
$( this ).closest( '.ui-dialog' ).find( 'button' ).on( 'focus', function () {
$( this ).closest( '.ui-dialog' ).data( 'dialogaction', this );
$dialog.find( 'button' ).on( 'focus', ( e ) => {
$dialog.data( 'dialogaction', e.delegateTarget );
} );
}
}
@ -370,10 +371,11 @@ module.exports = {
const altHelpText = mw.msg( 'wikieditor-toolbar-file-alt-help' );
const altHelpLabel = mw.msg( 'wikieditor-toolbar-file-alt-help-label' );
// Expandable help message for 'alt text' field
$( this ).find( '.wikieditor-toolbar-file-alt-help' ).text( altHelpLabel );
$( '.wikieditor-toolbar-file-alt-help' ).on( 'click', function () {
$( this ).text( ( i, text ) => text === altHelpLabel ? altHelpText : altHelpLabel );
} );
const $altHelp = $( this ).find( '.wikieditor-toolbar-file-alt-help' )
.text( altHelpLabel )
.on( 'click', () => {
$altHelp.text( ( i, text ) => text === altHelpLabel ? altHelpText : altHelpLabel );
} );
// Preload modules of file upload dialog.
mw.loader.load( [
@ -571,17 +573,18 @@ module.exports = {
$( this ).data( 'dialogkeypressset', true );
// Execute the action associated with the first button
// when the user presses Enter
$( this ).closest( '.ui-dialog' ).on( 'keypress', function ( e ) {
const $dialog = $( this ).closest( '.ui-dialog' );
$dialog.on( 'keypress', ( e ) => {
if ( e.which === 13 ) {
triggerButtonClick( this );
triggerButtonClick( $dialog );
e.preventDefault();
}
} );
// Make tabbing to a button and pressing
// Enter do what people expect
$( this ).closest( '.ui-dialog' ).find( 'button' ).on( 'focus', function () {
$( this ).closest( '.ui-dialog' ).data( 'dialogaction', this );
$dialog.find( 'button' ).on( 'focus', ( e ) => {
$dialog.data( 'dialogaction', e.delegateTarget );
} );
}
}
@ -736,17 +739,18 @@ module.exports = {
$( this ).data( 'dialogkeypressset', true );
// Execute the action associated with the first button
// when the user presses Enter
$( this ).closest( '.ui-dialog' ).on( 'keypress', function ( e ) {
const $dialog = $( this ).closest( '.ui-dialog' );
$dialog.on( 'keypress', ( e ) => {
if ( ( e.keyCode || e.which ) === 13 ) {
triggerButtonClick( this );
triggerButtonClick( $dialog );
e.preventDefault();
}
} );
// Make tabbing to a button and pressing
// Enter do what people expect
$( this ).closest( '.ui-dialog' ).find( 'button' ).on( 'focus', function () {
$( this ).closest( '.ui-dialog' ).data( 'dialogaction', this );
$dialog.find( 'button' ).on( 'focus', ( e ) => {
$dialog.data( 'dialogaction', e.delegateTarget );
} );
}
}
@ -763,7 +767,7 @@ module.exports = {
} );
// TODO: Find a cleaner way to share this function
$( this ).data( 'replaceCallback', function ( mode ) {
$( this ).data( 'replaceCallback', ( mode ) => {
$( '#wikieditor-toolbar-replace-nomatch, #wikieditor-toolbar-replace-success, #wikieditor-toolbar-replace-emptysearch, #wikieditor-toolbar-replace-invalidregex' ).hide();
// Search string cannot be empty
@ -910,31 +914,32 @@ module.exports = {
let that = this;
$( this ).data( { offset: 0, matchIndex: 0 } );
const $dialog = $( this ).closest( '.ui-dialog' );
$( '#wikieditor-toolbar-replace-search' ).trigger( 'focus' );
$( '#wikieditor-toolbar-replace-nomatch, #wikieditor-toolbar-replace-success, #wikieditor-toolbar-replace-emptysearch, #wikieditor-toolbar-replace-invalidregex' ).hide();
if ( !( $( this ).data( 'onetimeonlystuff' ) ) ) {
$( this ).data( 'onetimeonlystuff', true );
// Execute the action associated with the first button
// when the user presses Enter
$( this ).closest( '.ui-dialog' ).on( 'keypress', function ( e ) {
$dialog.on( 'keypress', ( e ) => {
if ( ( e.keyCode || e.which ) === 13 ) {
triggerButtonClick( this );
triggerButtonClick( $dialog );
e.preventDefault();
}
} );
// Make tabbing to a button and pressing
// Enter do what people expect
$( this ).closest( '.ui-dialog' ).find( 'button' ).on( 'focus', function () {
$( this ).closest( '.ui-dialog' ).data( 'dialogaction', this );
$dialog.find( 'button' ).on( 'focus', ( e ) => {
$dialog.data( 'dialogaction', e.delegateTarget );
} );
}
const $dialog = $( this ).closest( '.ui-dialog' );
that = this;
$( this ).data( 'context' ).$textarea
const $textarea = $( this ).data( 'context' ).$textarea;
$textarea
.on( 'keypress.srdialog', ( e ) => {
if ( e.which === 13 ) {
// Enter
triggerButtonClick( $dialog );
triggerButtonClick( $textarea );
e.preventDefault();
} else if ( e.which === 27 ) {
// Escape

View file

@ -417,6 +417,7 @@ $.fn.wikiEditor = function () {
// Ensure that buttons and tabs are visible
context.$controls.show();
context.$tabs.show();
// Return the newly appended tab
return $( '<div>' )
.attr( 'rel', 'wikiEditor-ui-view-' + opts.name )
@ -425,16 +426,16 @@ $.fn.wikiEditor = function () {
.attr( 'tabindex', 0 )
// No dragging!
.on( 'mousedown', () => false )
.on( 'click keydown', function ( event ) {
.on( 'click keydown', ( event ) => {
if (
event.type === 'click' ||
event.type === 'keydown' && event.key === 'Enter'
) {
context.$ui.find( '.wikiEditor-ui-view' ).hide();
context.$ui.find( '.' + $( this ).parent().attr( 'rel' ) ).show();
context.$ui.find( '.' + $( event.target ).parent().attr( 'rel' ) ).show();
context.$tabs.find( 'div' ).removeClass( 'current' );
$( this ).parent().addClass( 'current' );
$( this ).trigger( 'blur' );
$( event.target ).parent().addClass( 'current' );
$( event.target ).trigger( 'blur' );
if ( 'init' in opts && typeof opts.init === 'function' ) {
opts.init( context );
}

View file

@ -121,9 +121,10 @@ const toolbarModule = {
e.preventDefault();
return false;
} )
.on( 'click', function ( e ) {
toolbarModule.fn.doAction( $( this ).parent().data( 'context' ),
$( this ).parent().data( 'actions' )[ $( this ).attr( 'rel' ) ] );
.on( 'click', ( e ) => {
const $character = $( e.target );
toolbarModule.fn.doAction( $character.parent().data( 'context' ),
$character.parent().data( 'actions' )[ $character.attr( 'rel' ) ] );
e.preventDefault();
return false;
} )
@ -389,16 +390,17 @@ const toolbarModule = {
e.preventDefault();
return false;
} )
.on( 'click keydown', function ( e ) {
.on( 'click keydown', ( e ) => {
if (
e.type === 'click' ||
e.type === 'keydown' && e.key === 'Enter'
) {
const $link = $( e.target );
toolbarModule.fn.doAction(
$( this ).data( 'context' ), $( this ).data( 'action' ), $( this )
$link.data( 'context' ), $link.data( 'action' ), $link
);
// Hide the dropdown
$( this ).closest( '.tool-select' ).removeClass( 'options-shown' );
$link.closest( '.tool-select' ).removeClass( 'options-shown' );
e.preventDefault();
return false;
}
@ -419,16 +421,17 @@ const toolbarModule = {
e.preventDefault();
return false;
} )
.on( 'click keydown', function ( e ) {
.on( 'click keydown', ( e ) => {
if (
e.type === 'click' ||
e.type === 'keydown' && e.key === 'Enter'
) {
const $opts = $( this ).data( 'options' );
const $link = $( e.target );
const $opts = $link.data( 'options' );
// eslint-disable-next-line no-jquery/no-class-state
const canShowOptions = !$opts.closest( '.tool-select' ).hasClass( 'options-shown' );
$opts.closest( '.tool-select' ).toggleClass( 'options-shown', canShowOptions );
$( this ).attr( 'aria-expanded', canShowOptions.toString() );
$link.attr( 'aria-expanded', canShowOptions.toString() );
e.preventDefault();
return false;
}
@ -457,7 +460,8 @@ const toolbarModule = {
},
buildBookmark: function ( context, id, page ) {
const label = $.wikiEditor.autoMsg( page, 'label' );
return $( '<div>' )
const $bookmark = $( '<div>' );
return $bookmark
.text( label )
.attr( {
rel: id,
@ -469,16 +473,16 @@ const toolbarModule = {
e.preventDefault();
return false;
} )
.on( 'click', function ( event ) {
$( this ).parent().parent().find( '.page' ).hide();
$( this ).parent().parent().find( '.page-' + $( this ).attr( 'rel' ) ).show().trigger( 'loadPage' );
$( this )
.on( 'click', ( event ) => {
$bookmark.parent().parent().find( '.page' ).hide();
$bookmark.parent().parent().find( '.page-' + $bookmark.attr( 'rel' ) ).show().trigger( 'loadPage' );
$bookmark
.addClass( 'current' )
.siblings().removeClass( 'current' );
const section = $( this ).parent().parent().attr( 'rel' );
const section = $bookmark.parent().parent().attr( 'rel' );
$.cookie(
'wikiEditor-' + $( this ).data( 'context' ).instance + '-booklet-' + section + '-page',
$( this ).attr( 'rel' ),
'wikiEditor-' + $bookmark.data( 'context' ).instance + '-booklet-' + section + '-page',
$bookmark.attr( 'rel' ),
{ expires: 30, path: '/' }
);
// No dragging!
@ -545,11 +549,12 @@ const toolbarModule = {
e.preventDefault();
return false;
} )
.on( 'click', function ( e ) {
.on( 'click', ( e ) => {
const $character = $( e.target );
toolbarModule.fn.doAction(
$( this ).parent().data( 'context' ),
$( this ).parent().data( 'actions' )[ $( this ).attr( 'rel' ) ],
$( this )
$character.parent().data( 'context' ),
$character.parent().data( 'actions' )[ $character.attr( 'rel' ) ],
$character
);
e.preventDefault();
return false;
@ -635,15 +640,15 @@ const toolbarModule = {
} )
.text( $.wikiEditor.autoMsg( section, 'label' ) )
.data( 'context', context )
.on( 'mouseup', function () {
$( this ).trigger( 'blur' );
.on( 'mouseup', () => {
$link.trigger( 'blur' );
} )
.on( 'mousedown', ( e ) => {
// No dragging!
e.preventDefault();
return false;
} )
.on( 'click keydown', function ( e ) {
.on( 'click keydown', ( e ) => {
if (
e.type !== 'click' &&
( e.type !== 'keydown' || e.key !== 'Enter' )
@ -652,21 +657,21 @@ const toolbarModule = {
}
// We have to set aria-pressed over here, as NVDA wont recognize it
// if we do it in the below .each as it seems
$( this ).attr( 'aria-pressed', 'true' );
$link.attr( 'aria-pressed', 'true' );
$( '.tab > a' ).each( ( i, elem ) => {
if ( elem !== e.target ) {
$( elem ).attr( 'aria-pressed', 'false' );
}
} );
const $sections = $( this ).data( 'context' ).$ui.find( '.sections' );
const $section = $sections.find( '.section-' + $( this ).parent().attr( 'rel' ) );
const $sections = $link.data( 'context' ).$ui.find( '.sections' );
const $section = $sections.find( '.section-' + $link.parent().attr( 'rel' ) );
// eslint-disable-next-line no-jquery/no-class-state
const show = !$section.hasClass( 'section-visible' );
$sections.find( '.section-visible' )
.removeClass( 'section-visible' )
.addClass( 'section-hidden' );
$( this )
$link
.attr( 'aria-expanded', 'false' )
.parent().parent().find( 'a' ).removeClass( 'current' );
if ( show ) {
@ -675,13 +680,13 @@ const toolbarModule = {
.attr( 'aria-expanded', 'true' )
.addClass( 'section-visible' );
$( this ).attr( 'aria-expanded', 'true' )
$link.attr( 'aria-expanded', 'true' )
.addClass( 'current' );
}
// Save the currently visible section
$.cookie(
'wikiEditor-' + $( this ).data( 'context' ).instance + '-toolbar-section',
'wikiEditor-' + $link.data( 'context' ).instance + '-toolbar-section',
show ? $section.attr( 'rel' ) : null,
{ expires: 30, path: '/' }
);