User:Gauransh Dingwani/OOUI-Demo.js

function loadScripts( scripts ) { var deferreds = []; $.each( scripts, function ( i, script ) {		// External script, use $.getScript		if ( script.match( /^(https?:|\/\/)/ ) ) {			deferreds.push( $.getScript( script ) );			// Use mw.using, convert callbacks to Deferreds		} else {			var d = $.Deferred;			// TODO: make only one mw.loader.using call, passing an array of module names			mw.loader.using( script, d.resolve, d.reject );			deferreds.push( d );		}	} ); return $.when.apply( $, deferreds ); }

var requires = [ 'oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-toolbars', 'oojs-ui-windows', 'oojs-ui.styles.icons-interactions' ];

loadScripts( requires ).done( function {	const hasContents = $( '.toc' ).length > 0;

var mybutton = new OO.ui.ButtonWidget( {			framed: false,			icon: 'collapse',			label: 'scroll to top',			invisibleLabel: true,			title: 'Icon only',			id: 'mybtn'		} ), items = []; $( '#content' ).append( mybutton.$element ); $( '#mybtn' ).css( {		display: 'none',		position: 'fixed',		bottom: '80px',		right: '80px',		'background-color': 'lightslategray',		'border-radius': '50px',		'z-index': '1000'	} );

function scrollFunction { if (			document.body.scrollTop > 20 ||     document.documentElement.scrollTop > 20		) { $( '#mybtn' ).show; } else { $( '#mybtn' ).hide; }	}

// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function { scrollFunction; };

// When the user clicks on the button, scroll to the top of the document function topFunction { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }

mybutton.on( 'click', function {		topFunction;	} ); $( '.toclevel-1' ).each( function {		var button = new OO.ui.MenuOptionWidget( { framed: false, label: $( this ).children[ 0 ].children[ 0 ].innerText + ' ' +       $( this ).children[ 0 ].children[ 1 ].innerText, data: $( this ).children[ 0 ].href } );		items.push( button );	} );

var button = new OO.ui.ButtonMenuSelectWidget( {		icon: 'ellipsis',		label: 'Contents',		invisibleLabel: true,		framed: false,		title: 'Contents',		classes: [ 'button-select' ],		menu: {			items: items		}	} ); if ( hasContents ) { $( '#content' ).append( button.$element ); }	$( '.button-select' ).css( {		position: 'fixed',		top: '170px',		left: '140px',		'background-color': 'lightslategray',		'border-radius': '50px',		'z-index': '1000'	} ); button.getMenu.on( 'choose', function ( menuOption ) {		var url = menuOption.getData;		window.location.href = url;	} ); } );