dialogLoader
As of January 2018, browser support for the HTML dialog element is poor, but there does exist a "polyfill".
The dialogLoader finds and registers all dialog elements with the dialog polyfill for cross-browser support.
Install
dialogLoader is an ES6 module. Consequently, you'll nee an ES6 transpiler (Babel is an option) and a module loader as part of your Javascript workflow.
If you are already using NPM for your project, you can install dialogLoader with the following command:
$ npm install @degjs/dialog-loader
Dependencies
NPM will automatically installs and configures this module's dependencies for you. However, if you manually install this module without using NPM, you will also need to manually install these dependencies:
- dialog-polyfill
- dialogLoader requires SystemJS and will only work with v0.19.x or earlier, as it uses its
System.import()method to load modules. - Mutation Observer
CSS Notes
Include the following CSS in a project to prevent unwanted IE issues:
.dialog {
&:not([open]) {
display: none;
}
}
Browser Support
dialogLoader depends on the following browser APIs:
- forEach: Documentation | Polyfill -- only necessary if IE9 is a supported browser on your project
- MutationObserver: Documentation | Polyfill
To support legacy browsers, you'll need to include polyfills for the above APIs.