Skip to content

Bug fix closing effect #14

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

Open
anotherhale wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Bug fix closing effect #14

Changes from all 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
f908562
Fixed Closing Effect
anotherhale Jan 16, 2021
b37aaa8
Fix spelling error
anotherhale Jan 17, 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
109 changes: 68 additions & 41 deletions src/Modal.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
module Modal exposing
( ClosingAnimation(..)
, ClosingEffect(..)
, Config
, Model(..)
, Msg
, OpenedAnimation(..)
, OpeningAnimation(..)
, animationEnd
, closeModal
, cancelModal
, closeModal
, cmdGetWindowSize
, initModel
, newConfig
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,11 +121,7 @@ type ClosingAnimation
| ToRight
| ToBottom
| ToLeft


type ClosingEffect
= WithoutAnimate
| WithAnimate
| ToNone


type 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 @@ -215,10 +208,12 @@ closeModal : (Msg msg -> msg) -> msg
closeModal fn =
fn CloseModal


cancelModal : (Msg msg -> msg) -> msg
cancelModal fn =
fn CancelModal


animationEnd : (Msg msg -> msg) -> msg
animationEnd fn =
fn AnimationEnd
Expand All @@ -237,11 +232,11 @@ just add
Modal.update modalMsg model.modal
in
case updatedModal of
Canceled ->
Canceled ->
( { model | modal = updatedModal } -- Model was canceled
, Cmd.batch [Cmd.map ModalMsg cmdModal]
)
Closed ->
Closed ->
( { model | modal = updatedModal, confirmed = True } -- Modal was confirmed/acknowledged
, Cmd.batch [Cmd.map ModalMsg cmdModal]
)
Expand Down Expand Up @@ -295,7 +290,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 +308,6 @@ view modal =
div
[ modalFade
, modalClose
, closingEffectClass config.closingEffect
]
[ modalBodyView
(Just AnimationEnd)
Expand All @@ -328,7 +322,6 @@ view modal =
div
[ modalFade
, modalClose
, closingEffectClass config.closingEffect
]
[ modalBodyView
(Just AnimationEnd)
Expand Down Expand Up @@ -467,15 +460,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
setBodyWidth width config =
let
Expand Down Expand Up @@ -532,14 +516,17 @@ openingAnimationClass animation bodySettings =
modalTopOpening bodySettings

FromRight ->
modalRigthOpening bodySettings
modalRightOpening bodySettings

FromBottom ->
modalBottomOpening bodySettings

FromLeft ->
modalLeftOpening bodySettings

FromNone ->
modalNoneOpening bodySettings


openedAnimationClass : OpenedAnimation -> BodySettings -> Attribute msg
openedAnimationClass animation bodySettings =
Expand All @@ -548,7 +535,7 @@ openedAnimationClass animation bodySettings =
modalOpenFromTop bodySettings

OpenFromRight ->
modalOpenFromRigth bodySettings
modalOpenFromRight bodySettings

OpenFromBottom ->
modalOpenFromBottom bodySettings
Expand All @@ -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 @@ -646,8 +625,8 @@ modalTopOpening (BodySettings body) =
]


modalRigthOpening : BodySettings -> Attribute msg
modalRigthOpening (BodySettings body) =
modalRightOpening : BodySettings -> Attribute msg
modalRightOpening (BodySettings body) =
css
[ Css.animationName
(Animations.keyframes
Expand Down Expand Up @@ -724,6 +703,27 @@ 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 @@ -754,8 +754,8 @@ modalOpenFromTop (BodySettings body) =
]


modalOpenFromRigth : BodySettings -> Attribute msg
modalOpenFromRigth (BodySettings body) =
modalOpenFromRight : BodySettings -> Attribute msg
modalOpenFromRight (BodySettings body) =
css
[ Css.property "right" body.center.value
, Css.top body.fromTop
Expand Down Expand Up @@ -892,6 +892,32 @@ 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 Expand Up @@ -991,7 +1017,7 @@ setModalState msg modal =
if msg == CancelModal then
Canceling config

else
else
Closing config

Closing _ ->
Expand All @@ -1006,6 +1032,7 @@ setModalState msg modal =
Canceled ->
Canceled


{-| @priv
Centering and adaptive width for modal body
-}
Expand Down