Gadget-Demo.js

/* ************************************************************************** */
// Description: Adds a personal generator of words list to the RecordWizard
// Usage: Copy this code into you User:Name/common.js, hack it as you need to.
// See also : [[Help:Create a new generator]]

'use strict';

if ( mw.config.get( 'wgCanonicalSpecialPageName' ) === 'RecordWizard' ) {
    mw.loader.using( ['oojs', 'oojs-ui', 'ext.recordWizard.generator'], function() {
    	console.log('MediaWiki:Gadget-Demo.js');
        var rw = mw.recordWizard;

	    /*
	     * This first part allows the creation of a basic generator
	     * and allows the RecordWizard to find it (and thus, add a button in the UI for it)
	     *
	     * Replace everywhere in this file "rw.generator.Demo" by a custom
	     * and unique class name, but always in the "rw.generator" namespace.
	     * For example it can be: rw.generator.SomethingCool
	     */
	    rw.generator.Demo = function ( config ) {
		    rw.generator.Generator.call( this, config );
	    };

	    OO.inheritClass( rw.generator.Demo, rw.generator.Generator );

	    // This line defines an internal name for the generator
	    rw.generator.Demo.static.name = 'demo';

	    // And this one defines the name for the generator which will be displayed in the UI
	    rw.generator.Demo.static.title = 'My Demo';

	    /*
	     * This function should contain all the popup initialization stuff.
	     * We create here for example two text fields, with a custom layout.
	     * For more information, see OOui documentation:
	     * https://www.mediawiki.org/wiki/OOUI
	     */
	    rw.generator.Demo.prototype.initialize = function () {
		    // The two text fields
		    this.aTextField = new OO.ui.TextInputWidget();
		    this.anotherTextField = new OO.ui.TextInputWidget();

		    // The custom layout
		    this.layout = new OO.ui.Widget( {
			    content: [
				    new OO.ui.FieldLayout( this.aTextField, {
						    align: 'top',
						    label: 'This field do something cool.'
					    }
				    ),
				    new OO.ui.FieldLayout(
					    this.anotherTextField, {
						    align: 'top',
						    label: 'This one too!'
					    }
				    )
			    ]
		    } );

		    // To be displayed, all the fields/widgets/... should be appended to "this.content.$element"
		    this.content.$element.append( this.layout.$element );

		    // Do not remove this line, it will initialize the popup itself
		    rw.generator.Generator.prototype.initialize.call( this );
	    };

	    /*
	     * This function will be called when the user press the "Done" button.
	     * 
	     * Every words that you want to be added to the RecordWizard's word list
	     * have to be added to an array called "this.list".
	     *
	     * The returned value can either be True, or if you want to do some asynchrone
	     * stuff, you can return a jQuery promise
	     */
	    rw.generator.Demo.prototype.fetch = function () {
		    // Get the values of our text fields
		    var generator = this,
			    demoText = this.aTextField.getValue(),
			    anotherDemoText = this.anotherTextField.getValue();

		    // Initialize a new promise
		    this.deferred = $.Deferred();

		    // Initialize our word list
		    this.list = [];

		    // We will do a asynchronous AJAX request to frwiki's API
		    this.frwikiApi = new mw.ForeignApi( 'https://fr.wikipedia.org/w/api.php', {
			    anonymous: true,
			    parameters: { origin: '*' },
			    ajax: { timeout: 10000 }
		    } );

		    // To get 10 random pages from the main namespace
		    this.frwikiApi.get( {
			    "action": "query",
			    "format": "json",
			    "list": "random",
			    "rnnamespace": "0",
			    "rnlimit": "10"
		    } ).then( function( data ) {
			    // We process here the result of our request
			    // By adding each page title to our list
			    var i;
			    for ( var i=0; i < data.query.random.length; i++ ) {
				    generator.list.push( data.query.random[ i ].title );
			    }

			    // And once we're done we can resolve our promise
			    // So the process can end
			    generator.deferred.resolve();
		    } ).fail( function ( error ) {
			    // If something goes wrong, we reject our promise
			    // So the process stops and our popup shows the error message
			    generator.deferred.reject( new OO.ui.Error( error ) );
		    } );

		    // At this point we're not done yet, make the dialog closing process
		    // to wait the promise to be resolved or rejected
		    return this.deferred.promise();
	    };
    } );
}