Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/on click #254

Merged
merged 4 commits into from
Jul 10, 2024
Merged

Refactor/on click #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
21b4b9b
:heavy_plus_sign: Add elm-community/html-extra dependency
ccamel Jul 10, 2024
6103059
:technologist: Canonicalize navigation (LinkClicked, UrlChanged)
ccamel Jul 9, 2024
4758fe7
:art: Use always function where relevant
ccamel Jul 10, 2024
280b727
:adhesive_bandage: Reset viewport when changing page
ccamel Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 56 additions & 53 deletions elm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,60 @@
{
"type": "application",
"source-directories": ["src"],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"BrianHicks/elm-particle": "1.5.0",
"Chadtech/elm-vector": "3.0.2",
"MacCASOutreach/graphicsvg": "8.1.0",
"andre-dietrich/elm-conditional": "1.0.0",
"avh4/elm-color": "1.0.0",
"cuducos/elm-format-number": "9.0.1",
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/file": "1.0.5",
"elm/html": "1.0.0",
"elm/json": "1.1.3",
"elm/random": "1.0.0",
"elm/svg": "1.0.1",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm-community/basics-extra": "4.1.0",
"elm-community/list-extra": "8.7.0",
"elm-community/random-extra": "3.2.0",
"elm-explorations/markdown": "1.0.0",
"fapian/elm-html-aria": "1.4.0",
"harmboschloo/elm-ecs": "2.0.0",
"ianmackenzie/elm-geometry": "3.9.1",
"ianmackenzie/elm-units": "2.10.0",
"joakin/elm-canvas": "5.0.0",
"lukewestby/elm-string-interpolate": "1.0.4",
"mpizenberg/elm-pointer-events": "5.0.0",
"myrho/elm-round": "1.0.5",
"noahzgordon/elm-color-extra": "1.0.2",
"ohanhi/keyboard": "2.0.1",
"simonh1000/elm-colorpicker": "2.0.3",
"wsowens/term": "2.0.6"
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"BrianHicks/elm-particle": "1.5.0",
"Chadtech/elm-vector": "3.0.2",
"MacCASOutreach/graphicsvg": "8.1.0",
"andre-dietrich/elm-conditional": "1.0.0",
"avh4/elm-color": "1.0.0",
"cuducos/elm-format-number": "9.0.1",
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/file": "1.0.5",
"elm/html": "1.0.0",
"elm/json": "1.1.3",
"elm/random": "1.0.0",
"elm/svg": "1.0.1",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm-community/basics-extra": "4.1.0",
"elm-community/html-extra": "3.4.0",
"elm-community/list-extra": "8.7.0",
"elm-community/random-extra": "3.2.0",
"elm-explorations/markdown": "1.0.0",
"fapian/elm-html-aria": "1.4.0",
"harmboschloo/elm-ecs": "2.0.0",
"ianmackenzie/elm-geometry": "3.9.1",
"ianmackenzie/elm-units": "2.10.0",
"joakin/elm-canvas": "5.0.0",
"lukewestby/elm-string-interpolate": "1.0.4",
"mpizenberg/elm-pointer-events": "5.0.0",
"myrho/elm-round": "1.0.5",
"noahzgordon/elm-color-extra": "1.0.2",
"ohanhi/keyboard": "2.0.1",
"simonh1000/elm-colorpicker": "2.0.3",
"wsowens/term": "2.0.6"
},
"indirect": {
"elm/bytes": "1.0.8",
"elm/parser": "1.1.0",
"elm/regex": "1.0.0",
"elm/virtual-dom": "1.0.2",
"fredcy/elm-parseint": "2.0.1",
"harmboschloo/elm-dict-intersect": "1.0.0",
"ianmackenzie/elm-1d-parameter": "1.0.1",
"ianmackenzie/elm-float-extra": "1.1.0",
"ianmackenzie/elm-interval": "2.0.0",
"ianmackenzie/elm-triangular-mesh": "1.1.0",
"ianmackenzie/elm-units-interval": "2.3.0"
}
},
"indirect": {
"elm/bytes": "1.0.8",
"elm/parser": "1.1.0",
"elm/regex": "1.0.0",
"elm/virtual-dom": "1.0.2",
"fredcy/elm-parseint": "2.0.1",
"harmboschloo/elm-dict-intersect": "1.0.0",
"ianmackenzie/elm-1d-parameter": "1.0.1",
"ianmackenzie/elm-float-extra": "1.1.0",
"ianmackenzie/elm-interval": "2.0.0",
"ianmackenzie/elm-triangular-mesh": "1.1.0",
"ianmackenzie/elm-units-interval": "2.3.0"
"test-dependencies": {
"direct": {},
"indirect": {}
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
5 changes: 2 additions & 3 deletions src/App/Messages.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,9 @@ type Page


type Msg
= UrlChanged Url
= NoOp
| UrlChanged Url
| LinkClicked Browser.UrlRequest
| GoToHome
| GoToPage Page
-- messages for pages
| AboutPageMsg Page.About.Msg
| CalcPageMsg Page.Calc.Msg
Expand Down
132 changes: 64 additions & 68 deletions src/App/Update.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
module App.Update exposing (initialModel, update)
module App.Update exposing (init, update)

import App.Flags exposing (Flags)
import App.Messages exposing (Msg(..), Page(..))
import App.Models exposing (Model, PagesModel, emptyPagesModel)
import App.Pages exposing (pageHash)
import App.Routing exposing (Route(..), toRoute)
import Browser
import Browser.Dom as Dom
import Browser.Navigation as Nav
import Maybe exposing (withDefault)
import Page.About
Expand All @@ -16,8 +16,9 @@ import Page.Lissajous
import Page.Maze
import Page.Physics
import Page.Term
import String exposing (cons)
import Task
import Tuple exposing (first, second)
import Url


update : Msg -> Model -> ( Model, Cmd Msg )
Expand All @@ -27,86 +28,89 @@ update msg model =
model.pages
in
case msg of
NoOp ->
( model, Cmd.none )

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)
]
)

Browser.External href ->
( model, Nav.load href )

_ ->
( model, Cmd.none )

UrlChanged location ->
let
newRoute =
toRoute model.flags.basePath location
in
if model.route == newRoute then
( model, Cmd.none )

clearedModel =
{ model | pages = emptyPagesModel }

( aboutModel, aboutCmd ) =
Page.About.init model.flags

( calcModel, calcCmd ) =
Page.Calc.init
else
let
clearedModel =
{ model | pages = emptyPagesModel }

( lissajousModel, lissajousCmd ) =
Page.Lissajous.init
( aboutModel, aboutCmd ) =
Page.About.init model.flags

( digitalClockModel, digitalClockCmd ) =
Page.DigitalClock.init
( calcModel, calcCmd ) =
Page.Calc.init

( mazeModel, mazeCmd ) =
Page.Maze.init
( lissajousModel, lissajousCmd ) =
Page.Lissajous.init

( physicsModel, physicsCmd ) =
Page.Physics.init
( digitalClockModel, digitalClockCmd ) =
Page.DigitalClock.init

( termModel, termCmd ) =
Page.Term.init
( mazeModel, mazeCmd ) =
Page.Maze.init

( asteroidsModel, asteroidsCmd ) =
Page.Asteroids.init
in
case newRoute of
NotFoundRoute ->
( { clearedModel | route = newRoute }, Cmd.none )
( physicsModel, physicsCmd ) =
Page.Physics.init

Home ->
( { clearedModel | route = newRoute }, Cmd.none )
( termModel, termCmd ) =
Page.Term.init

Page About ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | aboutPage = Just aboutModel } }, Cmd.map AboutPageMsg aboutCmd )
( asteroidsModel, asteroidsCmd ) =
Page.Asteroids.init
in
case newRoute of
NotFoundRoute ->
( { clearedModel | route = newRoute }, Cmd.none )

Page Calc ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | calcPage = Just calcModel } }, Cmd.map CalcPageMsg calcCmd )
Home ->
( { clearedModel | route = newRoute }, Cmd.none )

Page Lissajous ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | lissajousPage = Just lissajousModel } }, Cmd.map LissajousPageMsg lissajousCmd )
Page About ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | aboutPage = Just aboutModel } }, Cmd.map AboutPageMsg aboutCmd )

Page DigitalClock ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | digitalClockPage = Just digitalClockModel } }, Cmd.map DigitalClockPageMsg digitalClockCmd )
Page Calc ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | calcPage = Just calcModel } }, Cmd.map CalcPageMsg calcCmd )

Page Maze ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | mazePage = Just mazeModel } }, Cmd.map MazePageMsg mazeCmd )
Page Lissajous ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | lissajousPage = Just lissajousModel } }, Cmd.map LissajousPageMsg lissajousCmd )

Page Physics ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | physicsPage = Just physicsModel } }, Cmd.map PhysicsPageMsg physicsCmd )
Page DigitalClock ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | digitalClockPage = Just digitalClockModel } }, Cmd.map DigitalClockPageMsg digitalClockCmd )

Page Term ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | termPage = Just termModel } }, Cmd.map TermPageMsg termCmd )
Page Maze ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | mazePage = Just mazeModel } }, Cmd.map MazePageMsg mazeCmd )

Page Asteroids ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | asteroidsPage = Just asteroidsModel } }, Cmd.map AsteroidsPageMsg asteroidsCmd )
Page Physics ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | physicsPage = Just physicsModel } }, Cmd.map PhysicsPageMsg physicsCmd )

GoToPage p ->
( model
, pageHash p
|> cons '#'
|> Nav.pushUrl model.navKey
)
Page Term ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | termPage = Just termModel } }, Cmd.map TermPageMsg termCmd )

GoToHome ->
( model, Nav.replaceUrl model.navKey "#" )
Page Asteroids ->
( { clearedModel | route = newRoute, pages = { emptyPagesModel | asteroidsPage = Just asteroidsModel } }, Cmd.map AsteroidsPageMsg asteroidsCmd )

-- messages from pages
AboutPageMsg m ->
Expand Down Expand Up @@ -134,27 +138,19 @@ update msg model =
convert model m .asteroidsPage Page.Asteroids.update (\mdl -> { model | pages = { pages | asteroidsPage = Just mdl } }) AsteroidsPageMsg


initialModel : Flags -> Nav.Key -> Route -> ( Model, Cmd App.Messages.Msg )
initialModel flags navKey route =
init : Flags -> Url.Url -> Nav.Key -> ( Model, Cmd App.Messages.Msg )
init flags url navKey =
let
model =
{ flags = flags
, route = route
, route = Home
, navKey = navKey

-- models for pages
, pages = emptyPagesModel
}
in
case route of
NotFoundRoute ->
update GoToHome model

Home ->
update GoToHome model

Page p ->
update (GoToPage p) model
update (UrlChanged url) model


convert : Model -> b -> (PagesModel -> Maybe.Maybe a) -> (b -> a -> ( m, Cmd c )) -> (m -> Model) -> (c -> Msg) -> ( Model, Cmd Msg )
Expand Down
12 changes: 4 additions & 8 deletions src/App/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
module App.View exposing (view)

import App.Messages exposing (Msg(..), Page)
import App.Messages exposing (Msg, Page)
import App.Models exposing (Model)
import App.Pages exposing (pageDate, pageDescription, pageGithubLink, pageHash, pageName, pageView, pages)
import App.Routing exposing (Route(..))
import Browser exposing (UrlRequest(..))
import Browser
import Html exposing (Html, a, article, br, div, footer, h1, h2, h3, hr, i, img, p, section, span, strong, text)
import Html.Attributes exposing (attribute, class, href, src, title, width)
import Html.Events exposing (onClick)
import Lib.Html exposing (classList, onClickNotPropagate)
import Lib.Html exposing (classList)
import List exposing (intersperse)
import String.Interpolate exposing (interpolate)

Expand All @@ -34,7 +33,7 @@ view model =
[ h1 [ class "title pb-5" ]
[ i [ class "quote-left fa fa-quote-left text-muted pr-4" ] []
, span [ class "break" ] []
, a [ href "#", onClickNotPropagate GoToHome ] [ text "playground" ]
, a [ href "#" ] [ text "playground" ]
, span [ class "elm-pipe pl-1" ] [ text "|" ]
, span [ class "elm-gt pr-1" ] [ text ">" ]
, a [ href "http://elm-lang.org/" ] [ text "elm" ]
Expand Down Expand Up @@ -199,13 +198,11 @@ showcase { flags } num page =
, a
[ href ("#" ++ pageHash page)
, class "button is-primary mr-4"
, onClick (GoToPage page)
]
[ text "View demo" ]
, a
[ href (pageGithubLink page)
, class "button is-secondary"
, onClickNotPropagate (LinkClicked (External (pageGithubLink page)))
]
[ i [ class "fa fa-github mr-2" ] []
, text "Source"
Expand Down Expand Up @@ -252,7 +249,6 @@ notFound =
, a
[ href "#"
, class "button"
, onClickNotPropagate GoToHome
]
[ text "Go Home" ]
]
Expand Down
5 changes: 3 additions & 2 deletions src/Lib/ColorSelector.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import ColorPicker
import Html exposing (Html, button, div, i, span)
import Html.Attributes exposing (attribute, class, id, style)
import Html.Attributes.Aria exposing (ariaControls, ariaHasPopup, role)
import Lib.Html exposing (classList, onClickNotPropagate)
import Html.Events exposing (onClick)
import Lib.Html exposing (classList)


{-| A color selector that opens a color picker when clicked.
Expand All @@ -18,7 +19,7 @@ view { elementId, visible, color, onVisibilityChange, state, toMsg } =
, class "dropdown"
]
[ div [ class "dropdown-trigger" ]
[ button [ class "button py-1", ariaHasPopup "true", ariaControls "dropdown-menu", onClickNotPropagate (onVisibilityChange (not visible)) ]
[ button [ class "button py-1", ariaHasPopup "true", ariaControls "dropdown-menu", onClick (onVisibilityChange (not visible)) ]
[ span [ class "p-2 m-0", style "background-color" (toCssString color) ] []
, span [ class "icon is-small" ]
[ i
Expand Down
Loading
Loading