Addon loading subprogress
-clear param -hiddenProgress param +subprogress param +substatus param +showProgress func +showSubProgress func +hideProgress func +hideSubProgress func
This commit is contained in:
Mopsgamer
parent
48edbda431
commit
9f71250c0c
|
|
@ -1,5 +1,3 @@
|
|||
/**Determines where the extra starts.*/
|
||||
const extraLabels = 6;
|
||||
const css = `/* BEGIN V2 LOADER */
|
||||
/* =============== */
|
||||
|
||||
|
|
@ -21,7 +19,7 @@ const css = `/* BEGIN V2 LOADER */
|
|||
}
|
||||
#bd-loading-icon {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
bottom: 15px;
|
||||
right: 5px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
|
|
@ -31,7 +29,7 @@ const css = `/* BEGIN V2 LOADER */
|
|||
}
|
||||
#bd-loading-progress {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
bottom: 10px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
|
|
@ -43,27 +41,44 @@ const css = `/* BEGIN V2 LOADER */
|
|||
width: 0%;
|
||||
height: 100%;
|
||||
}
|
||||
#bd-loading-subprogress {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 6px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background-color: var(--header-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
#bd-loading-subprogress-bar {
|
||||
background-color: #3E82E5;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bd-loading-status-list {
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
bottom: 16px;
|
||||
right: 30px;
|
||||
}
|
||||
.bd-loading-status-container {
|
||||
#bd-loading-substatus {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
right: 30px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
color: var(--header-primary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bd-loading-status {
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
color: var(--header-primary);
|
||||
transition: 0.2s;
|
||||
}
|
||||
${// reduce labels opacity
|
||||
(()=>{
|
||||
/**if `maxLabels == 4`: `'2', '3', 'n+4'`*/
|
||||
let opacityReduceNth = new Array(extraLabels - 1).fill('temp').map((_, i) => (i == extraLabels - 2 ? 'n+' : '') + (i + 2).toString());
|
||||
|
||||
return opacityReduceNth.map((nth, i) => `.bd-loading-status-container:nth-last-child(${nth}) { opacity: ${1 - (i + 1) * (1 / extraLabels)}; }`).join('\n');
|
||||
})()
|
||||
}
|
||||
|
||||
@keyframes bd-loading-animation {
|
||||
0% { opacity: 0.05; }
|
||||
|
|
@ -86,57 +101,63 @@ const Progress = document.createElement("div");
|
|||
Progress.appendChild(ProgressBar);
|
||||
Progress.id = "bd-loading-progress";
|
||||
|
||||
const SubProgressBar = document.createElement("div");
|
||||
SubProgressBar.id = "bd-loading-subprogress-bar";
|
||||
const SubProgress = document.createElement("div");
|
||||
SubProgress.appendChild(SubProgressBar);
|
||||
SubProgress.id = "bd-loading-subprogress";
|
||||
|
||||
const StatusListContainer = document.createElement("div");
|
||||
StatusListContainer.id = "bd-loading-status-list";
|
||||
|
||||
const SubStatusContainer = document.createElement("div");
|
||||
SubStatusContainer.id = "bd-loading-substatus";
|
||||
|
||||
const Container = document.createElement("div");
|
||||
Container.id = "bd-loading";
|
||||
Container.appendChild(IconStyle);
|
||||
Container.appendChild(Icon);
|
||||
Container.appendChild(Progress);
|
||||
Container.appendChild(SubProgress);
|
||||
Container.appendChild(StatusListContainer);
|
||||
Container.appendChild(SubStatusContainer);
|
||||
|
||||
export default class {
|
||||
|
||||
/**
|
||||
* Sets the value of the progress bar, adds status to the list about status.
|
||||
* @param {object} options Object
|
||||
* @param {*} [options.progress] Doesn't change the progress if not a number.
|
||||
* @param {boolean} [options.hiddenProgress] The progress bar will be hidden if is true.
|
||||
* @param {*} [options.progress] 0-100. Doesn't change the progress if not a number.
|
||||
* @param {*} [options.subprogress] 0-100. Doesn't change the progress if not a number.
|
||||
* @param {*} [options.status] Doesn't add the label if not a string.
|
||||
* @param {boolean} [options.clear] Previous labels will be deleted before adding a new one `status`.
|
||||
* @param {*} [options.substatus] Doesn't add the label if not a string.
|
||||
*/
|
||||
static setInitStatus(options = {}) {
|
||||
if(typeof options != 'object' || Array.isArray(options)) {
|
||||
options = {};
|
||||
}
|
||||
const {progress, status, clear, hiddenProgress} = options;
|
||||
const {progress, subprogress, status, substatus} = options;
|
||||
return new Promise(
|
||||
rs => {
|
||||
if(hiddenProgress) {
|
||||
ProgressBar.style.display = "none";
|
||||
} else {
|
||||
ProgressBar.style.display = "block";
|
||||
};
|
||||
if(Number.isFinite(progress)) {
|
||||
if (progress > 100) progress = 100;
|
||||
if (progress < 0) progress = 0;
|
||||
ProgressBar.style.width = progress + "%";
|
||||
};
|
||||
if(clear) {
|
||||
StatusListContainer.innerHTML = "";
|
||||
if(Number.isFinite(subprogress)) {
|
||||
if (subprogress > 100) subprogress = 100;
|
||||
if (subprogress < 0) subprogress = 0;
|
||||
SubProgressBar.style.width = subprogress + "%";
|
||||
};
|
||||
if (typeof status == "string") {
|
||||
let StatusContainer = document.createElement("div");
|
||||
StatusContainer.className = "bd-loading-status-container";
|
||||
StatusContainer.className = "bd-loading-status";
|
||||
StatusContainer.innerHTML = status;
|
||||
StatusListContainer.innerHTML = "";
|
||||
StatusListContainer.append(StatusContainer);
|
||||
|
||||
if (StatusListContainer.childElementCount > extraLabels - 1) {
|
||||
let Needless = StatusListContainer.querySelectorAll(`#bd-loading-status-list > :nth-last-child(n+${extraLabels})`);
|
||||
Needless.forEach(n => setTimeout(() => n?.remove?.(), 200));
|
||||
}
|
||||
};
|
||||
if (typeof substatus == "string") {
|
||||
SubStatusContainer.innerText = substatus;
|
||||
};
|
||||
// 60 fps, rendering wait
|
||||
setTimeout(rs, 1000/60);
|
||||
|
|
@ -144,6 +165,22 @@ export default class {
|
|||
)
|
||||
}
|
||||
|
||||
static showProgress() {
|
||||
Progress.style.display = "block";
|
||||
}
|
||||
|
||||
static hideProgress() {
|
||||
Progress.style.display = "none";
|
||||
}
|
||||
|
||||
static showSubProgress() {
|
||||
SubProgress.style.display = "block";
|
||||
}
|
||||
|
||||
static hideSubProgress() {
|
||||
SubProgress.style.display = "none";
|
||||
}
|
||||
|
||||
static show() {
|
||||
document.body.appendChild(Container);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import DataStore from "./datastore";
|
|||
import AddonError from "../structs/addonerror";
|
||||
import Toasts from "../ui/toasts";
|
||||
import DiscordModules from "./discordmodules";
|
||||
import LoadingInterface from "../loading";
|
||||
import Strings from "./strings";
|
||||
import AddonEditor from "../ui/misc/addoneditor";
|
||||
import FloatingWindows from "../ui/floatingwindows";
|
||||
|
|
@ -85,7 +86,7 @@ export default class AddonManager {
|
|||
Logger.warn(this.name, `Duplicate files found: ${filename} and ${newFilename}`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Rename the file and let it go on
|
||||
try {
|
||||
fs.renameSync(absolutePath, path.resolve(this.addonFolder, newFilename));
|
||||
|
|
@ -210,7 +211,7 @@ export default class AddonManager {
|
|||
}
|
||||
return e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const error = this.initializeAddon(addon);
|
||||
if (error) {
|
||||
|
|
@ -222,7 +223,7 @@ export default class AddonManager {
|
|||
|
||||
if (shouldToast) Toasts.success(Strings.Addons.wasUnloaded.format({name: addon.name, version: addon.version}));
|
||||
this.emit("loaded", addon);
|
||||
|
||||
|
||||
if (!this.state[addon.id]) return this.state[addon.id] = false;
|
||||
return this.startAddon(addon);
|
||||
}
|
||||
|
|
@ -298,12 +299,17 @@ export default class AddonManager {
|
|||
for (const name of results.removed) this.unloadAddon(name);
|
||||
}
|
||||
|
||||
loadAllAddons() {
|
||||
async loadAllAddons() {
|
||||
this.loadState();
|
||||
const errors = [];
|
||||
const files = fs.readdirSync(this.addonFolder);
|
||||
|
||||
for (const filename of files) {
|
||||
await LoadingInterface.setInitStatus({ substatus: filename, subprogress: files.indexOf(filename) / files.length * 100 });
|
||||
if(files.indexOf(filename) != files.length - 1)
|
||||
LoadingInterface.showSubProgress();
|
||||
else
|
||||
LoadingInterface.hideSubProgress();
|
||||
const absolutePath = path.resolve(this.addonFolder, filename);
|
||||
const stats = fs.statSync(absolutePath);
|
||||
if (!stats || !stats.isFile()) continue;
|
||||
|
|
@ -322,7 +328,7 @@ export default class AddonManager {
|
|||
Logger.warn("AddonManager", `Duplicate files found: ${filename} and ${newFilename}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
// Rename the file and let it go on
|
||||
fs.renameSync(absolutePath, path.resolve(this.addonFolder, newFilename));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,55 +31,55 @@ export default new class Core {
|
|||
|
||||
// Load css early
|
||||
Logger.log("Startup", "Injecting BD Styles");
|
||||
await LoadingInterface.setInitStatus({ progress: 1/stepsCount*100, status: "Injecting BD Styles..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 1 / stepsCount * 100, status: "Injecting BD Styles..." });
|
||||
DOMManager.injectStyle("bd-stylesheet", Styles.toString());
|
||||
|
||||
Logger.log("Startup", "Initializing DataStore");
|
||||
await LoadingInterface.setInitStatus({ progress: 2/stepsCount*100, status: "Initializing DataStore..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 2 / stepsCount * 100, status: "Initializing DataStore..." });
|
||||
DataStore.initialize();
|
||||
|
||||
Logger.log("Startup", "Initializing LocaleManager");
|
||||
await LoadingInterface.setInitStatus({ progress: 3/stepsCount*100, status: "Initializing LocaleManager..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 3 / stepsCount * 100, status: "Initializing LocaleManager..." });
|
||||
LocaleManager.initialize();
|
||||
|
||||
Logger.log("Startup", "Initializing Settings");
|
||||
await LoadingInterface.setInitStatus({ progress: 5/stepsCount*100, status: "Initializing Settings..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 5 / stepsCount * 100, status: "Initializing Settings..." });
|
||||
Settings.initialize();
|
||||
|
||||
Logger.log("Startup", "Initializing DOMManager");
|
||||
await LoadingInterface.setInitStatus({ progress: 6/stepsCount*100, status: "Initializing DOMManager..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 6 / stepsCount * 100, status: "Initializing DOMManager..." });
|
||||
DOMManager.initialize();
|
||||
|
||||
Logger.log("Startup", "Waiting for connection...");
|
||||
await LoadingInterface.setInitStatus({ progress: 7/stepsCount*100, status: "Waiting for connection..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 7 / stepsCount * 100, status: "Waiting for connection..." });
|
||||
await this.waitForConnection();
|
||||
|
||||
Logger.log("Startup", "Initializing Editor");
|
||||
await LoadingInterface.setInitStatus({ progress: 8/stepsCount*100, status: "Initializing Editor..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 8 / stepsCount * 100, status: "Initializing Editor..." });
|
||||
await Editor.initialize();
|
||||
|
||||
Logger.log("Startup", "Initializing Modals");
|
||||
await LoadingInterface.setInitStatus({ progress: 8/stepsCount*100, status: "Initializing Modals..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 8 / stepsCount * 100, status: "Initializing Modals..." });
|
||||
await Modals.initialize();
|
||||
|
||||
Logger.log("Startup", "Initializing Builtins");
|
||||
await LoadingInterface.setInitStatus({ progress: 9/stepsCount*100, status: "Initializing Builtins..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 9 / stepsCount * 100, status: "Initializing Builtins..." });
|
||||
for (const module in Builtins) {
|
||||
Builtins[module].initialize();
|
||||
}
|
||||
|
||||
Logger.log("Startup", "Loading Plugins");
|
||||
// const pluginErrors = [];
|
||||
await LoadingInterface.setInitStatus({ progress: 10/stepsCount*100, status: "Loading Plugins..."});
|
||||
const pluginErrors = PluginManager.initialize();
|
||||
await LoadingInterface.setInitStatus({ progress: 10 / stepsCount * 100, status: "Loading Plugins..." });
|
||||
const pluginErrors = await PluginManager.initialize();
|
||||
|
||||
Logger.log("Startup", "Loading Themes");
|
||||
// const themeErrors = [];
|
||||
await LoadingInterface.setInitStatus({ progress: 11/stepsCount*100, status: "Loading Themes..."});
|
||||
const themeErrors = ThemeManager.initialize();
|
||||
await LoadingInterface.setInitStatus({ progress: 11 / stepsCount * 100, status: "Loading Themes..." });
|
||||
const themeErrors = await ThemeManager.initialize();
|
||||
|
||||
Logger.log("Startup", "Initializing Updater");
|
||||
await LoadingInterface.setInitStatus({ progress: 12/stepsCount*100, status: "Initializing Updater..."});
|
||||
await LoadingInterface.setInitStatus({ progress: 12 / stepsCount * 100, status: "Initializing Updater..." });
|
||||
Updater.initialize();
|
||||
|
||||
Logger.log("Startup", "Removing Loading Interface");
|
||||
|
|
|
|||
Loading…
Reference in New Issue