pure-dialog

A small (3.3kb), self-contained, pure JavaScript modal dialog designed to simplify the creation of dialogs in Web and Hybrid Mobile apps.

<pure-dialog id="example" data-title="Pure Dialog Demo" buttons="Absolutely, No">
Is this project worth a star?
</pure-dialog>

Becomes:

Try the demo

How to use

Add dist/pure-dialog.min.js and dist/pure-dialog.min.css files to your page.

If your browser does not support Web Components you will need to add the document.registerElement polyfill.

In HTML

<pure-dialog id="example" data-title="Pure Dialog Demo" buttons="Absolutely, No">
Is this project worth a star?
</pure-dialog>

In JavaScript

// create the element
var dialog = document.createElement('pure-dialog');

// set its properties
dialog.id = 'example';
dialog.title = 'Pure Dialog Demo';
dialog.content = 'Hello there';
dialog.buttons = 'Yes, No';
dialog.buttonValueSeparator = ',';
dialog.closeButton = false;

// append to DOM
dialog.appendToDOM();

// show as a modal
dialog.showModal();

Methods

Assuming var dialog = document.getElementById('example'):

dialog.show();        // show the dialog
dialog.showModal();   // show the dialog as a modal
dialog.close();       // close the dialog
dialog.appendToDOM(); // add the dialog to the DOM (not require if using HTML literal)
dialog.remove();      // remove the dialog from the DOM

Events

All 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'):

pure-dialog-button-clicked

// detect button clicks on the #example element
dialog.addEventListener('pure-dialog-button-clicked', function(e) {

  if (e.detail === 'Absolutely') {
    // Absolutely was clicked!
  }
  else {
    // Absolutely was not clicked, stop the dialog from closing ;)
    e.preventDefault();
  }
});

// or detect button click on all dialogs in the DOM
document.addEventListener('pure-dialog-button-clicked', function(e) {
  console.log(e.detail); // log button label
});

pure-dialog-close-clicked

// detect closed clicked
dialog.addEventListener('pure-dialog-close-clicked', function(e) {
  console.log(e.target.id) // log dialog id
  // stop the dialog from closing using e.preventDefault()
});

pure-dialog-opening

// detect dialog is opening
dialog.addEventListener('pure-dialog-opening', function(e) {
  console.log(e.target.id) // log dialog id
  // stop the dialog from opening using e.preventDefault()
});

pure-dialog-opened

// detect dialog has opened
dialog.addEventListener('pure-dialog-opened', function(e) {
  console.log(e.target.id) // log dialog id
});

pure-dialog-closing

// detect dialog is closing
dialog.addEventListener('pure-dialog-closing', function(e) {
  console.log(e.target.id) // log dialog id
  // stop the dialog from closing using e.preventDefault()
});

pure-dialog-closed

// detect dialog has closed
dialog.addEventListener('pure-dialog-closed', function(e) {
  console.log(e.target.id) // log dialog id
});

pure-dialog-appending

// detect dialog is appending to DOM
dialog.addEventListener('pure-dialog-appending', function(e) {
  console.log(e.target.id) // log dialog id
  // stop the dialog from been inserted using e.preventDefault()
});

pure-dialog-removing

// detect dialog removed from DOM
dialog.addEventListener('pure-dialog-removing', function(e) {
  console.log(e.target.id) // log dialog id
  // stop the dialog from been removed using e.preventDefault()
});

pure-dialog-ready

// executes when the element is ready for interaction
dialog.addEventListener('pure-dialog-ready', function(e) {
  console.log(e.target.id) // log dialog id
});

TODO: document these events

• pure-dialog-body-rendered
• pure-dialog-title-rendered
• pure-dialog-buttons-rendered

Properties and attributes

JS Property | HTML Attribute | Description | Type | Default -------------------- | ------------------------ | ----------------------------------------------- | --------- | -------- title | data-title | Get/set the dialog title | string | empty buttons | buttons | Get/set comma separated list of buttons | string | empty buttonValueSeparator | button-value-separator | Get/set character to use to split button values | string | , closeButton | close-button | If true, renders a close button | boolean | false removeOnClose | remove-on-close | If true, remove dialog from DOM on close | boolean | false autoClose | auto-close | auto close when button clicked | boolean | true content | n/a | Injects HTML into body of dialog | string | empty body | n/a | Gets dialog inner body tag | object | null

Assuming var dialog = document.getElementById('example'):

dialog.title = 'Pure Dialog Demo';        // set title
dialog.buttons = 'Absolutely|No';         // set buttons
dialog.buttonValueSeparator = '|';        // button values are separated by pipe
dialog.closeButton = true;                // set close button visibility
dialog.removeOnClose = true;              // remove dialog from DOM on close
dialog.autoClose = false;                 // do not auto close when button clicked
dialog.content = 'Hello World!';          // set dialog body HTML
dialog.body.textContent = 'Hello World';  // set inner text via body tag

Styling

pure-dialog was designed to be light and so only produces the following output, making it easy to style:

<pure-dialog id="example" data-title="Pure Dialog Demo" buttons="Absolutely, No">
  <div class="pure-dialog-container">
    <div class="pure-dialog-title">Pure Dialog Demo</div>
    <div class="pure-dialog-body">Is this project worth a star?</div>
    <div class="pure-dialog-buttons">
      <input class="pure-dialog-button" type="button" value="Absolutely">
      <input class="pure-dialog-button" type="button" value="No">
    </div>
  </div>
</pure-dialog>

To change the style of a particular button, you could use its value as a selector:

#example input[value="Absolutely"] { background: #880000; }

Unit Tests

1. Checkout using git clone https://github.com/john-doherty/pure-dialog
2. Navigate into project folder cd pure-dialog
3. Install dependencies npm install
4. Run the tests npm test

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Star the repo

If you find this useful, star the repo, it motivates me to continue development :)

History

For change-log, check releases.

License

Licensed under MIT License © John Doherty