summaryrefslogtreecommitdiff
path: root/public/js
diff options
context:
space:
mode:
authorstuebinm2021-03-09 01:23:23 +0100
committerstuebinm2021-05-17 20:12:50 +0200
commitb0f98a43381486995b99ed79e0eabb3af149dbf3 (patch)
treedd199965ebc5b6037bf77bc34fd80b9ac8f8935d /public/js
parent8b374d8c1972db2b09126e8f9cc10384552abf29 (diff)
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.
Diffstat (limited to 'public/js')
-rw-r--r--public/js/extra.js43
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) => {