User:A. Amritesh/common.js

// $( document ).ready( function { // 	mw.loader.using( 'oojs-ui-core' ).done( function  { // 		var str1 = '', // 			str2 = '', // 			count1 = 0, // 			count2 = 0; // 		/** // 		 * This is a custom class for making widget with special functionality. // 		 * It contains two buttons for making different queries. // 		 */ // 		var Query = function ( config ) { // 			// Configuration object // 			config = config || {}; // 			// Calling parent constructor // 			Query.parent.call( this, config );

// 			this.button1 = new OO.ui.ButtonWidget( { // 				label: ' Editors ', // 			} );

// 			this.button2 = new OO.ui.ButtonWidget( { // 				label: ' Mostviewed Pages ', // 			} ); // 			// When 'click' is emitted from button1, revision method method will be invoked. // 			this.button1.connect( this, { click: 'revision' } ); // 			// When 'click' is emitted from button2, mostViewed method method will be invoked. // 			this.button2.connect( this, { click: 'mostViewed' } );

// 			// Object of this class will append button1 and button2. // 			this.$element.append( // 				this.button1.$element // 					.css( { // 						padding: '5px 5px', // 						margin: '5px 18px' // 					} ), // 				this.button2.$element // 					.css( { // 						padding: '5px 5px', // 						margin: '5px 18px' // 					} ) // 			); // 		};

// 		OO.inheritClass( Query, OO.ui.Widget ); //    	/** //     	 * This method is responsible for making query about the revisions of the current page //    	 * using MediaWiki Action API. //    	 * It fetches the name of first and last editor of the current page. //    	 * The name of editors also lead to their respective introduction page. //    	 */ //     	Query.prototype.revision = function  { //    		// count1 keeps track of result widget. //    		// It ensures that more than one such widget will not be appended. // 			count1++; // 			if ( count1 == 1 ) { // 				// It disables button2 when button1 is in action. // 				this.button2.setDisabled( true ); //        		// Query about revisions of the current page // 				var url = 'https://www.mediawiki.org/w/api.php'; // 				var params = { // 					action: 'query', // 					prop: 'revisions', //        			titles: mw.config.get( "wgPageName" ), //        			rprop: 'user', //        			rvlimit: '1', //        			rvslots: "main", // 					format: 'json', // 					formatversion: '2' // 				};

// 				url = url + '?origin=*'; // 				Object.keys( params ).forEach( function ( key ) { // 					url += '&' + key + '=' + params[ key ]; // 				} ); // 				var urllast = url + '&rvdir=older'; //        		var urlfirst = url + '&rvdir=newer'; //        		// This function fetches the name of first editor of the current page using urlfirst. // 				fetch( urlfirst ) // 					.then( function ( response ) { // 						return response.json; // 					} ) // 					.then( function ( response ) { // 						str1 = 'First Editor : '; // 						for ( var page in response.query.pages ) { // 							for ( var rev in response.query.pages[page].revisions ) { // 								var user = response.query.pages[page].revisions[rev].user; // 								str1 += "" + user + "" + " "; // 							} // 						} // 					} ) // 					.catch( function ( error ) { // 						console.log( error ); // 					} ); //        		// This function fetches the name of last editor of the current page using urllast. //        		fetch( urllast ) // 					.then( function ( response ) { // 						return response.json; // 					} ) // 					.then( function ( response ) { // 						str1 +='Last Editor : '; // 						for ( var page in response.query.pages ) { // 							for ( var rev in response.query.pages[page].revisions ) { // 									var user = response.query.pages[page].revisions[rev].user; // 									str1 += "" + user + ""; // 							} // 						} // 					} ) // 					.catch( function ( error ) { // 						console.log( error ); // 					} ); // 				// This ensures empty string is not returned. // 				if(str1 == '' ){ // 					str1 = 'Please try again.'; // 				} // 				// The string is converted to HTML snippet and set as the label of result widget. // 				this.result = new OO.ui.LabelWidget( { // 					label : new OO.ui.HtmlSnippet( str1 ), // 					classes: [ 'result' ] // 				} );

// 				this.backButton = new OO.ui.ButtonWidget( { // 					label: 'Back...', // 					classes: [ 'back' ] // 				} ); // 				// When 'click' is emitted from button1, backClick method method will be invoked. // 				this.backButton.connect( this, { click: 'onBackClick' } ); // 				this.$element.append( // 					this.result.$element // 						.css( { // 							display: 'block', // 							border: '1px solid', // 							backgroundColor: '#eaecf0', // 							margin: '10px 0', // 							padding: '15px' // 						} ), // 					this.backButton.$element // 				); // 			} // 		};

//    	/** //     	 * This method is responsible for making query about the mostviewed pages of MediaWiki //    	 * using MediaWiki Action API. //    	 * It fetches the names of five mostviewed pages and their views count. //    	 * The name of pages will lead to their respective MediaWiki pages. //    	 */ // 		Query.prototype.mostViewed = function  { // 			// count2 keeps track of result widget. //    		// It ensures that more than one such widget will not be appended. // 			count2++; // 			if ( count2 == 1 ) { // 				// It disables button1 when button2 is in action. // 				this.button1.setDisabled( true ); // 				// Query about five mostviewed pages // 				var url = 'https://www.mediawiki.org/w/api.php'; // 				var params = { // 					action: 'query', // 					list: 'mostviewed', //        			pvimlimit: '5', //        			pvimmetric: 'pageviews', // 					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.mostviewed; // 					   str2 = ; // 					    var title =; // 						for ( var page in pages ) { // 							title = pages[ page ].title; //             				str2 += "" + //             					title + "" + '  :  ' + pages[ page ].count + " "; // 						} // 					} ) // 					.catch( function ( error ) { // 						console.log( error ); // 					} ); // 				// This ensures empty string is not returned. // 				if(str2 == '' ){ // 					str2 = 'Please try again.'; // 				} // 				// The string is converted to HTML snippet and set as the label of result widget. // 				this.result = new OO.ui.LabelWidget( { // 					label: new OO.ui.HtmlSnippet( str2 ), // 					classes: [ 'result' ] // 				} ); // 				this.backButton = new OO.ui.ButtonWidget( { // 					label: 'Back...', // 					classes: [ 'back' ] // 				} ); // 				// When 'click' is emitted from button1, backClick method method will be invoked. // 				this.backButton.connect( this, { click: 'onBackClick' } );

// 				this.$element.append( // 					this.result.$element // 						.css( { // 							display: 'block', // 							border: '1px solid', // 							backgroundColor: '#eaecf0', // 							margin: '10px 0', // 							padding: '15px' // 						} ), // 					this.backButton.$element // 				); // 			} // 		};

// 		/** // 		 * This method is responsible for taking the custom widget to previous state. // 		 * It disable both buttons, remove result lable and back button and set counters to zero. // 		 */ // 		Query.prototype.onBackClick = function { // 			this.button1.setDisabled( false ); //    		this.button2.setDisabled( false ); // 			$( '.result' ).remove; // 			$( '.back' ).remove; // 			count1 = 0; // 			count2 = 0; // 		};

// 		/** // 		 * This creates an object of our Query class. // 		 * popUpButton will popup the queryWidget when clicked. // 		 */ // 		var queryWidget = new Query;

// 		var popUpButton = new OO.ui.PopupButtonWidget( { // 			label: 'Query', // 			popup: { // 				$content: queryWidget.$element, // 				padded: true // 			} // 		} );

// 		// popUpButton will be shown on personal Navigation menu. // 		$( '#p-personal ul' ) // 			.prepend( $( '' ).append( popUpButton.$element ) ); // 	} ); // } );

// /** // * Task 2 : GSOC21 // * //  * Develop a UserScript/Gadget tutorial on MediaWiki.org similar to Wikipedia:The_Wikipedia_Adventure // * //  * Userscript using OOUI Widget // * //  * By A.Amritesh // */ // $( document ).ready( function  { // 	mw.loader.using( 'oojs-ui-widgets' ).done( function { // 		/** // 		 * This widget enables dark focus, a function that changes the colour of text // 		 * and its background when mouse enters and changes to back when leaves. // 		 * // 		 * Funfact : When popup appears, user does not see the content. // 		 * When cursor passes through it, message appears and remains. // 		 * // 		 * Try it out in different MediaWiki pages. // 		 */ // 		var popupButton = new OO.ui.PopupButtonWidget( { // 			label: 'Dark Focus', // 			classes:[ 'my-darkbtn' ], // 			popup: { // 					$content: $( ' Reload to disable. ' ) // 									.css( { // 											padding: '5px 5px', // 											margin: '5px 18px' // 									} ), // 					padded: true, // 					align: 'forwards' // 			} // 		} ); // 		/** // 		 * On clicking the button, following function gets executed. // 		 * At first, it changes the appearence of the button. // 		 * As there are mainly two different colours present in wikis, I have to use // 		 * seperate transitions for those two. // 		 */ // 		popupButton.on( 'click', function focus { // 			// This changes the colour and background of the button. // 			$( '.my-darkbtn' ).css( { // 								color: 'white', // 								background: 'black' // 		       				} ); // 			$( 'p' ).on( { // 				mouseenter: function { //    				$( this ).css( { // 								color: 'white', // 								background: 'black' // 		        			} ); // 					}, // 				mouseleave: function { // 					$( this ).css( { // 								color: 'black', // 								background: 'white' // 		       			} ); //    				} // 			} );

// 			$( 'pre, code, table' ).on( { // 				mouseenter: function { //    				$( this ).css( { // 								color: 'white', // 								background: 'black' // 		       			} ); // 				}, // 				mouseleave: function { //     				$( this ).css( { // 								color: 'black', // 								background: '#f8f9fa' // 		       			} ); //     			} // 			} ); // 		} ); // 		// popupButton will be shown on personal Navigation menu. // 		$( '#p-personal ul' ) // 			.prepend( $( '' ) // 							.append( popupButton.$element // 										.css( { // 												padding: '0.5em 0em', // 												margin: 'inherit' // 										} ) // 							) // 			); // 	} ); // } );

/** * Task 2 : GSOC21 * * Develop a UserScript/Gadget tutorial on MediaWiki.org similar to Wikipedia:The_Wikipedia_Adventure * * Userscript using OOUI Widget * * By A.Amritesh */ $( document ).ready( function {	mw.loader.using( 'oojs-ui-core' ).done( function  { /**		 * This is a Custom Widget designed around a story. * Story: The user finds an ancient scroll in a Cryptex. * It contains the message of an ancient civilization. * Cryptex is an instrument that takes care of its safety. * To unlock it, the user has to decode the ancient text in a single attempt otherwise, * it will be destroyed and humanity will never be able to know that message. */		 //This is a custom class for Cryptex. var Cryptex = function ( config ) { config = config || {};

Cryptex.parent.call( this, config ); var str = "Here lies the ancient scroll. For its saftey, it is in a Cryptex. As cryptex give only one chance, mind your answer. Otherwise it get in self-distruction mode, and humanity will be unaware of this message. ";

this.info = new OO.ui.LabelWidget( {				label: new OO.ui.HtmlSnippet( str )			} );

this.button1 = new OO.ui.ButtonWidget( {				label: 'Explore...',				flags: [ 'progressive', 'primary' ],				classes: [ 'button' ]			} ); // When 'click' is emitted from button1, onClick method will be invoked. this.button1.connect( this, { click: 'onClick' } ); // Object of this class will append info and button1. this.$element .append(					this.info.$element.css( { display: 'block', margin: '25px' } ),					this.button1.$element				); };

OO.inheritClass( Cryptex, OO.ui.Widget ); /**		 * This method is responsible for showing the ancient text and taking input. * It also contains reference to ancient language. */ 		Cryptex.prototype.onClick = function { // It removes button1 as it is no longer needed. $( '.button' ).remove; var str = "You got to see the word. Now, you have to decode it. This is the only way forward... Learn the alphabets of Atlantean language "; this.info.setLabel( new OO.ui.HtmlSnippet( str ) ); this.input = new OO.ui.TextInputWidget( {				placeholder: 'Enter to unlock...',				classes: [ 'input' ]			} ); this.button2 = new OO.ui.ButtonWidget( {				label: 'Submit...',				flags: [ 'progressive', 'primary' ],				classes: [ 'submit' ]			} ); // When 'enter' is emitted from input or 'click' is emitted from button2, // onSubmit method will be invoked. this.input.connect( this, { enter: 'onSubmit' } ); this.button2.connect( this, { click: 'onSubmit' } ); this.$element .append(					this.input.$element						.css( { width: '70%', display: 'inline-block' } ),					this.button2.$element.css( { float: 'right' } )				);		};		/**		 * This method is responsible for showing the verdict. * If it matches to the answer, message will be shown and if not * message will be destroyed. */ 		Cryptex.prototype.onSubmit = function { var str; var inputValue = this.input.getValue.toLowerCase; if( inputValue === "wonder" ) { str = 'Amazing! Matched... Here is the message on scroll: "Prosperity lies in collaboration."'; }			else { str = 'Self-Destruction mode on.... Human kind will never know this message. ';			}			// It sets new label of info. this.info.setLabel( new OO.ui.HtmlSnippet( str ) ); $( '.input' ).remove; $( '.submit' ).remove; };		// This creates an object of our Cryptex class. var cryptexWidget = new Cryptex; // popUpButton will popup the cryptexWidget when clicked. var popUpButton = new OO.ui.PopupButtonWidget( {			label: 'Cryptex',			popup: {				$content: cryptexWidget.$element,				padded: true			}		} ); // popUpButton will be shown on personal Navigation menu. $( '#p-personal ul' ) .prepend( $( '' ).append( popUpButton.$element ) ); } ); } );