Fix landmark observer

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
-                    <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>
                 }

quest_reader.csproj

@@ -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">

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 = {
+        this.landmarksObserver = new IntersectionObserver(
-            root: null,
+            (entries, observer) => this.handleLandmarks(entries, observer),
-            rootMargin: "0px",
+            {
-            threshold: 1.0
+                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);