<dialog-el>

Intro

This repo is a Custom Element for creating accessible dialogs/modals It is heavily inspired by Polymer's paper-dialog and the A11y Dialog fork from Edenspiekermann.

Demo

Click the following buttons to see different types of modals

Auto Positioning Demo

NOTE: the auto positioning will only work reliably on a dialog with fixed height & width. It will also function differently based on the existance of the arrow-direction attribute.

Standard Positioning

The following dialog will always fly out to the side of the screen with the most space

Arrow Positioning

The following dialog will always such that the arrow is pointing at the center of the passed element (in this case the button)

Auto Position Dialog!

This dialog will be automatically positioned relative to the button.

NOTE: This will only work on a dialog with fixed width

Demo Dialog!

This is a simple dialog! Look at me go!

Demo Modal!

This is a simple modal! I stole all the focus yeah!

Demo Dialog!

This is a dialog with another dialog inside! Click below to open the nested dialog

Demo Dialog!

This is a nested dialog! Here I am!

Demo Dialog!

This is a modal with another dialog inside! Click below to open the nested dialog

Demo Dialog!

This is a nested dialog! Here I am!

Fancy Header

Name

Phone

Arrow Direction Dialog!

This dialog should have an arrow pointing left. Note that positioning is up to the containing element.

Auto Position Dialog!

This dialog will be automatically positioned relative to the button.

NOTE: This will only work on a dialog with fixed width

Dependencies

There are no non-native dependencies in this Web Component. If your browser supports the following two things you are good. If not you will need to make sure you load the Polyfills first

Promises
- https://github.com/taylorhakes/promise-polyfill
- https://github.com/stefanpenner/es6-promise
Web Components (including Shadow DOM)
- https://github.com/webcomponents/webcomponentsjs

Utilization

Because this is a Web Component you can instantiate it using one of two methods:

HTML

    
      <dialog-el>
        <!-- Your dialog/modal content -->
      </dialog-el>

    
      var dialogEl = document.createElement('dialog-el');
      document.body.appendChild(dialogEl);

Methods

dialog.show

This is the means of displaying the dialog/modal. Simply select the element and call this method to display the dialog/modal.

Example:
```
        
          var dialog = document.querySelector('dialog-el');
          dialog.show();
        
      
```
This function returns a Promise that you can use to perform operations after the dialog/modal has displayed.

NOTE: The show function, if called on an already open dialog, will throw an error
dialog.close

This is the means of closing an open dialog/modal. Simply select the element and call this method to close it.

Example:
```
        
          var dialog = document.querySelector('dialog-el');
          dialog.close();
        
      
```
This function returns a Promise that you can use to perform operations after the dialog/modal has closed.

NOTE: The close function, if called on an already closed dialog, will throw an error

Properties

modal

If set the dialog will render as a fixed position modal instead of an absolute positioned div.
arrow-direction

Based on the value of this property (left, right, top, bottom), it sets an arrow pointer on the side of the dialog. For example, arrow-direction="left" adds an arrow to the left side of the dialog. Note that this does not work with the modal property.

Events

dialog-opened

Fired whenever the dialog is opened.
dialog-closed

Fired whenever the dialog is closed.

CSS Custom Properties

Use these to override default styles

Property Name	Description	Default Value
`--dialog-el-padding`	Used as the padding for the dialog	`15px`
`--dialog-el-background`	Used for the `background` property of the dialog	`#FFFFFF`

These defaults effectively wrap your provided local DOM in a 15px white border. Override them to change the appearance.