Fix popover

This commit is contained in:
Aiden Bai 2022-05-03 08:47:42 -07:00
parent 6e6dd4cb0b
commit 77485b754d
No known key found for this signature in database
GPG Key ID: D37584388675FF3A
9 changed files with 67 additions and 64 deletions

View File

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

25
assets/js/router.js Normal file
View File

@ -0,0 +1,25 @@
import { router, navigate } from "https://unpkg.com/million/dist/router.mjs"
export const init = (loader) => {
// SPA navigation for access later
window.navigate = navigate
// We only mutate document.title and content within .singlePage element
router(".singlePage")
// We need on initial load, then subsequent redirs
window.addEventListener("million:navigate", () => callback(loader))
window.addEventListener("DOMContentLoaded", () => callback(loader))
}
export const callback = (loader) => {
// requestAnimationFrame() delays graph draw until SPA routing is finished
const draw = () => {
const container = document.getElementById("graph-container")
// retry if the graph is not ready
if (!container) return requestAnimationFrame(draw)
// clear the graph in case there is anything within it
container.textContent = ""
loader()
}
requestAnimationFrame(draw)
}

View File

@ -19,7 +19,6 @@
</article> </article>
{{partial "contact.html" .}} {{partial "contact.html" .}}
</div> </div>
{{partial "popover.html" .}}
</body> </body>
</html> </html>

View File

@ -22,11 +22,10 @@
<li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li> <li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
{{partial "toc.html" .}} {{partial "toc.html" .}}
{{partial "textprocessing.html" . }} {{partial "textprocessing.html" . }}
</article> </article>
{{partial "footer.html" .}} {{partial "footer.html" .}}
{{partial "popover.html" .}}
</div> </div>
</body> </body>

View File

@ -28,7 +28,6 @@
</article> </article>
{{partial "contact.html" .}} {{partial "contact.html" .}}
</div> </div>
{{partial "popover.html" .}}
</body> </body>
</html> </html>

View File

@ -19,7 +19,6 @@
</article> </article>
{{partial "contact.html" .}} {{partial "contact.html" .}}
</div> </div>
{{partial "popover.html" .}}
</body> </body>
</html> </html>

View File

@ -13,12 +13,10 @@
{{partial "darkmode.html" .}} {{partial "darkmode.html" .}}
</header> </header>
<article> <article>
{{partial "toc.html" .}} {{partial "toc.html" .}}
{{partial "textprocessing.html" . }} {{partial "textprocessing.html" . }}
</article> </article>
{{partial "footer.html" .}} {{partial "footer.html" .}}
{{partial "popover.html" .}}
</div> </div>
</body> </body>
</html> </html>

View File

@ -35,6 +35,10 @@
<script src="{{$darkMode.Permalink}}"></script> <script src="{{$darkMode.Permalink}}"></script>
{{partial "katex.html" .}} {{partial "katex.html" .}}
{{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
resources.Minify }}
<script src="{{$popover.Permalink}}"></script>
<!-- Preload page vars --> <!-- Preload page vars -->
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
"md5" | resources.Minify | }} {{$contentIndex := resources.Get "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@ -59,36 +63,25 @@
})) }))
</script> </script>
{{if $.Site.Data.config.enableSPA}} {{if $.Site.Data.config.enableSPA}}
{{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
resources.Minify }}
<script type="module"> <script type="module">
import { router, navigate } from "https://unpkg.com/million/dist/router.mjs"; import { init } from '{{$router.Permalink}}';
// SPA navigation for access later init(() => {
window.navigate = navigate; drawGraph(
// We only mutate document.title and content within .singlePage element {{strings.TrimRight "/" .Page.Permalink}},
router(".singlePage"); {{strings.TrimRight "/" .Site.BaseURL}},
const callback = () => { {{$.Site.Data.graphConfig.paths}},
// requestAnimationFrame() delays graph draw until SPA routing is finished {{$.Site.Data.graphConfig.depth}},
const draw = () => { {{$.Site.Data.graphConfig.enableDrag}},
const container = document.getElementById("graph-container"); {{$.Site.Data.graphConfig.enableLegend}},
// retry if the graph is not ready {{$.Site.Data.graphConfig.enableZoom}}
if (!container) return requestAnimationFrame(draw); );
// clear the graph in case there is anything within it
container.textContent = "";
drawGraph( {{if $.Site.Data.config.enableLinkPreview}}
{{strings.TrimRight "/" .Page.Permalink}}, initPopover({{strings.TrimRight "/" .Site.BaseURL }})
{{strings.TrimRight "/" .Site.BaseURL}}, {{end}}
{{$.Site.Data.graphConfig.paths}}, });
{{$.Site.Data.graphConfig.depth}},
{{$.Site.Data.graphConfig.enableDrag}},
{{$.Site.Data.graphConfig.enableLegend}},
{{$.Site.Data.graphConfig.enableZoom}}
);
};
requestAnimationFrame(draw);
};
// We need on initial load, then subsequent redirs
window.addEventListener("million:navigate", callback);
window.addEventListener("DOMContentLoaded", callback);
</script> </script>
{{else}} {{else}}
<script>window.navigate = (url) => window.location.href = url</script> <script>window.navigate = (url) => window.location.href = url</script>

View File

@ -1,7 +0,0 @@
{{if $.Site.Data.config.enableLinkPreview}}
{{ $js := resources.Get "js/popover.js" | resources.Fingerprint "md5" | resources.Minify }}
<script src="{{ $js.Permalink }}"></script>
<script>
initPopover({{strings.TrimRight "/" .Site.BaseURL }})
</script>
{{end}}