Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Improvements to overlay keybinds.

Browse Source 
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.
This commit is contained in:
Daniel Scalzi 2018-08-22 10:54:09 -04:00
parent afe69a21c6
commit 37606dc8d2
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
8 changed files with 99 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/js/authmanager.js
View File

@ -66,7 +66,6 @@ exports.removeAccount = async function(uuid){
exports.validateSelected = async function(){ exports.validateSelected = async function(){
const current = ConfigManager.getSelectedAccount() const current = ConfigManager.getSelectedAccount()
const isValid = await Mojang.validate(current.accessToken, ConfigManager.getClientToken()) const isValid = await Mojang.validate(current.accessToken, ConfigManager.getClientToken())
console.log(isValid)
if(!isValid){ if(!isValid){
try { try {
const session = await Mojang.refresh(current.accessToken, ConfigManager.getClientToken()) const session = await Mojang.refresh(current.accessToken, ConfigManager.getClientToken())

4
app/assets/js/scripts/landing.js
View File

@ -145,10 +145,10 @@ function updateSelectedServer(serverName){
} }
// Real text is set in uibinder.js on distributionIndexDone. // Real text is set in uibinder.js on distributionIndexDone.
updateSelectedServer('Loading..') updateSelectedServer('Loading..')
server_selection_button.addEventListener('click', (e) => { server_selection_button.onclick = (e) => {
e.target.blur() e.target.blur()
toggleServerSelection(true) toggleServerSelection(true)
}) }
// Update Mojang Status Color // Update Mojang Status Color
const refreshMojangStatuses = async function(){ const refreshMojangStatuses = async function(){

6
app/assets/js/scripts/login.js
View File

@ -220,6 +220,7 @@ function resolveError(err){
let loginViewOnSuccess = VIEWS.landing let loginViewOnSuccess = VIEWS.landing
let loginViewOnCancel = VIEWS.settings let loginViewOnCancel = VIEWS.settings
let loginViewCancelHandler
function loginCancelEnabled(val){ function loginCancelEnabled(val){
if(val){ if(val){
@ -232,6 +233,10 @@ function loginCancelEnabled(val){
loginCancelButton.onclick = (e) => { loginCancelButton.onclick = (e) => {
switchView(getCurrentView(), loginViewOnCancel, 500, 500, () => { switchView(getCurrentView(), loginViewOnCancel, 500, 500, () => {
loginCancelEnabled(false) loginCancelEnabled(false)
if(loginViewCancelHandler != null){
loginViewCancelHandler()
loginViewCancelHandler = null
}
}) })
} }
@ -260,6 +265,7 @@ loginButton.addEventListener('click', () => {
} }
loginViewOnSuccess = VIEWS.landing // Reset this for good measure. loginViewOnSuccess = VIEWS.landing // Reset this for good measure.
loginCancelEnabled(false) // Reset this for good measure. loginCancelEnabled(false) // Reset this for good measure.
loginViewCancelHandler = null // Reset this for good measure.
loginUsername.value = '' loginUsername.value = ''
loginPassword.value = '' loginPassword.value = ''
$('.circle-loader').toggleClass('load-complete') $('.circle-loader').toggleClass('load-complete')

66
app/assets/js/scripts/overlay.js
View File

@ -13,6 +13,51 @@ function isOverlayVisible(){
return document.getElementById('main').hasAttribute('overlay') 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. * Toggle the visibility of the overlay.
* *
@ -28,6 +73,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
content = dismissable content = dismissable
dismissable = false dismissable = false
} }
bindOverlayKeys(toggleState, content, dismissable)
if(toggleState){ if(toggleState){
document.getElementById('main').setAttribute('overlay', true) document.getElementById('main').setAttribute('overlay', true)
// Make things untabbable. // Make things untabbable.
@ -73,7 +119,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
function toggleServerSelection(toggleState){ function toggleServerSelection(toggleState){
prepareServerSelectionList() prepareServerSelectionList()
toggleOverlay(toggleState, 'serverSelectContent') toggleOverlay(toggleState, true, 'serverSelectContent')
} }
/** /**
@ -125,24 +171,6 @@ function setDismissHandler(handler){
/* Server Select View */ /* 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', () => { document.getElementById('serverSelectConfirm').addEventListener('click', () => {
const listings = document.getElementsByClassName('serverListing') const listings = document.getElementsByClassName('serverListing')
for(let i=0; i<listings.length; i++){ for(let i=0; i<listings.length; i++){

12
app/assets/js/scripts/uibinder.js
View File

@ -336,13 +336,23 @@ async function validateSelectedAccount(){
document.getElementById('loginUsername').value = selectedAcc.username document.getElementById('loginUsername').value = selectedAcc.username
validateEmail(selectedAcc.username) validateEmail(selectedAcc.username)
loginViewOnSuccess = getCurrentView() loginViewOnSuccess = getCurrentView()
switchView(getCurrentView(), VIEWS.login) loginViewOnCancel = getCurrentView()
if(accLen > 0){
loginViewCancelHandler = () => {
ConfigManager.addAuthAccount(selectedAcc.uuid, selectedAcc.accessToken, selectedAcc.username, selectedAcc.displayName)
ConfigManager.save()
validateSelectedAccount()
}
loginCancelEnabled(true)
}
toggleOverlay(false) toggleOverlay(false)
switchView(getCurrentView(), VIEWS.login)
}) })
setDismissHandler(() => { setDismissHandler(() => {
if(accLen > 1){ if(accLen > 1){
prepareAccountSelectionList() prepareAccountSelectionList()
$('#overlayContent').fadeOut(250, () => { $('#overlayContent').fadeOut(250, () => {
bindOverlayKeys(true, 'accountSelectContent', true)
$('#accountSelectContent').fadeIn(250) $('#accountSelectContent').fadeIn(250)
}) })
} else { } else {

12
app/overlay.ejs
View File

@ -7,9 +7,9 @@
</div> </div>
</div> </div>
<div id="serverSelectActions"> <div id="serverSelectActions">
<button id="serverSelectConfirm" type="submit">Select</button> <button id="serverSelectConfirm" class="overlayKeybindEnter" type="submit">Select</button>
<div id="serverSelectCancelWrapper"> <div id="serverSelectCancelWrapper">
<button id="serverSelectCancel">Cancel</button> <button id="serverSelectCancel" class="overlayKeybindEsc">Cancel</button>
</div> </div>
</div> </div>
</div> </div>
@ -21,9 +21,9 @@
</div> </div>
</div> </div>
<div id="accountSelectActions"> <div id="accountSelectActions">
<button id="accountSelectConfirm" type="submit">Select</button> <button id="accountSelectConfirm" class="overlayKeybindEnter" type="submit">Select</button>
<div id="accountSelectCancelWrapper"> <div id="accountSelectCancelWrapper">
<button id="accountSelectCancel">Cancel</button> <button id="accountSelectCancel" class="overlayKeybindEsc">Cancel</button>
</div> </div>
</div> </div>
</div> </div>
@ -31,9 +31,9 @@
<span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span> <span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
<span id="overlayDesc">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..</span> <span id="overlayDesc">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..</span>
<div id="overlayActionContainer"> <div id="overlayActionContainer">
<button id="overlayAcknowledge">Conare Iterum</button> <button id="overlayAcknowledge" class="overlayKeybindEnter">Conare Iterum</button>
<div id="overlayDismissWrapper"> <div id="overlayDismissWrapper">
<button id="overlayDismiss" style="display: none;">Dismiss</button> <button id="overlayDismiss" style="display: none;" class="overlayKeybindEsc">Dismiss</button>
</div> </div>
</div> </div>
</div> </div>

52
package-lock.json generated
View File

@ -105,16 +105,16 @@
"dev": true "dev": true
}, },
"app-builder-lib": { "app-builder-lib": {
"version": "20.28.1", "version": "20.28.2",
"resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-20.28.1.tgz", "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-20.28.2.tgz",
"integrity": "sha512-OjPTarC27/P3312dNu8N6k2X1r6QGr/q243+bM+DnXddZ6qZQQDsxJz5ONW8b1chRErTUZDRaKQ8RdAYjUIbxw==", "integrity": "sha512-oSnjjcLWPyJDEm8SW1AAI1fpKixf+ptx/renfIRJYdkeRi0frZikqSjgSKKIPVNnmnDIhAtMbYdNk0Kwx41/sg==",
"dev": true, "dev": true,
"requires": { "requires": {
"7zip-bin": "~4.0.2", "7zip-bin": "~4.0.2",
"app-builder-bin": "2.1.2", "app-builder-bin": "2.1.2",
"async-exit-hook": "^2.0.1", "async-exit-hook": "^2.0.1",
"bluebird-lst": "^1.0.5", "bluebird-lst": "^1.0.5",
"builder-util": "6.1.1", "builder-util": "6.1.2",
"builder-util-runtime": "4.4.1", "builder-util-runtime": "4.4.1",
"chromium-pickle-js": "^0.2.0", "chromium-pickle-js": "^0.2.0",
"debug": "^3.1.0", "debug": "^3.1.0",
@ -123,7 +123,7 @@
"electron-publish": "20.28.0", "electron-publish": "20.28.0",
"fs-extra-p": "^4.6.1", "fs-extra-p": "^4.6.1",
"hosted-git-info": "^2.7.1", "hosted-git-info": "^2.7.1",
"is-ci": "^1.1.0", "is-ci": "^1.2.0",
"isbinaryfile": "^3.0.3", "isbinaryfile": "^3.0.3",
"js-yaml": "^3.12.0", "js-yaml": "^3.12.0",
"lazy-val": "^1.0.3", "lazy-val": "^1.0.3",
@ -405,9 +405,9 @@
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
}, },
"builder-util": { "builder-util": {
"version": "6.1.1", "version": "6.1.2",
"resolved": "https://registry.npmjs.org/builder-util/-/builder-util-6.1.1.tgz", "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-6.1.2.tgz",
"integrity": "sha512-n+ah8X8H+DU1YPQHCW9ayLb2g8+KENtRfPtIei0UiqP7p+pURKzL3/sMsxmu4S7mbGQBHV8R6PMu/axBjxy+Ow==", "integrity": "sha512-ZtOOPnzKmdJSXTo2yEWatZrkftBwOIOzc4lvqSoGf6yz9SdLsjPLvh0E1sA0Xohrio+Mz7AVB0XT67GgfZ6/hw==",
"dev": true, "dev": true,
"requires": { "requires": {
"7zip-bin": "~4.0.2", "7zip-bin": "~4.0.2",
@ -417,7 +417,7 @@
"chalk": "^2.4.1", "chalk": "^2.4.1",
"debug": "^3.1.0", "debug": "^3.1.0",
"fs-extra-p": "^4.6.1", "fs-extra-p": "^4.6.1",
"is-ci": "^1.1.0", "is-ci": "^1.2.0",
"js-yaml": "^3.12.0", "js-yaml": "^3.12.0",
"lazy-val": "^1.0.3", "lazy-val": "^1.0.3",
"semver": "^5.5.0", "semver": "^5.5.0",
@ -555,9 +555,9 @@
"dev": true "dev": true
}, },
"ci-info": { "ci-info": {
"version": "1.3.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.3.0.tgz", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.4.0.tgz",
"integrity": "sha512-mPdvoljUhH3Feai3dakD3bwYl/8I0tSo16Ge2W+tY88yfYDKGVnXV2vFxZC8VGME01CYp+DaAZnE93VHYVapnA==", "integrity": "sha512-Oqmw2pVfCl8sCL+1QgMywPfdxPJPkC51y4usw0iiE2S9qnEOAqXy8bwl1CpMpnoU39g4iKJTz6QZj+28FvOnjQ==",
"dev": true "dev": true
}, },
"circular-json": { "circular-json": {
@ -910,19 +910,19 @@
} }
}, },
"electron-builder": { "electron-builder": {
"version": "20.28.1", "version": "20.28.2",
"resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-20.28.1.tgz", "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-20.28.2.tgz",
"integrity": "sha512-OKj107B2fV0ftOFOjQLyuKl6n+R8KJOGgGUrHaW4EI8bwqycTq67bgCc0xwPruHBWDX/Kg3tMYBRLbjUNw+6Qw==", "integrity": "sha512-HdHp4Gsod+E2hXAYu1/Jww+JeJrRSdp2HA4yr03RqH29Hdluuep7bzmIcTCiAcibdYBzTojY3jmqwQJRUX0DBQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"app-builder-lib": "20.28.1", "app-builder-lib": "20.28.2",
"bluebird-lst": "^1.0.5", "bluebird-lst": "^1.0.5",
"builder-util": "6.1.1", "builder-util": "6.1.2",
"builder-util-runtime": "4.4.1", "builder-util-runtime": "4.4.1",
"chalk": "^2.4.1", "chalk": "^2.4.1",
"dmg-builder": "5.3.0", "dmg-builder": "5.3.0",
"fs-extra-p": "^4.6.1", "fs-extra-p": "^4.6.1",
"is-ci": "^1.1.0", "is-ci": "^1.2.0",
"lazy-val": "^1.0.3", "lazy-val": "^1.0.3",
"read-config-file": "3.1.2", "read-config-file": "3.1.2",
"sanitize-filename": "^1.6.1", "sanitize-filename": "^1.6.1",
@ -1652,12 +1652,12 @@
} }
}, },
"is-ci": { "is-ci": {
"version": "1.1.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.1.0.tgz", "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.0.tgz",
"integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==", "integrity": "sha512-plgvKjQtalH2P3Gytb7L61Lmz95g2DlpzFiQyRSFew8WoJKxtKRzrZMeyRN2supblm3Psc8OQGy7Xjb6XG11jw==",
"dev": true, "dev": true,
"requires": { "requires": {
"ci-info": "^1.0.0" "ci-info": "^1.3.0"
} }
}, },
"is-finite": { "is-finite": {
@ -2480,15 +2480,15 @@
}, },
"dependencies": { "dependencies": {
"ajv": { "ajv": {
"version": "6.5.2", "version": "6.5.3",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
"integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==", "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==",
"dev": true, "dev": true,
"requires": { "requires": {
"fast-deep-equal": "^2.0.1", "fast-deep-equal": "^2.0.1",
"fast-json-stable-stringify": "^2.0.0", "fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1", "json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.1" "uri-js": "^4.2.2"
} }
}, },
"fast-deep-equal": { "fast-deep-equal": {

2
package.json
View File

@ -50,7 +50,7 @@
}, },
"devDependencies": { "devDependencies": {
"electron": "^2.0.7", "electron": "^2.0.7",
"electron-builder": "^20.28.1", "electron-builder": "^20.28.2",
"eslint": "^5.4.0" "eslint": "^5.4.0"
}, },
"build": { "build": {