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 {  hasContents = $('.toc').length > 0  numContent = $('.toclevel-1').length

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

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

function scrollFunction { if (     $('#mybtn').is(":hidden") && ( document.documentElement.scrollTop > 20)   ) { $('#mybtn').show } else if($('#mybtn').is(":visible") && ( document.documentElement.scrollTop < 20)) { $('#mybtn').hide } }

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

var items = [] $('.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  }) })