User:A. Amritesh/OOUI-Demo.js

/** * 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' } )							)			);	} ); } );