{"id":22409499,"url":"https://github.com/iodevs/elm-modal","last_synced_at":"2025-03-27T02:22:24.763Z","repository":{"id":54997920,"uuid":"148041410","full_name":"iodevs/elm-modal","owner":"iodevs","description":" A library for Modal Window in Elm. ","archived":false,"fork":false,"pushed_at":"2021-01-17T00:00:47.000Z","size":278,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T07:43:52.831Z","etag":null,"topics":["elm","elm-modal","hacktoberfest"],"latest_commit_sha":null,"homepage":"https://iodevs.github.io/elm-modal/","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iodevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-09T15:57:51.000Z","updated_at":"2022-09-13T08:14:48.000Z","dependencies_parsed_at":"2022-08-14T08:40:15.457Z","dependency_job_id":null,"html_url":"https://github.com/iodevs/elm-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iodevs%2Felm-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iodevs%2Felm-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iodevs%2Felm-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iodevs%2Felm-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iodevs","download_url":"https://codeload.github.com/iodevs/elm-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245767610,"owners_count":20668882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","elm-modal","hacktoberfest"],"created_at":"2024-12-05T12:07:55.394Z","updated_at":"2025-03-27T02:22:24.744Z","avatar_url":"https://github.com/iodevs.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-modal\nA library for displaying Modal window. You can set a behaviour and style of your modal window by a Config settings.\n\nInstall package usually a way (elm-0.19):\n```\nelm install iodevs/elm-modal\n```\n\nand compile\n```\nelm make example/Main.elm --output=example/main.js\n```\n\n\n## Usage\nYou have to import Modal everywhere where you want to use it.\n```haskell\nimport Modal\n```\n\n### Main\n```haskell\n-- add to init a part\nCmd.map ModalMsg Modal.cmdGetWindowSize\n\n-- add to subscriptions a part\nSub.map ModalMsg Modal.subscriptions\n```\n\n### Model\n```haskell\ntype alias Model =\n    { modal : Modal.Model Msg\n    , ...\n    }\n\ninitModel : Model\ninitModel =\n    { modal = Modal.initModel\n    , ...\n    }\n```\n\n### Messages\n```haskell\ntype Msg\n    = ModalMsg (Modal.Msg Msg)\n    | ...\n```\n\n### Update\n```haskell\nupdate : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\nupdate msg model =\n    case msg of\n        ModalMsg modalMsg -\u003e\n            let\n                ( updatedModal, cmdModal ) =\n                    Modal.update modalMsg model.modal\n            in\n            ( { model | modal = updatedModal }\n            , Cmd.map ModalMsg cmdModal\n            )\n        ...\n```\n\n### View\n```haskell\nimport Components.ConfigModal\n\nview : Model -\u003e Html Msg\nview model =\n    div [ ]\n        [ ...\n        , div []\n            [ button\n                [ onClick (Modal.openModal ModalMsg ConfigModal.configAlert)\n                ]\n                [ text \"Modal Alert\" ]\n            ]\n        , ...\n        , Modal.view model.modal\n        ]\n```\n\n### Components/ConfigModal.elm\nHere you can define a lot of various Modal windows. In our case we defined \"Alert\" modal. Also you visit [elm-package](https://package.elm-lang.org/packages/iodevs/elm-modal/latest/) where you can find an another settings functions.\n\n```haskell\nimport Modal\n    exposing\n        ( ClosingAnimation(..)\n        , ClosingEffect(..)\n        , OpenedAnimation(..)\n        , OpeningAnimation(..)\n        )\n\nconfigAlert : Modal.Config Msg\nconfigAlert =\n    Modal.newConfig ModalMsg\n        |\u003e Modal.setOpeningAnimation FromBottom\n        |\u003e Modal.setOpenedAnimation OpenFromBottom\n        |\u003e Modal.setClosingAnimation ToBottom\n        |\u003e Modal.setHeaderCss \"label alert\"\n        |\u003e Modal.setHeader (h2 [] [ text \"Alert\" ])\n        |\u003e Modal.setBody bodyAlert\n        |\u003e Modal.setFooter (footerAlert (Modal.closeModal ModalMsg) (Modal.closeModal ModalMsg))\n\n\nbodyAlert : Html msg\nbodyAlert =\n    div [ ... ] [ ... ]\n\n\nfooterAlert : msg -\u003e msg -\u003e Html msg\nfooterAlert stopMsg closeMsg =\n    div [ class \"button-group\" ]\n        [ button\n            [ class \"button\"\n            , onClick stopMsg\n            ]\n            [ text \"Stop\" ]\n        , button\n            [ class \"button\"\n            , onClick closeMsg\n            ]\n            [ text \"Close\" ]\n        ]\n```\n\n## or look at\n* an `example` directory in this repository\n* or a live [demo](https://iodevs.github.io/elm-modal)\n\n\n## Notes\n* an animations in a part `OpenedAnimation` currently are not defined","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiodevs%2Felm-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiodevs%2Felm-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiodevs%2Felm-modal/lists"}