diff --git a/resources/report/js/custom.js b/resources/report/js/custom.js index d8d3100e..ec746c83 100644 --- a/resources/report/js/custom.js +++ b/resources/report/js/custom.js @@ -79,18 +79,6 @@ var pluginMenuProto = Object.create(HTMLElement.prototype, { } }, - onClick: { - value: function(evt) { - var menus = document.getElementsByTagName('plugin-menu'); - - for (var i = 0; i < menus.length; ++i) { - if (!evt.newMenu) { - menus[i].parentElement.removeChild(menus[i]); - } - } - } - }, - createdCallback: { value: function() { @@ -101,9 +89,6 @@ var pluginMenuProto = Object.create(HTMLElement.prototype, { this.id = 'activePluginMenu'; - /* Add an event listener so that the menu gets closed. */ - main.addEventListener('click', this.onClick, false); - /* Add event listeners for the menu items. */ this.shadowRoot.getElementById('editMetadata').addEventListener('click', this.onMenuItemClick, false); this.shadowRoot.getElementById('copyMetadata').addEventListener('click', this.onMenuItemClick, false); @@ -113,8 +98,6 @@ var pluginMenuProto = Object.create(HTMLElement.prototype, { detachedCallback: { value: function() { - /* Remove menu close listener. */ - document.getElementById('main').removeEventListener('click', this.onClick, false); /* Remove event listeners for the menu items. */ this.shadowRoot.getElementById('editMetadata').removeEventListener('click', this.onMenuItemClick, false); @@ -526,7 +509,12 @@ var pluginCardProto = Object.create(HTMLElement.prototype, { /* To prevent the click event closing this menu just after it was opened, stop the current event and send off a new one. */ - menu.dispatchEvent(new CustomEvent('click', { newMenu: true })); + document.body.dispatchEvent(new CustomEvent('click', { + bubbles: true, + detail: { + newMenu: menu + } + })); } }, diff --git a/resources/report/js/script.js b/resources/report/js/script.js index 3f4e0a5b..4e2694cb 100644 --- a/resources/report/js/script.js +++ b/resources/report/js/script.js @@ -228,7 +228,7 @@ function updateSelectedGame() { /* Highlight game in menu. Could use fa-chevron-right instead. */ var gameMenuItems = document.getElementById('gameMenu').children[0].children; for (var i = 0; i < gameMenuItems.length; ++i) { - if (gameMenuItems[i].getAttribute('data-target') != loot.game.folder) { + if (gameMenuItems[i].getAttribute('data-folder') != loot.game.folder) { gameMenuItems[i].getElementsByClassName('fa')[0].classList.toggle('fa-angle-double-right', false); } else { gameMenuItems[i].getElementsByClassName('fa')[0].classList.toggle('fa-angle-double-right', true); @@ -293,7 +293,7 @@ function changeGame(evt) { var request = JSON.stringify({ name: 'changeGame', args: [ - evt.currentTarget.getAttribute('data-target') + evt.currentTarget.getAttribute('data-folder') ] }); loot.query(request).then(function(result){ @@ -584,42 +584,36 @@ function areSettingsValid() { } return true; } -function toggleMenu(evt) { - var target = document.getElementById('currentMenu'); - if (!target) { - target = evt.target.firstElementChild; +/* Close any open menus. */ +function onBodyClick(evt) { + var toolbarMenus = document.querySelectorAll('header > ol > li > ol'); + for (var i = 0; i < toolbarMenus.length; ++i) { + if (!evt.detail.newMenu || evt.detail.newMenu != toolbarMenus[i]) { + hideElement(toolbarMenus[i]); + } } - if (isVisible(target)) { - hideElement(target); - /* Also remove event listeners to any dynamically-generated items. */ - var elements = target.querySelectorAll('[data-action]:not(.disabled)'); - for (var i = 0; i < elements.length; ++i) { - var action = elements[i].getAttribute('data-action'); - if (action == 'change-game') { - elements[i].removeEventListener('click', changeGame, false); - } + var pluginMenus = document.getElementsByTagName('plugin-menu'); + for (var i = 0; i < pluginMenus.length; ++i) { + if (!evt.detail.newMenu || evt.detail.newMenu != pluginMenus[i]) { + pluginMenus[i].parentElement.removeChild(pluginMenus[i]); } + } +} +function openMenu(evt) { + if (!isVisible(evt.target.firstElementChild)) { + showElement(evt.target.firstElementChild) - /* Also add an event listener to the body to close the menu if anywhere is clicked. */ - target.id = ''; - document.body.removeEventListener('click', toggleMenu, false); - } else { - showElement(target); - - /* Also attach event listeners to any dynamically-generated items. */ - var elements = target.querySelectorAll('[data-action]:not(.disabled)'); - for (var i = 0; i < elements.length; ++i) { - var action = elements[i].getAttribute('data-action'); - if (action == 'change-game') { - elements[i].addEventListener('click', changeGame, false); - } - } - - /* Also add an event listener to the body to close the menu if anywhere is clicked. */ - target.id = 'currentMenu'; - document.body.addEventListener('click', toggleMenu, false); + /* To prevent the click event closing this menu just after it was + opened, stop the current event and send off a new one. */ evt.stopPropagation(); + + document.body.dispatchEvent(new CustomEvent('click', { + bubbles: true, + detail: { + newMenu: evt.target.firstElementChild + } + })); } } function toggleFiltersList(evt) { @@ -651,6 +645,7 @@ function updateSettingsUI() { gameSelect.removeChild(gameSelect.lastElementChild); } while (gameMenu.firstElementChild) { + gameMenu.firstElementChild.removeEventListener('click', changeGame, false); gameMenu.removeChild(gameMenu.firstElementChild); } gameTable.clear(); @@ -663,11 +658,12 @@ function updateSettingsUI() { gameSelect.appendChild(option); var li = document.createElement('li'); - li.setAttribute('data-action', 'change-game'); - li.setAttribute('data-target', loot.settings.games[i].folder); + li.setAttribute('data-folder', loot.settings.games[i].folder); if (loot.installedGames.indexOf(loot.settings.games[i].folder) == -1) { li.classList.toggle('disabled', true); + } else { + li.addEventListener('click', changeGame, false); } var icon = document.createElement('span'); @@ -823,13 +819,13 @@ function setupEventHandlers() { document.getElementById('showOnlyConflicts').addEventListener('click', togglePlugins, false); /* Set up handlers for buttons. */ - document.getElementById('fileMenu').addEventListener('click', toggleMenu, false); + document.getElementById('fileMenu').addEventListener('click', openMenu, false); document.getElementById('redatePluginsButton').addEventListener('click', redatePlugins, false); document.getElementById('openLogButton').addEventListener('click', openLogLocation, false); document.getElementById('wipeUserlistButton').addEventListener('click', clearAllMetadata, false); - document.getElementById('gameMenu').addEventListener('click', toggleMenu, false); + document.getElementById('gameMenu').addEventListener('click', openMenu, false); document.getElementById('settingsButton').addEventListener('click', showSettingsDialog, false); - document.getElementById('helpMenu').addEventListener('click', toggleMenu, false); + document.getElementById('helpMenu').addEventListener('click', openMenu, false); document.getElementById('helpButton').addEventListener('click', openReadme, false); document.getElementById('aboutButton').addEventListener('click', showAboutDialog, false); document.getElementById('updateMasterlistButton').addEventListener('click', updateMasterlist, false); @@ -846,7 +842,6 @@ function setupEventHandlers() { /* Set up about dialog handlers. */ document.getElementById('about').getElementsByTagName('button')[0].addEventListener('click', closeAboutDialog, false); - /* Set up event handler for hover text. */ var hoverTargets = document.querySelectorAll('[title]'); for (var i = 0; i < hoverTargets.length; ++i) { @@ -859,6 +854,9 @@ function setupEventHandlers() { searchBox.addEventListener('input', startSearch, false); searchBox.addEventListener('search', startSearch, false); window.addEventListener('keyup', focusSearch, false); + + /* Set up handler for closing menus. */ + document.body.addEventListener('click', onBodyClick, false); } function initVars() { loot.query('getVersion').then(function(result){