ar.falsy.cat/assets/js/popover.js
Claudio Yanes 7e0f2e4449 Fix fetchData
The fetchData function suffer from a race condition. If the function is
called before the promise finishes, it will result in another pair of
HTTP request. This does not only make the function useless but
Actually, it makes it harmful as the data might be redownloaded twice.

Now fetchData is not a function but rather the promise by itself.
Previous callers are expected to await the variable instead, this
should be not concern as awaiting a promise multiple time in
JavaScript is completely safe.
2022-03-04 02:25:30 +00:00

35 lines
1.3 KiB
JavaScript

function htmlToElement(html) {
const template = document.createElement('template')
html = html.trim()
template.innerHTML = html
return template.content.firstChild
}
function initPopover(base) {
const baseUrl = base.replace(window.location.origin, "") // is this useless?
document.addEventListener("DOMContentLoaded", () => {
fetchData.then(({content}) => {
const links = [...document.getElementsByClassName("internal-link")]
links.forEach(li => {
const linkDest = content[li.dataset.src.replace(baseUrl, "")]
// const linkDest = content[li.dataset.src]
if (linkDest) {
const popoverElement = `<div class="popover">
<h3>${linkDest.title}</h3>
<p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
<p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
</div>`
const el = htmlToElement(popoverElement)
li.appendChild(el)
li.addEventListener("mouseover", () => {
el.classList.add("visible")
})
li.addEventListener("mouseout", () => {
el.classList.remove("visible")
})
}
})
})
})
}