mirror of
https://github.com/tcsenpai/obsidiangarden_netlify.git
synced 2025-06-06 04:35:20 +00:00
c1891a3ee3
Previously: When there are nested collapsible callouts, if you want to open a child one, by clicking on it, the parent one will close. You would have to re-open the parent one to see the now-open child callout. Now: To open and close a collapsible callout, you have to click on the "callout-title" div; resolve the problem with nested one. Live preview: https://voidblueprint.vercel.app/void-blueprint/physics/classic-physics/electro-magnetism/charge-conservation-law/
42 lines
1.6 KiB
Plaintext
42 lines
1.6 KiB
Plaintext
<script src="https://cdn.jsdelivr.net/npm/lucide@0.115.0/dist/umd/lucide.min.js"></script>
|
|
<script>
|
|
// Create callout icons
|
|
window.addEventListener("load", () => {
|
|
document.querySelectorAll(".callout").forEach((elem) => {
|
|
const icon = getComputedStyle(elem).getPropertyValue('--callout-icon');
|
|
const iconName = icon && icon.trim().replace(/^lucide-/, "");
|
|
|
|
if (iconName) {
|
|
const calloutTitle = elem.querySelector(".callout-title");
|
|
|
|
if (calloutTitle) {
|
|
const calloutIconContainer = document.createElement("div");
|
|
const calloutIcon = document.createElement("i");
|
|
|
|
calloutIconContainer.appendChild(calloutIcon);
|
|
calloutIcon.setAttribute("icon-name", iconName);
|
|
calloutIconContainer.setAttribute("class", "callout-icon");
|
|
calloutTitle.insertBefore(calloutIconContainer, calloutTitle.firstChild);
|
|
}
|
|
}
|
|
});
|
|
|
|
lucide.createIcons({
|
|
attrs: {
|
|
class: ["svg-icon"]
|
|
}
|
|
});
|
|
|
|
// Collapse callouts
|
|
Array.from(document.querySelectorAll(".callout.is-collapsible")).forEach((elem) => {
|
|
elem.querySelector('.callout-title').addEventListener("click", (event) => {
|
|
if (elem.classList.contains("is-collapsed")) {
|
|
elem.classList.remove("is-collapsed");
|
|
} else {
|
|
elem.classList.add("is-collapsed");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|