X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.special%2Fmediawiki.special.apisandbox.js;h=ff4335ae5274cea196a2bc50cb405cc9a29e0a19;hb=a2c8c2969420a0f150c03f76e3a0bf9028fcda43;hp=7029116cdcc508ea8c95c46222225ac6c0d87c20;hpb=949dc920ee61e838320186565cb6dc146a013b25;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
index 7029116cdc..39252dd29d 100644
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
@@ -98,7 +98,7 @@
 
 		dropdownWidget: {
 			getApiValue: function () {
-				var item = this.getMenu().getSelectedItem();
+				var item = this.getMenu().findSelectedItem();
 				return item === null ? undefined : item.getData();
 			},
 			setApiValue: function ( v ) {
@@ -121,9 +121,9 @@
 			}
 		},
 
-		capsuleWidget: {
+		tagWidget: {
 			getApiValue: function () {
-				var items = this.getItemsData();
+				var items = this.getValue();
 				if ( items.join( '' ).indexOf( '|' ) === -1 ) {
 					return items.join( '|' );
 				} else {
@@ -132,13 +132,13 @@
 			},
 			setApiValue: function ( v ) {
 				if ( v === undefined || v === '' || v === '\x1f' ) {
-					this.setItemsFromData( [] );
+					this.setValue( [] );
 				} else {
 					v = String( v );
 					if ( v.indexOf( '\x1f' ) !== 0 ) {
-						this.setItemsFromData( v.split( '|' ) );
+						this.setValue( v.split( '|' ) );
 					} else {
-						this.setItemsFromData( v.substr( 1 ).split( '\x1f' ) );
+						this.setValue( v.substr( 1 ).split( '\x1f' ) );
 					}
 				}
 			},
@@ -149,8 +149,8 @@
 				if ( !suppressErrors ) {
 					ok = this.getApiValue() !== undefined && !(
 						pi.allspecifier !== undefined &&
-						this.getItemsData().length > 1 &&
-						this.getItemsData().indexOf( pi.allspecifier ) !== -1
+						this.getValue().length > 1 &&
+						this.getValue().indexOf( pi.allspecifier ) !== -1
 					);
 				}
 
@@ -158,8 +158,8 @@
 				this.setIconTitle( ok ? '' : mw.message( 'apisandbox-alert-field' ).plain() );
 				return $.Deferred().resolve( ok ).promise();
 			},
-			createItemWidget: function ( data, label ) {
-				var item = OO.ui.CapsuleMultiselectWidget.prototype.createItemWidget.call( this, data, label );
+			createTagItemWidget: function ( data, label ) {
+				var item = OO.ui.TagMultiselectWidget.prototype.createTagItemWidget.call( this, data, label );
 				if ( this.paramInfo.deprecatedvalues &&
 					this.paramInfo.deprecatedvalues.indexOf( data ) >= 0
 				) {
@@ -335,22 +335,14 @@
 
 				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 ) ) {
-						widget = new OO.ui.CapsuleMultiselectWidget( {
+					if ( Util.apiBool( pi.multi ) ) {
+						widget = new OO.ui.TagMultiselectWidget( {
 							allowArbitrary: true,
 							allowDuplicates: Util.apiBool( pi.allowsduplicates ),
-							$overlay: $( '#mw-apisandbox-ui' )
+							$overlay: true
 						} );
 						widget.paramInfo = pi;
-						$.extend( widget, WidgetMethods.capsuleWidget );
+						$.extend( widget, WidgetMethods.tagWidget );
 					} else {
 						widget = new OO.ui.TextInputWidget( {
 							required: Util.apiBool( pi.required )
@@ -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;
 
@@ -467,16 +457,16 @@
 							} ) );
 						}
 
-						widget = new OO.ui.CapsuleMultiselectWidget( {
+						widget = new OO.ui.MenuTagMultiselectWidget( {
 							menu: { items: items },
-							$overlay: $( '#mw-apisandbox-ui' )
+							$overlay: true
 						} );
 						widget.paramInfo = pi;
-						$.extend( widget, WidgetMethods.capsuleWidget );
+						$.extend( widget, WidgetMethods.tagWidget );
 					} else {
 						widget = new OO.ui.DropdownWidget( {
 							menu: { items: items },
-							$overlay: $( '#mw-apisandbox-ui' )
+							$overlay: true
 						} );
 						widget.paramInfo = pi;
 						$.extend( widget, WidgetMethods.dropdownWidget );
@@ -507,12 +497,12 @@
 							} ) );
 						}
 
-						widget = new OO.ui.CapsuleMultiselectWidget( {
+						widget = new OO.ui.MenuTagMultiselectWidget( {
 							menu: { items: items },
-							$overlay: $( '#mw-apisandbox-ui' )
+							$overlay: true
 						} );
 						widget.paramInfo = pi;
-						$.extend( widget, WidgetMethods.capsuleWidget );
+						$.extend( widget, WidgetMethods.tagWidget );
 						if ( Util.apiBool( pi.submodules ) ) {
 							widget.getSubmodules = WidgetMethods.submoduleWidget.multi;
 							widget.on( 'change', ApiSandbox.updateUI );
@@ -520,7 +510,7 @@
 					} else {
 						widget = new OO.ui.DropdownWidget( {
 							menu: { items: items },
-							$overlay: $( '#mw-apisandbox-ui' )
+							$overlay: true
 						} );
 						widget.paramInfo = pi;
 						$.extend( widget, WidgetMethods.dropdownWidget );
@@ -561,23 +551,23 @@
 						throw new Error( 'Unknown multiMode "' + multiMode + '"' );
 				}
 
-				widget = new OO.ui.CapsuleMultiselectWidget( {
+				widget = new OO.ui.PopupTagMultiselectWidget( {
 					allowArbitrary: true,
 					allowDuplicates: Util.apiBool( pi.allowsduplicates ),
-					$overlay: $( '#mw-apisandbox-ui' ),
+					$overlay: true,
 					popup: {
 						classes: [ 'mw-apisandbox-popup' ],
 						$content: $content
 					}
 				} );
 				widget.paramInfo = pi;
-				$.extend( widget, WidgetMethods.capsuleWidget );
+				$.extend( widget, WidgetMethods.tagWidget );
 
 				func = function () {
 					if ( !innerWidget.isDisabled() ) {
 						innerWidget.apiCheckValid().done( function ( ok ) {
 							if ( ok ) {
-								widget.addItemsFromData( [ innerWidget.getApiValue() ] );
+								widget.addTag( innerWidget.getApiValue() );
 								innerWidget.setApiValue( undefined );
 							}
 						} );
@@ -715,7 +705,7 @@
 			var i,
 				menu = formatDropdown.getMenu(),
 				items = menu.getItems(),
-				selectedField = menu.getSelectedItem() ? menu.getSelectedItem().getData() : null;
+				selectedField = menu.findSelectedItem() ? menu.findSelectedItem().getData() : null;
 
 			for ( i = 0; i < items.length; i++ ) {
 				items[ i ].getData().toggle( items[ i ].getData() === selectedField );
@@ -803,7 +793,7 @@
 				.empty()
 				.append( $( '<p>' ).append( Util.parseMsg( 'apisandbox-intro' ) ) )
 				.append(
-					$( '<div>', { id: 'mw-apisandbox-ui' } )
+					$( '<div>' ).attr( 'id', 'mw-apisandbox-ui' )
 						.append( $toolbar )
 						.append( panel.$element )
 				);
@@ -827,7 +817,7 @@
 			if ( ApiSandbox.isFullscreen ) {
 				fullscreenButton.setLabel( mw.message( 'apisandbox-unfullscreen' ).text() );
 				fullscreenButton.setTitle( mw.message( 'apisandbox-unfullscreen-tooltip' ).text() );
-				$body.append( $ui );
+				OO.ui.getDefaultOverlay().prepend( $ui );
 			} else {
 				fullscreenButton.setLabel( mw.message( 'apisandbox-fullscreen' ).text() );
 				fullscreenButton.setTitle( mw.message( 'apisandbox-fullscreen-tooltip' ).text() );
@@ -1061,13 +1051,13 @@
 				if ( !formatDropdown ) {
 					formatDropdown = new OO.ui.DropdownWidget( {
 						menu: { items: [] },
-						$overlay: $( '#mw-apisandbox-ui' )
+						$overlay: true
 					} );
 					formatDropdown.getMenu().on( 'select', Util.onFormatDropdownChange );
 				}
 
 				menu = formatDropdown.getMenu();
-				selectedLabel = menu.getSelectedItem() ? menu.getSelectedItem().getLabel() : '';
+				selectedLabel = menu.findSelectedItem() ? menu.findSelectedItem().getLabel() : '';
 				if ( typeof selectedLabel !== 'string' ) {
 					selectedLabel = selectedLabel.text();
 				}
@@ -1084,7 +1074,7 @@
 								label: Util.parseMsg( 'apisandbox-request-selectformat-label' )
 							}
 						).$element,
-						$.map( formatItems, function ( item ) {
+						formatItems.map( function ( item ) {
 							return item.getData().$element;
 						} ),
 						$result
@@ -1122,7 +1112,7 @@
 						return xhr;
 					}
 				} )
-					.then( null, function ( code, data, result, jqXHR ) {
+					.catch( function ( code, data, result, jqXHR ) {
 						var deferred = $.Deferred();
 
 						if ( code !== 'http' ) {
@@ -1186,7 +1176,7 @@
 										booklet.setPage( '|results|' );
 									} ).setDisabled( !paramsAreForced ) ).$element,
 									new OO.ui.PopupButtonWidget( {
-										$overlay: $( '#mw-apisandbox-ui' ),
+										$overlay: true,
 										framed: false,
 										icon: 'info',
 										popup: {
@@ -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 = [],
@@ -1430,7 +1420,7 @@
 							for ( j = 0; j < tmp.length; j++ ) {
 								availableFormats[ tmp[ j ] ] = true;
 							}
-							pi.parameters[ i ].type = $.grep( tmp, filterFmModules );
+							pi.parameters[ i ].type = tmp.filter( filterFmModules );
 							pi.parameters[ i ][ 'default' ] = 'json';
 							pi.parameters[ i ].required = true;
 						}
@@ -1439,7 +1429,7 @@
 
 				// Hide the 'wrappedhtml' parameter on format modules
 				if ( pi.group === 'format' ) {
-					pi.parameters = $.grep( pi.parameters, function ( p ) {
+					pi.parameters = pi.parameters.filter( function ( p ) {
 						return p.name !== 'wrappedhtml';
 					} );
 				}
@@ -1455,18 +1445,17 @@
 
 				if ( pi.helpurls.length ) {
 					buttons.push( new OO.ui.PopupButtonWidget( {
-						$overlay: $( '#mw-apisandbox-ui' ),
+						$overlay: true,
 						label: mw.message( 'apisandbox-helpurls' ).text(),
 						icon: 'help',
 						popup: {
 							width: 'auto',
 							padded: true,
-							$content: $( '<ul>' ).append( $.map( pi.helpurls, function ( link ) {
-								return $( '<li>' ).append( $( '<a>', {
-									href: link,
-									target: '_blank',
-									text: link
-								} ) );
+							$content: $( '<ul>' ).append( pi.helpurls.map( function ( link ) {
+								return $( '<li>' ).append( $( '<a>' )
+									.attr( { href: link, target: '_blank' } )
+									.text( link )
+								);
 							} ) )
 						}
 					} ) );
@@ -1474,17 +1463,16 @@
 
 				if ( pi.examples.length ) {
 					buttons.push( new OO.ui.PopupButtonWidget( {
-						$overlay: $( '#mw-apisandbox-ui' ),
+						$overlay: true,
 						label: mw.message( 'apisandbox-examples' ).text(),
 						icon: 'code',
 						popup: {
 							width: 'auto',
 							padded: true,
-							$content: $( '<ul>' ).append( $.map( pi.examples, function ( example ) {
-								var a = $( '<a>', {
-									href: '#' + example.query,
-									html: example.description
-								} );
+							$content: $( '<ul>' ).append( pi.examples.map( function ( example ) {
+								var a = $( '<a>' )
+									.attr( 'href', '#' + example.query )
+									.html( example.description );
 								a.find( 'a' ).contents().unwrap(); // Can't nest links
 								return $( '<li>' ).append( a );
 							} ) )
@@ -1518,14 +1506,14 @@
 							var $this = $( this );
 							$this.parent().prev( 'p' ).append( $this );
 						} );
-						descriptionContainer.append( $( '<div>', { addClass: 'description', append: tmp } ) );
+						descriptionContainer.append( $( '<div>' ).addClass( 'description' ).append( tmp ) );
 
 						if ( pi.parameters[ i ].info && pi.parameters[ i ].info.length ) {
 							for ( j = 0; j < pi.parameters[ i ].info.length; j++ ) {
-								descriptionContainer.append( $( '<div>', {
-									addClass: 'info',
-									append: Util.parseHTML( pi.parameters[ i ].info[ j ] )
-								} ) );
+								descriptionContainer.append( $( '<div>' )
+									.addClass( 'info' )
+									.append( Util.parseHTML( pi.parameters[ i ].info[ j ] ) )
+								);
 							}
 						}
 						flag = true;
@@ -1538,25 +1526,25 @@
 
 							case 'limit':
 								if ( pi.parameters[ i ].highmax !== undefined ) {
-									descriptionContainer.append( $( '<div>', {
-										addClass: 'info',
-										append: [
+									descriptionContainer.append( $( '<div>' )
+										.addClass( 'info' )
+										.append(
 											Util.parseMsg(
 												'api-help-param-limit2', pi.parameters[ i ].max, pi.parameters[ i ].highmax
 											),
 											' ',
 											Util.parseMsg( 'apisandbox-param-limit' )
-										]
-									} ) );
+										)
+									);
 								} else {
-									descriptionContainer.append( $( '<div>', {
-										addClass: 'info',
-										append: [
+									descriptionContainer.append( $( '<div>' )
+										.addClass( 'info' )
+										.append(
 											Util.parseMsg( 'api-help-param-limit', pi.parameters[ i ].max ),
 											' ',
 											Util.parseMsg( 'apisandbox-param-limit' )
-										]
-									} ) );
+										)
+									);
 								}
 								break;
 
@@ -1569,14 +1557,14 @@
 									tmp += 'max';
 								}
 								if ( tmp !== '' ) {
-									descriptionContainer.append( $( '<div>', {
-										addClass: 'info',
-										append: Util.parseMsg(
+									descriptionContainer.append( $( '<div>' )
+										.addClass( 'info' )
+										.append( Util.parseMsg(
 											'api-help-param-integer-' + tmp,
 											Util.apiBool( pi.parameters[ i ].multi ) ? 2 : 1,
 											pi.parameters[ i ].min, pi.parameters[ i ].max
-										)
-									} ) );
+										) )
+									);
 								}
 								break;
 
@@ -1589,10 +1577,10 @@
 						}
 						if ( Util.apiBool( pi.parameters[ i ].multi ) ) {
 							tmp = [];
-							if ( flag && !( widget instanceof OO.ui.CapsuleMultiselectWidget ) &&
+							if ( flag && !( widget instanceof OO.ui.TagMultiselectWidget ) &&
 								!(
 									widget instanceof OptionalWidget &&
-									widget.widget instanceof OO.ui.CapsuleMultiselectWidget
+									widget.widget instanceof OO.ui.TagMultiselectWidget
 								)
 							) {
 								tmp.push( mw.message( 'api-help-param-multi-separate' ).parse() );
@@ -1605,12 +1593,24 @@
 								);
 							}
 							if ( tmp.length ) {
-								descriptionContainer.append( $( '<div>', {
-									addClass: 'info',
-									append: Util.parseHTML( tmp.join( ' ' ) )
-								} ) );
+								descriptionContainer.append( $( '<div>' )
+									.addClass( 'info' )
+									.append( Util.parseHTML( tmp.join( ' ' ) ) )
+								);
 							}
 						}
+						if ( 'maxbytes' in pi.parameters[ i ] ) {
+							descriptionContainer.append( $( '<div>' )
+								.addClass( 'info' )
+								.append( Util.parseMsg( 'api-help-param-maxbytes', pi.parameters[ i ].maxbytes ) )
+							);
+						}
+						if ( 'maxchars' in pi.parameters[ i ] ) {
+							descriptionContainer.append( $( '<div>' )
+								.addClass( 'info' )
+								.append( Util.parseMsg( 'api-help-param-maxchars', pi.parameters[ i ].maxchars ) )
+							);
+						}
 						helpField = new OO.ui.FieldLayout(
 							new OO.ui.Widget( {
 								$content: '\xa0',
@@ -1622,14 +1622,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 +1829,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 = $( '<span>' ).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
 	 *
@@ -1896,8 +1844,8 @@
 		config = config || {};
 
 		this.widget = widget;
-		this.$overlay = config.$overlay ||
-			$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-overlay' );
+		this.$cover = config.$cover ||
+			$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-cover' );
 		this.checkbox = new OO.ui.CheckboxInputWidget( config.checkbox )
 			.on( 'change', this.onCheckboxChange, [], this );
 
@@ -1910,12 +1858,12 @@
 			}
 		}
 
-		this.$overlay.on( 'click', this.onOverlayClick.bind( this ) );
+		this.$cover.on( 'click', this.onOverlayClick.bind( this ) );
 
 		this.$element
 			.addClass( 'mw-apisandbox-optionalWidget' )
 			.append(
-				this.$overlay,
+				this.$cover,
 				$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-fields' ).append(
 					$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-widget' ).append(
 						widget.$element
@@ -1942,7 +1890,7 @@
 		OptionalWidget[ 'super' ].prototype.setDisabled.call( this, disabled );
 		this.widget.setDisabled( this.isDisabled() );
 		this.checkbox.setSelected( !this.isDisabled() );
-		this.$overlay.toggle( this.isDisabled() );
+		this.$cover.toggle( this.isDisabled() );
 		return this;
 	};