target="_self" for simpler scroll-to-fragment

Janiczek · Nov 2, 2024 · 28d5e0d · 28d5e0d
1 parent 6c5a85b
commit 28d5e0d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 40 deletions.
diff --git a/public/scripts/x-intersection-observer.js b/public/scripts/x-intersection-observer.js
@@ -28,7 +28,6 @@ customElements.define(
     }
 
     observedElements = new Set();
-    mountTime = Date.now();
 
     connectedCallback() {
       let lastIntersectionEntry = null;
@@ -64,7 +63,7 @@ customElements.define(
             const intersectionData = {
               element: targetEntry.target,
               isIntersecting: targetEntry.isIntersecting,
-              time: targetEntry.time + this.mountTime,
+              time: targetEntry.time,
             };
 
             lastIntersectionEntry = targetEntry;

diff --git a/src/Frontend.elm b/src/Frontend.elm
@@ -2,7 +2,6 @@ module Frontend exposing (..)
 
 import Admin
 import Browser exposing (UrlRequest(..))
-import Browser.Dom as Dom
 import Browser.Navigation as Nav
 import Cmd.ExtraExtra as Cmd
 import Data.Auth as Auth exposing (Auth, Plaintext)
@@ -223,13 +222,8 @@ update msg ({ loginForm } as model) =
                     ( model, Cmd.none )
     in
     case msg of
-        FailedScrollToGuideSectionViaLink ->
-            -- Might be indicative of a bug in the Guide
-            ( model, Cmd.none )
-
-        ScrolledToGuideSectionViaLink millis ->
-            -- Already clicked it, URL / Route already changed, already scrolled the DOM. Nothing to do.
-            ( { model | lastGuideTocSectionClick = millis }
+        ClickedGuideSection time ->
+            ( { model | lastGuideTocSectionClick = time }
             , Cmd.none
             )
 
@@ -274,30 +268,9 @@ update msg ({ loginForm } as model) =
                     url
                         |> Route.fromUrl
                         |> sanitizeRoute model.worldData
-
-                scrollCmd =
-                    case Route.getGuideHeading route of
-                        Nothing ->
-                            Cmd.none
-
-                        Just heading ->
-                            Task.map2 Tuple.pair
-                                Time.now
-                                (Dom.getElement heading
-                                    |> Task.andThen (\{ element } -> Dom.setViewport 0 element.y)
-                                )
-                                |> Task.attempt
-                                    (\result ->
-                                        case result of
-                                            Ok ( time, _ ) ->
-                                                ScrolledToGuideSectionViaLink (Time.posixToMillis time)
-
-                                            Err _ ->
-                                                FailedScrollToGuideSectionViaLink
-                                    )
             in
             ( { model | route = route }
-            , scrollCmd
+            , Cmd.none
             )
 
         Logout ->
@@ -1198,10 +1171,6 @@ guideView currentGuideHeading lastGuideTocSectionClick =
     [ IntersectionObserver.view
         "div[data-guide-section]"
         (\intersection ->
-            let
-                _ =
-                    Debug.log "times" { i = intersection.time, last = lastGuideTocSectionClick }
-            in
             if Time.posixToMillis intersection.time > lastGuideTocSectionClick + 500 then
                 JD.at [ "dataset", "guideSection" ] JD.string
                     |> JD.map ScrolledToGuideSection
@@ -1245,7 +1214,13 @@ guideTocItemView { current } item =
         , TW.mod "hover" "text-green-100 bg-green-800"
         ]
         [ H.a
-            [ HA.href ("#" ++ dasherized) ]
+            [ HA.href ("#" ++ dasherized)
+            , HA.target "_self"
+            , HE.on "click"
+                (JD.map ClickedGuideSection
+                    (JD.field "timeStamp" (JD.float |> JD.map round))
+                )
+            ]
             [ H.text item ]
         ]
 

diff --git a/src/Types.elm b/src/Types.elm
@@ -60,7 +60,7 @@ type alias FrontendModel =
     , fightStrategyText : String
     , expandedQuests : SeqSet Quest.Name
     , userWantsToShowAreaDanger : Bool
-    , lastGuideTocSectionClick : Int
+    , lastGuideTocSectionClick : Int -- this is a timestamp where 0 is "page loaded", not 1970-01-01. Same with the intersection observer time.
 
     -- admin state
     , lastTenToBackendMsgs : List ( PlayerName, World.Name, ToBackend )
@@ -143,9 +143,8 @@ type FrontendMsg
     | CollapseQuestItem Quest.Name
     | AskToStopProgressing Quest.Name
     | AskToStartProgressing Quest.Name
-    | FailedScrollToGuideSectionViaLink
-    | ScrolledToGuideSectionViaLink Int
     | ScrolledToGuideSection String
+    | ClickedGuideSection Int
 
 
 type BarterMsg