Progress on moving the lifting to the base class

Author: bnmnetp

runestone/__init__.py

@@ -112,6 +112,9 @@ def setup(app):
     This could be expanded if there is additional initialization or customization
     we wanted to do for all projects.
     """
+    # This tells the mathjax extension to always load mathjax.
+    # This should save some configuration headaches as we transition from RST to PTX
+    app.set_html_assets_policy("always")
     # Include JS and CSS produced by webpack. See `webpack static imports <webpack_static_imports>`_.
     with open(
         pkg_resources.resource_filename(

runestone/common/js/runestonebase.js

@@ -73,7 +73,9 @@ export default class RunestoneBase {
             }
             this.is_toggle = true ? opts.is_toggle : false;
             this.is_select = true ? opts.is_select : false;
+
         }
+        this.mjelements = [];
         this.jsonHeaders = new Headers({
             "Content-type": "application/json; charset=utf-8",
             Accept: "application/json",
@@ -444,17 +446,79 @@ export default class RunestoneBase {
 
     queueMathJax(component) {
         if (typeof(MathJax) === "undefined") {
+            console.log("Error -- MathJax is not loaded")
             return Promise.resolve(null);
-        }
-        if (MathJax.version.substring(0, 1) === "2") {
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, component]);
         } else {
             // See - https://docs.mathjax.org/en/latest/advanced/typeset.html
             // Per the above we should keep track of the promises and only call this
             // a second time if all previous promises have resolved.
-            return MathJax.typesetPromise([component]);
+            // Create a queue of components
+            // 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])
+                    }
+                );
+            }
         }
     }
+
+}
+
+
+// Inspiration and lots of code for this solution come from
+// https://stackoverflow.com/questions/53540348/js-async-await-tasks-queue
+// The idea here is that until MathJax is ready we can just enqueue things
+// 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; }
+}
+
+class AutoQueue extends Queue {
+  constructor() {
+    super();
+    this._pendingPromise = false;
+  }
+
+  enqueue(action) {
+    return new Promise((resolve, reject) => {
+      super.enqueue({ action, resolve, reject });
+      this.dequeue();
+    });
+  }
+
+  async dequeue() {
+    if (this._pendingPromise) return false;
+
+    let item = super.dequeue();
+
+    if (!item) return false;
+
+    try {
+      this._pendingPromise = true;
+
+      let payload = await item.action(this);
+
+      this._pendingPromise = false;
+      item.resolve(payload);
+    } catch (e) {
+      this._pendingPromise = false;
+      item.reject(e);
+    } finally {
+      this.dequeue();
+    }
+
+    return true;
+  }
 }
 
+
 window.RunestoneBase = RunestoneBase;

runestone/parsons/js/parsons.js

@@ -464,9 +464,16 @@ export default class Parsons extends RunestoneBase {
         // outerHeight can be unreliable if elements are not yet visible
         // outerHeight will return bad results if MathJax has not rendered the math
         areaWidth = 300;
+        let self = this;
         maxFunction = async function(item) {
             if (this.options.language == "natural" || this.options.language == "math") {
-                await this.queueMathJax(item[0])
+                if (typeof runestoneMathready !== "undefined") {
+                    await runestoneMathReady.then(async () => await self.queueMathJax(item[0]));
+                } else { // this is for older rst builds not ptx
+                    if (typeof MathJax.startup !== "undefined") {
+                        await self.queueMathJax(item[0]);
+                    }
+                }
             }
             areaWidth = Math.max(areaWidth, item.outerWidth(true));
             item.width(areaWidth - 22);
@@ -570,12 +577,13 @@ export default class Parsons extends RunestoneBase {
             this.blocks[i].initializeInteractivity();
         }
         this.initializeTabIndex();
+        let self = this;
         if (
             this.options.language == "natural" ||
             this.options.language == "math"
         ) {
-            if (typeof MathJax !== "undefined") {
-                this.queueMathJax(this.outerDiv);
+            if (typeof MathJax.startup !== "undefined") {
+                self.queueMathJax(self.outerDiv);
             }
         }
     }