mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-22 19:46:23 +00:00
7e0f2e4449
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.
34 lines
1.3 KiB
JavaScript
34 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")
|
|
})
|
|
}
|
|
})
|
|
})
|
|
})
|
|
}
|