From b4e31d2db6b43162eae75998900fd64344fc0f04 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Fri, 3 Mar 2017 21:03:39 +0100 Subject: [PATCH] mw.special.apisandbox: Use a real button for "Auto-fill the token" I've never liked this interface. It is not obvious what the little triangle does. Let's just use words. Change-Id: Ica477713adf67a6e1909629eae6b6ee8b35a48f6 --- languages/i18n/qqq.json | 2 +- .../mediawiki.special.apisandbox.css | 4 - .../mediawiki.special.apisandbox.js | 102 ++++-------------- 3 files changed, 21 insertions(+), 87 deletions(-) diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index 08038edc7a..0f7f086897 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -2250,7 +2250,7 @@ "apisandbox-dynamic-parameters-add-placeholder": "JavaScript text field placeholder for the widget to add a new arbitrary parameter.", "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": "Tooltop for the button that fetches a CSRF token.", + "apisandbox-fetch-token": "Label for the button that fetches a CSRF token.", "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/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css index 750a567f25..5f6c6dca11 100644 --- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css +++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css @@ -82,10 +82,6 @@ padding-left: 0.5em; } -.oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator.mw-apisandbox-clickable-indicator { - cursor: pointer; -} - .mw-apisandbox-textInputCode .oo-ui-inputWidget-input { font-family: monospace, monospace; font-size: 0.8125em; diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js index 7029116cdc..c62685a111 100644 --- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js +++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js @@ -335,15 +335,7 @@ case 'string': case 'user': - if ( pi.tokentype ) { - widget = new TextInputWithIndicatorWidget( { - input: { - indicator: 'previous', - indicatorTitle: mw.message( 'apisandbox-fetch-token' ).text(), - required: Util.apiBool( pi.required ) - } - } ); - } else if ( Util.apiBool( pi.multi ) ) { + if ( Util.apiBool( pi.multi ) ) { widget = new OO.ui.CapsuleMultiselectWidget( { allowArbitrary: true, allowDuplicates: Util.apiBool( pi.allowsduplicates ), @@ -362,11 +354,9 @@ widget.setValidation( Validators.generic ); } if ( pi.tokentype ) { + widget.paramInfo = pi; + $.extend( widget, WidgetMethods.textInputWidget ); $.extend( widget, WidgetMethods.tokenWidget ); - widget.input.paramInfo = pi; - $.extend( widget.input, WidgetMethods.textInputWidget ); - $.extend( widget.input, WidgetMethods.tokenWidget ); - widget.on( 'indicator', widget.fetchToken, [], widget ); } break; @@ -1397,7 +1387,7 @@ Util.fetchModuleInfo( this.apiModule ) .done( function ( pi ) { - var prefix, i, j, descriptionContainer, widget, widgetField, helpField, tmp, flag, count, + var prefix, i, j, descriptionContainer, widget, layoutConfig, button, widgetField, helpField, tmp, flag, count, items = [], deprecatedItems = [], buttons = [], @@ -1622,14 +1612,22 @@ } ); - widgetField = new OO.ui.FieldLayout( - widget, - { - align: 'left', - classes: [ 'mw-apisandbox-widget-field' ], - label: prefix + pi.parameters[ i ].name - } - ); + layoutConfig = { + align: 'left', + classes: [ 'mw-apisandbox-widget-field' ], + label: prefix + pi.parameters[ i ].name + }; + + if ( pi.parameters[ i ].tokentype ) { + button = new OO.ui.ButtonWidget( { + label: mw.message( 'apisandbox-fetch-token' ).text() + } ); + button.on( 'click', widget.fetchToken, [], widget ); + + widgetField = new OO.ui.ActionFieldLayout( widget, button, layoutConfig ); + } else { + widgetField = new OO.ui.FieldLayout( widget, layoutConfig ); + } // We need our own click handler on the widget label to // turn off the disablement. @@ -1821,66 +1819,6 @@ return ret; }; - /** - * A text input with a clickable indicator - * - * @class - * @private - * @constructor - * @param {Object} [config] Configuration options - */ - function TextInputWithIndicatorWidget( config ) { - var k; - - config = config || {}; - TextInputWithIndicatorWidget[ 'super' ].call( this, config ); - - this.$indicator = $( '' ).addClass( 'mw-apisandbox-clickable-indicator' ); - OO.ui.mixin.TabIndexedElement.call( - this, $.extend( {}, config, { $tabIndexed: this.$indicator } ) - ); - - this.input = new OO.ui.TextInputWidget( $.extend( { - $indicator: this.$indicator, - disabled: this.isDisabled() - }, config.input ) ); - - // Forward most methods for convenience - for ( k in this.input ) { - if ( $.isFunction( this.input[ k ] ) && !this[ k ] ) { - this[ k ] = this.input[ k ].bind( this.input ); - } - } - - this.$indicator.on( { - click: this.onIndicatorClick.bind( this ), - keypress: this.onIndicatorKeyPress.bind( this ) - } ); - - this.$element.append( this.input.$element ); - } - OO.inheritClass( TextInputWithIndicatorWidget, OO.ui.Widget ); - OO.mixinClass( TextInputWithIndicatorWidget, OO.ui.mixin.TabIndexedElement ); - TextInputWithIndicatorWidget.prototype.onIndicatorClick = function ( e ) { - if ( !this.isDisabled() && e.which === 1 ) { - this.emit( 'indicator' ); - } - return false; - }; - TextInputWithIndicatorWidget.prototype.onIndicatorKeyPress = function ( e ) { - if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) { - this.emit( 'indicator' ); - return false; - } - }; - TextInputWithIndicatorWidget.prototype.setDisabled = function ( disabled ) { - TextInputWithIndicatorWidget[ 'super' ].prototype.setDisabled.call( this, disabled ); - if ( this.input ) { - this.input.setDisabled( this.isDisabled() ); - } - return this; - }; - /** * A wrapper for a widget that provides an enable/disable button * -- 2.20.1