User:Gauransh Dingwani/OOUI-Demo.js

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

function loadScripts( scripts ) { var deferreds = [], d = $.Deferred; $.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 {			// 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 ); }

loadScripts( requires ).done( function {	var mybutton = new OO.ui.ButtonWidget( { framed: false, icon: 'collapse', label: 'scroll to top', invisibleLabel: true, title: 'Icon only', id: 'mybtn' } ),

items = [], button = new OO.ui.ButtonMenuSelectWidget( {			icon: 'ellipsis',			label: 'Contents',			invisibleLabel: true,			framed: false,			title: 'Contents',			classes: [ 'button-select' ],			menu: {				items: items			}		} ); const hasContents = $( '.toc' ).length > 0;

$( '#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 menuOption = 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( menuOption );	} );

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;	} ); } );