+ },
+
+ /**
+ * Format a request and return a bunch of menu option widgets
+ *
+ * @param {Object} displayParams Query parameters, sanitized for display.
+ * @param {Object} rawParams Query parameters. You should probably use displayParams instead.
+ * @return {OO.ui.MenuOptionWidget[]} Each item's data should be an OO.ui.FieldLayout
+ */
+ formatRequest: function ( displayParams, rawParams ) {
+ var jsonInput,
+ items = [
+ new OO.ui.MenuOptionWidget( {
+ label: Util.parseMsg( 'apisandbox-request-format-url-label' ),
+ data: new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ readOnly: true,
+ value: mw.util.wikiScript( 'api' ) + '?' + $.param( displayParams )
+ } ), {
+ label: Util.parseMsg( 'apisandbox-request-url-label' )
+ }
+ )
+ } ),
+ new OO.ui.MenuOptionWidget( {
+ label: Util.parseMsg( 'apisandbox-request-format-json-label' ),
+ data: new OO.ui.FieldLayout(
+ jsonInput = new OO.ui.TextInputWidget( {
+ classes: [ 'mw-apisandbox-textInputCode' ],
+ readOnly: true,
+ multiline: true,
+ autosize: true,
+ maxRows: 6,
+ value: JSON.stringify( displayParams, null, '\t' )
+ } ), {
+ label: Util.parseMsg( 'apisandbox-request-json-label' )
+ }
+ ).on( 'toggle', function ( visible ) {
+ if ( visible ) {
+ // Call updatePosition instead of adjustSize
+ // because the latter has weird caching
+ // behavior and the former bypasses it.
+ jsonInput.updatePosition();
+ }
+ } )
+ } )
+ ];
+
+ mw.hook( 'apisandbox.formatRequest' ).fire( items, displayParams, rawParams );
+
+ return items;
+ },
+
+ /**
+ * Event handler for when formatDropdown's selection changes
+ */
+ onFormatDropdownChange: function () {
+ var i,
+ menu = formatDropdown.getMenu(),
+ items = menu.getItems(),
+ selectedField = menu.getSelectedItem() ? menu.getSelectedItem().getData() : null;
+
+ for ( i = 0; i < items.length; i++ ) {
+ items[ i ].getData().toggle( items[ i ].getData() === selectedField );
+ }