From 622ded2d4760f510af45a271eb5288ead97dc137 Mon Sep 17 00:00:00 2001 From: anotherhale Date: Sat, 16 Jan 2021 09:04:28 -0700 Subject: [PATCH] ran elm-format --- src/Modal.elm | 143 +++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 118 insertions(+), 25 deletions(-) diff --git a/src/Modal.elm b/src/Modal.elm index 3394afc..3ef3a3d 100755 --- a/src/Modal.elm +++ b/src/Modal.elm @@ -1,13 +1,14 @@ module Modal exposing - ( ClosingAnimation(..) + ( BodySettings + , ClosingAnimation(..) , Config , Model(..) , Msg , OpenedAnimation(..) , OpeningAnimation(..) , animationEnd - , closeModal , cancelModal + , closeModal , cmdGetWindowSize , initModel , newConfig @@ -23,6 +24,11 @@ module Modal exposing , setFooterCss , setHeader , setHeaderCss + , setModalCloseFn + , setModalClosingFn + , setModalFadeFn + , setModalOpenedFn + , setModalOpeningFn , setOpenedAnimation , setOpeningAnimation , subscriptions @@ -122,7 +128,7 @@ type ClosingAnimation | ToBottom | ToLeft | ToNone - + type BodySettings = BodySettings @@ -158,6 +164,11 @@ type Config msg { openingAnimation : OpeningAnimation , openedAnimation : OpenedAnimation , closingAnimation : ClosingAnimation + , modalOpeningFn : Maybe (Attribute msg) + , modalOpenedFn : Maybe (Attribute msg) + , modalClosingFn : Maybe (Attribute msg) + , modalCloseFn : Maybe (Attribute msg) + , modalFadeFn : Maybe (Attribute msg) , headerCss : String , header : Header msg , bodyCss : String @@ -180,6 +191,11 @@ newConfig tagger = { openingAnimation = FromTop , openedAnimation = OpenFromTop , closingAnimation = ToTop + , modalOpeningFn = Nothing + , modalOpenedFn = Nothing + , modalClosingFn = Nothing + , modalCloseFn = Nothing + , modalFadeFn = Nothing , headerCss = "" , header = text "" , bodyCss = "" @@ -208,10 +224,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 @@ -230,11 +248,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] ) @@ -287,29 +305,56 @@ view modal = Styled.toUnstyled <| case modal of Opening (Config config) -> - div [ modalFade ] - [ modalBodyView + let + updatefun = + case config.modalOpeningFn of + Nothing -> + openingAnimationClass config.openingAnimation config.modalBodySettings + + Just fn -> + fn + in + div [ Maybe.withDefault modalFade config.modalFadeFn ] + [ modalBodyView (Just AnimationEnd) - (openingAnimationClass config.openingAnimation config.modalBodySettings) + updatefun (Config config) ] Opened (Config config) -> - div [ modalFade ] + let + updatedOpenedFn = + case config.modalOpenedFn of + Nothing -> + openedAnimationClass config.openedAnimation config.modalBodySettings + + Just openedFn -> + openedFn + in + div [ Maybe.withDefault modalFade config.modalFadeFn ] [ modalBodyView Nothing - (openedAnimationClass config.openedAnimation config.modalBodySettings) + updatedOpenedFn (Config config) ] Closing (Config config) -> + let + updatedClosingFn = + case config.modalClosingFn of + Nothing -> + closingAnimationClass config.closingAnimation config.modalBodySettings + + Just closingFn -> + closingFn + in div - [ modalFade + [ Maybe.withDefault modalFade config.modalFadeFn , modalClose ] [ modalBodyView (Just AnimationEnd) - (closingAnimationClass config.closingAnimation config.modalBodySettings) + updatedClosingFn (Config config) ] @@ -318,12 +363,12 @@ view modal = Canceling (Config config) -> div - [ modalFade + [ Maybe.withDefault modalFade config.modalFadeFn , modalClose ] [ modalBodyView (Just AnimationEnd) - (closingAnimationClass config.closingAnimation config.modalBodySettings) + (Maybe.withDefault (closingAnimationClass config.closingAnimation config.modalBodySettings) config.modalClosingFn) (Config config) ] @@ -431,6 +476,33 @@ setFooter newFooter config = mapConfig fn config +setModalOpeningFn : Attribute msg -> Config msg -> Config msg +setModalOpeningFn opening config = + let + fn (Config c) = + Config { c | modalOpeningFn = Just opening } + in + mapConfig fn config + + +setModalOpenedFn : Attribute msg -> Config msg -> Config msg +setModalOpenedFn opened config = + let + fn (Config c) = + Config { c | modalOpenedFn = Just opened } + in + mapConfig fn config + + +setModalFadeFn : Attribute msg -> Config msg -> Config msg +setModalFadeFn fade config = + let + fn (Config c) = + Config { c | modalFadeFn = Just fade } + in + mapConfig fn config + + setOpeningAnimation : OpeningAnimation -> Config msg -> Config msg setOpeningAnimation opening config = let @@ -458,6 +530,22 @@ setClosingAnimation closing config = mapConfig fn config +setModalClosingFn : Attribute msg -> Config msg -> Config msg +setModalClosingFn closing config = + let + fn (Config c) = + Config { c | modalClosingFn = Just closing } + in + mapConfig fn config + + +setModalCloseFn : Attribute msg -> Config msg -> Config msg +setModalCloseFn close config = + let + fn (Config c) = + Config { c | modalCloseFn = Just close } + in + mapConfig fn config setBodyWidth : Float -> Config msg -> Config msg @@ -535,7 +623,7 @@ openedAnimationClass animation bodySettings = modalOpenFromTop bodySettings OpenFromRight -> - modalOpenFromRigth bodySettings + modalOpenFromRight bodySettings OpenFromBottom -> modalOpenFromBottom bodySettings @@ -563,6 +651,7 @@ closingAnimationClass animation bodySettings = modalNoneClosing bodySettings + -- Private css style and animations for modal window @@ -606,20 +695,20 @@ modalTopOpening (BodySettings body) = (Animations.keyframes [ ( 0 , [ Animations.property "opacity" "0" - , Animations.property "left" body.center.value + , Animations.property "left" (Debug.log "center1" body.center.value) , Animations.property "top" "0" ] ) , ( 75 , [ Animations.property "opacity" "1" - , Animations.property "left" body.center.value - , Animations.property "top" body.fromTop.value + , Animations.property "left" (Debug.log "center2" body.center.value) + , Animations.property "top" (Debug.log "top1" body.fromTop.value) ] ) ] ) , Css.property "animation-duration" "1s" - , Css.property "left" body.center.value + , Css.property "left" (Debug.log "center3" body.center.value) , Css.top body.fromTop , Css.position Css.absolute ] @@ -723,6 +812,8 @@ modalNoneOpening (BodySettings body) = , Css.position Css.absolute ] + + -- Open animations @@ -752,8 +843,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 @@ -870,14 +961,14 @@ modalLeftClosing (BodySettings body) = (Animations.keyframes [ ( 0 , [ Animations.property "opacity" "1" - , Animations.property "left" body.center.value - , Animations.property "top" body.fromTop.value + , Animations.property "left" (Debug.log "center:left" body.center.value) + , Animations.property "top" (Debug.log "top:left:0" body.fromTop.value) ] ) , ( 100 , [ Animations.property "opacity" "0" , Animations.property "left" "0" - , Animations.property "top" body.fromTop.value + , Animations.property "top" (Debug.log "top:left:1000" body.fromTop.value) ] ) ] @@ -916,6 +1007,7 @@ modalNoneClosing (BodySettings body) = ] + -- Modal close animation @@ -1014,7 +1106,7 @@ setModalState msg modal = if msg == CancelModal then Canceling config - else + else Closing config Closing _ -> @@ -1029,6 +1121,7 @@ setModalState msg modal = Canceled -> Canceled + {-| @priv Centering and adaptive width for modal body -}