Add image.onLoad and a fix from Charlon!

src/Internal/Model2.elm

@@ -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

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
+            ]
             []
         ]
 

src/Ui/Anim.elm

@@ -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
-    }

stylesheets/Generate.elm

@@ -111,7 +111,6 @@ classes =
     , italic = "i"
     , strike = "sk"
     , underline = "u"
-    , textUnitalicized = "tun"
     , textJustify = "tj"
     , textJustifyAll = "tja"
     , textCenter = "tc"

tests-rendering/visual/Image.elm

@@ -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)"