Gadget-Demo.js

'use strict';

( function ( mw, $, rw, OO ) {

	/*
	 * 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.frwiki.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();
	};

}( mediaWiki, jQuery, mediaWiki.recordWizard, OO ) );