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

#10 fix bug without animation #12

Closed
wants to merge 6 commits into from
+161 −45
Closed

#10 fix bug without animation #12

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2253c59
Added support for Cancel event and update for Elm 19.1
Jan 10, 2021
28828e9
updated eol character
anotherhale Jan 11, 2021
3305d9e
#10 - FromNone and ToNone
anotherhale Jan 16, 2021
46ba2bf
Merge branch 'master' into #10---Fix-Bug-Without-Animation
anotherhale Jan 16, 2021
622ded2
ran elm-format
anotherhale Jan 16, 2021
6929a6a
Merge branch '#10---Fix-Bug-Without-Animation' of https://github.com/…
anotherhale Jan 16, 2021
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
83 changes: 53 additions & 30 deletions src/Modal.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
module Modal exposing
( ClosingAnimation(..)
, ClosingEffect(..)
, Config
, Model(..)
, Msg
Expand All @@ -20,7 +19,6 @@ module Modal exposing
, setBodyHeight
, setBodyWidth
, setClosingAnimation
, setClosingEffect
, setFooter
, setFooterCss
, setHeader
Expand Down Expand Up @@ -108,6 +106,7 @@ type OpeningAnimation
| FromRight
| FromBottom
| FromLeft
| FromNone


type OpenedAnimation
Expand All @@ -122,12 +121,8 @@ type ClosingAnimation
| ToRight
| ToBottom
| ToLeft


type ClosingEffect
= WithoutAnimate
| WithAnimate

| ToNone


type BodySettings
= BodySettings
Expand Down Expand Up @@ -163,7 +158,6 @@ type Config msg
{ openingAnimation : OpeningAnimation
, openedAnimation : OpenedAnimation
, closingAnimation : ClosingAnimation
, closingEffect : ClosingEffect
, headerCss : String
, header : Header msg
, bodyCss : String
Expand All @@ -186,7 +180,6 @@ newConfig tagger =
{ openingAnimation = FromTop
, openedAnimation = OpenFromTop
, closingAnimation = ToTop
, closingEffect = WithAnimate
, headerCss = ""
, header = text ""
, bodyCss = ""
Expand Down Expand Up @@ -295,7 +288,7 @@ view modal =
case modal of
Opening (Config config) ->
div [ modalFade ]
[ modalBodyView
[ modalBodyView
(Just AnimationEnd)
(openingAnimationClass config.openingAnimation config.modalBodySettings)
(Config config)
Expand All @@ -313,7 +306,6 @@ view modal =
div
[ modalFade
, modalClose
, closingEffectClass config.closingEffect
]
[ modalBodyView
(Just AnimationEnd)
Expand All @@ -328,7 +320,6 @@ view modal =
div
[ modalFade
, modalClose
, closingEffectClass config.closingEffect
]
[ modalBodyView
(Just AnimationEnd)
Expand Down Expand Up @@ -467,13 +458,6 @@ setClosingAnimation closing config =
mapConfig fn config


setClosingEffect : ClosingEffect -> Config msg -> Config msg
setClosingEffect newClosingEffect config =
let
fn (Config c) =
Config { c | closingEffect = newClosingEffect }
in
mapConfig fn config


setBodyWidth : Float -> Config msg -> Config msg
Expand Down Expand Up @@ -540,6 +524,9 @@ openingAnimationClass animation bodySettings =
FromLeft ->
modalLeftOpening bodySettings

FromNone ->
modalNoneOpening bodySettings


openedAnimationClass : OpenedAnimation -> BodySettings -> Attribute msg
openedAnimationClass animation bodySettings =
Expand Down Expand Up @@ -572,16 +559,8 @@ closingAnimationClass animation bodySettings =
ToLeft ->
modalLeftClosing bodySettings


closingEffectClass : ClosingEffect -> Attribute msg
closingEffectClass animation =
case animation of
WithoutAnimate ->
css [ Css.display Css.none ]

WithAnimate ->
css []

ToNone ->
modalNoneClosing bodySettings


-- Private css style and animations for modal window
Expand Down Expand Up @@ -724,6 +703,25 @@ modalLeftOpening (BodySettings body) =
]


modalNoneOpening : BodySettings -> Attribute msg
modalNoneOpening (BodySettings body) =
css
[ Css.animationName
(Animations.keyframes
[ ( 0
, [ Animations.property "opacity" "0"
]
)
, ( 75
, [ Animations.property "opacity" "1"
]
)
]
)
, Css.property "animation-duration" "0s"
, Css.property "top" body.center.value
, Css.position Css.absolute
]

-- Open animations

Expand Down Expand Up @@ -892,6 +890,31 @@ modalLeftClosing (BodySettings body) =
]


modalNoneClosing : BodySettings -> Attribute msg
modalNoneClosing (BodySettings body) =
css
[ Css.animationName
(Animations.keyframes
[ ( 0
, [ Animations.property "opacity" "1"
, Animations.property "left" body.center.value
, Animations.property "top" body.fromTop.value
]
)
, ( 100
, [ Animations.property "opacity" "0"
, Animations.property "left" "0"
, Animations.property "top" body.fromTop.value
]
)
]
)
, Css.property "animation-duration" "0.0s"
, Css.opacity (Css.int 0)
, Css.position Css.absolute
, Css.top body.fromTop
]


-- Modal close animation

Expand Down