Improve: Queue MathJax renders until its ready.

* The call to queue returns a promise so that you can wait on it if you need to.

Author: bnmnetp

runestone/common/js/runestonebase.js

@@ -76,6 +76,11 @@ export default class RunestoneBase {
 
         }
         this.mjelements = [];
+        let self = this;
+        this.mjReady = new Promise(function(resolve, reject) {
+            self.mjresolver = resolve;
+        });
+        this.aQueue = new AutoQueue();
         this.jsonHeaders = new Headers({
             "Content-type": "application/json; charset=utf-8",
             Accept: "application/json",
@@ -134,8 +139,7 @@ export default class RunestoneBase {
     async postLogMessage(eventInfo) {
         var post_return;
         let request = new Request(
-            `${eBookConfig.new_server_prefix}/logger/bookevent`,
-            {
+            `${eBookConfig.new_server_prefix}/logger/bookevent`, {
                 method: "POST",
                 headers: this.jsonHeaders,
                 body: JSON.stringify(eventInfo),
@@ -198,8 +202,7 @@ export default class RunestoneBase {
             eBookConfig.logLevel > 0
         ) {
             let request = new Request(
-                `${eBookConfig.new_server_prefix}/logger/runlog`,
-                {
+                `${eBookConfig.new_server_prefix}/logger/runlog`, {
                     method: "POST",
                     headers: this.jsonHeaders,
                     body: JSON.stringify(eventInfo),
@@ -248,7 +251,7 @@ export default class RunestoneBase {
     ) {
         // Check if the server has stored answer
         let self = this;
-        this.checkServerComplete = new Promise(function (resolve, reject) {
+        this.checkServerComplete = new Promise(function(resolve, reject) {
             self.csresolver = resolve;
         });
         if (
@@ -280,8 +283,7 @@ export default class RunestoneBase {
                 this.assessmentTaken
             ) {
                 let request = new Request(
-                    `${eBookConfig.new_server_prefix}/assessment/results`,
-                    {
+                    `${eBookConfig.new_server_prefix}/assessment/results`, {
                         method: "POST",
                         body: JSON.stringify(data),
                         headers: this.jsonHeaders,
@@ -456,13 +458,14 @@ export default class RunestoneBase {
             // should wait until defaultPageReady is defined
             // If defaultPageReady is not defined then just enqueue the components.
             // Once defaultPageReady is defined
-            if (MathJax.startup && MathJax.startup.defaultPageReady) {
-                return MathJax.startup.defaultPageReady().then(
-                    async function() {
-                        console.log(`MathJax Ready -- promising a typesetting run for ${component.id}`)
-                        return await MathJax.typesetPromise([component])
-                    }
-                );
+            if (MathJax.typesetPromise) {
+                return this.mjresolver(this.aQueue.enqueue(component))
+            } else {
+                console.log(`Waiting on MathJax!! ${MathJax.typesetPromise}`);
+                console.log(`Runestone Math: ${runestoneMathReady}`)
+                setTimeout(() => this.queueMathJax(component), 200);
+                console.log(`Returning mjready promise: ${this.mjReady}`)
+                return this.mjReady;
             }
         }
     }
@@ -476,49 +479,54 @@ export default class RunestoneBase {
 // once mathjax becomes ready then we can drain the queue and continue as usual.
 
 class Queue {
-  constructor() { this._items = []; }
-  enqueue(item) { this._items.push(item); }
-  dequeue()     { return this._items.shift(); }
-  get size()    { return this._items.length; }
+    constructor() { this._items = []; }
+    enqueue(item) { this._items.push(item); }
+    dequeue() { return this._items.shift(); }
+    get size() { return this._items.length; }
 }
 
 class AutoQueue extends Queue {
-  constructor() {
-    super();
-    this._pendingPromise = false;
-  }
+    constructor() {
+        super();
+        this._pendingPromise = false;
+    }
+
+    enqueue(component) {
+        return new Promise((resolve, reject) => {
+            super.enqueue({ component, resolve, reject });
+            this.dequeue();
+        });
+    }
 
-  enqueue(action) {
-    return new Promise((resolve, reject) => {
-      super.enqueue({ action, resolve, reject });
-      this.dequeue();
-    });
-  }
+    async dequeue() {
+        if (this._pendingPromise) return false;
 
-  async dequeue() {
-    if (this._pendingPromise) return false;
+        let item = super.dequeue();
 
-    let item = super.dequeue();
+        if (!item) return false;
 
-    if (!item) return false;
+        try {
+            this._pendingPromise = true;
 
-    try {
-      this._pendingPromise = true;
+            let payload = await MathJax.startup.defaultPageReady().then(
+                async function() {
+                    console.log(`MathJax Ready -- dequeing a typesetting run for ${item.component.id}`)
+                    return await MathJax.typesetPromise([item.component])
+                }
+            );
 
-      let payload = await item.action(this);
+                this._pendingPromise = false; item.resolve(payload);
+            }
+            catch (e) {
+                this._pendingPromise = false;
+                item.reject(e);
+            } finally {
+                this.dequeue();
+            }
 
-      this._pendingPromise = false;
-      item.resolve(payload);
-    } catch (e) {
-      this._pendingPromise = false;
-      item.reject(e);
-    } finally {
-      this.dequeue();
+            return true;
+        }
     }
 
-    return true;
-  }
-}
-
 
-window.RunestoneBase = RunestoneBase;
+    window.RunestoneBase = RunestoneBase;

runestone/dragndrop/js/dragndrop.js

@@ -104,9 +104,8 @@ export default class DragNDrop extends RunestoneBase {
         this.createButtons();
         this.checkServer("dragNdrop", true);
         self = this;
-        if (typeof runestoneMathready !== "undefined") {
-            runestoneMathReady.then(() => self.queueMathJax(self.containerDiv));
-        }
+        self.queueMathJax(self.containerDiv);
+
     }
     finishSettingUp() {
         this.appendReplacementSpans();

runestone/mchoice/js/mchoice.js

@@ -49,13 +49,10 @@ export default class MultipleChoice extends RunestoneBase {
         this.createMCForm();
         this.addCaption("runestone");
         this.checkServer("mChoice", true);
-        let self = this;
         // https://docs.mathjax.org/en/latest/options/startup/startup.html
         // https://docs.mathjax.org/en/latest/web/configuration.html#startup-action
         // runestoneMathReady is defined in the preamble for all PTX authored books
-        if (typeof runestoneMathready !== "undefined") {
-            runestoneMathReady.then(() => self.queueMathJax(self.containerDiv));
-        }
+        this.queueMathJax(self.containerDiv);
         if (typeof Prism !== "undefined") {
             Prism.highlightAllUnder(this.containerDiv);
         }