Move bergamot widget into blog theme

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>

assets/js/bergamot-helpers.js

@@ -0,0 +1,98 @@
+const loadedWidgets = {};
+const getButtons = (inputGroup) => {
+    return {
+        play: inputGroup.querySelector(".bergamot-play"),
+        reset: inputGroup.querySelector(".bergamot-reset"),
+        close: inputGroup.querySelector(".bergamot-close"),
+    }
+}
+const setRunning = (inputGroup, running) => {
+    if (inputGroup !== null) {
+        const buttons = getButtons(inputGroup);
+        if (buttons.play) buttons.play.classList.toggle("bergamot-hidden", running);
+        if (buttons.reset) buttons.reset.classList.toggle("bergamot-hidden", !running);
+        if (buttons.close) buttons.close.classList.toggle("bergamot-hidden", !running);
+    }
+}
+
+// The object language parsing is handling by a separate standalone Elm
+// application in the ObjectLanguage module, which has two ports:
+//
+// * `parseString` requests a string to be parsed
+// * `parsedString` returns the parsed string, or null
+//
+// We want there to be a single global ObjectLanguage object, but it works
+// on a "subscription" model (we have to give a callback to its port).
+// Configure this callback to invoke `resolve` functions from a list,
+// so that callers can just get a promise. This way we aren't continuously
+// registering more and more handlers for each parsed string, and we can
+// use a convenient promise API.
+const parsingPromiseResolvers = {};
+const ensureObjectLanguage = () => {
+    if (!window.Bergamot.ObjectLanguage) {
+        window.Bergamot.ObjectLanguage = Elm.Bergamot.ObjectLanguage.init({});
+        window.Bergamot.ObjectLanguage.ports.parsedString.subscribe(({ string, term }) => {
+           if (string in parsingPromiseResolvers) {
+              for (const resolver of parsingPromiseResolvers[string]) {
+                resolver(term);
+              }
+              parsingPromiseResolvers[string] = [];
+           }
+        });
+    }
+    return window.Bergamot.ObjectLanguage;
+}
+const parseString = (str) => {
+    if (!(str in parsingPromiseResolvers)) {
+        parsingPromiseResolvers[str] = [];
+    }
+
+    return new Promise(resolve => {
+        parsingPromiseResolvers[str].push(resolve);
+        ensureObjectLanguage().ports.parseString.send(str);
+    });
+}
+
+window.Bergamot = {};
+window.Bergamot.run = (inputGroup, nodeId, inputPrompt, rules, renderPreset, input) => {
+    var app = Elm.Main.init({
+        node: document.getElementById(nodeId),
+        flags: {
+            inputModes: {
+                "Languge Term": { "custom": "Language Term" },
+                "Query": "query"
+            },
+            renderRules: window.Bergamot.renderPresets[renderPreset],
+            rules, input
+        }
+    });
+    app.ports.convertInput.subscribe(async ({ mode, input }) => {
+        let query = await parseString(input);
+        if (query !== null) {
+            query = inputPrompt.replace("TERM", query);
+            app.ports.receiveConverted.send({ input, result: { query } });
+        } else {
+            app.ports.receiveConverted.send({ input, result: { error: "Unable to parse object language term" } });
+        }
+    });
+    loadedWidgets[nodeId] = { app, parentNode: inputGroup ? inputGroup.parentElement : null };
+    setRunning(inputGroup, true);
+};
+window.Bergamot.runPreset = (inputGroup, nodeId, presetName) => {
+    const preset = window.Bergamot.presets[presetName];
+    window.Bergamot.run(inputGroup, nodeId, preset.inputPrompt, preset.rules, preset.renderPreset, preset.query || "");
+};
+window.Bergamot.close = (inputGroup, nodeId) => {
+    if (!(nodeId in loadedWidgets)) return;
+
+    const placeholderDiv = document.createElement('div');
+    placeholderDiv.id = nodeId;
+
+    const widget = loadedWidgets[nodeId];
+    const elmRoot = widget.parentNode.querySelector(".bergamot-root");
+    elmRoot.replaceWith(placeholderDiv)
+    delete loadedWidgets[nodeId];
+    setRunning(inputGroup, false);
+}
+window.Bergamot.presets = {};
+window.Bergamot.renderPresets = {};

assets/js/katex-component.js

@@ -0,0 +1,31 @@
+class KatexExpressionShim extends HTMLElement {
+    static observedAttributes = ["expression", "katex-options"];
+    targetSpan;
+
+    constructor() {
+        super();
+    }
+
+    doRender() {
+        if (!this.targetSpan) return;
+
+        const options = this.hasAttribute("katex-options") ?
+            this.getAttribute("katex-options") : {};
+        katex.render(
+            this.getAttribute("expression"),
+            this.targetSpan,
+            JSON.parse(options)
+        );
+    }
+
+    connectedCallback() {
+        this.targetSpan = document.createElement('span');
+        this.appendChild(this.targetSpan);
+        this.doRender();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.doRender();
+    }
+}
+customElements.define("katex-expression", KatexExpressionShim);