diff --git a/src/core/ChefWorker.js b/src/core/ChefWorker.js index b5a6c4fb..c830fb8b 100644 --- a/src/core/ChefWorker.js +++ b/src/core/ChefWorker.js @@ -112,7 +112,21 @@ function loadRequiredModules(recipeConfig) { if (!OpModules.hasOwnProperty(module)) { console.log("Loading module " + module); + sendStatusMessage("Loading module " + module); self.importScripts(self.docURL + "/" + module + ".js"); } }); } + + +/** + * Send status update to the app. + * + * @param {string} msg + */ +function sendStatusMessage(msg) { + self.postMessage({ + action: "statusMessage", + data: msg + }); +} diff --git a/src/web/App.js b/src/web/App.js index 4c9a819d..d1f746bd 100755 --- a/src/web/App.js +++ b/src/web/App.js @@ -118,24 +118,7 @@ App.prototype.handleError = function(err) { App.prototype.setBakingStatus = function(bakingStatus) { this.baking = bakingStatus; - let outputLoader = document.getElementById("output-loader"), - outputElement = document.getElementById("output-text"); - - if (bakingStatus) { - this.manager.controls.hideStaleIndicator(); - this.bakingStatusTimeout = setTimeout(function() { - outputElement.disabled = true; - outputLoader.style.visibility = "visible"; - outputLoader.style.opacity = 1; - this.manager.controls.toggleBakeButtonFunction(true); - }.bind(this), 200); - } else { - clearTimeout(this.bakingStatusTimeout); - outputElement.disabled = false; - outputLoader.style.opacity = 0; - outputLoader.style.visibility = "hidden"; - this.manager.controls.toggleBakeButtonFunction(false); - } + this.manager.output.toggleLoader(bakingStatus); }; @@ -194,6 +177,9 @@ App.prototype.handleChefMessage = function(e) { this.workerLoaded = true; this.loaded(); break; + case "statusMessage": + this.manager.output.setStatusMsg(e.data.data); + break; default: console.error("Unrecognised message from ChefWorker", e); break; diff --git a/src/web/OutputWaiter.js b/src/web/OutputWaiter.js index ee5d57ca..0b16c0f2 100755 --- a/src/web/OutputWaiter.js +++ b/src/web/OutputWaiter.js @@ -201,4 +201,44 @@ OutputWaiter.prototype.maximiseOutputClick = function(e) { } }; + +/** + * Shows or hides the loading icon. + * + * @param {boolean} value + */ +OutputWaiter.prototype.toggleLoader = function(value) { + const outputLoader = document.getElementById("output-loader"), + outputElement = document.getElementById("output-text"); + + if (value) { + this.manager.controls.hideStaleIndicator(); + this.bakingStatusTimeout = setTimeout(function() { + outputElement.disabled = true; + outputLoader.style.visibility = "visible"; + outputLoader.style.opacity = 1; + this.manager.controls.toggleBakeButtonFunction(true); + }.bind(this), 200); + } else { + clearTimeout(this.bakingStatusTimeout); + outputElement.disabled = false; + outputLoader.style.opacity = 0; + outputLoader.style.visibility = "hidden"; + this.manager.controls.toggleBakeButtonFunction(false); + this.setStatusMsg(""); + } +}; + + +/** + * Sets the baking status message value. + * + * @param {string} msg + */ +OutputWaiter.prototype.setStatusMsg = function(msg) { + const el = document.querySelector("#output-loader .loading-msg"); + + el.textContent = msg; +}; + export default OutputWaiter; diff --git a/src/web/html/index.html b/src/web/html/index.html index 540ea6e3..9b4daa16 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -65,7 +65,8 @@ const msg = loadingMsgs.shift(); try { const el = document.getElementById("preloader-msg"); - el.className = "loading"; // Causes CSS transition on first message + if (!el.classList.contains("loading")) + el.classList.add("loading"); // Causes CSS transition on first message el.innerHTML = msg; } catch (err) {} // Ignore errors if DOM not yet ready loadingMsgs.push(msg); @@ -84,7 +85,7 @@