its happening... its HAPPENING

This commit is contained in:
Ryan Haskell-Glatz 2019-10-20 16:01:03 -05:00
parent 5dfc02a8a4
commit 329efa7944
6 changed files with 119 additions and 60 deletions

View File

@ -20,8 +20,7 @@ view =
, ( "Counter", Route.Counter () ) , ( "Counter", Route.Counter () )
, ( "Cats", Route.Random () ) , ( "Cats", Route.Random () )
, ( "User", Route.Users_Slug "alice" ) , ( "User", Route.Users_Slug "alice" )
, ( "Account settings", Route.Settings (Settings.Account ()) ) , ( "Settings", Route.Settings (Settings.Account ()) )
, ( "User settings", Route.Settings (Settings.User ()) )
] ]

View File

@ -88,7 +88,7 @@ users_slug_posts_slug =
} }
init : Route -> ( Model, Cmd Msg ) init : Route -> Application.Init Model Msg
init route = init route =
case route of case route of
Route.Homepage params -> Route.Homepage params ->

View File

@ -69,7 +69,7 @@ user =
} }
init : Route -> ( Model, Cmd Msg ) init : Route -> Application.Init Model Msg
init route = init route =
case route of case route of
Route.Account params -> Route.Account params ->

View File

@ -2,7 +2,7 @@ module Application exposing
( Application, create ( Application, create
, Layout , Layout
, Page, Recipe , Page, Recipe
, Bundle, keep , Init, Bundle, keep
, Static, static , Static, static
, Sandbox, sandbox , Sandbox, sandbox
, Element, element , Element, element
@ -27,7 +27,7 @@ module Application exposing
@docs Page, Recipe @docs Page, Recipe
@docs Bundle, keep @docs Init, Bundle, keep
@docs Static, static @docs Static, static
@ -75,30 +75,26 @@ create :
, transition : Transition (Html msg) , transition : Transition (Html msg)
} }
, pages : , pages :
{ init : route -> ( model, Cmd msg ) { init : route -> Init model msg
, update : msg -> model -> ( model, Cmd msg ) , update : msg -> model -> ( model, Cmd msg )
, bundle : model -> Page.Bundle msg , bundle : model -> Bundle msg
} }
} }
-> Application flags model msg -> Application flags model msg
create config = create config =
let
(Transition.Transition transition) =
config.layout.transition
in
Browser.application Browser.application
{ init = { init =
init init
{ init = config.pages.init { init = config.pages.init
, fromUrl = config.routing.fromUrl , fromUrl = config.routing.fromUrl
, speed = transition.speed , speed = Transition.speed config.layout.transition
} }
, update = , update =
update update
{ fromUrl = config.routing.fromUrl { fromUrl = config.routing.fromUrl
, init = config.pages.init , init = config.pages.init
, update = config.pages.update , update = config.pages.update
, speed = transition.speed , speed = Transition.speed config.layout.transition
} }
, subscriptions = , subscriptions =
subscriptions subscriptions
@ -112,7 +108,7 @@ create config =
\model -> \model ->
config.pages.bundle model Page.Initial |> .view config.pages.bundle model Page.Initial |> .view
, layout = config.layout , layout = config.layout
, transition = transition.strategy , transition = Transition.strategy config.layout.transition
} }
, onUrlChange = Url , onUrlChange = Url
, onUrlRequest = Link , onUrlRequest = Link
@ -128,12 +124,13 @@ type alias Model flags model =
, flags : flags , flags : flags
, key : Nav.Key , key : Nav.Key
, page : Transitionable model , page : Transitionable model
, speed : Int
} }
init : init :
{ fromUrl : Url -> route { fromUrl : Url -> route
, init : route -> ( model, Cmd msg ) , init : route -> Init model msg
, speed : Int , speed : Int
} }
-> flags -> flags
@ -143,21 +140,20 @@ init :
init config flags url key = init config flags url key =
url url
|> config.fromUrl |> config.fromUrl
|> config.init |> (\route -> config.init route { parentSpeed = config.speed })
|> Tuple.mapBoth |> (\page ->
(\page -> ( { flags = flags
{ flags = flags , url = url
, url = url , key = key
, key = key , page = Transitionable.Ready page.model
, page = Transitionable.Ready page , speed = page.speed
} }
) , Cmd.batch
(\cmd -> [ handleJumpLinks url page.cmd
Cmd.batch , Utils.delay page.speed TransitionComplete
[ handleJumpLinks url cmd
, Utils.delay config.speed TransitionComplete
] ]
) )
)
handleJumpLinks : Url -> Cmd msg -> Cmd (Msg msg) handleJumpLinks : Url -> Cmd msg -> Cmd (Msg msg)
@ -197,7 +193,7 @@ type Msg msg
update : update :
{ fromUrl : Url -> route { fromUrl : Url -> route
, init : route -> ( model, Cmd msg ) , init : route -> Init model msg
, update : msg -> model -> ( model, Cmd msg ) , update : msg -> model -> ( model, Cmd msg )
, speed : Int , speed : Int
} }
@ -217,15 +213,12 @@ update config msg model =
( model, Nav.load (Url.toString url) ) ( model, Nav.load (Url.toString url) )
else else
( { model ( if navigatingToNewLayout { old = model.url, new = url } then
| page = { model | page = Transitionable.begin model.page }
if navigatingToNewLayout { old = model.url, new = url } then
Transitionable.begin model.page
else else
Transitionable.complete model.page { model | page = Transitionable.complete model.page }
} , Utils.delay model.speed (TransitionTo url)
, Utils.delay config.speed (TransitionTo url)
) )
Link (Browser.External url) -> Link (Browser.External url) ->
@ -246,10 +239,16 @@ update config msg model =
Url url -> Url url ->
url url
|> config.fromUrl |> config.fromUrl
|> config.init |> (\route -> config.init route { parentSpeed = config.speed })
|> Tuple.mapBoth |> (\page ->
(\page -> { model | url = url, page = Transitionable.Complete page }) ( { model
(handleJumpLinks url) | url = url
, page = Transitionable.Complete page.model
, speed = page.speed
}
, handleJumpLinks url page.cmd
)
)
Page pageMsg -> Page pageMsg ->
Tuple.mapBoth Tuple.mapBoth
@ -342,6 +341,10 @@ type alias Recipe params pageModel pageMsg model msg =
Page.Recipe params pageModel pageMsg model msg Page.Recipe params pageModel pageMsg model msg
type alias Init model msg =
Page.Init model msg
type alias Bundle msg = type alias Bundle msg =
Page.Bundle msg Page.Bundle msg

View File

@ -1,6 +1,6 @@
module Internals.Page exposing module Internals.Page exposing
( Page, Recipe ( Page, Recipe
, Bundle , Init, Bundle
, Static, static , Static, static
, Sandbox, sandbox , Sandbox, sandbox
, Element, element , Element, element
@ -12,7 +12,7 @@ module Internals.Page exposing
@docs Page, Recipe @docs Page, Recipe
@docs Bundle @docs Init, Bundle
@docs Static, static @docs Static, static
@ -26,6 +26,7 @@ module Internals.Page exposing
import Html exposing (Html, div, text) import Html exposing (Html, div, text)
import Internals.Layout exposing (Layout) import Internals.Layout exposing (Layout)
import Internals.Transition as Transition
type alias Page params pageModel pageMsg model msg = type alias Page params pageModel pageMsg model msg =
@ -36,7 +37,7 @@ type alias Page params pageModel pageMsg model msg =
type alias Recipe params pageModel pageMsg model msg = type alias Recipe params pageModel pageMsg model msg =
{ init : params -> ( model, Cmd msg ) { init : params -> Init model msg
, update : pageMsg -> pageModel -> ( model, Cmd msg ) , update : pageMsg -> pageModel -> ( model, Cmd msg )
, bundle : pageModel -> Bundle msg , bundle : pageModel -> Bundle msg
} }
@ -48,6 +49,16 @@ type TransitionStatus
| Entering | Entering
type alias Init model msg =
{ parentSpeed : Int
}
->
{ model : model
, cmd : Cmd msg
, speed : Int
}
type alias Bundle msg = type alias Bundle msg =
TransitionStatus TransitionStatus
-> ->
@ -69,7 +80,12 @@ static :
Static Static
-> Page params () Never model msg -> Page params () Never model msg
static page { toModel, toMsg } = static page { toModel, toMsg } =
{ init = \_ -> ( toModel (), Cmd.none ) { init =
\_ { parentSpeed } ->
{ model = toModel ()
, cmd = Cmd.none
, speed = parentSpeed
}
, update = \_ model -> ( toModel model, Cmd.none ) , update = \_ model -> ( toModel model, Cmd.none )
, bundle = , bundle =
\_ _ -> \_ _ ->
@ -94,7 +110,12 @@ sandbox :
Sandbox params pageModel pageMsg Sandbox params pageModel pageMsg
-> Page params pageModel pageMsg model msg -> Page params pageModel pageMsg model msg
sandbox page { toModel, toMsg } = sandbox page { toModel, toMsg } =
{ init = \params -> ( toModel (page.init params), Cmd.none ) { init =
\params { parentSpeed } ->
{ model = toModel (page.init params)
, cmd = Cmd.none
, speed = parentSpeed
}
, update = , update =
\msg model -> \msg model ->
( page.update msg model |> toModel ( page.update msg model |> toModel
@ -125,7 +146,14 @@ element :
-> Page params pageModel pageMsg model msg -> Page params pageModel pageMsg model msg
element page { toModel, toMsg } = element page { toModel, toMsg } =
{ init = { init =
page.init >> Tuple.mapBoth toModel (Cmd.map toMsg) \params { parentSpeed } ->
page.init params
|> (\( model, cmd ) ->
{ model = toModel model
, cmd = Cmd.map toMsg cmd
, speed = parentSpeed
}
)
, update = , update =
\msg model -> \msg model ->
page.update msg model page.update msg model
@ -149,7 +177,7 @@ type alias Glue params layoutModel layoutMsg =
type alias Pages params layoutModel layoutMsg = type alias Pages params layoutModel layoutMsg =
{ init : params -> ( layoutModel, Cmd layoutMsg ) { init : params -> Init layoutModel layoutMsg
, update : layoutMsg -> layoutModel -> ( layoutModel, Cmd layoutMsg ) , update : layoutMsg -> layoutModel -> ( layoutModel, Cmd layoutMsg )
, bundle : layoutModel -> Bundle layoutMsg , bundle : layoutModel -> Bundle layoutMsg
} }
@ -160,7 +188,14 @@ glue :
-> Page params layoutModel layoutMsg model msg -> Page params layoutModel layoutMsg model msg
glue options { toModel, toMsg } = glue options { toModel, toMsg } =
{ init = { init =
options.pages.init >> Tuple.mapBoth toModel (Cmd.map toMsg) \params _ ->
options.pages.init params { parentSpeed = Transition.speed options.layout.transition }
|> (\page ->
{ model = toModel page.model
, cmd = Cmd.map toMsg page.cmd
, speed = page.speed
}
)
, update = , update =
\msg model -> \msg model ->
options.pages.update msg model options.pages.update msg model

View File

@ -1,12 +1,19 @@
module Internals.Transition exposing module Internals.Transition exposing
( Options ( Transition, Options, Strategy
, Strategy , fade, custom, none
, Transition(..) , speed, strategy
, custom
, fade
, none
) )
{-|
@docs Transition, Options, Strategy
@docs fade, custom, none
@docs speed strategy
-}
import Html exposing (Html, div) import Html exposing (Html, div)
import Html.Attributes as Attr import Html.Attributes as Attr
@ -15,6 +22,21 @@ type Transition view
= Transition (Options view) = Transition (Options view)
unwrap : Transition view -> Options view
unwrap (Transition options) =
options
speed : Transition view -> Int
speed =
unwrap >> .speed
strategy : Transition view -> Strategy view
strategy =
unwrap >> .strategy
type alias Options view = type alias Options view =
{ speed : Int { speed : Int
, strategy : Strategy view , strategy : Strategy view
@ -35,10 +57,10 @@ type alias Views view =
fade : Int -> Transition (Html msg) fade : Int -> Transition (Html msg)
fade speed = fade speed_ =
let let
transition = transition =
"opacity " ++ String.fromInt speed ++ "ms" "opacity " ++ String.fromInt speed_ ++ "ms"
styles = styles =
{ invisible = { invisible =
@ -54,7 +76,7 @@ fade speed =
} }
in in
Transition Transition
{ speed = speed { speed = speed_
, strategy = , strategy =
{ beforeLoad = { beforeLoad =
\{ layout, page } -> \{ layout, page } ->