From 37606dc8d238f680f7a280f892563c965cbba6fa Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Wed, 22 Aug 2018 10:54:09 -0400 Subject: [PATCH] Improvements to overlay keybinds. Added dynamic keybinder for overlays. If dismissable, the Escape key will dismiss the overlay. If not dismissable, Enter & Escape will trigger the main button. If the selected account is not valid and you have more than one other account, you may cancel logging in to return to the original error overlay. Updated electron-builder@20.28.2. Fixed minor bug where the background of the settings UI was set to transparent. This occurred if the validation error overlay was shown on the settings UI, and you chose the login option. --- app/assets/js/authmanager.js | 1 - app/assets/js/scripts/landing.js | 4 +- app/assets/js/scripts/login.js | 6 +++ app/assets/js/scripts/overlay.js | 66 ++++++++++++++++++++++--------- app/assets/js/scripts/uibinder.js | 12 +++++- app/overlay.ejs | 12 +++--- package-lock.json | 52 ++++++++++++------------ package.json | 2 +- 8 files changed, 99 insertions(+), 56 deletions(-) diff --git a/app/assets/js/authmanager.js b/app/assets/js/authmanager.js index 64c8427..f335ea9 100644 --- a/app/assets/js/authmanager.js +++ b/app/assets/js/authmanager.js @@ -66,7 +66,6 @@ exports.removeAccount = async function(uuid){ exports.validateSelected = async function(){ const current = ConfigManager.getSelectedAccount() const isValid = await Mojang.validate(current.accessToken, ConfigManager.getClientToken()) - console.log(isValid) if(!isValid){ try { const session = await Mojang.refresh(current.accessToken, ConfigManager.getClientToken()) diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 4f6d95c..689da35 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -145,10 +145,10 @@ function updateSelectedServer(serverName){ } // Real text is set in uibinder.js on distributionIndexDone. updateSelectedServer('Loading..') -server_selection_button.addEventListener('click', (e) => { +server_selection_button.onclick = (e) => { e.target.blur() toggleServerSelection(true) -}) +} // Update Mojang Status Color const refreshMojangStatuses = async function(){ diff --git a/app/assets/js/scripts/login.js b/app/assets/js/scripts/login.js index 61ea765..e73defa 100644 --- a/app/assets/js/scripts/login.js +++ b/app/assets/js/scripts/login.js @@ -220,6 +220,7 @@ function resolveError(err){ let loginViewOnSuccess = VIEWS.landing let loginViewOnCancel = VIEWS.settings +let loginViewCancelHandler function loginCancelEnabled(val){ if(val){ @@ -232,6 +233,10 @@ function loginCancelEnabled(val){ loginCancelButton.onclick = (e) => { switchView(getCurrentView(), loginViewOnCancel, 500, 500, () => { loginCancelEnabled(false) + if(loginViewCancelHandler != null){ + loginViewCancelHandler() + loginViewCancelHandler = null + } }) } @@ -260,6 +265,7 @@ loginButton.addEventListener('click', () => { } loginViewOnSuccess = VIEWS.landing // Reset this for good measure. loginCancelEnabled(false) // Reset this for good measure. + loginViewCancelHandler = null // Reset this for good measure. loginUsername.value = '' loginPassword.value = '' $('.circle-loader').toggleClass('load-complete') diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js index 6e8151e..eab9f32 100644 --- a/app/assets/js/scripts/overlay.js +++ b/app/assets/js/scripts/overlay.js @@ -13,6 +13,51 @@ function isOverlayVisible(){ return document.getElementById('main').hasAttribute('overlay') } +let overlayHandlerContent + +/** + * Overlay keydown handler for a non-dismissable overlay. + * + * @param {KeyboardEvent} e The keydown event. + */ +function overlayKeyHandler (e){ + if(e.key === 'Enter' || e.key === 'Escape'){ + document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click() + } +} +/** + * Overlay keydown handler for a dismissable overlay. + * + * @param {KeyboardEvent} e The keydown event. + */ +function overlayKeyDismissableHandler (e){ + if(e.key === 'Enter'){ + document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click() + } else if(e.key === 'Escape'){ + document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEsc')[0].click() + } +} + +/** + * Bind overlay keydown listeners for escape and exit. + * + * @param {boolean} state Whether or not to add new event listeners. + * @param {string} content The overlay content which will be shown. + * @param {boolean} dismissable Whether or not the overlay is dismissable + */ +function bindOverlayKeys(state, content, dismissable){ + overlayHandlerContent = content + document.removeEventListener('keydown', overlayKeyHandler) + document.removeEventListener('keydown', overlayKeyDismissableHandler) + if(state){ + if(dismissable){ + document.addEventListener('keydown', overlayKeyDismissableHandler) + } else { + document.addEventListener('keydown', overlayKeyHandler) + } + } +} + /** * Toggle the visibility of the overlay. * @@ -28,6 +73,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte content = dismissable dismissable = false } + bindOverlayKeys(toggleState, content, dismissable) if(toggleState){ document.getElementById('main').setAttribute('overlay', true) // Make things untabbable. @@ -73,7 +119,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte function toggleServerSelection(toggleState){ prepareServerSelectionList() - toggleOverlay(toggleState, 'serverSelectContent') + toggleOverlay(toggleState, true, 'serverSelectContent') } /** @@ -125,24 +171,6 @@ function setDismissHandler(handler){ /* Server Select View */ -document.addEventListener('keydown', (e) => { - if(document.getElementById('serverSelectContent').style.display !== 'none'){ - console.debug('ServSelLi Keydown Called:', document.getElementById('serverSelectContent').style.display) - if(e.key === 'Escape'){ - document.getElementById('serverSelectCancel').click() - } else if(e.key === 'Enter'){ - document.getElementById('serverSelectConfirm').click() - } - } else if(document.getElementById('accountSelectContent').style.display !== 'none'){ - console.debug('ServSelLi Keydown Called:', document.getElementById('accountSelectContent').style.display) - if(e.key === 'Escape'){ - document.getElementById('accountSelectCancel').click() - } else if(e.key === 'Enter'){ - document.getElementById('accountSelectConfirm').click() - } - } -}) - document.getElementById('serverSelectConfirm').addEventListener('click', () => { const listings = document.getElementsByClassName('serverListing') for(let i=0; i 0){ + loginViewCancelHandler = () => { + ConfigManager.addAuthAccount(selectedAcc.uuid, selectedAcc.accessToken, selectedAcc.username, selectedAcc.displayName) + ConfigManager.save() + validateSelectedAccount() + } + loginCancelEnabled(true) + } toggleOverlay(false) + switchView(getCurrentView(), VIEWS.login) }) setDismissHandler(() => { if(accLen > 1){ prepareAccountSelectionList() $('#overlayContent').fadeOut(250, () => { + bindOverlayKeys(true, 'accountSelectContent', true) $('#accountSelectContent').fadeIn(250) }) } else { diff --git a/app/overlay.ejs b/app/overlay.ejs index 03eb237..0c18aef 100644 --- a/app/overlay.ejs +++ b/app/overlay.ejs @@ -7,9 +7,9 @@
- +
- +
@@ -21,9 +21,9 @@
- +
- +
@@ -31,9 +31,9 @@ Lorem Ipsum:
Finis Illud Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..
- +
- +
diff --git a/package-lock.json b/package-lock.json index 6976c97..8ad282d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -105,16 +105,16 @@ "dev": true }, "app-builder-lib": { - "version": "20.28.1", - "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-20.28.1.tgz", - "integrity": "sha512-OjPTarC27/P3312dNu8N6k2X1r6QGr/q243+bM+DnXddZ6qZQQDsxJz5ONW8b1chRErTUZDRaKQ8RdAYjUIbxw==", + "version": "20.28.2", + "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-20.28.2.tgz", + "integrity": "sha512-oSnjjcLWPyJDEm8SW1AAI1fpKixf+ptx/renfIRJYdkeRi0frZikqSjgSKKIPVNnmnDIhAtMbYdNk0Kwx41/sg==", "dev": true, "requires": { "7zip-bin": "~4.0.2", "app-builder-bin": "2.1.2", "async-exit-hook": "^2.0.1", "bluebird-lst": "^1.0.5", - "builder-util": "6.1.1", + "builder-util": "6.1.2", "builder-util-runtime": "4.4.1", "chromium-pickle-js": "^0.2.0", "debug": "^3.1.0", @@ -123,7 +123,7 @@ "electron-publish": "20.28.0", "fs-extra-p": "^4.6.1", "hosted-git-info": "^2.7.1", - "is-ci": "^1.1.0", + "is-ci": "^1.2.0", "isbinaryfile": "^3.0.3", "js-yaml": "^3.12.0", "lazy-val": "^1.0.3", @@ -405,9 +405,9 @@ "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" }, "builder-util": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-6.1.1.tgz", - "integrity": "sha512-n+ah8X8H+DU1YPQHCW9ayLb2g8+KENtRfPtIei0UiqP7p+pURKzL3/sMsxmu4S7mbGQBHV8R6PMu/axBjxy+Ow==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-6.1.2.tgz", + "integrity": "sha512-ZtOOPnzKmdJSXTo2yEWatZrkftBwOIOzc4lvqSoGf6yz9SdLsjPLvh0E1sA0Xohrio+Mz7AVB0XT67GgfZ6/hw==", "dev": true, "requires": { "7zip-bin": "~4.0.2", @@ -417,7 +417,7 @@ "chalk": "^2.4.1", "debug": "^3.1.0", "fs-extra-p": "^4.6.1", - "is-ci": "^1.1.0", + "is-ci": "^1.2.0", "js-yaml": "^3.12.0", "lazy-val": "^1.0.3", "semver": "^5.5.0", @@ -555,9 +555,9 @@ "dev": true }, "ci-info": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.3.0.tgz", - "integrity": "sha512-mPdvoljUhH3Feai3dakD3bwYl/8I0tSo16Ge2W+tY88yfYDKGVnXV2vFxZC8VGME01CYp+DaAZnE93VHYVapnA==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.4.0.tgz", + "integrity": "sha512-Oqmw2pVfCl8sCL+1QgMywPfdxPJPkC51y4usw0iiE2S9qnEOAqXy8bwl1CpMpnoU39g4iKJTz6QZj+28FvOnjQ==", "dev": true }, "circular-json": { @@ -910,19 +910,19 @@ } }, "electron-builder": { - "version": "20.28.1", - "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-20.28.1.tgz", - "integrity": "sha512-OKj107B2fV0ftOFOjQLyuKl6n+R8KJOGgGUrHaW4EI8bwqycTq67bgCc0xwPruHBWDX/Kg3tMYBRLbjUNw+6Qw==", + "version": "20.28.2", + "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-20.28.2.tgz", + "integrity": "sha512-HdHp4Gsod+E2hXAYu1/Jww+JeJrRSdp2HA4yr03RqH29Hdluuep7bzmIcTCiAcibdYBzTojY3jmqwQJRUX0DBQ==", "dev": true, "requires": { - "app-builder-lib": "20.28.1", + "app-builder-lib": "20.28.2", "bluebird-lst": "^1.0.5", - "builder-util": "6.1.1", + "builder-util": "6.1.2", "builder-util-runtime": "4.4.1", "chalk": "^2.4.1", "dmg-builder": "5.3.0", "fs-extra-p": "^4.6.1", - "is-ci": "^1.1.0", + "is-ci": "^1.2.0", "lazy-val": "^1.0.3", "read-config-file": "3.1.2", "sanitize-filename": "^1.6.1", @@ -1652,12 +1652,12 @@ } }, "is-ci": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.1.0.tgz", - "integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.0.tgz", + "integrity": "sha512-plgvKjQtalH2P3Gytb7L61Lmz95g2DlpzFiQyRSFew8WoJKxtKRzrZMeyRN2supblm3Psc8OQGy7Xjb6XG11jw==", "dev": true, "requires": { - "ci-info": "^1.0.0" + "ci-info": "^1.3.0" } }, "is-finite": { @@ -2480,15 +2480,15 @@ }, "dependencies": { "ajv": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz", - "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz", + "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==", "dev": true, "requires": { "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.1" + "uri-js": "^4.2.2" } }, "fast-deep-equal": { diff --git a/package.json b/package.json index 4acbb1d..939d37c 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ }, "devDependencies": { "electron": "^2.0.7", - "electron-builder": "^20.28.1", + "electron-builder": "^20.28.2", "eslint": "^5.4.0" }, "build": {