🩹 Fix viewport reset when changing pages

ccamel · Jul 11, 2024 · d258612 · d258612
1 parent 74285bb
commit d258612
Showing 1 changed file with 54 additions and 51 deletions.
diff --git a/src/App/Update.elm b/src/App/Update.elm
@@ -34,12 +34,20 @@ update msg model =
         LinkClicked urlRequest ->
             case urlRequest of
                 Browser.Internal location ->
-                    ( model
-                    , Cmd.batch
-                        [ Nav.pushUrl model.navKey (Url.toString location)
-                        , Task.perform (always NoOp) (Dom.setViewport 0 0)
-                        ]
-                    )
+                    let
+                        newRoute =
+                            toRoute model.flags.basePath location
+                    in
+                    if model.route == newRoute then
+                        ( model, Cmd.none )
+
+                    else
+                        ( model
+                        , Cmd.batch
+                            [ Nav.pushUrl model.navKey (Url.toString location)
+                            , Task.perform (always NoOp) (Dom.setViewport 0 0)
+                            ]
+                        )
 
                 Browser.External href ->
                     ( model, Nav.load href )
@@ -48,69 +56,64 @@ update msg model =
             let
                 newRoute =
                     toRoute model.flags.basePath location
-            in
-            if model.route == newRoute then
-                ( model, Cmd.none )
 
-            else
-                let
-                    clearedModel =
-                        { model | pages = emptyPagesModel }
+                clearedModel =
+                    { model | pages = emptyPagesModel }
 
-                    ( aboutModel, aboutCmd ) =
-                        Page.About.init model.flags
+                ( aboutModel, aboutCmd ) =
+                    Page.About.init model.flags
 
-                    ( calcModel, calcCmd ) =
-                        Page.Calc.init
+                ( calcModel, calcCmd ) =
+                    Page.Calc.init
 
-                    ( lissajousModel, lissajousCmd ) =
-                        Page.Lissajous.init
+                ( lissajousModel, lissajousCmd ) =
+                    Page.Lissajous.init
 
-                    ( digitalClockModel, digitalClockCmd ) =
-                        Page.DigitalClock.init
+                ( digitalClockModel, digitalClockCmd ) =
+                    Page.DigitalClock.init
 
-                    ( mazeModel, mazeCmd ) =
-                        Page.Maze.init
+                ( mazeModel, mazeCmd ) =
+                    Page.Maze.init
 
-                    ( physicsModel, physicsCmd ) =
-                        Page.Physics.init
+                ( physicsModel, physicsCmd ) =
+                    Page.Physics.init
 
-                    ( termModel, termCmd ) =
-                        Page.Term.init
+                ( termModel, termCmd ) =
+                    Page.Term.init
 
-                    ( asteroidsModel, asteroidsCmd ) =
-                        Page.Asteroids.init
-                in
-                case newRoute of
-                    NotFoundRoute ->
-                        ( { clearedModel | route = newRoute }, Cmd.none )
+                ( asteroidsModel, asteroidsCmd ) =
+                    Page.Asteroids.init
+            in
+            case newRoute of
+                NotFoundRoute ->
+                    ( { clearedModel | route = newRoute }, Cmd.none )
 
-                    Home ->
-                        ( { clearedModel | route = newRoute }, Cmd.none )
+                Home ->
+                    ( { clearedModel | route = newRoute }, Cmd.none )
 
-                    Page About ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | aboutPage = Just aboutModel } }, Cmd.map AboutPageMsg aboutCmd )
+                Page About ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | aboutPage = Just aboutModel } }, Cmd.map AboutPageMsg aboutCmd )
 
-                    Page Calc ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | calcPage = Just calcModel } }, Cmd.map CalcPageMsg calcCmd )
+                Page Calc ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | calcPage = Just calcModel } }, Cmd.map CalcPageMsg calcCmd )
 
-                    Page Lissajous ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | lissajousPage = Just lissajousModel } }, Cmd.map LissajousPageMsg lissajousCmd )
+                Page Lissajous ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | lissajousPage = Just lissajousModel } }, Cmd.map LissajousPageMsg lissajousCmd )
 
-                    Page DigitalClock ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | digitalClockPage = Just digitalClockModel } }, Cmd.map DigitalClockPageMsg digitalClockCmd )
+                Page DigitalClock ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | digitalClockPage = Just digitalClockModel } }, Cmd.map DigitalClockPageMsg digitalClockCmd )
 
-                    Page Maze ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | mazePage = Just mazeModel } }, Cmd.map MazePageMsg mazeCmd )
+                Page Maze ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | mazePage = Just mazeModel } }, Cmd.map MazePageMsg mazeCmd )
 
-                    Page Physics ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | physicsPage = Just physicsModel } }, Cmd.map PhysicsPageMsg physicsCmd )
+                Page Physics ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | physicsPage = Just physicsModel } }, Cmd.map PhysicsPageMsg physicsCmd )
 
-                    Page Term ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | termPage = Just termModel } }, Cmd.map TermPageMsg termCmd )
+                Page Term ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | termPage = Just termModel } }, Cmd.map TermPageMsg termCmd )
 
-                    Page Asteroids ->
-                        ( { clearedModel | route = newRoute, pages = { emptyPagesModel | asteroidsPage = Just asteroidsModel } }, Cmd.map AsteroidsPageMsg asteroidsCmd )
+                Page Asteroids ->
+                    ( { clearedModel | route = newRoute, pages = { emptyPagesModel | asteroidsPage = Just asteroidsModel } }, Cmd.map AsteroidsPageMsg asteroidsCmd )
 
         -- messages from pages
         AboutPageMsg m ->