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 ),
- $overlay: $( '#mw-apisandbox-ui' )
+ $overlay: true
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
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;
widget = new OO.ui.CapsuleMultiselectWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
+ $overlay: true
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} else {
widget = new OO.ui.DropdownWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
+ $overlay: true
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.dropdownWidget );
widget = new OO.ui.CapsuleMultiselectWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
+ $overlay: true
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} else {
widget = new OO.ui.DropdownWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
+ $overlay: true
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.dropdownWidget );
widget = new OO.ui.CapsuleMultiselectWidget( {
allowArbitrary: true,
allowDuplicates: Util.apiBool( pi.allowsduplicates ),
- $overlay: $( '#mw-apisandbox-ui' ),
+ $overlay: true,
popup: {
classes: [ 'mw-apisandbox-popup' ],
$content: $content
.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 )
);
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() );
if ( !formatDropdown ) {
formatDropdown = new OO.ui.DropdownWidget( {
menu: { items: [] },
- $overlay: $( '#mw-apisandbox-ui' )
+ $overlay: true
} );
formatDropdown.getMenu().on( 'select', Util.onFormatDropdownChange );
}
label: Util.parseMsg( 'apisandbox-request-selectformat-label' )
}
).$element,
- $.map( formatItems, function ( item ) {
+ formatItems.map( function ( item ) {
return item.getData().$element;
} ),
$result
return xhr;
}
} )
- .then( null, function ( code, data, result, jqXHR ) {
+ .catch( function ( code, data, result, jqXHR ) {
var deferred = $.Deferred();
if ( code !== 'http' ) {
booklet.setPage( '|results|' );
} ).setDisabled( !paramsAreForced ) ).$element,
new OO.ui.PopupButtonWidget( {
- $overlay: $( '#mw-apisandbox-ui' ),
+ $overlay: true,
framed: false,
icon: 'info',
popup: {
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 = [],
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;
}
// 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';
} );
}
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 )
+ );
} ) )
}
} ) );
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 );
} ) )
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;
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;
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;
);
}
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',
}
);
- 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.
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
*
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 );
}
}
- 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
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;
};