{"id":15015959,"url":"https://github.com/wheely/ember-dialog","last_synced_at":"2025-10-08T01:49:19.930Z","repository":{"id":23498021,"uuid":"26863501","full_name":"wheely/ember-dialog","owner":"wheely","description":"An Ember Addon able you to easily create routable dialog windows","archived":false,"fork":false,"pushed_at":"2020-02-03T18:42:24.000Z","size":2355,"stargazers_count":37,"open_issues_count":8,"forks_count":12,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-09-14T16:59:24.169Z","etag":null,"topics":["ember","ember-addon"],"latest_commit_sha":null,"homepage":"http://wheely.github.io/ember-dialog/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wheely.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-19T13:52:06.000Z","updated_at":"2025-02-26T09:38:24.000Z","dependencies_parsed_at":"2022-08-30T02:40:24.199Z","dependency_job_id":null,"html_url":"https://github.com/wheely/ember-dialog","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/wheely/ember-dialog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheely%2Fember-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheely%2Fember-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheely%2Fember-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheely%2Fember-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wheely","download_url":"https://codeload.github.com/wheely/ember-dialog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheely%2Fember-dialog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278877087,"owners_count":26061380,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["ember","ember-addon"],"created_at":"2024-09-24T19:48:12.758Z","updated_at":"2025-10-08T01:49:19.916Z","avatar_url":"https://github.com/wheely.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-dialog [![license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/wheely/ember-dialog/blob/master/LICENSE.md) [![Build Status](https://travis-ci.org/wheely/ember-dialog.svg?branch=master)](https://travis-ci.org/wheely/ember-dialog) [![Code Climate](https://codeclimate.com/github/wheely/ember-dialog/badges/gpa.svg)](https://codeclimate.com/github/wheely/ember-dialog) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/f364ecdab2f4486dbd15b198d5debf87)](https://www.codacy.com/app/ajile/ember-dialog?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=wheely/ember-dialog\u0026amp;utm_campaign=Badge_Grade) [![Codacy Badge](https://api.codacy.com/project/badge/Coverage/f364ecdab2f4486dbd15b198d5debf87)](https://www.codacy.com/app/ajile/ember-dialog?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=wheely/ember-dialog\u0026amp;utm_campaign=Badge_Coverage) [![dependencies Status](https://david-dm.org/wheely/ember-dialog/status.svg)](https://david-dm.org/wheely/ember-dialog) [![devDependencies Status](https://david-dm.org/wheely/ember-dialog/dev-status.svg)](https://david-dm.org/wheely/ember-dialog?type=dev)\n\nA lightweight and powerful Ember Addon that allows you to easily create \u003cb\u003eroutable\u003c/b\u003e dialog windows and control their closing. It consists of a service that is available from any object and a component which is a dialog-window itself.\n\nWith ember-dialog you can create any popups like dialogs, modals, notices, bubbles etc. We have decided do not include realization of all this features to the library for minification reasons. Instead of it we have written absolute documentation how you can make it your own (see \u003ca href=\"http://wheely.github.io/ember-dialog/#/cookbook\"\u003ecookbook\u003c/a\u003e and \u003ca href=\"http://wheely.github.io/ember-dialog/#/tutorial\"\u003etutorial\u003c/a\u003e with examples). You can look the library's code on github and get surprised how much code on aboard to realize all features, presented on this site.\n\n## Installation\n\nInstalling the library is as easy as:\n\n```shell\nember install ember-dialog\n```\n\n## About\n\n\u003cimg align=\"right\" src=\"http://dl2.joxi.net/drive/2016/07/14/0007/2363/473403/03/5f20c42c19.png\"\u003e\n\nThe principle of work is simple. Service is instructed to display a modal window (`show`, `alert`, `confirm` or `blank` methods), creates a component instance with required layout and template, then renders it, and attaches it to the body. At this point, it also creates a Promise, \"handles\" of which puts into the component and returns it. The component has 2 actions on aboard: one for `resolved` closing, another one for `rejected` closing. Actions available within the template and can be called, for instance by clicking on the button (in the layout or in the template). When you call an action, one of the Promise's method is executed and triggered independent \"accepted\" or \"declined\" event. The dialog service when gets the event destroys component object and detaches it from the DOM.\n\nLet's say you want to ask user confirm an action. You should call `show` method of the dialog service with a layout path (you needed dialog window with two buttons - `confirm` layout what you need) and a path to template that you want to show the user in the modal window. Method creates and shows dialog window and returns a Promise, that will become resolved or rejected when window closed (it's depend on which button user has clicked).\n\n```javascript\n// The `dialog/confirm` - predefined layout template\n// The `messages/hello` - template that you'd like to show.\n// Notice: this template should be found in your project by path `app/templates/messages/hello`\nconst layoutName = \"dialog/confirm\";\nconst templateName = \"messages/hello\";\nconst promise = this.get(\"dialog\").show(layoutName, templateName);\n\nconst yes = () =\u003e { console.log(`yes pressed`); };\nconst no = () =\u003e { console.log(`no pressed`); };\n\npromise.then(yes, no);\n```\n\nFor more information and demos, visit the [site](http://wheely.github.io/ember-dialog/).\n\n## Dialog types (predefined layouts)\n\nember-dialog has next layouts on aboard: `alert`, `confirm` and `blank`.\n\n### Alert\n\nThis layout has only 'yes' - button clicking on which the modal window closes as `resolved`. It also has X-button which closes modal window as `resolved`. The `promise` object always resolved on modal closing. May be used for showing an information to the user. See [docs](http://wheely.github.io/ember-dialog/docs/module-ember-dialog_services_dialog.html#-inner-alert__anchor).\n\n### Confirm\n\nIn practice, the most widely used layout. It has 2 buttons, which closes dialog window. One of them closes window as `resolved`, another one closes as `rejected`. It also has X-button which closes window as `rejected` (for obvious reasons). See [docs](http://wheely.github.io/ember-dialog/docs/module-ember-dialog_services_dialog.html#-inner-confirm__anchor).\n\n### Blank\n\nThe most simple layout. It has nothing on aboard. May be used for creating custom dialog windows with its own logic of showing elements and closing. In practice often used for showing forms, in this cases accept closing carried on submit action. Convenient to use in conjunction with ember-validation (TBD:Usecase). See [docs](http://wheely.github.io/ember-dialog/docs/module-ember-dialog_services_dialog.html#-inner-blank__anchor).\n\n## Styles\n\nStyles were written on sass language, you're able to include them into you project.\n\nAdd path to `sassOptions.includePaths` in your `ember-cli-build.js` (example below).\n\n```javascript\nvar app = new EmberApp(defaults, {\n  sassOptions: {\n    includePaths: [ 'node_modules/ember-dialog/addon/styles' ]\n  }\n});\n```\n\nInclude them in your `app/styles/app.scss`:\n\n```sass\n@import \"ember-dialog\";\n```\n\nIf you have your own style of the dialog windows you may use just structure styles:\n\n```sass\n@import \"ember-dialog/structure\";\n```\n\n## Usage\n\n### Showing user a simple message from controller\n\n```javascript\nexport default Ember.Controller({\n\n  showDialog() {\n    // Will be used `app/templates/error-message.hbs`\n    this.get(\"dialog\").alert(\"error-message\");\n  }\n\n});\n```\n\n\n### Showing user a simple message from template\n\n```hbs\n  \u003cbutton onclick={{action dialog.alert \"confirm-delete\" this (hash acceptHandler=(action \"deleteRecord\"))}}\u003eDelete record\u003c/button\u003e\n```\n\n\n### Showing user a simple message to confirm action\n\n```javascript\nexport default Ember.Controller({\n\n  showDialog() {\n\n    const yes = () =\u003e { console.log(\"Yes\"); };\n    const no = () =\u003e { console.log(\"No\"); };\n\n    // Will be used `app/templates/messages/are-you-sure.hbs`\n    this.get(\"dialog\").confirm(\"messages/are-you-sure\").then(yes, no);\n\n  }\n\n});\n```\n\n\n### Binding data in the dialog\n\nController:\n```javascript\nexport default Ember.Controller({\n\n  now: now Date(),\n\n  model: { username: \"ajile\" },\n\n  showDialog() {\n\n    // Will be used `app/templates/messages/hello.hbs`\n    this.get(\"dialog\").alert(\"messages/hello\", this);\n\n  }\n\n});\n```\n\nTemplate `messages/hello.hbs`:\n```hbs\n\u003cdiv\u003eHello, {{contextObject.model.username}}! Now: {{contextObject.now}}. Click \u003cbutton onclick={{action \"accept\"}}\u003ethe button\u003c/button\u003e to close the dialog.\u003c/div\u003e\n```\n\n\n### Interrupt closing of the dialog window\n\n```javascript\nexport default Ember.Controller({\n\n  count: 0,\n\n  showDialog() {\n    // Will be used `app/templates/messages/click-counter.hbs`\n    this.get(\"dialog\").alert(\"messages/click-counter\", null, {\n      acceptHandler: \"yesHandler\"\n    });\n  },\n\n  actions: {\n    yesHandler(presenter) {\n      const count = this.get(\"count\");\n      if (count \u003c 5) {\n        console.log(\"Count less then five\");\n        this.set(\"count\", ++count);\n      } else {\n        presenter.accept();\n      }\n    }\n  }\n\n});\n```\n\n### Manual closing dialog window\n\n```javascript\nexport default Ember.Controller({\n\n  showDialog() {\n\n    // Any created dialog will be closed in 1s\n    this.get(\"dialog\").on(\"created\", (presenter) =\u003e {\n      Ember.run.later(presenter, presenter.accept, 1000);\n    });\n\n    // Will be used `app/templates/messages/something.hbs`\n    this.get(\"dialog\").alert(\"messages/something\");\n\n  }\n\n});\n```\n\n### Creating new layouts\n\nController:\n\n```javascript\nexport default Ember.Controller({\n\n  showDialog() {\n    // Will be used `app/templates/dialog-layouts/delete.hbs` as layout and\n    // `app/templates/messages/are-you-sure.hbs` as template.\n    this.get(\"dialog\").show(\"dialog-layouts/delete\", \"messages/delete-user\");\n  }\n\n});\n```\n\nTemplate `dialog-layouts/delete.hbs`:\n```hbs\n\u003ch1 style=\"color: #F00;\"\u003eConfirm Deletion\u003c/h1\u003e\n\u003cdiv class=\"body\"\u003e\n  {{#if templateName}}\n    \u003cdiv class=\"dialog-body\"\u003e{{partial templateName}}\u003c/div\u003e\n  {{else}}\n    {{component \"dialog-body\" layout=template contextObject=contextObject context=context class=\"dialog-body\"}}\n  {{/if}}\n\u003c/div\u003e\n\u003cbutton class=\"danger\" onclick={{action \"accept\"}}\u003eDELETE!\u003c/button\u003e\n\u003cbutton onclick={{action \"decline\"}}\u003eCancel\u003c/button\u003e\n```\n\nTemplate `messages/delete-user.hbs`:\n```hbs\nReally?\n```\n\nThe result:\n```html\n\u003ch1 style=\"color: #F00;\"\u003eConfirm Deletion\u003c/h1\u003e\n\u003cdiv class=\"body\"\u003e\n  Really?\n\u003c/div\u003e\n\u003cbutton class=\"danger\" onclick=\"function(){...}\"\u003eDELETE!\u003c/button\u003e\n\u003cbutton onclick=\"function(){...}\"\u003eCancel\u003c/button\u003e\n```\n\n### Extend dialog manager\n\nExecute `ember g service dialog`.\n\nFile `app/services/dialog.js`:\n```javascript\nimport Dialog from \"ember-dialog/services/dialog\";\n\nexport default Dialog.extend({\n\n  confirmDelete() {\n    const args = Array.prototype.slice.apply(arguments);\n    args.unshift(\"dialog-layouts/delete\");\n    this.show(...args);\n  }\n\n});\n```\n\n## Contributing\n\nThe library is under constant develoment. We stick to concept of Ember releases - every 6 monthes we release new version.  We do so to sync with new Ember features.\n\nIf you find something lacking in the library functions - add issue on github, we shall process it. We are open to any cooperation. Feel free to send us Pull Requests.\n\nAlso you may send all incoming issues to [slack](https://ember-dialog.slack.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheely%2Fember-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwheely%2Fember-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheely%2Fember-dialog/lists"}