weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added fade transition between pages

Browse Source
This commit is contained in:
Pax1601
2024-01-28 15:14:30 +01:00
parent f0ab43d320
commit 4f5023b45c
5 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
manager/javascripts/manager.js
View File

@@ -61,8 +61,7 @@ class Manager {
}
if (!this.options.configLoaded) {
/* Hide the loading page */
document.getElementById("loader").classList.add("hide");
this.hideLoadingPage();
/* Show page to select basic vs expert mode */
this.welcomePage = new ManagerPage(this, "./ejs/welcome.ejs");
@@ -115,7 +114,7 @@ class Manager {
this.options.editEnabled = this.options.instances.find(instance => instance.installed);
/* Hide the loading page */
document.getElementById("loader").classList.add("hide");
this.hideLoadingPage();
this.options.singleInstance = this.options.instances.length === 1;
@@ -363,7 +362,12 @@ class Manager {
}
onCancelClicked() {
location.reload();
this.activePage.hide();
if (this.options.mode === "basic")
this.menuPage.show(true);
else
this.instancesPage.show(true);
this.updateInstances();
}
onGameMasterPasswordChanged(value) {
@@ -594,6 +598,14 @@ class Manager {
style.setProperty('--percent', `${percent}%`);
}
}
hideLoadingPage() {
/* Hide the loading page */
document.getElementById("loader").style.opacity = "0%";
window.setTimeout(() => {
document.getElementById("loader").classList.add("hide");
}, 200);
}
}
module.exports = Manager;

18
manager/javascripts/managerpage.js
View File

@@ -29,8 +29,6 @@ class ManagerPage {
}
});
this.element.classList.remove("hide");
this.previousPage = ignorePreviousPage ? this.previousPage : this.manager.activePage;
this.manager.activePage = this;
@@ -39,11 +37,23 @@ class ManagerPage {
}
hide() {
this.element.classList.add("hide");
this.element.style.opacity = "0%";
window.setTimeout(() => {
this.element.classList.add("hide");
}, 200);
}
render(str) {
render(str) {
this.element.innerHTML = str;
this.element.style.opacity = "0%";
window.setTimeout(() => {
this.element.classList.remove("hide");
}, 200)
window.setTimeout(() => {
this.element.style.opacity = "100%";
}, 300)
/* Connect all the collapsable buttons */
let buttons = document.querySelectorAll(".button.collapse");

34
manager/javascripts/popup.js
View File

@@ -1,8 +1,7 @@
// TODO: we can probably refactor this to be a bit cleaner
function showInfoPopup(message, onCloseCallback) {
document.getElementById("grayout").classList.remove("hide");
document.getElementById("popup").classList.remove("hide");
showPopup();
document.getElementById("popup").querySelector(".error").classList.add("hide");
document.getElementById("popup").querySelector(".wait").classList.add("hide");
document.getElementById("popup").querySelector(".confirm").classList.remove("hide");
@@ -20,8 +19,7 @@ function showInfoPopup(message, onCloseCallback) {
function showErrorPopup(message, onCloseCallback) {
document.getElementById("grayout").classList.remove("hide");
document.getElementById("popup").classList.remove("hide");
showPopup();
document.getElementById("popup").querySelector(".error").classList.remove("hide");
document.getElementById("popup").querySelector(".wait").classList.add("hide");
document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -38,8 +36,7 @@ function showErrorPopup(message, onCloseCallback) {
}
function showWaitPopup(message) {
document.getElementById("grayout").classList.remove("hide");
document.getElementById("popup").classList.remove("hide");
showPopup();
document.getElementById("popup").querySelector(".error").classList.add("hide");
document.getElementById("popup").querySelector(".wait").classList.remove("hide");
document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -49,8 +46,7 @@ function showWaitPopup(message) {
}
function showWaitLoadingPopup(message) {
document.getElementById("grayout").classList.remove("hide");
document.getElementById("popup").classList.remove("hide");
showPopup();
document.getElementById("popup").querySelector(".error").classList.add("hide");
document.getElementById("popup").querySelector(".wait").classList.remove("hide");
document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -60,8 +56,7 @@ function showWaitLoadingPopup(message) {
}
function showConfirmPopup(message, onAcceptCallback, onCloseCallback) {
document.getElementById("grayout").classList.remove("hide");
document.getElementById("popup").classList.remove("hide");
showPopup();
document.getElementById("popup").querySelector(".error").classList.add("hide");
document.getElementById("popup").querySelector(".wait").classList.add("hide");
document.getElementById("popup").querySelector(".confirm").classList.remove("hide");
@@ -85,9 +80,24 @@ function showConfirmPopup(message, onAcceptCallback, onCloseCallback) {
document.getElementById("popup").querySelector(".content").innerHTML = message;
}
function showPopup() {
document.getElementById("grayout").classList.remove("hide");
document.getElementById("popup").classList.remove("hide");
window.setTimeout(() => {
document.getElementById("grayout").style.opacity = "100%";
document.getElementById("popup").style.opacity = "100%";
}, 100);
}
function hidePopup() {
document.getElementById("grayout").classList.add("hide");
document.getElementById("popup").classList.add("hide");
document.getElementById("grayout").style.opacity = "0%";
document.getElementById("popup").style.opacity = "0%";
window.setTimeout(() => {
document.getElementById("grayout").classList.add("hide");
document.getElementById("popup").classList.add("hide");
}, 200);
}
function setPopupLoadingProgress(message, percent) {