Fix code blocks not changing to plots and others (#2497)

For some unknown reason, all the `document.onreadystatechange = () => {`
checks stopped working. Thankfully, replacing them with
`document.addEventListener("readystatechange", () => {` fixed the
issues.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>

_includes/scripts/back_to_top.liquid

@@ -1,6 +1,6 @@
-<script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
+{% if site.back_to_top %}
-<script>
+  <script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
-  {% if site.back_to_top %}
+  <script>
     addBackToTop();
-  {% endif %}
+  </script>
-</script>
+{% endif %}

_includes/scripts/diff2html.liquid

@@ -6,11 +6,11 @@
     crossorigin="anonymous"
   ></script>
   <script>
-    let theme = determineComputedTheme();
+    let diff2HtmlTheme = determineComputedTheme();
 
     /* Create diff2html as another node and hide the code block, appending the diff2html node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-diff2html').forEach((elem) => {
           const textData = elem.textContent;
@@ -20,11 +20,11 @@
           let diffElement = document.createElement('div');
           diffElement.classList.add('diff2html');
           backup.after(diffElement);
-          const configuration = { colorScheme: theme, drawFileList: true, highlight: true, matching: 'lines' };
+          const configuration = { colorScheme: diff2HtmlTheme, drawFileList: true, highlight: true, matching: 'lines' };
           const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
           diff2htmlUi.draw();
         });
       }
-    };
+    });
   </script>
 {% endif %}

_includes/scripts/echarts.liquid

@@ -12,11 +12,11 @@
     ></script>
   {% endif %}
   <script>
-    let theme = determineComputedTheme();
+    let echartsTheme = determineComputedTheme();
 
     /* Create echarts chart as another node and hide the code block, appending the echarts node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-echarts').forEach((elem) => {
           const jsonData = elem.textContent;
@@ -28,7 +28,7 @@
           backup.after(chartElement);
 
           /* create echarts */
-          if (theme === 'dark') {
+          if (echartsTheme === 'dark') {
             var chart = echarts.init(chartElement, 'dark-fresh-cut');
           } else {
             var chart = echarts.init(chartElement);
@@ -40,6 +40,6 @@
           });
         });
       }
-    };
+    });
   </script>
 {% endif %}

_includes/scripts/leaflet.liquid

@@ -6,7 +6,7 @@
   ></script>
   <script>
     /* Create leaflet map as another node and hide the code block, appending the leaflet node after it */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
           const jsonData = elem.textContent;
@@ -26,6 +26,6 @@
           map.fitBounds(geoJSON.getBounds());
         });
       }
-    };
+    });
   </script>
 {% endif %}

_includes/scripts/mermaid.liquid

@@ -14,11 +14,11 @@
     ></script>
   {% endif %}
   <script>
-    let theme = determineComputedTheme();
+    let mermaidTheme = determineComputedTheme();
 
     /* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
           const svgCode = elem.textContent;
@@ -32,7 +32,7 @@
           backup.after(mermaid);
         });
 
-        mermaid.initialize({ theme: theme });
+        mermaid.initialize({ theme: mermaidTheme });
 
         /* Zoomable mermaid diagrams */
         if (typeof d3 !== 'undefined') {
@@ -50,6 +50,6 @@
           });
         }
       }
-    };
+    });
   </script>
 {% endif %}

_includes/scripts/pseudocode.liquid

@@ -30,7 +30,7 @@
     crossorigin="anonymous"
   ></script>
   <script>
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-pseudocode').forEach((elem) => {
           const texData = elem.textContent;
@@ -47,6 +47,6 @@
           pseudocode.renderElement(pseudoCodeElement);
         });
       }
-    };
+    });
   </script>
 {% endif %}

_includes/scripts/search.liquid

@@ -2,10 +2,10 @@
   <script type="module" src="{{ '/assets/js/search/ninja-keys.min.js' | relative_url | bust_file_cache }}"></script>
   <ninja-keys hideBreadcrumbs noAutoLoadMdIcons placeholder="Type to start searching"></ninja-keys>
   <script>
-    let theme = determineComputedTheme();
+    let searchTheme = determineComputedTheme();
     const ninjaKeys = document.querySelector('ninja-keys');
 
-    if (theme === 'dark') {
+    if (searchTheme === 'dark') {
       ninjaKeys.classList.add('dark');
     } else {
       ninjaKeys.classList.remove('dark');

_includes/scripts/typograms.liquid

@@ -4,7 +4,7 @@
   <script>
     /* Create typogram as another node and hide the code block, appending the typogram node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-typograms').forEach((elem) => {
           const texData = elem.textContent;
@@ -18,6 +18,6 @@
           parent.removeChild(elem.parentElement);
         });
       }
-    };
+    });
   </script>
 {% endif %}

_includes/scripts/vega.liquid

@@ -19,11 +19,11 @@
   ></script>
 
   <script>
-    let pageTheme = determineComputedTheme();
+    let vegaTheme = determineComputedTheme();
 
     /* Create vega lite chart as another node and hide the code block, appending the vega lite node after it
        this is done to enable retrieving the code again when changing theme between light/dark */
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
         document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
           const jsonData = elem.textContent;
@@ -35,13 +35,13 @@
           backup.after(chartElement);
 
           /* Embed the visualization in the container */
-          if (pageTheme === 'dark') {
+          if (vegaTheme === 'dark') {
             vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
           } else {
             vegaEmbed(chartElement, JSON.parse(jsonData));
           }
         });
       }
-    };
+    });
   </script>
 {% endif %}

assets/js/common.js

@@ -37,12 +37,12 @@ $(document).ready(function () {
   cssLink.rel = "stylesheet";
   cssLink.type = "text/css";
 
-  let theme = determineComputedTheme();
+  let jupyterTheme = determineComputedTheme();
 
   $(".jupyter-notebook-iframe-container iframe").each(function () {
     $(this).contents().find("head").append(cssLink);
 
-    if (theme == "dark") {
+    if (jupyterTheme == "dark") {
       $(this).bind("load", function () {
         $(this).contents().find("body").attr({
           "data-jp-theme-light": "false",

assets/js/shortcut-key.js

@@ -1,5 +1,5 @@
 // Check if the user is on a Mac and update the shortcut key for search accordingly
-document.onreadystatechange = () => {
+document.addEventListener("readystatechange", () => {
   if (document.readyState === "interactive") {
     let isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
     let shortcutKeyElement = document.querySelector("#search-toggle .nav-link");
@@ -8,4 +8,4 @@ document.onreadystatechange = () => {
       shortcutKeyElement.innerHTML = '&#x2318; k <i class="ti ti-search"></i>';
     }
   }
-};
+});