User:Gauransh Dingwani/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.

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