User:A. Amritesh/OOUI-Demo.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/**
 * Task 2 : Userscript using OOUI Widget 
 * 
 * Develop a UserScript/Gadget tutorial on MediaWiki.org similar to Wikipedia:The_Wikipedia_Adventure
 *
 * 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: $( '<p> Reload to disable.</p>' )
									.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( $( '<li>' )
							.append( popupButton.$element
										.css( {
												padding: '0.5em 0em',
												margin: 'inherit' 
										} )
							)
			);
	} );
} );