Compare commits

...

2 Commits

Author SHA1 Message Date
Kalitsune
a36a172033
Merge ac8a325c37 into eb683f89ec 2024-05-21 15:20:55 +00:00
Kalitsune
ac8a325c37 🌐 Make the popup overlay more generic and fixed the esc key not closing the overlay properly 2024-05-21 17:20:49 +02:00

View File

@ -25,8 +25,12 @@ let accountSelectContent = document.getElementById('accountSelectContent')
*/ */
function overlayKeyHandler (e){ function overlayKeyHandler (e){
if(e.key === 'Enter' || e.key === 'Escape'){ if(e.key === 'Enter' || e.key === 'Escape'){
if (overlayContainer.hasAttribute('popup')) {
toggleOverlay(false)
} else {
document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click() document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click()
} }
}
} }
/** /**
* Overlay keydown handler for a dismissable overlay. * Overlay keydown handler for a dismissable overlay.
@ -67,8 +71,9 @@ function bindOverlayKeys(state, content, dismissable){
* @param {boolean} toggleState True to display, false to hide. * @param {boolean} toggleState True to display, false to hide.
* @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false. * @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false.
* @param {string} content Optional. The content div to be shown. * @param {string} content Optional. The content div to be shown.
* @param {boolean} popup Optional. True to show the overlay as a popup that is easily dismissable and interactible.
*/ */
function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent'){ function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent', popup = false){
if(toggleState == null){ if(toggleState == null){
toggleState = !document.getElementById('main').hasAttribute('overlay') toggleState = !document.getElementById('main').hasAttribute('overlay')
} }
@ -80,6 +85,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
if(toggleState){ if(toggleState){
document.getElementById('main').setAttribute('overlay', true) document.getElementById('main').setAttribute('overlay', true)
overlayContainer.setAttribute('content', content) overlayContainer.setAttribute('content', content)
overlayContainer.setAttribute('popup', popup)
// Make things untabbable. // Make things untabbable.
$('#main *').attr('tabindex', '-1') $('#main *').attr('tabindex', '-1')
@ -126,23 +132,21 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
async function toggleServerSelection(toggleState){ async function toggleServerSelection(toggleState){
await prepareServerSelectionList() await prepareServerSelectionList()
toggleOverlay(toggleState, true, 'serverSelectContent') toggleOverlay(toggleState, false, 'serverSelectContent', true)
} }
async function toggleAccountSelection(toggleState, popup = false){ async function toggleAccountSelection(toggleState, popup = false){
if (popup) { if (popup) {
// set the popup=true attribute to the accountSelectContent div and set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function // set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function
accountSelectContent.setAttribute('popup', 'true')
document.getElementById('accountSelectActions').style.display = 'none' document.getElementById('accountSelectActions').style.display = 'none'
} else { } else {
// remove the popup attribute and set the accountSelectActions div to display: block, this is not done while closing the overlay because of the fadeOut effect // set the overlayContainer div to display: block, this is not done while closing the overlay because of the fadeOut effect
accountSelectContent.removeAttribute('popup')
document.getElementById('accountSelectActions').style.display = 'block' document.getElementById('accountSelectActions').style.display = 'block'
} }
// show the overlay // show the overlay
await prepareAccountSelectionList() await prepareAccountSelectionList()
toggleOverlay(toggleState, true, 'accountSelectContent') toggleOverlay(toggleState, false, 'accountSelectContent', popup)
} }
/** /**
@ -242,10 +246,8 @@ document.getElementById('accountSelectManage').addEventListener('click', async (
// Make the Server Selection background clickable to close the overlay. // Make the Server Selection background clickable to close the overlay.
overlayContainer.addEventListener('click', e => { overlayContainer.addEventListener('click', e => {
if (e.target === overlayContainer) { if (e.target === overlayContainer) {
// This function only works for the server selection overlay or if the account selection is a popup // This function only works if the overlay is a popup
if(overlayContainer.getAttribute('content') === 'serverSelectContent') { if(overlayContainer.hasAttribute('popup')) {
toggleOverlay(false)
} else if(overlayContainer.getAttribute('content') === 'accountSelectContent' && accountSelectContent.hasAttribute('popup')) {
toggleOverlay(false) toggleOverlay(false)
} }
} }
@ -268,7 +270,7 @@ async function setAccountListingHandlers(){
listings.map(async (val) => { listings.map(async (val) => {
val.onclick = async e => { val.onclick = async e => {
// popup mode // popup mode
if(accountSelectContent.hasAttribute('popup')){ if(overlayContainer.hasAttribute('popup')){
const authAcc = ConfigManager.setSelectedAccount(val.getAttribute('uuid')) const authAcc = ConfigManager.setSelectedAccount(val.getAttribute('uuid'))
ConfigManager.save() ConfigManager.save()
updateSelectedAccount(authAcc) updateSelectedAccount(authAcc)
@ -332,7 +334,7 @@ function populateAccountListings(){
const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v]) const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v])
let htmlString = '' let htmlString = ''
for(let i=0; i<accounts.length; i++){ for(let i=0; i<accounts.length; i++){
htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${!i && !accountSelectContent.hasAttribute("popup") ? 'selected' : ''}> htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${!i && !overlayContainer.hasAttribute("popup") ? 'selected' : ''}>
<img src="https://mc-heads.net/head/${accounts[i].uuid}/40"> <img src="https://mc-heads.net/head/${accounts[i].uuid}/40">
<div class="accountListingName">${accounts[i].displayName}</div> <div class="accountListingName">${accounts[i].displayName}</div>
</button>` </button>`