Saphire/quest-reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix landmark observer

Browse Source
This commit is contained in:
Saphire 2022-02-21 12:16:48 +07:00
parent ff6d629c1c
commit 10ab7fa470
Signed by: Saphire
GPG Key ID: B26EB7A1F07044C4
3 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
page_template.cshtml
View File

@ -81,7 +81,7 @@
{
@if (item.IsChapterAnnounce) {
// This might nullref throw, but let's assume this bool is always set only when this is set too
<h2 id="chapter-@item.Chapter!.Id" class="chapter-announce">
<h2 id="chapter-@item.Chapter!.Id" class="chapter-announce" data-announcing-post="@item.Id">
<a class="chapter-anchor" href="#chapter-@item.Chapter.Id">#</a> <span class="chapter-name">@item.Chapter.Name</span> - <span class="chapter-subtitle">@item.Chapter.Subtitle</span>
</h2>
}

2
quest_reader.csproj
View File

@ -17,7 +17,7 @@
<PackageReference Include="HtmlAgilityPack" Version="1.11.42" />
</ItemGroup>
<PropertyGroup>
<VersionPrefix>1.0.1</VersionPrefix>
<VersionPrefix>1.0.2</VersionPrefix>
<RootNamespace>QuestReader</RootNamespace>
</PropertyGroup>
<Target Name="SetSourceRevisionId" BeforeTargets="InitializeSourceControlInformation">

32
web/main.ts
View File

@ -1,8 +1,10 @@
class VisitAnalytics {
observer;
landmarksObserver: IntersectionObserver;
constructor() {
window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); };
// Hopefull this won't miss anything
if (document.readyState == "interactive")
this.init()
else
@ -10,23 +12,29 @@ class VisitAnalytics {
}
init() {
let options = {
root: null,
rootMargin: "0px",
threshold: 1.0
};
this.landmarksObserver = new IntersectionObserver(
(entries, observer) => this.handleLandmarks(entries, observer),
{
root: null,
rootMargin: "0px",
threshold: 1.0
}
);
this.observer = new IntersectionObserver((entries, observer) => this.handleIntersect(entries, observer), options);
{
var all = document.querySelectorAll(".chapter-announce");
all.forEach(elem => this.landmarksObserver.observe(elem));
this.landmarksObserver.observe(document.querySelector("footer"));
}
var all = document.querySelectorAll(".chapter-announce");
all.forEach(elem => this.observer.observe(elem));
this.observer.observe(document.querySelector("footer"));
console.log("Intersection observer ready");
}
handleIntersect(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
handleLandmarks(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
entries.filter(e => e.isIntersecting).forEach(e => {
if (e.target.className == "chapter-announce" && !e.target.nextElementSibling.querySelector("img").complete)
const announcingPost = e.target.getAttribute("data-announcing-post");
if (announcingPost != null && !e.target.parentElement.querySelector<HTMLImageElement>(`#post-${announcingPost} img`).complete)
return;
window.plausible("landmark", {props: {id: e.target.id ? e.target.id : e.target.tagName}});
observer.unobserve(e.target);