Fix popover
This commit is contained in:
parent
6e6dd4cb0b
commit
77485b754d
@ -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
25
assets/js/router.js
Normal 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)
|
||||||
|
}
|
@ -19,7 +19,6 @@
|
|||||||
</article>
|
</article>
|
||||||
{{partial "contact.html" .}}
|
{{partial "contact.html" .}}
|
||||||
</div>
|
</div>
|
||||||
{{partial "popover.html" .}}
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -28,7 +28,6 @@
|
|||||||
</article>
|
</article>
|
||||||
{{partial "contact.html" .}}
|
{{partial "contact.html" .}}
|
||||||
</div>
|
</div>
|
||||||
{{partial "popover.html" .}}
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
@ -19,7 +19,6 @@
|
|||||||
</article>
|
</article>
|
||||||
{{partial "contact.html" .}}
|
{{partial "contact.html" .}}
|
||||||
</div>
|
</div>
|
||||||
{{partial "popover.html" .}}
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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}}
|
|
Loading…
Reference in New Issue
Block a user