Add simple support for cindyjscindy

Notably, the error output (in case of compiler errors) is generated
by overwriting the builtin console.error-function, which is a horrible
idea for many reasons, but there isn't really any other way right now.

1 files changed, 43 insertions, 0 deletions

diff --git a/public/js/extra.js b/public/js/extra.js
index c71475b5..633413eb 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -403,6 +403,49 @@ export function finishView (view) {
       console.warn(errormessage)
     }
   })
+  // cindy.js
+  const cindys = view.find('code.cindy.hljs.raw').removeClass('raw').removeClass("hljs")
+  cindys.each((key, value) => {
+    try {
+      var $value = $(value)
+      let drawscript = $value.text();
+      let canvas = document.createElement("div")
+      let debug = document.createElement("div")
+      var $ele = $(value).closest("pre")[0]
+
+      // remove current children (to remove the pre-formatted code text)
+      while ($ele.lastChild)
+        $ele.removeChild($ele.lastChild)
+
+      // append debug output (error messages) and canvas
+      $ele.appendChild(debug)
+      $ele.appendChild(canvas)
+      $ele.style.height = "30em";
+
+      console.log("cindyscript code is:", drawscript, $ele[0])
+      console.error = (err) => {
+        debug.innerText = err
+        $ele.removeChild(canvas)
+      }
+      CindyJS({
+        scripts: {draw: drawscript},
+        autoplay: true,
+        ports: [{
+          element: canvas,
+          fill: "parent",
+          transform: [{
+            visibleRect: [0, 1, 1, 0]
+          }]
+        }]
+      });
+
+      console.log("the cindy render hook was executed!")
+    } catch (err) {
+      $value.unwrap()
+      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      console.warn(err)
+    }
+  })
   // abc.js
   const abcs = view.find('div.abc.raw').removeClass('raw')
   abcs.each((key, value) => {