mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-10-26 09:56:12 +03:00
Compare commits
3 Commits
ec359dbd52
...
60fc17d594
Author | SHA1 | Date | |
---|---|---|---|
|
60fc17d594 | ||
|
265b3000ce | ||
|
a26b17e768 |
@ -2,7 +2,6 @@ module Internal.Model2 exposing (..)
|
||||
|
||||
import Animator
|
||||
import Animator.Timeline
|
||||
import Animator.Watcher
|
||||
import Browser.Dom
|
||||
import Color
|
||||
import Html
|
||||
@ -67,44 +66,6 @@ type alias Box =
|
||||
}
|
||||
|
||||
|
||||
type alias Animator msg model =
|
||||
{ animator : Animator.Watcher.Watching model
|
||||
, onStateChange : model -> List ( Time.Posix, msg )
|
||||
}
|
||||
|
||||
|
||||
updateWith :
|
||||
(Msg -> msg)
|
||||
-> Msg
|
||||
-> State
|
||||
->
|
||||
{ ui : State -> model
|
||||
, timelines : Animator msg model
|
||||
}
|
||||
-> ( model, Cmd msg )
|
||||
updateWith toAppMsg msg state config =
|
||||
let
|
||||
( newState, stateCmd ) =
|
||||
update toAppMsg msg state
|
||||
in
|
||||
( case msg of
|
||||
Tick newTime ->
|
||||
config.ui newState
|
||||
|> Animator.Watcher.update newTime config.timelines.animator
|
||||
|
||||
_ ->
|
||||
config.ui newState
|
||||
, Cmd.batch
|
||||
[ stateCmd
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
subscription : (Msg -> msg) -> State -> Animator msg model -> model -> Sub msg
|
||||
subscription toAppMsg state animator model =
|
||||
Animator.Watcher.toSubscription (toAppMsg << Tick) model animator.animator
|
||||
|
||||
|
||||
update : (Msg -> msg) -> Msg -> State -> ( State, Cmd msg )
|
||||
update toAppMsg msg ((State details) as unchanged) =
|
||||
case msg of
|
||||
|
22
src/Ui.elm
22
src/Ui.elm
@ -516,6 +516,7 @@ So, take a moment to describe your image as you would to someone who has a harde
|
||||
Ui.image []
|
||||
{ source = "https://example.com/image.jpg"
|
||||
, description = "A picture of my cat looking goofy."
|
||||
, onLoad = Nothing
|
||||
}
|
||||
|
||||
-}
|
||||
@ -524,23 +525,30 @@ image :
|
||||
->
|
||||
{ source : String
|
||||
, description : String
|
||||
, onLoad : Maybe msg
|
||||
}
|
||||
-> Element msg
|
||||
image attrs img =
|
||||
Two.element Two.NodeAsDiv
|
||||
Two.AsEl
|
||||
(width fill
|
||||
:: clip
|
||||
:: attrs
|
||||
)
|
||||
[ Two.element Two.NodeAsImage
|
||||
Two.AsEl
|
||||
(width fill
|
||||
:: Two.class Style.classes.imageContainer
|
||||
:: htmlAttribute (Attr.src img.source)
|
||||
:: htmlAttribute (Attr.alt img.description)
|
||||
:: []
|
||||
)
|
||||
[ width fill
|
||||
, height fill
|
||||
, clip
|
||||
, Two.class Style.classes.imageContainer
|
||||
, htmlAttribute (Attr.src img.source)
|
||||
, htmlAttribute (Attr.alt img.description)
|
||||
, case img.onLoad of
|
||||
Just msg ->
|
||||
htmlAttribute (Event.on "load" (Decode.succeed msg))
|
||||
|
||||
Nothing ->
|
||||
noAttr
|
||||
]
|
||||
[]
|
||||
]
|
||||
|
||||
|
@ -14,8 +14,7 @@ module Ui.Anim exposing
|
||||
, Step, set, wait, step
|
||||
, loop, loopFor
|
||||
, onHover, onFocus, onActive
|
||||
, Animator, updateWith, subscription, watching
|
||||
, onTimeline, onTimelineWith
|
||||
, Timeline, onTimeline, onTimelineWith
|
||||
, mapAttribute
|
||||
)
|
||||
|
||||
@ -57,15 +56,16 @@ module Ui.Anim exposing
|
||||
|
||||
-- @docs padding, paddingEach, backgroundColor, border, font, height, width
|
||||
|
||||
-- # Premade animations
|
||||
|
||||
-- Here are some premade animations.
|
||||
# Premade animations
|
||||
|
||||
-- There's nothing special about them, they're just convenient!
|
||||
Here are some premade animations.
|
||||
|
||||
-- Check out how they're defined if you want to make your own.
|
||||
There's nothing special about them, they're just convenient!
|
||||
|
||||
-- @docs spinning, pulsing, bouncing, pinging
|
||||
Check out how they're defined if you want to make your own.
|
||||
|
||||
@docs spinning, pulsing, bouncing, pinging
|
||||
|
||||
|
||||
# Keyframes
|
||||
@ -82,11 +82,9 @@ module Ui.Anim exposing
|
||||
@docs onHover, onFocus, onActive
|
||||
|
||||
|
||||
# Using Timelines
|
||||
# Timelines
|
||||
|
||||
@docs Animator, updateWith, subscription, watching
|
||||
|
||||
@docs onTimeline, onTimelineWith
|
||||
@docs Timeline, onTimeline, onTimelineWith
|
||||
|
||||
|
||||
# Mapping
|
||||
@ -96,9 +94,8 @@ module Ui.Anim exposing
|
||||
-}
|
||||
|
||||
import Animator
|
||||
import Animator.Timeline exposing (Timeline)
|
||||
import Animator.Timeline
|
||||
import Animator.Transition
|
||||
import Animator.Watcher
|
||||
import Color
|
||||
import Html
|
||||
import Internal.BitEncodings as Bits
|
||||
@ -122,21 +119,6 @@ type alias Animated =
|
||||
Animator.Attribute
|
||||
|
||||
|
||||
|
||||
-- {-| -}
|
||||
-- persistent : String -> String -> Attribute msg
|
||||
-- persistent group instance =
|
||||
-- -- attach a class and a message handler for the animation message
|
||||
-- -- we could also need to gather up any animateable state as well
|
||||
-- Two.teleport
|
||||
-- { trigger = onRenderTrigger
|
||||
-- , class = Teleport.persistentClass group instance
|
||||
-- , style = []
|
||||
-- , data =
|
||||
-- Teleport.persistentId group instance
|
||||
-- }
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias Transition =
|
||||
Animator.Transition.Transition
|
||||
@ -176,6 +158,11 @@ withStepTransition =
|
||||
Animator.withStepTransition
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias Timeline state =
|
||||
Animator.Timeline.Timeline state
|
||||
|
||||
|
||||
{-| -}
|
||||
onTimeline : Timeline state -> (state -> List Animated) -> Attribute msg
|
||||
onTimeline timeline fn =
|
||||
@ -632,13 +619,8 @@ toReactionAttr identifier trigger incomingCss =
|
||||
, identifierClass = identifier
|
||||
, class = css.hash
|
||||
, style =
|
||||
-- case trigger of
|
||||
-- OnRender ->
|
||||
List.filter (\( name, _ ) -> name /= "animation") incomingCss.props
|
||||
++ props
|
||||
|
||||
-- _ ->
|
||||
-- props
|
||||
, data =
|
||||
css
|
||||
|> Teleport.encodeChildReaction (triggerPsuedo trigger) identifier incomingCss.hash
|
||||
@ -771,53 +753,3 @@ mapAttribute =
|
||||
update : (Msg -> msg) -> Msg -> State -> ( State, Cmd msg )
|
||||
update =
|
||||
Two.update
|
||||
|
||||
|
||||
{-| -}
|
||||
updateWith :
|
||||
(Msg -> msg)
|
||||
-> Msg
|
||||
-> State
|
||||
->
|
||||
{ ui : State -> model
|
||||
, timelines : Animator msg model
|
||||
}
|
||||
-> ( model, Cmd msg )
|
||||
updateWith =
|
||||
Two.updateWith
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias Animator msg model =
|
||||
Two.Animator msg model
|
||||
|
||||
|
||||
{-| -}
|
||||
subscription : (Msg -> msg) -> State -> Animator msg model -> model -> Sub msg
|
||||
subscription =
|
||||
Two.subscription
|
||||
|
||||
|
||||
{-| -}
|
||||
watching :
|
||||
{ get : model -> Animator.Timeline.Timeline state
|
||||
, set : Animator.Timeline.Timeline state -> model -> model
|
||||
, onStateChange : state -> Maybe msg
|
||||
}
|
||||
-> Animator msg model
|
||||
-> Animator msg model
|
||||
watching config anim =
|
||||
{ animator = Animator.Watcher.watching config.get config.set anim.animator
|
||||
, onStateChange =
|
||||
-- config.onStateChange << config.get
|
||||
\model ->
|
||||
let
|
||||
future =
|
||||
[]
|
||||
|
||||
-- TODO: wire this up once elm-animator supports Animator.future
|
||||
-- Animator.future (config.get model)
|
||||
-- |> List.map (Tuple.mapSecond anim.onStateChange)
|
||||
in
|
||||
future ++ anim.onStateChange model
|
||||
}
|
||||
|
@ -111,7 +111,6 @@ classes =
|
||||
, italic = "i"
|
||||
, strike = "sk"
|
||||
, underline = "u"
|
||||
, textUnitalicized = "tun"
|
||||
, textJustify = "tj"
|
||||
, textJustifyAll = "tja"
|
||||
, textCenter = "tc"
|
||||
|
@ -27,6 +27,7 @@ main =
|
||||
[]
|
||||
{ source = "https://picsum.photos/id/237/200/300"
|
||||
, description = ""
|
||||
, onLoad = Nothing
|
||||
}
|
||||
, Ui.text "A Normal 200/300 image, shrinks to content size with width shrink"
|
||||
, Ui.image
|
||||
@ -36,6 +37,7 @@ main =
|
||||
]
|
||||
{ source = "https://picsum.photos/id/237/200/300"
|
||||
, description = ""
|
||||
, onLoad = Nothing
|
||||
}
|
||||
, Ui.text "Constrained to 100/100"
|
||||
, Ui.el
|
||||
@ -49,6 +51,7 @@ main =
|
||||
]
|
||||
{ source = "https://picsum.photos/id/237/200/300"
|
||||
, description = ""
|
||||
, onLoad = Nothing
|
||||
}
|
||||
)
|
||||
, Ui.text "Width to 600"
|
||||
@ -62,6 +65,7 @@ main =
|
||||
]
|
||||
{ source = "https://picsum.photos/id/237/200/300"
|
||||
, description = ""
|
||||
, onLoad = Nothing
|
||||
}
|
||||
)
|
||||
, Ui.text "Image with fallback (success, no size given)"
|
||||
|
Loading…
Reference in New Issue
Block a user