|
| 1 | +const menu = (() => { |
| 2 | + let initialized, menuOpen, wrapper, body, cooked, toast; |
| 3 | + const buttons = []; |
| 4 | + |
| 5 | + function init() { |
| 6 | + if (initialized || initialized === false) return initialized; |
| 7 | + // jQuery must be initialized by now |
| 8 | + if (typeof jQuery === 'undefined') return initialized = false; |
| 9 | + $('head').append(`<style type="text/css"> |
| 10 | + .menu-backdrop { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000; background-color: rgba(0,0,0,0.4); z-index: 10; } |
| 11 | + .menu-close { float: right; color: #aaa; font-size: 28px; font-weight: bold; margin: -5px; } |
| 12 | + .menu-close:hover, .menu-close:focus { color: #FFF; text-decoration: none; cursor: pointer; } |
| 13 | + .menu-content { color: #fff; margin: 4% auto; padding: 0; border: 2px solid #888; width: 280px; background: #000 url(../images/backgrounds/2.png) center 632px; } |
| 14 | + .menu-content > * { padding: 2px 16px; } |
| 15 | + .menu-content a { color: #fff; } |
| 16 | + .menu-header { text-align: center; font-size: 30px; } |
| 17 | + .menu-footer img { height: 16px; vertical-align: middle; } |
| 18 | + .menu-body { min-height: 250px; } |
| 19 | + .menu-body ul { list-style: none; padding: 0; } |
| 20 | + .menu-body li { list-style-type: none; border: 1px solid #fff; width: 80%; text-align: center; margin: 5px auto; opacity: 1; } |
| 21 | + .menu-body li:hover { text-decoration: underline; opacity: 0.4; } |
| 22 | + </style>`); |
| 23 | + body = $('<div class="menu-body">'); |
| 24 | + wrapper = $('<div class="menu-backdrop">') |
| 25 | + .append($('<div class="menu-content">') |
| 26 | + .append( |
| 27 | + `<div class="menu-header"><span class="menu-close right">×</span>MENU</div>`, |
| 28 | + body, |
| 29 | + `<div class="menu-footer"><a href="https://git.io/fxysg" target="_blank">UnderScript</a> <a href="https://discord.gg/D8DFvrU" target="_blank"><img id="usdiscord" src="images/social/discord.png" alt="discord"></a></div>` |
| 30 | + )).on('click', (e) => { |
| 31 | + if (e.target === wrapper[0]) { |
| 32 | + close(); |
| 33 | + } |
| 34 | + }); |
| 35 | + $('body').append(wrapper); |
| 36 | + $('span.menu-close').on('click', close); |
| 37 | + return initialized = true; |
| 38 | + } |
| 39 | + function open() { |
| 40 | + if (menuOpen || !init()) return; |
| 41 | + // Generate buttons |
| 42 | + if (!cooked) { |
| 43 | + body.html(''); // Clear current buttons |
| 44 | + buttons.forEach((data) => { |
| 45 | + const button = $('<li>'); |
| 46 | + if (data.url) { |
| 47 | + // Make text a url |
| 48 | + } else { |
| 49 | + button.text(data.text); |
| 50 | + } |
| 51 | + if (typeof data.action === 'function') { |
| 52 | + button.on('click', (e) => { |
| 53 | + data.action(e); |
| 54 | + if (data.close) { |
| 55 | + close(); |
| 56 | + } |
| 57 | + }).css({ |
| 58 | + cursor: 'pointer', |
| 59 | + }); |
| 60 | + } |
| 61 | + if (data.note) { |
| 62 | + button.hover(hover.show(data.note)); |
| 63 | + } |
| 64 | + body.append(button); |
| 65 | + }); |
| 66 | + cooked = true; |
| 67 | + } |
| 68 | + wrapper.css({ display: 'block' }); |
| 69 | + menuOpen = true; |
| 70 | + if (toast) { |
| 71 | + toast.close(); |
| 72 | + } |
| 73 | + } |
| 74 | + function close() { |
| 75 | + if (!menuOpen) return; |
| 76 | + wrapper.css({ display: '' }); |
| 77 | + menuOpen = false; |
| 78 | + } |
| 79 | + function isOpen() { |
| 80 | + return menuOpen; |
| 81 | + } |
| 82 | + function addButton(button = {}) { |
| 83 | + if (!button || !button.text) throw new Error('Missing button information'); |
| 84 | + cooked = false; |
| 85 | + const { text, action, url, note } = button; |
| 86 | + const close = (button.closeMenu || button.close) === true; |
| 87 | + buttons.push({ |
| 88 | + text, action, url, close, note |
| 89 | + }); |
| 90 | + } |
| 91 | + |
| 92 | + toast = fn.infoToast({ |
| 93 | + text: 'UnderScript has a menu, press ESC to open it!', |
| 94 | + onClose: () => { |
| 95 | + toast = null; |
| 96 | + }, |
| 97 | + }, 'underscript.notice.menu', '1'); |
| 98 | + |
| 99 | + return { |
| 100 | + open, close, isOpen, addButton, |
| 101 | + }; |
| 102 | +})(); |
0 commit comments