Menus now close when anywhere is clicked.

Fixes #231.
This commit is contained in:
WrinklyNinja
2014-08-23 10:44:49 +01:00
parent ec604a9b1a
commit 6b518a4898
2 changed files with 43 additions and 57 deletions
+6 -18
View File
@@ -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
}
}));
}
},
+37 -39
View File
@@ -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){