Added status message mechanism for the Worker to report to the app

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
+    });
+}

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;

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;

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 @@
         <!-- Preloader overlay -->
         <div id="loader-wrapper">
             <div id="preloader" class="loader"></div>
-            <div id="preloader-msg"></div>
+            <div id="preloader-msg" class="loading-msg"></div>
         </div>
         <!-- End preloader overlay -->
         <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
@@ -193,6 +194,7 @@
                             <textarea id="output-text" readonly="readonly"></textarea>
                             <div id="output-loader">
                                 <div class="loader"></div>
+                                <div class="loading-msg"></div>
                             </div>
                         </div>
                     </div>

src/web/stylesheets/layout/_io.css

@@ -110,3 +110,11 @@
     font-weight: normal;
     cursor: help;
 }
+
+#output-loader .loading-msg {
+    opacity: 1;
+    font-family: var(--primary-font-family);
+    line-height: var(--primary-line-height);
+    color: var(--primary-font-colour);
+    top: 50%;
+}

src/web/stylesheets/preloader.css

@@ -58,7 +58,7 @@
     animation: spin 1.5s linear infinite;
 }
 
-#preloader-msg {
+.loading-msg {
     display: block;
     position: relative;
     width: 300px;
@@ -69,14 +69,14 @@
     opacity: 0;
 }
 
-#preloader-msg.loading {
+.loading-msg.loading {
     opacity: 1;
     transition: all 0.1s ease-in;
 }
 
 
 /* Loaded */
-.loaded #preloader-msg {
+.loaded .loading-msg {
     opacity: 0;
     transition: all 0.3s ease-out;
 }