User:Novusistic/API-Demo-using-OOUI.js

$( document ).ready( function () {
	mw.loader.using( 'oojs-ui-core' ).done( function () {
		var str = '',
			count1 = 0,
			count2 = 0;

		// A custom widget which facilitates the searching of "recently added articles"
		// And "nearby pages" as per the user's location using MediaWiki Action API.
		var CustomWidget = function ( config ) {
			config = config || {};

			CustomWidget.parent.call( this, config );

			this.label1 = new OO.ui.LabelWidget( {
				label: 'Get the articles most recently added to a category.'
			} );

			this.label2 = new OO.ui.LabelWidget( {
				label: 'Search for pages nearby.'
			} );

			this.button1 = new OO.ui.ButtonWidget( {
				label: 'Click here',
				flags: [ 'primary', 'progressive' ]
			} );

			this.button2 = new OO.ui.ButtonWidget( {
				label: 'Click here',
				flags: [ 'primary', 'progressive' ]
			} );

			this.button1.connect( this, { click: 'btnClick1' } );
			this.button2.connect( this, { click: 'btnClick2' } );

			// NOTE: Ideally, the styling of DOM elements should be done in a separate
			// Css/less file. Thus, the following embedded CSS is for demonstration
			// Purpose only.
			this.$element.append(
				this.label1.$element
					.css( { display: 'block' } ),
				this.button1.$element
					.css( { margin: '5px 0 20px 0' } ),
				this.label2.$element
					.css( { display: 'block' } ),
				this.button2.$element
					.css( { margin: '5px 0 20px 0' } )
			);
		};

		OO.inheritClass( CustomWidget, OO.ui.Widget );

		// Defines the behaviour of the application on clicking the first button.
		CustomWidget.prototype.btnClick1 = function () {
			count1++;

			// This ensures that in case the top button is clicked for the first time,
			// An input field and a back button is generated. The obvious behaviour that
			// If the top button is clicked continuously, it shouldn't lead to the
			// Creation of new input field again, is also defined.
			if ( count1 === 1 ) {
				this.button2.setDisabled( true );

				this.input = new OO.ui.SearchInputWidget( {
					placeholder: 'Enter category here...',
					classes: [ 'input-field' ]
				} );

				this.result = new OO.ui.LabelWidget( {
					classes: [ 'result' ]
				} );

				this.backButton = new OO.ui.ButtonWidget( {
					label: 'Go back',
					flags: [ 'progressive' ],
					classes: [ 'backBtn' ]
				} );

				this.input.connect( this, { enter: 'searchRecentlyAddedArticles' } );
				this.backButton.connect( this, { click: 'backBtnClick' } );

				this.$element.append(
					this.input.$element,
					this.result.$element
						.css( {
							display: 'block',
							margin: '10px 0',
							padding: '15px',
							backgroundColor: '#addfad',
							borderRadius: '10px'
						} ),
					this.backButton.$element
				);
			}
		};

		/**
		 * Fetches the response of the MediaWiki Action API containing the recently
		 * Added articles in the specified category.
		 *
		 * This method uses the Query module of the API to fetch the desired page details
		 * In the JSON format. The default number of return entries is 10. If the response
		 * Is empty, the corresponding message is shown to the user, else the titles
		 * Of the 10 recently added articles are shown.
		 *
		 * @return 10 recently added articles in a specified category
		 */
		CustomWidget.prototype.searchRecentlyAddedArticles = function () {
			var myCategory = this.input.getValue();

			if ( myCategory !== '' ) {
				var url = 'https://en.wikipedia.org/w/api.php';
				var params = {
					action: 'query',
					list: 'categorymembers',
					cmtitle: 'Category:' + myCategory,
					cmsort: 'timestamp',
					cmdir: 'desc',
					format: 'json'
				};

				url = url + '?origin=*';
				Object.keys( params ).forEach( function ( key ) {
					url += '&' + key + '=' + params[ key ];
				} );

				fetch( url )
					.then( function ( response ) {
						return response.json();
					} )
					.then( function ( response ) {
						var pages = response.query.categorymembers;
						if ( pages.length === 0 ) {
							myCustomWidget.result.setLabel( 'No result found!' );
						} else {
							str = '';
							for ( var page in pages ) {
								str += pages[ page ].title + ' || ';
							}
							myCustomWidget.result.setLabel( str );
						}
					} )
					.catch( function ( error ) {
						console.log( error );
					} );
			}
			this.input.setValue( '' );
		};

		/**
		 * Fetches the response of the MediaWiki Action API containing the pages
		 * Nearby the user location.
		 *
		 * This method uses the Query module of the API to fetch the pages nearby the
		 * User's location in the JSON format. The number of return entries is 10.
		 * The hard coded location below is of Mumbai.
		 *
		 * @return 10 wikipedia pages (if they exist) near the location specified below.
		 */
		CustomWidget.prototype.btnClick2 = function () {
			count2++;
			if ( count2 === 1 ) {
				this.button1.setDisabled( true );

				var url = 'https://en.wikipedia.org/w/api.php';

				var params = {
					action: 'query',
					list: 'geosearch',
					// Latitude and Longitude of Mumbai
					gscoord: '19.075984|72.877656',
					gsradius: '10000',
					gslimit: '10',
					format: 'json'
				};

				url = url + '?origin=*';
				Object.keys( params ).forEach( function ( key ) {
					url += '&' + key + '=' + params[ key ];
				} );

				fetch( url )
					.then( function ( response ) {
						return response.json();
					} )
					.then( function ( response ) {
						var pages = response.query.geosearch;
						str = '';
						for ( var place in pages ) {
							str += pages[ place ].title + ' || ';
						}
						myCustomWidget.result.setLabel( str );
					} )
					.catch( function ( error ) {
						console.log( error );
					} );

				this.result = new OO.ui.LabelWidget( {
					classes: [ 'result' ]
				} );

				this.backButton = new OO.ui.ButtonWidget( {
					label: 'Go back',
					flags: [ 'progressive' ],
					classes: [ 'backBtn' ]
				} );

				this.backButton.connect( this, { click: 'backBtnClick' } );

				this.$element.append(
					this.result.$element
						.css( {
							display: 'block',
							margin: '10px 0',
							padding: '15px',
							backgroundColor: '#addfad',
							borderRadius: '10px'
						} ),
					this.backButton.$element
				);
			}
		};

		// Defines the action/behaviour when the back button is clicked.
		CustomWidget.prototype.backBtnClick = function () {
			this.button1.setDisabled( false );
			this.button2.setDisabled( false );

			$( '.input-field' ).remove();
			$( '.result' ).remove();
			$( '.backBtn' ).remove();

			count1 = 0;
			count2 = 0;
		};

		// The following creates a custom widget and a pop up button object.
		var myCustomWidget = new CustomWidget();

		var myPopUpButton = new OO.ui.PopupButtonWidget( {
			label: 'API operations',
			popup: {
				$content: myCustomWidget.$element,
				padded: true
			}
		} );

		// Shows the pop up button on the personal navigation bar of the user at the
		// Top right corner.
		$( '#p-personal ul' )
			.append( $( '<li>' ).append( myPopUpButton.$element ) );
	} );
} );