From: Bartosz Dziewoński Date: Thu, 9 Mar 2017 16:06:08 +0000 (+0100) Subject: mw.special.apisandbox: Use a real button to insert values in multi fields X-Git-Tag: 1.31.0-rc.0~190^2 X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=258f2114ec4ca748977ebd6b66fe9e4792f71722 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 9036396d0c..27f9814f37 100644 --- 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 703b49fce4..c22b3c6d4a 100644 --- 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 a424b595b6..0595bb031c 100644 --- 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 7ef0263385..60f83ad97c 100644 --- 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 df87c9cc9f..516551c1c7 100644 --- 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 ) {