{"id":18544507,"url":"https://github.com/instructure/ic-modal","last_synced_at":"2025-04-09T19:30:45.990Z","repository":{"id":58240940,"uuid":"14753958","full_name":"instructure/ic-modal","owner":"instructure","description":"Ember component for modal dialog","archived":false,"fork":false,"pushed_at":"2014-09-05T19:58:20.000Z","size":1960,"stargazers_count":61,"open_issues_count":11,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-24T10:49:28.689Z","etag":null,"topics":[],"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/instructure.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","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":"2013-11-27T17:27:13.000Z","updated_at":"2024-11-13T11:08:42.000Z","dependencies_parsed_at":"2022-08-31T09:40:25.378Z","dependency_job_id":null,"html_url":"https://github.com/instructure/ic-modal","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instructure%2Fic-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instructure","download_url":"https://codeload.github.com/instructure/ic-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730067,"owners_count":20986404,"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":[],"created_at":"2024-11-06T20:16:43.818Z","updated_at":"2025-04-09T19:30:45.258Z","avatar_url":"https://github.com/instructure.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ic-modal\n========\n\n[![Build Status](https://travis-ci.org/instructure/ic-modal.png?branch=master)](https://travis-ci.org/instructure/ic-modal)\n\n[WAI-ARIA][wai-aria] accessible modal dialog component for [Ember.js][ember].\n\nDemo\n----\n\nhttp://instructure.github.io/ic-modal\n\nInstallation\n------------\n\n```sh\n$ npm install ic-modal\n```\n\nor ...\n\n```sh\n$ bower install ic-modal\n```\n\nor just grab your preferred distribution from `dist/`.\n\nThen include the script(s) into your application:\n\n### npm+browserify\n\n`require('ic-modal')`\n\n### amd\n\nRegister `ic-modal` as a [package][rjspackage], then:\n\n`define(['ic-modal'], ...)`\n\n### named-amd\n\nYou ought to know what you're doing if this is the case.\n\n### globals\n\n`\u003cscript src=\"bower_components/ic-styled/main.js\"\u003e\u003c/script\u003e`\n`\u003cscript src=\"bower_components/ic-modal/dist/globals/main.js\"\u003e\u003c/script\u003e`\n\n{{ic-modal}} Usage\n------------------\n\nIn its simplest form:\n\n```html\n{{#ic-modal-trigger controls=\"ohai\"}}\n  open the modal\n{{/ic-modal-trigger}}\n\n{{#ic-modal id=\"ohai\"}}\n  Ohai!\n{{/ic-modal}}\n```\n\nHere are all the bells and whistles:\n\n```html\n\u003c!--\n  Triggers can live anywhere in your template, just give them the id of\n  the modal they control, you can even have multiple triggers for the\n  same modal.\n--\u003e\n\n{{#ic-modal-trigger controls=\"tacos\"}}\n  abrir los tacos\n{{/ic-modal-trigger}}\n\n\u003c!--\n  The \"close-when\" attribute can be bound to a controller property. If\n  `tacosOrdered` gets set to `true` then the modal will close.\n\n  \"open-when\" is the same, but opposite.\n--\u003e\n\n{{#ic-modal id=\"tacos\" close-when=tacosOrdered}}\n\n  \u003c!--\n    This is optional, but you really should provide your own title,\n    it gets used in the UI and is important for screenreaders to tell the\n    user what modal they are in. If you hate it, write some CSS to hide\n    it.\n  --\u003e\n\n  {{#ic-modal-title}}Tacos{{/ic-modal-title}}\n\n  \u003c!--\n    If a trigger lives inside a modal it doesn't need a \"controls\"\n    attribute, it'll just know.\n\n    If you don't provide a trigger inside the modal, you'll get one\n    automatically, but if you're translating, you're going to want your\n    own.\n\n    Put the text to be read to screenreaders in an \"aria-label\" attribute\n  --\u003e\n\n  {{#ic-modal-trigger aria-label=\"Cerrar los tacos\"}}×{{/ic-modal-trigger}}\n\n  \u003c!-- Finally, just provide some content --\u003e\n\n  \u003cp\u003e\n    ¡Los tacos!\n  \u003c/p\u003e\n{{/ic-modal}}\n```\n\n{{ic-modal-form}} Usage\n-----------------------\n\nOne of the most common use-cases for a modal dialog is a form.\n\n```html\n\u003c!-- we still use ic-modal-trigger --\u003e\n{{#ic-modal-trigger controls=\"new-user-form\"}}\n  open\n{{/ic-modal-trigger}}\n\n\u003c!-- note this is ic-modal-form --\u003e\n{{#ic-modal-form\n  id=\"new-user-form\"\n\n  \u003c!--\n    map the component's \"on-submit\" to controller's \"submitForm\",\n    the component handles the submit for you\n   --\u003e\n  on-submit=\"submitForm\"\n\n  \u003c!--\n    if the form is closed w/o being submit, maybe you need to restore\n    the old properties of a model, etc.\n  --\u003e\n  on-cancel=\"restoreModel\"\n\n  \u003c!-- same thing as above --\u003e\n  on-invalid-close=\"handleCloseWhileSaving\"\n\n  \u003c!--\n    bind component's \"awaiting-return-value\" to local \"saving\",\n    more on this in the js section\n  --\u003e\n  awaiting-return-value=saving\n\n}}\n\n  \u003c!-- in here you are already a form, just add your form elements --\u003e\n\n  \u003cfieldset\u003e\n    \u003clabel for=\"name\"\u003eName\u003c/label\u003e\n    {{input id=\"name\" value=newUser.name}}\n  \u003c/fieldset\u003e\n\n  \u003c!-- and put your buttons in the footer --\u003e\n\n  \u003cfieldset\u003e\n    \u003c!-- when \"awaiting-return-value\" is true, \"saving\" will be also --\u003e\n    {{#if saving}}\n      saving ...\n    {{else}}\n      {{#ic-modal-trigger}}Cancel{{/ic-modal-trigger}}\n      \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e\n    {{/if}}\n  \u003c/fieldset\u003e\n\n{{/ic-modal-form}}\n```\n\n```js\nApp.ApplicationController = Ember.Controller.extend({\n\n  newUser: {},\n\n  actions: {\n\n    // this will be called when the user submits the form because we\n    // mapped it to the \"on-submit\" actions of the component\n    submitForm: function(modal, event) {\n\n      // If you set the event.returnValue to a promise, ic-modal-form\n      // will set its 'awaiting-return-value' to true, that's why our\n      // `{{#if saving}}` in the template works. You also get an\n      // attribute on the component to style it differently, see the css\n      // section about that. You don't need to set the `event.returnValue`.\n      event.returnValue = ic.ajax.request(newUserUrl).then(function(json) {\n        addUser(json);\n        this.set('newUser', {});\n      }.bind(this));\n    },\n\n    // if the user tries to close the component while the\n    // `event.returnValue` is stil resolving, this event is sent.\n    handleCloseWhileSaving: function(modal) {\n      alert(\"Hold your horses, we're still saving stuff\");\n    },\n\n    restoreModel: function(modal) {\n      this.get('model').setProperties(this.get('modelPropsBeforeEdit'));\n    }\n  }\n});\n```\n\n```css\n// while the promise is resolving, you can style the elements\n#new-user-form[awaiting-return-value] ic-modal-main {\n  opacity: 0.5;\n}\n```\n\nCSS\n---\n\n### Overriding styles\n\nThis component ships with some CSS to be usable out-of-the-box, but the\ndesign has been kept pretty minimal. See `templates/modal-css.hbs` to\nknow what to override for your own design.\n\n### Animations\n\nThere is a class \"hook\" provided to create animations when the a modal\nis opened, `after-open`. For example, you could add this CSS to your\nstylesheet to create a fade-in effect:\n\n```css\nic-modal[is-open] {\n  opacity: 0;\n  transition: opacity 150ms ease;\n}\n\nic-modal[after-open] {\n  opacity: 1;\n}\n```\n\nContributing\n------------\n\n```sh\n$ git clone \u003cthis repo\u003e\n$ npm install\n$ npm test\n# during dev\n$ broccoli serve\n# localhost:4200/globals/main.js instead of dist/globals/main.js\n# new tab\n$ karma start\n```\n\nMake a new branch, send a pull request, squashing commits into one\nchange is preferred.\n\n  [rjspackage]:http://requirejs.org/docs/api.html#packages\n  [ember]:http://emberjs.com\n  [wai-aria]:http://www.w3.org/TR/wai-aria/roles#dialog\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstructure%2Fic-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstructure%2Fic-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstructure%2Fic-modal/lists"}