{"id":32113816,"url":"https://github.com/etaque/elm-dialog","last_synced_at":"2026-02-18T07:32:38.759Z","repository":{"id":62418464,"uuid":"49344990","full_name":"etaque/elm-dialog","owner":"etaque","description":"Modals for Elm","archived":false,"fork":false,"pushed_at":"2018-02-08T15:41:31.000Z","size":131,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-20T15:02:02.990Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/etaque.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-09T22:58:37.000Z","updated_at":"2018-03-28T06:00:50.000Z","dependencies_parsed_at":"2022-11-01T16:48:55.568Z","dependency_job_id":null,"html_url":"https://github.com/etaque/elm-dialog","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/etaque/elm-dialog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etaque%2Felm-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etaque%2Felm-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etaque%2Felm-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etaque%2Felm-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etaque","download_url":"https://codeload.github.com/etaque/elm-dialog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etaque%2Felm-dialog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29572419,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T06:19:27.422Z","status":"ssl_error","status_checked_at":"2026-02-18T06:18:44.348Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-10-20T15:01:53.717Z","updated_at":"2026-02-18T07:32:38.754Z","avatar_url":"https://github.com/etaque.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elm Dialog\n\n**Deprecated**. There are better ways of showing dialog modals than the 0.16 version of this package. Rewrite in progress on [0.17](https://github.com/etaque/elm-dialog/tree/0.17) branch for a nicer, TEA-compliant version. Or just use [krisajenkins/elm-dialog](http://package.elm-lang.org/packages/krisajenkins/elm-dialog/latest), that's good stuff.\n\n    elm package install etaque/elm-dialog\n\nA modal component for [Elm](http://elm-lang.org/). Not named `elm-modal` because it would be type-error-prone with the `model` we have everywhere in our apps!\n\n\n## Features\n\n* Optimised for the simple cases, easy to use\n* Plug it once, use it from anywhere in your app (by sending a message),\n* Simple view/style provided ([screenshot](https://raw.githubusercontent.com/etaque/elm-dialog/master/screenshot.png)) but can work with any css framework,\n* Animation-ready: built on top of [elm-transit](http://package.elm-lang.org/packages/etaque/elm-transit/latest), so you can add open/close effects and wait until animation is ended before seing your actions triggered.\n\n## How does it work?\n\nIt assumes that you can only have one instance at a time of an open modal, so the state can be global in the Elm way: declared once, usable from anywhere.\n\nTo avoid boilerplate in update delegation, an `Address` is exposed so this global state (ie dialog content, visibility) can be updated from anywhere in you views and updates.\n\nA minor drawback is that the dialog content is stored as `Html` in the state, so can't be automaticaly rerendered from you app model if you need so: you have to send a task to update the dialog content.\n\n## Usage\n\nDon't forged to `import Dialog` in every impacted module. See [example/](./example/) for a fully working usage example.\n\n### Model\n\nAdd the dialog instance to your model:\n\n```elm\ntype alias Model = WithDialog { ... }\n\n-- or without record extension:\ntype alias Model = \n  { dialog : Dialog\n  , ...\n  }\n```\n\nSee `getContent`, `getOptions`, `getTransition`, `isOpen` and `isVisible` for model querying. Initialize it with `dialog = Dialog.initial`.\n\nAdd a type case for the dialog actions:\n\n```elm\ntype Action\n  = NoOp\n  | ...\n  | DialogAction Dialog.Action\n```\n\n### Update\n\n* Add the case match for the dialog actions. If you've chosen the record extension, then you can use the `wrappedUpdate`, otherwise you should use the regular `update` function.\n\n```elm\nupdate : Action -\u003e Model -\u003e (Model, Effects Action)\nupdate action model =\n  case action of\n    DialogAction dialogAction -\u003e\n      Dialog.wrappedUpdate DialogAction dialogAction model\n```\n\n* Plug dialog signal as input into your app. With StartApp, that would be:\n\n```elm\nStartApp.Start \n  { ...\n  , inputs = [ Signal.map DialogAction Dialog.actions ]\n  }\n```\n\n### View\n\nThis package provides a simple theme under `Dialog.Simple`, [here](./example/styles/simple.css)\nis a default stylesheet (you can roll out your own theme if you need it).\n\n* Plug `Simple.view` at the bottom of your top-level view. It's only a shell, hidden by default.\n  It will be in charge of showing up the dialog content and backdrop according to state.\n \n```elm\nview : Address Action -\u003e Model -\u003e Html\nview addr model =\n  div\n    [ ]\n    [ ... -- your app view\n    , Dialog.Simple.view model.dialog\n    ]\n``` \n\n* Open the dialog with `openOnClick` (or `openWithOptionsOnClick` if you need more control):\n \n```elm\n-- Somewhere in your views, where you need to open a dialog\nsomePartOfYourView addr =\n  button\n    [ Dialog.openOnClick (dialog addr) ]\n    [ text \"...\" ]\n    \ndialog : Address Action -\u003e Dialog.Options -\u003e List Html\ndialog addr options =\n  [ Dialog.header options \"Are you sure?\"\n  , Dialog.body\n      [ p [] [ text \"Please give it a second thought.\" ] ]\n  , Dialog.footer\n      [ a\n          [ class \"btn btn-default\"\n          , Dialog.onClickHide\n          ]\n          [ text \"You make me doubt\" ]\n      , a\n          [ class \"btn btn-primary\"\n          , Dialog.onClickHideThenSend addr SomeAction\n          ]\n          [ text \"FFS, go on!\" ]\n      ]\n  ]\n\n```\nHere we're using:\n\n* `header` as the title decorator, taking `options` as parameter: if `options.onClose` is non empty, it will display a close button\n* `body` for the message of the modal\n* `footer` for the actions.\n\nOptions are:\n* `duration` for the fade animation, in ms\n* `onClose` for the task to run when closing the modal. Set to `Nothing` to prevent closing.\n\n\n### Actions\n\nThe package provide two levels to control dialog:\n\n* The basis is `address : Address Dialog.Action` in combination with those action builders: \n  * `open`, `openWithOptions` to open the modal with the provided content,\n  * `updateContent` to update content without touching opened state\n  * `close`, `closeThenSend`, `closeThenDo` to close the modal and send a message/run a task.\n  \n  That makes it controllable from everywhere in your app, not only views.\n\n* Some `onClick` shortcuts are available for the views, they produce an HTML attribute:\n  * `openOnClick` and `openWithOptionsOnClick`\n  * `closeOnClick` and `closeThenSendOnClick`\n\n## Credits\n\n* [tg-modal](https://github.com/thorgate/tg-modal) for the simple stylesheet\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetaque%2Felm-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetaque%2Felm-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetaque%2Felm-dialog/lists"}