File size: 2,763 Bytes
e903a32 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
---
---
<div class="sidenote-container">
<aside class="sidenote">
<slot />
</aside>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const containers = document.querySelectorAll(".sidenote-container");
containers.forEach((container) => {
// Find the previous element (sibling just before)
const previousElement = container.previousElementSibling as HTMLElement;
if (previousElement && previousElement.parentNode) {
// Create a wrapper div that will contain both the previous element and the sidenote
const wrapper = document.createElement("div");
wrapper.className = "sidenote-wrapper";
// Insert the wrapper before the previous element
previousElement.parentNode.insertBefore(wrapper, previousElement);
// Move both the previous element and the sidenote container into the wrapper
wrapper.appendChild(previousElement);
wrapper.appendChild(container);
// Style the wrapper to create the layout
wrapper.style.position = "relative";
wrapper.style.display = "block";
// Style the sidenote container so it positions correctly
const sidenoteContainer = container as HTMLElement;
sidenoteContainer.style.position = "absolute";
sidenoteContainer.style.top = "0";
sidenoteContainer.style.right = "-292px"; // 260px width + 32px gap
sidenoteContainer.style.width = "260px";
// Display the container with a fade-in
sidenoteContainer.style.display = "block";
sidenoteContainer.style.opacity = "0";
// Fade-in with transition
setTimeout(() => {
sidenoteContainer.style.opacity = "1";
}, 10);
}
});
});
</script>
<style is:global>
.sidenote-wrapper {
/* The wrapper contains the original element and the sidenote */
position: relative;
display: block;
}
.sidenote-container {
/* Hidden by default, will be displayed by JS */
display: none;
margin: 0;
/* Transition for fade-in */
transition: opacity 0.3s ease-in-out;
}
.sidenote {
border-radius: 8px;
padding: 0 30px;
font-size: 0.9rem;
color: var(--muted-color);
margin: 0;
}
@media (--bp-content-collapse) {
.sidenote-wrapper {
/* Sur mobile, le wrapper n'a pas besoin de position relative */
position: static !important;
}
.sidenote-container {
position: static !important;
width: auto !important;
right: auto !important;
top: auto !important;
margin-top: 8px;
/* Affichage normal sur mobile */
display: block !important;
opacity: 1 !important;
}
.sidenote {
padding: 0;
}
}
</style>
|