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

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 9036396..27f9814 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -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",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 703b49f..c22b3c6 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -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}}",

diff --git a/resources/Resources.php b/resources/Resources.php
index a424b59..0595bb0 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2015,6 +2015,7 @@ return [
                        'apisandbox-loading',
                        'apisandbox-load-error',
                        'apisandbox-fetch-token',
+                       'apisandbox-add-multi',
                        'apisandbox-helpurls',
                        'apisandbox-examples',
                        'apisandbox-dynamic-parameters',

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
index 7ef0263..60f83ad 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
@@ -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;

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
index df87c9c..516551c 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
@@ -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 ) {