| Index: trunk/extensions/ApiSandbox/SpecialApiSandbox.php |
| — | — | @@ -83,7 +83,7 @@ |
| 84 | 84 | '; |
| 85 | 85 | $s .= '<tr><td class="api-sandbox-label"><label for="api-sandbox-format">format=</label></td><td class="api-sandbox-value">' |
| 86 | 86 | . self::getSelect( 'format', $formats, 'json' ) |
| 87 | | - . '</td><td></td></tr> |
| | 87 | + . '</td><td>' . $this->getButtonsBox() . '</td></tr> |
| 88 | 88 | '; |
| 89 | 89 | $s .= '<tr><td class="api-sandbox-label"><label for="api-sandbox-action">action=</label></td><td class="api-sandbox-value">' |
| 90 | 90 | . self::getSelect( 'action', $modules ) |
| — | — | @@ -113,6 +113,10 @@ |
| 114 | 114 | return $s; |
| 115 | 115 | } |
| 116 | 116 | |
| | 117 | + public function getButtonsBox() { |
| | 118 | + return '<div id="api-sandbox-buttons"><div id="api-sandbox-examples" style="display: none"></div></div>'; |
| | 119 | + } |
| | 120 | + |
| 117 | 121 | /** |
| 118 | 122 | * @param $type string |
| 119 | 123 | * @return array |
| Index: trunk/extensions/ApiSandbox/ext.apiSandbox.js |
| — | — | @@ -6,6 +6,7 @@ |
| 7 | 7 | * @param $container {jQuery} Container to put UI into |
| 8 | 8 | * @param info {Object} Query information |
| 9 | 9 | * @param prefix {String} Additional prefix for parameter names |
| | 10 | + * @param params {Object} Optional override for info.parameters |
| 10 | 11 | */ |
| 11 | 12 | function UiBuilder( $container, info, prefix, params ) { |
| 12 | 13 | this.$container = $container; |
| — | — | @@ -13,6 +14,9 @@ |
| 14 | 15 | this.prefix = prefix + info.prefix; |
| 15 | 16 | this.params = isset( params ) ? params : info.parameters; |
| 16 | 17 | |
| | 18 | + $container.addClass( 'api-sandbox-builder' ); |
| | 19 | + $container.data( 'builder', this ); |
| | 20 | + |
| 17 | 21 | this.createInputs(); |
| 18 | 22 | } |
| 19 | 23 | |
| — | — | @@ -167,7 +171,16 @@ |
| 168 | 172 | $requestUrl = $( '#api-sandbox-url' ), |
| 169 | 173 | $requestPost = $( '#api-sandbox-post' ), |
| 170 | 174 | $output = $( '#api-sandbox-output' ), |
| 171 | | - $postRow = $( '#api-sandbox-post-row' ); |
| | 175 | + $postRow = $( '#api-sandbox-post-row' ), |
| | 176 | + $buttonsContainer = $( '#api-sandbox-buttons' ), |
| | 177 | + $examplesButton = $( '<button></button>' ) |
| | 178 | + .click( function( e ) { |
| | 179 | + e.preventDefault(); |
| | 180 | + $examplesContent.slideToggle(); |
| | 181 | + } ) |
| | 182 | + .hide() |
| | 183 | + .appendTo( $buttonsContainer ), |
| | 184 | + $examplesContent = $( '#api-sandbox-examples' ); |
| 172 | 185 | |
| 173 | 186 | // UiBuilder objects |
| 174 | 187 | var mainRequest, |
| — | — | @@ -179,6 +192,14 @@ |
| 180 | 193 | var paramInfo = { modules: {}, querymodules: {} }, |
| 181 | 194 | namespaces = []; |
| 182 | 195 | |
| | 196 | + $( '<button></button>' ) |
| | 197 | + .text(mw.msg( 'apisb-clear' ) ) |
| | 198 | + .click( function( e ) { |
| | 199 | + e.preventDefault(); |
| | 200 | + resetUI(); |
| | 201 | + } ) |
| | 202 | + .insertAfter( $examplesButton ); |
| | 203 | + |
| 183 | 204 | // load namespaces |
| 184 | 205 | $.getJSON( mw.util.wikiScript( 'api' ), |
| 185 | 206 | { format: 'json', action: 'query', meta: 'siteinfo', siprop: 'namespaces' }, |
| — | — | @@ -284,7 +305,7 @@ |
| 285 | 306 | } |
| 286 | 307 | $output.html( data ); |
| 287 | 308 | }, |
| 288 | | - error: function( jqXHR, textStatus, errorThrown ) { |
| | 309 | + error: function() { |
| 289 | 310 | showLoadError( $output, 'apisb-request-error' ); |
| 290 | 311 | } |
| 291 | 312 | }; |
| — | — | @@ -373,6 +394,7 @@ |
| 374 | 395 | function() { |
| 375 | 396 | showLoading( $mainContainer ); |
| 376 | 397 | $submit.attr( 'disabled', 'disabled' ); |
| | 398 | + $examplesContent.hide(); |
| 377 | 399 | }, |
| 378 | 400 | function() { |
| 379 | 401 | var info; |
| — | — | @@ -384,14 +406,118 @@ |
| 385 | 407 | mainRequest = new UiBuilder( $mainContainer, info, '' ); |
| 386 | 408 | mainRequest.setHelp( $help ); |
| 387 | 409 | $submit.removeAttr( 'disabled' ); |
| | 410 | + updateExamples( info ); |
| 388 | 411 | }, |
| 389 | 412 | function() { |
| 390 | 413 | $submit.removeAttr( 'disabled' ); |
| 391 | 414 | showLoadError( $mainContainer, 'apisb-load-error' ); |
| | 415 | + $examplesContent.hide(); |
| 392 | 416 | } |
| 393 | 417 | ); |
| 394 | 418 | } |
| 395 | 419 | |
| | 420 | + function updateExamples( info ) { |
| | 421 | + if ( !isset( info.allexamples ) ) { |
| | 422 | + $examplesContainer.hide(); // just in case |
| | 423 | + return; |
| | 424 | + } |
| | 425 | + $examplesContent.hide() |
| | 426 | + .html( '' ); |
| | 427 | + var $list = $( '<ul></ul>' ); |
| | 428 | + var urlRegex = /api.php\?\S+/m; |
| | 429 | + var count = 0; |
| | 430 | + for ( var i = 0; i < info.allexamples.length; i++ ) { |
| | 431 | + var href = ''; |
| | 432 | + var text = ''; |
| | 433 | + while ( i < info.allexamples.length && !isset( info.allexamples[i].description ) ) { |
| | 434 | + var match = urlRegex.exec( info.allexamples[i]['*'] ); |
| | 435 | + if ( match ) { |
| | 436 | + href = match[0]; |
| | 437 | + break; |
| | 438 | + } else { |
| | 439 | + text += '\n' + info.allexamples[i]['*']; |
| | 440 | + } |
| | 441 | + i++; |
| | 442 | + } |
| | 443 | + if ( !href ) { |
| | 444 | + href = info.allexamples[i]['*']; |
| | 445 | + } |
| | 446 | + if ( !text ) { |
| | 447 | + text = isset( info.allexamples[i].description ) ? info.allexamples[i].description : href; |
| | 448 | + } |
| | 449 | + var prefix = text.replace( /[^\n]*$/, '' ); |
| | 450 | + var $prefix = prefix.length ? $( '<b>' ).text( prefix ) : []; |
| | 451 | + var linkText = text.replace( /^.*\n/, '' ); |
| | 452 | + $( '<li>' ).append( $prefix ) |
| | 453 | + .append( $( '<a/>' ) |
| | 454 | + .attr( 'href', href ) |
| | 455 | + .text( linkText ) |
| | 456 | + .click( exampleClick ) |
| | 457 | + ).appendTo( $list ); |
| | 458 | + count++; |
| | 459 | + } |
| | 460 | + $examplesButton.text( mw.msg( count == 1 ? 'apisb-example' : 'apisb-examples' ) ); |
| | 461 | + $list.appendTo( $examplesContent ); |
| | 462 | + if ( count ) { |
| | 463 | + $examplesButton.show(); |
| | 464 | + } else { |
| | 465 | + $examplesButton.hide(); |
| | 466 | + } |
| | 467 | + } |
| | 468 | + |
| | 469 | + function exampleClick( e ) { |
| | 470 | + e.preventDefault(); |
| | 471 | + |
| | 472 | + resetUI(); |
| | 473 | + var link = $( this ).attr( 'href' ).replace( /^.*?\?/, '' ); |
| | 474 | + var params = link.split( '&' ); |
| | 475 | + for ( var i = 0; i < params.length; i++ ) { |
| | 476 | + var pieces = params[i].split( '=' ); |
| | 477 | + if ( pieces.length == 1 ) { // checkbox |
| | 478 | + $( '#param-' + pieces[0] ).attr( 'checked', 'checked' ); |
| | 479 | + } else { |
| | 480 | + var key = pieces[0], |
| | 481 | + value = decodeURIComponent( pieces.slice( 1 ).join( '=' ) ); |
| | 482 | + if ( [ 'action', 'format', 'list', 'prop', 'meta' ].indexOf( key ) != -1 ) { |
| | 483 | + continue; |
| | 484 | + } |
| | 485 | + var $el = $( '#param-' + key ); |
| | 486 | + if ( !$el.length ) { |
| | 487 | + continue; |
| | 488 | + } |
| | 489 | + switch ( $el[0].nodeName ) { |
| | 490 | + case 'SELECT': |
| | 491 | + if ( $el.attr( 'multiple' ) ) { |
| | 492 | + var splitted = value.split( '|' ); |
| | 493 | + for ( var j = 0; j < splitted.length; j++ ) { |
| | 494 | + $el.children( 'option[value=' + mw.html.escape( splitted[j] ) + ']' ) |
| | 495 | + .attr( 'selected', 'selected' ); |
| | 496 | + } |
| | 497 | + } else { |
| | 498 | + $el.children( 'option[value=' + mw.html.escape( value ) + ']' ) |
| | 499 | + .attr( 'selected', 'selected' ); |
| | 500 | + } |
| | 501 | + break; |
| | 502 | + case 'INPUT': |
| | 503 | + if ( $el.attr( 'type' ) == 'checkbox' ) { |
| | 504 | + $( '#param-' + key ).attr( 'checked', 'checked' ); |
| | 505 | + } else { |
| | 506 | + $el.val( value ); |
| | 507 | + } |
| | 508 | + break; |
| | 509 | + default: |
| | 510 | + continue; |
| | 511 | + } |
| | 512 | + } |
| | 513 | + } |
| | 514 | + } |
| | 515 | + |
| | 516 | + function resetUI() { |
| | 517 | + $( '.api-sandbox-builder' ).each( function() { |
| | 518 | + $( this ).data( 'builder' ).createInputs(); |
| | 519 | + } ); |
| | 520 | + } |
| | 521 | + |
| 396 | 522 | /** |
| 397 | 523 | * HTML-escapes and pretty-formats an API description string |
| 398 | 524 | * |
| Index: trunk/extensions/ApiSandbox/ApiSandbox.i18n.php |
| — | — | @@ -33,6 +33,9 @@ |
| 34 | 34 | 'apisb-query-meta' => 'Meta information', |
| 35 | 35 | 'apisb-generic-parameters'=> 'Generic parameters', |
| 36 | 36 | 'apisb-generator-parameters'=> 'Generator', |
| | 37 | + 'apisb-example' => 'Example', |
| | 38 | + 'apisb-examples' => 'Examples', |
| | 39 | + 'apisb-clear' => 'Clear', |
| 37 | 40 | ); |
| 38 | 41 | |
| 39 | 42 | /** Message documentation (Message documentation) |
| Index: trunk/extensions/ApiSandbox/ApiSandbox.php |
| — | — | @@ -33,6 +33,9 @@ |
| 34 | 34 | 'apisb-select-value', |
| 35 | 35 | 'apisb-namespaces-error', |
| 36 | 36 | 'apisb-ns-main', |
| | 37 | + 'apisb-example', |
| | 38 | + 'apisb-examples', |
| | 39 | + 'apisb-clear', |
| 37 | 40 | 'parentheses', |
| 38 | 41 | ), |
| 39 | 42 | 'dependencies' => 'mediawiki.util', |
| Index: trunk/extensions/ApiSandbox/ext.apiSandbox.css |
| — | — | @@ -43,3 +43,15 @@ |
| 44 | 44 | text-align: left !important; |
| 45 | 45 | font-size: 100% !important; |
| 46 | 46 | } |
| | 47 | + |
| | 48 | +.api-sandbox-examples-outer { |
| | 49 | + |
| | 50 | +} |
| | 51 | + |
| | 52 | +#api-sandbox-examples-button { |
| | 53 | + -webkit-border-radius: 4px; |
| | 54 | + -moz-border-radius: 4px; |
| | 55 | + border-radius: 4px; |
| | 56 | + |
| | 57 | + border: 1px solid #2F6FAB; |
| | 58 | +} |