From 09989ca262f53f21f43ebc25ba0dca1079664aae Mon Sep 17 00:00:00 2001
From: Mike Smullin <mike@mikesmullin.com>
Date: Tue, 8 Aug 2023 02:30:20 -0600
Subject: [PATCH] now preview reloads chart as users type

---
 charts-render.js | 66 +++++++++++++++++++++++-------------------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/charts-render.js b/charts-render.js
index 003ed11..d913dc4 100644
--- a/charts-render.js
+++ b/charts-render.js
@@ -1,41 +1,39 @@
-function contentLoaded() {
-
-  var chartElements = document.getElementsByClassName("chartjs");
-
-  var changes = [];
-
-  for (let index = 0; index < chartElements.length; index++) {
-    var element = chartElements.item(index);
-    var source = element.textContent;
-
-    changes.push({
-      placeholder: element.parentElement.parentElement,
-      chart: element,
-      source
-    });
-
+// const log = s => {
+//   const p = document.createElement('p');
+//   p.innerText = s;
+//   document.body.appendChild(p);
+// };
 
+function contentLoaded() {
+  for (const canvas of document.querySelectorAll("canvas.chartjs")) {
+    const p = canvas.parentElement.parentElement;
+    if ('PRE' == p.tagName) {
+      // replace <pre><code><canvas> with just <canvas>
+      p.outerHTML = canvas.outerHTML;
+    }
   }
 
-  for (let index = 0; index < changes.length; index++) {
-    const element = changes[index];
-    element.placeholder.outerHTML = element.chart.outerHTML;
-  }
-
-  var newchartElements = document.getElementsByClassName("chartjs");
-
-  for (let index = 0; index < newchartElements.length; index++) {
-    var element = newchartElements.item(index);
-    var source = element.textContent.replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:/g, '"$2": ');
-    new Chart(element.getContext("2d"), JSON.parse(source.trim()));
+  for (const canvas of document.querySelectorAll("canvas.chartjs")) {
+    if ('initialized' == canvas.getAttribute('data-chartjs-status')) {
+      continue;
+    }
+
+    canvas.setAttribute('data-chartjs-status', 'initialized');
+
+    try {
+      const json = JSON.parse(canvas.textContent);
+      new Chart(canvas.getContext("2d"), json);
+    }
+    catch (e) {
+      // invalid json syntax!
+      canvas.outerHTML = `<pre><code>${e}</code></pre>`;
+    }
   }
-
 }
 
-window.addEventListener(
-  "load",
-  function () {
+window.addEventListener("load", contentLoaded, false);
+window.addEventListener("message", (event) => {
+  if ('updateContent' == event?.data?.type) {
     contentLoaded();
-  },
-  false
-);
+  }
+}, false);
\ No newline at end of file