diff --git a/page_template.cshtml b/page_template.cshtml index d4be3e0..acaef55 100644 --- a/page_template.cshtml +++ b/page_template.cshtml @@ -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 -

+

# @item.Chapter.Name - @item.Chapter.Subtitle

} diff --git a/quest_reader.csproj b/quest_reader.csproj index d7e1cf0..6af972c 100644 --- a/quest_reader.csproj +++ b/quest_reader.csproj @@ -17,7 +17,7 @@ - 1.0.1 + 1.0.2 QuestReader diff --git a/web/main.ts b/web/main.ts index a901b93..3b96a91 100644 --- a/web/main.ts +++ b/web/main.ts @@ -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(`#post-${announcingPost} img`).complete) return; window.plausible("landmark", {props: {id: e.target.id ? e.target.id : e.target.tagName}}); observer.unobserve(e.target);