{"id":13565478,"url":"https://github.com/john-doherty/pure-dialog","last_synced_at":"2025-04-12T02:06:26.923Z","repository":{"id":37754855,"uuid":"95017649","full_name":"john-doherty/pure-dialog","owner":"john-doherty","description":"\u003cpure-dialog\u003e is a 3k, self-contained, pure JavaScript dialog","archived":false,"fork":false,"pushed_at":"2025-03-25T11:33:36.000Z","size":1121,"stargazers_count":20,"open_issues_count":14,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T02:06:17.753Z","etag":null,"topics":["cordova","dialog","javascript","webcomponent"],"latest_commit_sha":null,"homepage":"https://codepen.io/anon/pen/YRGwdJ","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/john-doherty.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-21T15:16:07.000Z","updated_at":"2025-03-25T11:33:41.000Z","dependencies_parsed_at":"2024-01-16T18:59:59.254Z","dependency_job_id":"a2464e9d-f1f7-4afa-a008-8704de15d651","html_url":"https://github.com/john-doherty/pure-dialog","commit_stats":{"total_commits":130,"total_committers":7,"mean_commits":"18.571428571428573","dds":"0.25384615384615383","last_synced_commit":"4ce27f7cc6e82e8ef3ba065254f575f377ff1c6d"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fpure-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fpure-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fpure-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fpure-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/john-doherty","download_url":"https://codeload.github.com/john-doherty/pure-dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"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":["cordova","dialog","javascript","webcomponent"],"created_at":"2024-08-01T13:01:47.867Z","updated_at":"2025-04-12T02:06:26.913Z","avatar_url":"https://github.com/john-doherty.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# [pure-dialog](https://codepen.io/anon/pen/bRrbMe)\n\n[![Shippable branch](https://img.shields.io/shippable/594ab4e4febbde0700daa804/master.svg)](https://app.shippable.com/projects/594ab4e4febbde0700daa804)\n\nA small _(3.3kb)_, self-contained, pure JavaScript modal dialog designed to simplify the creation of dialogs in Web and Hybrid Mobile apps.\n\n```html\n\u003cpure-dialog id=\"example\" data-title=\"Pure Dialog Demo\" buttons=\"Absolutely, No\"\u003e\nIs this project worth a star?\n\u003c/pure-dialog\u003e\n```\n\nBecomes:\n\n![Screenshot](/docs/screenshot.png)\n\nTry the [demo](https://codepen.io/anon/pen/bRrbMe)\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"#how-to-use\"\u003eHow to use\u003c/a\u003e\u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"#in-html\"\u003eIn HTML\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#in-javascript\"\u003eIn JavaScript\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#methods\"\u003eMethods\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#events\"\u003eEvents\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#properties-and-attributes\"\u003eProperties and attributes\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#styling\"\u003eStyling\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cli\u003e\u003ca href=\"#unit-tests\"\u003eUnit Tests\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#star-the-repo\"\u003eStart the repo\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#history\"\u003eHistory\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n\u003c/details\u003e\n\n## How to use\n\nAdd  [dist/pure-dialog.min.js](dist/pure-dialog.min.js) and [dist/pure-dialog.min.css](dist/pure-dialog.min.css) files to your page.\n\n_If your browser does not support Web Components you will need to add the  [document.registerElement](polyfills/document-register-element.js) polyfill._\n\n### In HTML\n\n```html\n\u003cpure-dialog id=\"example\" data-title=\"Pure Dialog Demo\" buttons=\"Absolutely, No\"\u003e\nIs this project worth a star?\n\u003c/pure-dialog\u003e\n```\n\n### In JavaScript\n\n```js\n// create the element\nvar dialog = document.createElement('pure-dialog');\n\n// set its properties\ndialog.id = 'example';\ndialog.title = 'Pure Dialog Demo';\ndialog.content = 'Hello there';\ndialog.buttons = 'Yes, No';\ndialog.buttonValueSeparator = ',';\ndialog.closeButton = false;\n\n// append to DOM\ndialog.appendToDOM();\n\n// show as a modal\ndialog.showModal();\n```\n\n### Methods\n\nAssuming `var dialog = document.getElementById('example')`:\n\n```js\ndialog.show();        // show the dialog\ndialog.showModal();   // show the dialog as a modal\ndialog.close();       // close the dialog\ndialog.appendToDOM(); // add the dialog to the DOM (not require if using HTML literal)\ndialog.remove();      // remove the dialog from the DOM\n```\n\n### Events\n\nAll pure-dialog events bubble up so it is possible to listen for pure-dialog events at the root of the DOM. Assuming `var dialog = document.getElementById('example')`:\n\n#### pure-dialog-button-clicked\n\n```js\n// detect button clicks on the #example element\ndialog.addEventListener('pure-dialog-button-clicked', function(e) {\n\n  if (e.detail === 'Absolutely') {\n    // Absolutely was clicked!\n  }\n  else {\n    // Absolutely was not clicked, stop the dialog from closing ;)\n    e.preventDefault();\n  }\n});\n\n// or detect button click on all dialogs in the DOM\ndocument.addEventListener('pure-dialog-button-clicked', function(e) {\n  console.log(e.detail); // log button label\n});\n```\n\n#### pure-dialog-close-clicked\n\n```js\n// detect closed clicked\ndialog.addEventListener('pure-dialog-close-clicked', function(e) {\n  console.log(e.target.id) // log dialog id\n  // stop the dialog from closing using e.preventDefault()\n});\n```\n\n#### pure-dialog-opening\n\n```js\n// detect dialog is opening\ndialog.addEventListener('pure-dialog-opening', function(e) {\n  console.log(e.target.id) // log dialog id\n  // stop the dialog from opening using e.preventDefault()\n});\n```\n\n#### pure-dialog-opened\n\n```js\n// detect dialog has opened\ndialog.addEventListener('pure-dialog-opened', function(e) {\n  console.log(e.target.id) // log dialog id\n});\n```\n\n#### pure-dialog-closing\n\n```js\n// detect dialog is closing\ndialog.addEventListener('pure-dialog-closing', function(e) {\n  console.log(e.target.id) // log dialog id\n  // stop the dialog from closing using e.preventDefault()\n});\n```\n\n#### pure-dialog-closed\n\n```js\n// detect dialog has closed\ndialog.addEventListener('pure-dialog-closed', function(e) {\n  console.log(e.target.id) // log dialog id\n});\n```\n\n#### pure-dialog-appending\n\n```js\n// detect dialog is appending to DOM\ndialog.addEventListener('pure-dialog-appending', function(e) {\n  console.log(e.target.id) // log dialog id\n  // stop the dialog from been inserted using e.preventDefault()\n});\n```\n\n#### pure-dialog-removing\n\n```js\n// detect dialog removed from DOM\ndialog.addEventListener('pure-dialog-removing', function(e) {\n  console.log(e.target.id) // log dialog id\n  // stop the dialog from been removed using e.preventDefault()\n});\n```\n\n#### pure-dialog-ready\n\n```js\n// executes when the element is ready for interaction\ndialog.addEventListener('pure-dialog-ready', function(e) {\n  console.log(e.target.id) // log dialog id\n});\n```\n\n### TODO: document these events\n\n * pure-dialog-body-rendered\n * pure-dialog-title-rendered\n * pure-dialog-buttons-rendered\n\n### Properties and attributes\n\nJS Property          | HTML Attribute           | Description                                     | Type      | Default\n-------------------- | ------------------------ | ----------------------------------------------- | --------- | --------\ntitle                | `data-title`             | Get/set the dialog title                        | _string_  | _empty_\nbuttons              | `buttons`                | Get/set comma separated list of buttons         | _string_  | _empty_\nbuttonValueSeparator | `button-value-separator` | Get/set character to use to split button values | _string_  | `,`\ncloseButton          | `close-button`           | If true, renders a close button                 | _boolean_ | `false`\nremoveOnClose        | `remove-on-close`        | If true, remove dialog from DOM on close        | _boolean_ | `false`\nautoClose            | `auto-close`             | auto close when button clicked                  | _boolean_ | `true`\ntranslate            | `translate`              | Should translation be applied                   | _boolean_ | `true`\ncontent              | _n/a_                    | Injects HTML into body of dialog                | _string_  | _empty_\nbody                 | _n/a_                    | Gets dialog inner body tag                      | _object_  | null\n\nAssuming `var dialog = document.getElementById('example')`:\n\n```js\ndialog.title = 'Pure Dialog Demo';        // set title\ndialog.buttons = 'Absolutely|No';         // set buttons\ndialog.buttonValueSeparator = '|';        // button values are separated by pipe\ndialog.closeButton = true;                // set close button visibility\ndialog.removeOnClose = true;              // remove dialog from DOM on close\ndialog.autoClose = false;                 // do not auto close when button clicked\ndialog.translate = false;                 // do not translate content\ndialog.content = 'Hello World!';          // set dialog body HTML\ndialog.body.textContent = 'Hello World';  // set inner text via body tag\n```\n\n## Styling\n\n`pure-dialog` was designed to be light and so only produces the following output, making it easy to style:\n\n```html\n\u003cpure-dialog id=\"example\" data-title=\"Pure Dialog Demo\" buttons=\"Absolutely, No\"\u003e\n  \u003cdiv class=\"pure-dialog-container\"\u003e\n    \u003cdiv class=\"pure-dialog-title\"\u003ePure Dialog Demo\u003c/div\u003e\n    \u003cdiv class=\"pure-dialog-body\"\u003eIs this project worth a star?\u003c/div\u003e\n    \u003cdiv class=\"pure-dialog-buttons\"\u003e\n      \u003cinput class=\"pure-dialog-button\" type=\"button\" value=\"Absolutely\"\u003e\n      \u003cinput class=\"pure-dialog-button\" type=\"button\" value=\"No\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/pure-dialog\u003e\n```\n\nTo change the style of a particular button, you could use its value as a selector:\n\n```css\n#example input[value=\"Absolutely\"] { background: #880000; }\n```\n\n## Unit Tests\n\n1. Checkout using `git clone https://github.com/john-doherty/pure-dialog`\n2. Navigate into project folder `cd pure-dialog`\n3. Install dependencies `npm install`\n4. Run the tests `npm test`\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request\n\n## Star the repo\n\nIf you find this useful, star the repo, it motivates me to continue development :)\n\n## History\n\nFor change-log, check [releases](https://github.com/john-doherty/pure-dialog/releases).\n\n## License\n\nLicensed under [MIT License](LICENSE) \u0026copy; [John Doherty](http://www.johndoherty.info)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohn-doherty%2Fpure-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohn-doherty%2Fpure-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohn-doherty%2Fpure-dialog/lists"}