iOS Style Dialog Web Component – pure-dialog

Category: Javascript , Modal & Popup | September 28, 2020
Author:john-doherty
Views Total:1,050 views
Official Page:Go to website
Last Update:September 28, 2020
License:MIT

Preview:

iOS Style Dialog Web Component – pure-dialog

Description:

pure-dialog is a web component to create customizable, iOS-style alert/confirmation dialog popups on the web/mobile app.

Install it via NPM:

$ npm install pure-dialog --save

How to use it:

Include the document-register-element polyfill in the document.

<script src="polyfills/document-register-element.js"></script>

Include the pure-dialog component’s JavaScript and CSS in the document.

<script src="src/pure-dialog.js"></script>
<link href="src/pure-dialog.css" rel="stylesheet">

Create the dialog.

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

Show the dialog on the page.

document.querySelector('#example').show()

Show the dialog as a modal dialog.

document.querySelector('#example').showModal()

Customize the dialog popup.

var dialog = document.createElement('pure-dialog');
// set its properties
dialog.id = 'example';
dialog.title = 'Pure Dialog Demo';
dialog.innerHTML = 'Is this project worth a star?';
dialog.buttons = 'Absolutely, No';
dialog.closeButton = false;
dialog.autoClose = false;

API methods.

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

Events.

// listen for button clicks
document.addEventListener('pure-dialog-button-clicked', function(e) {
  console.log(e.type);    // event name
  console.log(e.target);  // pure-dialog HTML element
  console.log(e.detail);  // button clicked 
  // use e.preventDefault() to cancel event
});
// detect closed clicked
document.addEventListener('pure-dialog-close-clicked', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from closing by using e.preventDefault()
});
// detect dialog is opening
document.addEventListener('pure-dialog-opening', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from opening by using e.preventDefault()
});
// detect dialog has opened
document.addEventListener('pure-dialog-opened', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
});
// detect dialog is closing
document.addEventListener('pure-dialog-closing', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from closing by using e.preventDefault()
});
// detect dialog has closed
document.addEventListener('pure-dialog-closed', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
});
// detect dialog is appending to DOM
document.addEventListener('pure-dialog-appending', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from been inserted by using e.preventDefault()
});
// detect dialog removed from DOM
document.addEventListener('pure-dialog-removing', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from been removed by using e.preventDefault()
});

Changelog:

09/28/2020

  • v1.5.0: Changed .innerHTML property to .content (registerElement polyfill is unable to override innerHTML)

09/26/2020

  • v1.4.5: fix innerHTML issue on Android 5.1

09/24/2020

  • v1.4.1: update

08/28/2019

  • v1.4.0: Revert “added internal status=opening|open|closing|closed attribute to make css animation easier”

11/11/2018

  • v1.3.2: fixed button seperator issue

08/22/2018

  • v1.3.0

You Might Be Interested In:


Leave a Reply