Skip to content

Commit

Permalink
Fix code blocks not changing to plots and others (alshedivat#2497)
Browse files Browse the repository at this point in the history
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>
  • Loading branch information
george-gca authored Jun 11, 2024
1 parent a789044 commit 3ec0e26
Show file tree
Hide file tree
Showing 11 changed files with 33 additions and 33 deletions.
10 changes: 5 additions & 5 deletions _includes/scripts/back_to_top.liquid
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
<script>
{% if site.back_to_top %}
{% if site.back_to_top %}
<script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
<script>
addBackToTop();
{% endif %}
</script>
</script>
{% endif %}
8 changes: 4 additions & 4 deletions _includes/scripts/diff2html.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 %}
8 changes: 4 additions & 4 deletions _includes/scripts/echarts.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -40,6 +40,6 @@
});
});
}
};
});
</script>
{% endif %}
4 changes: 2 additions & 2 deletions _includes/scripts/leaflet.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -26,6 +26,6 @@
map.fitBounds(geoJSON.getBounds());
});
}
};
});
</script>
{% endif %}
8 changes: 4 additions & 4 deletions _includes/scripts/mermaid.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -32,7 +32,7 @@
backup.after(mermaid);
});
mermaid.initialize({ theme: theme });
mermaid.initialize({ theme: mermaidTheme });
/* Zoomable mermaid diagrams */
if (typeof d3 !== 'undefined') {
Expand All @@ -50,6 +50,6 @@
});
}
}
};
});
</script>
{% endif %}
4 changes: 2 additions & 2 deletions _includes/scripts/pseudocode.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -47,6 +47,6 @@
pseudocode.renderElement(pseudoCodeElement);
});
}
};
});
</script>
{% endif %}
4 changes: 2 additions & 2 deletions _includes/scripts/search.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
4 changes: 2 additions & 2 deletions _includes/scripts/typograms.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -18,6 +18,6 @@
parent.removeChild(elem.parentElement);
});
}
};
});
</script>
{% endif %}
8 changes: 4 additions & 4 deletions _includes/scripts/vega.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 %}
4 changes: 2 additions & 2 deletions assets/js/common.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions assets/js/shortcut-key.js
Original file line number Diff line number Diff line change
@@ -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");
Expand All @@ -8,4 +8,4 @@ document.onreadystatechange = () => {
shortcutKeyElement.innerHTML = '&#x2318; k <i class="ti ti-search"></i>';
}
}
};
});

0 comments on commit 3ec0e26

Please sign in to comment.