{"id":15217923,"url":"https://github.com/benkingcode/ember-routable-modal","last_synced_at":"2025-10-30T04:31:22.609Z","repository":{"id":57237181,"uuid":"77411302","full_name":"benkingcode/ember-routable-modal","owner":"benkingcode","description":"An ember-cli addon for implementing URL-first modals.","archived":false,"fork":false,"pushed_at":"2018-06-07T19:02:10.000Z","size":125,"stargazers_count":17,"open_issues_count":10,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T06:31:37.422Z","etag":null,"topics":["addon","ember","emberjs","modals"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/benkingcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2016-12-26T23:09:17.000Z","updated_at":"2024-05-30T02:59:29.000Z","dependencies_parsed_at":"2022-08-26T15:10:19.384Z","dependency_job_id":null,"html_url":"https://github.com/benkingcode/ember-routable-modal","commit_stats":null,"previous_names":["dbbk/ember-routable-modal"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benkingcode%2Fember-routable-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benkingcode%2Fember-routable-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benkingcode%2Fember-routable-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benkingcode%2Fember-routable-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benkingcode","download_url":"https://codeload.github.com/benkingcode/ember-routable-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238934083,"owners_count":19554788,"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":["addon","ember","emberjs","modals"],"created_at":"2024-09-28T12:07:59.561Z","updated_at":"2025-10-30T04:31:17.259Z","avatar_url":"https://github.com/benkingcode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember Routable Modal [![Build Status](https://travis-ci.org/dbbk/ember-routable-modal.svg?branch=master)](https://travis-ci.org/dbbk/ember-routable-modal)\nThe `ember-routable-modal` addon allows you to quickly and easily implement URL-first modals, similar to those found on sites such as Facebook, Twitter, and Dribbble. You can navigate to modals elsewhere in the route tree without losing your place on the current page, making it ideal for lightboxes and photo viewers.\n\n## Usage\n### Installation\n```no-highlight\nember install ember-routable-modal\n```\nEmber.js 2.12+ is required.\n\nYou must add `{{routable-modal-outlet}}` to the bottom of your application template in order for modals to render.\n\n### Stylesheets\nThe addon comes with a lightweight default Sass stylesheet. To use it, you must first install [ember-cli-sass](https://emberobserver.com/addons/ember-cli-sass), then import the files at the top of your `styles/app.scss` file as so;\n\n```css\n@import \"ember-routable-modal/core\";\n@import \"ember-routable-modal/dialog\";\n```\n\n### Generating Modal Routes\nYou can use the `modal-route` generator to quickly scaffold modal routes, sharing the syntax of the built-in `route` generator. Try running the following command;\n```no-highlight\nember generate modal-route example\n```\n\nIf you are using the pod structure, make sure you pass the `-p` parameter.\n\nYou will now see that a route has been generated with the provided mixin, as well as a template with a sample dialog element.\n\n```js\n// app/routes/example.js\nimport Ember from 'ember';\nimport ModalRouteMixin from 'ember-routable-modal/mixins/route';\n\nexport default Ember.Route.extend(ModalRouteMixin, {\n});\n```\n\n```hbs\n// app/templates/example.hbs\n\u003cdiv class=\"routable-modal--dialog\"\u003e\n    \u003cdiv class=\"routable-modal--content\"\u003e\n        \u003cdiv class=\"routable-modal--header\"\u003e\n            {{routable-modal-close-button class=\"routable-modal--close\"}}\n            \u003ch4 class=\"routable-modal--title\"\u003eModal title\u003c/h4\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"routable-modal--body\"\u003e\n            Content\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nNow whenever you navigate to `/example`, through the usual `{{link-to}}` helper or by calling `this.transitionTo()` within a route, the `example` modal will render on top of your currently active route. If you load the page from the `/example` URL directly, the closest parent route will be rendered underneath the modal.\n\nYou are free to delete the provided template and build your own dialog component if you wish, the addon is flexible.\n\n### Loading Substates\nModal routes also work with the [loading substate](https://guides.emberjs.com/v2.10.0/routing/loading-and-error-substates/) when an asynchronous object is passed to the route's `model` hook. Just create a template with the filename in the format `{route}-loading`, and it will be rendered on top of the modal backdrop while your `model` hook waits to resolve.\n\n### Closing Modals\nYou can close modals in one of two ways;\n\n#### Programmatically\nThe addon comes with a service called `current-routed-modal`. Simply inject it wherever you would like to be able to control the modal, for instance in a component;\n\n```js\nimport Ember from 'ember';\n\nexport default Ember.Component.extend({\n    modal: Ember.inject.service('current-routed-modal'),\n    tagName: 'button',\n    click() {\n        this.get('modal').close();\n    }\n});\n```\n\n#### Helper Component\nYou can also use the `{{routable-modal-close-button}}` component, which has the same implementation as the code sample above. You can see an example of it used in the auto-generated modal route template. It can also be used in block form, such as `{{#routable-modal-close-button}}Close{{/routable-modal-close-button}}`\n\n## Configuration\n### Customize Element Classes\nYou can override the default modal element classes by setting the `ENV['ember-routable-modal']` option in `config/environment.js` like so;\n\n```js\nENV['ember-routable-modal'] = {\n    modalClassNames: ['modal'],\n    backdropClassNames: ['modal-backdrop'],\n    modalOpenBodyClassName: 'modal-open'\n};\n```\nProperty|Default\n--------|-------\n`modalClassNames`|`['routable-modal']`\n`backdropClassNames`|`['routable-modal--backdrop']`\n`modalOpenBodyClassName`|`routable-modal--open`\n\n## Running tests\n\n* `ember test` – Runs the test suite on the current Ember version\n* `ember test --server` – Runs the test suite in \"watch mode\"\n* `npm test` – Runs `ember try:each` to test your addon against multiple Ember versions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenkingcode%2Fember-routable-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenkingcode%2Fember-routable-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenkingcode%2Fember-routable-modal/lists"}