diff --git a/themes/gruvbox/js/accounts.js b/themes/gruvbox/js/accounts.js index bce9f0e..ef307ac 100644 --- a/themes/gruvbox/js/accounts.js +++ b/themes/gruvbox/js/accounts.js @@ -54,22 +54,31 @@ class Accounts { } } + _setKeydown() { + var dropdown = this._accountsList.querySelector(".dropdown") + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide") + this._accountsButton.focus() + } + }) + } + _setButton() { - var dropdown = this._accountsList.querySelector(".dropdown") - this._accountsButton.addEventListener("click", (ev) => { - ev.stopPropagation() - if (dropdown.classList.contains("hide")) { - dropdown.classList.remove("hide") - } else { - dropdown.classList.add("hide") - } - }) - var screen = document.querySelector("#screen") - screen.addEventListener("click", (ev) => { - if (ev.target != dropdown) { - dropdown.classList.add("hide") - } - }) + var dropdown = this._accountsList.querySelector(".dropdown") + document.querySelector("#screen").addEventListener("click", (ev) => { + if (ev.target == this._accountsButton || ev.target.parentElement == this._accountsButton) { + dropdown.classList.toggle("hide") + } else + if (ev.target != this._accountsList && ev.target.closest(".dropdown") == null) { + dropdown.classList.add("hide") + } + }) + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if (!dropdown.contains(document.activeElement) && document.activeElement != this._accountsButton) { + dropdown.classList.add("hide") + } + }) } _updateDefaults(userObject) { @@ -86,6 +95,7 @@ class Accounts { this._updateOnStartup() this._setAccountList() this._setButton() + this._setKeydown() } } diff --git a/themes/gruvbox/js/sessions.js b/themes/gruvbox/js/sessions.js index 2555659..86adcf3 100644 --- a/themes/gruvbox/js/sessions.js +++ b/themes/gruvbox/js/sessions.js @@ -50,22 +50,31 @@ class Sessions { } } + _setKeydown() { + var dropdown = this._sessionList.querySelector(".dropdown") + dropdown.addEventListener("keydown", (ev) => { + if (ev.keyCode == 27) { + dropdown.classList.add("hide") + this._sessionsButton.focus() + } + }) + } + _setButton() { var dropdown = this._sessionList.querySelector(".dropdown") - this._sessionsButton.addEventListener("click", (ev) => { - ev.stopPropagation() - if (dropdown.classList.contains("hide")) { - dropdown.classList.remove("hide") - } else { - dropdown.classList.add("hide") - } - }) - var screen = document.querySelector("#screen") - screen.addEventListener("click", (ev) => { - if (ev.target != dropdown) { - dropdown.classList.add("hide") - } - }) + document.querySelector("#screen").addEventListener("click", (ev) => { + if (ev.target == this._sessionsButton || ev.target.parentElement == this._sessionsButton) { + dropdown.classList.toggle("hide") + } else + if (ev.target != dropdown && ev.target.closest(".dropdown") == null) { + dropdown.classList.add("hide") + } + }) + document.querySelector("#screen").addEventListener("focusin", (ev) => { + if (!dropdown.contains(document.activeElement) && document.activeElement != this._sessionsButton) { + dropdown.classList.add("hide") + } + }) } @@ -80,5 +89,6 @@ class Sessions { this._updateOnStartup() this._setSessionList() this._setButton() + this._setKeydown() } }