mw.special.apisandbox: Use a real button to insert values in multi fields

Stuffing an indicator inside a normal widget is weird.

Also, always add it, even when we also handle Enter presses on the input.

Change-Id: I7191b4f31bfe4b42a524c786994150f318fd8cd9
This commit is contained in:
Bartosz Dziewoński 2017-03-09 17:06:08 +01:00
parent 60cc82da01
commit 258f2114ec
5 changed files with 36 additions and 37 deletions

View file

@ -2080,6 +2080,7 @@
"apisandbox-dynamic-error-exists": "A parameter named \"$1\" already exists.",
"apisandbox-deprecated-parameters": "Deprecated parameters",
"apisandbox-fetch-token": "Auto-fill the token",
"apisandbox-add-multi": "Add",
"apisandbox-submit-invalid-fields-title": "Some fields are invalid",
"apisandbox-submit-invalid-fields-message": "Please correct the marked fields and try again.",
"apisandbox-results": "Results",

View file

@ -2277,6 +2277,7 @@
"apisandbox-dynamic-error-exists": "Displayed as an error message from JavaScript when trying to add a new arbitrary parameter with a name that already exists. Parameters:\n* $1 - Parameter name that failed.",
"apisandbox-deprecated-parameters": "JavaScript button label and fieldset legend for separating deprecated parameters in the UI.",
"apisandbox-fetch-token": "Label for the button that fetches a CSRF token.",
"apisandbox-add-multi": "Label for the button to add another value to a field that accepts multiple values",
"apisandbox-submit-invalid-fields-title": "Title for a JavaScript error message when fields are invalid.",
"apisandbox-submit-invalid-fields-message": "Content for a JavaScript error message when fields are invalid.",
"apisandbox-results": "JavaScript tab label for the tab displaying the API query results.\n{{Identical|Result}}",

View file

@ -2015,6 +2015,7 @@ return [
'apisandbox-loading',
'apisandbox-load-error',
'apisandbox-fetch-token',
'apisandbox-add-multi',
'apisandbox-helpurls',
'apisandbox-examples',
'apisandbox-dynamic-parameters',

View file

@ -21,6 +21,20 @@
overflow: visible;
}
/* Display contents of the popup on a single line */
.mw-apisandbox-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
display: table;
}
.mw-apisandbox-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > * {
display: table-cell;
}
.mw-apisandbox-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .oo-ui-buttonWidget {
padding-left: 0.5em;
width: 1%;
}
.mw-apisandbox-fullscreen #mw-apisandbox-ui {
position: fixed;
top: 0;

View file

@ -384,8 +384,10 @@
* @return {OO.ui.Widget}
*/
createWidgetForParameter: function ( pi, opts ) {
var widget, innerWidget, finalWidget, items, $button, $content, func,
multiMode = 'none';
var widget, innerWidget, finalWidget, items, $content, func,
multiModeButton = null,
multiModeInput = null,
multiModeAllowed = false;
opts = opts || {};
@ -442,7 +444,8 @@
$.extend( widget, WidgetMethods.textInputWidget );
$.extend( widget, WidgetMethods.passwordWidget );
widget.setValidation( Validators.generic );
multiMode = 'enter';
multiModeAllowed = true;
multiModeInput = widget;
break;
case 'integer':
@ -458,7 +461,8 @@
if ( Util.apiBool( pi.enforcerange ) ) {
widget.setRange( pi.min || -Infinity, pi.max || Infinity );
}
multiMode = 'enter';
multiModeAllowed = true;
multiModeInput = widget;
break;
case 'limit':
@ -481,7 +485,8 @@
pi.apiSandboxMax = mw.config.get( 'apihighlimits' ) ? pi.highmax : pi.max;
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.textInputWidget );
multiMode = 'enter';
multiModeAllowed = true;
multiModeInput = widget;
break;
case 'timestamp':
@ -495,7 +500,7 @@
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.textInputWidget );
$.extend( widget, WidgetMethods.dateTimeInputWidget );
multiMode = 'indicator';
multiModeAllowed = true;
break;
case 'upload':
@ -595,25 +600,13 @@
break;
}
if ( Util.apiBool( pi.multi ) && multiMode !== 'none' ) {
if ( Util.apiBool( pi.multi ) && multiModeAllowed ) {
innerWidget = widget;
switch ( multiMode ) {
case 'enter':
$content = innerWidget.$element;
break;
case 'indicator':
$button = innerWidget.$indicator;
$button.css( 'cursor', 'pointer' );
$button.attr( 'tabindex', 0 );
$button.parent().append( $button );
innerWidget.setIndicator( 'next' );
$content = innerWidget.$element;
break;
default:
throw new Error( 'Unknown multiMode "' + multiMode + '"' );
}
multiModeButton = new OO.ui.ButtonWidget( {
label: mw.message( 'apisandbox-add-multi' ).text()
} );
$content = innerWidget.$element.add( multiModeButton.$element );
widget = new OO.ui.PopupTagMultiselectWidget( {
allowArbitrary: true,
@ -638,22 +631,11 @@
return false;
}
};
switch ( multiMode ) {
case 'enter':
innerWidget.connect( null, { enter: func } );
break;
case 'indicator':
$button.on( {
click: func,
keypress: function ( e ) {
if ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) {
func();
}
}
} );
break;
if ( multiModeInput ) {
multiModeInput.on( 'enter', func );
}
multiModeButton.on( 'click', func );
}
if ( Util.apiBool( pi.required ) || opts.nooptional ) {