pure-dialog

    1.5.0 • Public • Published

    pure-dialog

    Shippable branch

    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:

    Screenshot

    Try the demo

    Table of Contents

    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

    Install

    npm i pure-dialog

    DownloadsWeekly Downloads

    1

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    123 kB

    Total Files

    27

    Last publish

    Collaborators

    • john-doherty