User:A. Amritesh/OOUI-new-Demo.js

/** * Task 2 : GSOC21 * * Develop a UserScript/Gadget tutorial on MediaWiki.org similar to Wikipedia:The_Wikipedia_Adventure * * Userscript using Custom 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; // The image used here is hosted on A. Amritesh Google Drive. // To see image properly, please use your local setup. 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 ) ); } ); } );