From 67396458af98ed862c926a5d7a5b47bd558a88ba Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Sun, 25 Nov 2018 19:54:05 +0100 Subject: [PATCH] added loading icon to Plugin/ThemeRepo --- Plugins/PluginRepo/PluginRepo.plugin.js | 72 ++++++++++++++++++++----- Plugins/ThemeRepo/ThemeRepo.plugin.js | 40 ++++++++++++-- 2 files changed, 94 insertions(+), 18 deletions(-) diff --git a/Plugins/PluginRepo/PluginRepo.plugin.js b/Plugins/PluginRepo/PluginRepo.plugin.js index 0b2cd0be8f..ca32266e3d 100644 --- a/Plugins/PluginRepo/PluginRepo.plugin.js +++ b/Plugins/PluginRepo/PluginRepo.plugin.js @@ -1,6 +1,6 @@ //META{"name":"PluginRepo"}*// -class PluginRepo { +class PluginRepo { initConstructor () { this.sortings = { sort: { @@ -33,6 +33,12 @@ class PluginRepo { Plugin Repo
`; + + this.pluginRepoLoadingIconMarkup = + ` + + + `; this.pluginEntryMarkup = `
  • @@ -158,6 +164,18 @@ class PluginRepo { `; this.css = ` + ${BDFDB.dotCN.app} > .repo-loadingwrapper { + position: absolute; + bottom: 0; + right: 0; + z-index: 1000; + animation: repo-loadingwrapper-fade 3s infinite ease; + } + @keyframes repo-loadingwrapper-fade { + from {opacity: 0.1;} + 50% {opacity: 0.9;} + to {opacity: 0.1;} + } .pluginrepo-modal ${BDFDB.dotCN.modalinner} { min-height: 100%; } @@ -221,7 +239,7 @@ class PluginRepo { getDescription () {return "Allows you to look at all plugins from the plugin repo and download them on the fly. Repo button is in the plugins settings.";} - getVersion () {return "1.5.7";} + getVersion () {return "1.5.8";} getAuthor () {return "DevilBro";} @@ -295,7 +313,7 @@ class PluginRepo { if (change.addedNodes) { change.addedNodes.forEach((node) => { setImmediate(() => { - if (node && node.tagName && node.getAttribute("layer-id") == "user-settings") { + if (node.tagName && node.getAttribute("layer-id") == "user-settings") { BDFDB.addObserver(this, node, {name:"innerSettingsWindowObserver"}, {childList:true,subtree:true}); this.checkIfPluginsPage(node); } @@ -339,7 +357,8 @@ class PluginRepo { if (typeof BDFDB === "object") { clearInterval(this.updateInterval); - $(".pluginrepo-modal, .bd-pluginrepobutton, webview[webview-PluginRepo]").remove(); + $(".pluginrepo-modal, .bd-pluginrepobutton, .pluginrepo-loadingicon").remove(); + $(BDFDB.dotCN.app + " > .repo-loadingwrapper:empty").remove(); BDFDB.unloadMessage(this); } @@ -663,12 +682,28 @@ class PluginRepo { this.grabbedPlugins = result.split("\n"); this.foundPlugins = this.grabbedPlugins.concat(BDFDB.loadData("ownlist", this, "ownlist") || []); this.loading = true; + var loadingiconwrapper = document.querySelector(BDFDB.dotCN.app + "> .repo-loadingwrapper"); + if (!loadingiconwrapper) { + loadingiconwrapper = document.createElement("div"); + loadingiconwrapper.className = "repo-loadingwrapper"; + document.querySelector(BDFDB.dotCN.app).appendChild(loadingiconwrapper); + } + $(this.pluginRepoLoadingIconMarkup) + .on("mouseenter." + this.getName(), (e) => {BDFDB.createTooltip("Loading PluginRepo",e.currentTarget,{type:"left",delay:500});}) + .appendTo(loadingiconwrapper); + createWebview().then(() => { getPluginInfo(() => { - var finishCounter = 0, finishInterval = setInterval(() => { + if (!this.started) { + if (typeof webview != "undefined") webview.remove(); + return; + } + var finishCounter = 0, finishInterval = setInterval(() => { if ((webviewqueue.length == 0 && !webviewrunning) || finishCounter > 300) { clearInterval(finishInterval); if (typeof webview != "undefined") webview.remove(); + $(".pluginrepo-loadingicon").remove(); + if (!loadingiconwrapper.firstChild) loadingiconwrapper.remove(); this.loading = false; console.log("PluginRepo: Finished fetching Plugins."); if (document.querySelector(".bd-pluginrepobutton")) BDFDB.showToast(`Finished fetching Plugins.`, {type:"success"}); @@ -701,7 +736,7 @@ class PluginRepo { }); getPluginInfo = (callback) => { - if (i >= this.foundPlugins.length) { + if (i >= this.foundPlugins.length || !this.started) { callback(); return; } @@ -718,14 +753,23 @@ class PluginRepo { /* code is minified -> add newlines */ bodycopy = body.replace(new RegExp("}", "g"), "}\n"); } - for (let tag of tags) { - let result = new RegExp(tag + "[\\s|\\t|\\n|\\r|=|>|_|:|function|\(|\)|\{|return]*([\"|\'|\`]).*\\1","gi").exec(bodycopy); - if (result) { - let separator = result[1]; - result = result[0].replace(new RegExp("\\\\" + separator, "g"), separator).split(separator); - if (result.length > 2) { - result = result.slice(1, -1).join(separator).replace(new RegExp("\\\\n", "g"), "
    ").replace(new RegExp("\\\\", "g"), ""); - plugin[tag] = tag != "getVersion" ? result.charAt(0).toUpperCase() + result.slice(1) : result; + if (body.indexOf('const config = {"info":{"name":"') > -1 && body.indexOf('"authors":[{"name":"Zerebos","discord_id":"249746236008169473",') > -1) { + let configstring = body.split('const config = {"info":{')[1].split(',"github":"http')[0]; + for (let tag of tags) { + if (tag != "getAuthor") plugin[tag] = configstring.split('"' + tag.replace("get","").toLowerCase() + '":"')[1].split('"')[0]; + else plugin[tag] = configstring.split('"authors":[{"name":"')[1].split('"')[0]; + } + } + else { + for (let tag of tags) { + let result = new RegExp(tag + "[\\s|\\t|\\n|\\r|=|>|_|:|function|\(|\)|\{|return]*([\"|\'|\`]).*\\1","gi").exec(bodycopy); + if (result) { + let separator = result[1]; + result = result[0].replace(new RegExp("\\\\" + separator, "g"), separator).split(separator); + if (result.length > 2) { + result = result.slice(1, -1).join(separator).replace(new RegExp("\\\\n", "g"), "
    ").replace(new RegExp("\\\\", "g"), ""); + plugin[tag] = tag != "getVersion" ? result.charAt(0).toUpperCase() + result.slice(1) : result; + } } } } diff --git a/Plugins/ThemeRepo/ThemeRepo.plugin.js b/Plugins/ThemeRepo/ThemeRepo.plugin.js index af1f33d415..c20f60f3aa 100644 --- a/Plugins/ThemeRepo/ThemeRepo.plugin.js +++ b/Plugins/ThemeRepo/ThemeRepo.plugin.js @@ -35,6 +35,12 @@ class ThemeRepo { Theme Repo
    `; + + this.themeRepoLoadingIconMarkup = + ` + + + `; this.frameMarkup = ``; @@ -190,6 +196,18 @@ class ThemeRepo { `; this.css = ` + ${BDFDB.dotCN.app} > .repo-loadingwrapper { + position: absolute; + bottom: 0; + right: 0; + z-index: 1000; + animation: repo-loadingwrapper-fade 3s infinite ease; + } + @keyframes repo-loadingwrapper-fade { + from {opacity: 0.1;} + 50% {opacity: 0.9;} + to {opacity: 0.1;} + } .discordPreview { width: 100vw !important; height: 100vh !important; @@ -273,7 +291,7 @@ class ThemeRepo { getDescription () {return "Allows you to preview all themes from the theme repo and download them on the fly. Repo button is in the theme settings.";} - getVersion () {return "1.5.5";} + getVersion () {return "1.5.8";} getAuthor () {return "DevilBro";} @@ -350,7 +368,7 @@ class ThemeRepo { if (change.addedNodes) { change.addedNodes.forEach((node) => { setImmediate(() => { - if (node && node.tagName && node.getAttribute("layer-id") == "user-settings") { + if (node.tagName && node.getAttribute("layer-id") == "user-settings") { BDFDB.addObserver(this, node, {name:"innerSettingsWindowObserver"}, {childList:true,subtree:true}); this.checkIfThemesPage(node); } @@ -394,7 +412,8 @@ class ThemeRepo { if (typeof BDFDB === "object") { clearInterval(this.updateInterval); - $(".discordPreview, .themerepo-modal, .bd-themerepobutton").remove(); + $(".discordPreview, .themerepo-modal, .bd-themerepobutton, .themerepo-loadingicon").remove(); + $(BDFDB.dotCN.app + " > .repo-loadingwrapper:empty").remove(); BDFDB.unloadMessage(this); } @@ -782,8 +801,21 @@ class ThemeRepo { this.grabbedThemes = result.split("\n"); this.foundThemes = this.grabbedThemes.concat(BDFDB.loadData("ownlist", this, "ownlist") || []); this.loading = true; + var loadingiconwrapper = document.querySelector(BDFDB.dotCN.app + "> .repo-loadingwrapper"); + if (!loadingiconwrapper) { + loadingiconwrapper = document.createElement("div"); + loadingiconwrapper.className = "repo-loadingwrapper"; + document.querySelector(BDFDB.dotCN.app).appendChild(loadingiconwrapper); + } + $(this.themeRepoLoadingIconMarkup) + .on("mouseenter." + this.getName(), (e) => {BDFDB.createTooltip("Loading ThemeRepo",e.currentTarget,{type:"left",delay:500});}) + .appendTo(loadingiconwrapper); + getThemeInfo(() => { + if (!this.started) return; this.loading = false; + $(".themerepo-loadingicon").remove(); + if (!loadingiconwrapper.firstChild) loadingiconwrapper.remove(); console.log("ThemeRepo: Finished fetching Themes."); if (document.querySelector(".bd-themerepobutton")) BDFDB.showToast(`Finished fetching Themes.`, {type:"success"}); if (outdated > 0) { @@ -811,7 +843,7 @@ class ThemeRepo { }); getThemeInfo = (callback) => { - if (i >= this.foundThemes.length) { + if (i >= this.foundThemes.length || !this.started) { callback(); return; }