Merge pull request #176 from mreinstein/master

support esm, cjs modules #164 and remove bower support
GoogleChrome · Feb 27, 2019 · 7918d81 · 7918d81
2 parents 26222dd + fc90485
commit 7918d81
Show file tree

Hide file tree

Showing 20 changed files with 2,277 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
 .DS_Store
-bower_components
+node_modules
diff --git a/README.md b/README.md
@@ -9,10 +9,33 @@ See the [HTML spec](https://html.spec.whatwg.org/multipage/forms.html#the-dialog
 
 ### Installation
 
-You may optionally install via NPM or Bower-
+You may optionally install via NPM -
 
     $ npm install dialog-polyfill
-    $ bower install dialog-polyfill
+
+
+There are several ways that to include the dialog polyfill:
+
+* include `dialog-polyfill.js` script directly in your HTML, which exposes a global `dialogPolyfill` function.
+* `import` (es modules)
+* `require` (commonjs/node)
+
+
+```javascript
+// direct import (script module, deno)
+import dialogPolyfill from './node_modules/dialog-polyfill/index.js';
+
+// *OR*
+
+// modern es modules with rollup/webpack bundlers, and node via esm module
+import dialogPolyfill from 'dialog-polyfill'
+
+// *OR*
+
+// traditional commonjs/node and browserify bundler
+const dialogPolyfill = require('dialog-polyfill')
+```
+
 
 ### Supports
 
@@ -25,11 +48,11 @@ This polyfill works on modern versions of all major browsers. It also supports I
 3. Register the elements using `dialogPolyfill.registerDialog()`, passing it one node at a time. This polyfill won't replace native support.
 4. Use your `<dialog>` elements!
 
-## Example
+## Script Global Example
 
 ```html
 <head>
-  <link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
+  <link rel="stylesheet" type="text/css" href="dist/dialog-polyfill.css" />
 </head>
 <body>
   <dialog>
@@ -38,7 +61,7 @@ This polyfill works on modern versions of all major browsers. It also supports I
       <input type="submit" value="Close" />
     </form>
   </dialog>
-  <script src="dialog-polyfill.js"></script>
+  <script src="dist/dialog-polyfill.js"></script>
   <script>
     var dialog = document.querySelector('dialog');
     dialogPolyfill.registerDialog(dialog);

diff --git a/bower.json b/bower.json
diff --git a/dist/dialog-polyfill.css b/dist/dialog-polyfill.css
@@ -0,0 +1,37 @@
+dialog {
+  position: absolute;
+  left: 0; right: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  border: solid;
+  padding: 1em;
+  background: white;
+  color: black;
+  display: block;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+dialog + .backdrop {
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background: rgba(0,0,0,0.1);
+}
+
+._dialog_overlay {
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+}
+
+dialog.fixed {
+  position: fixed;
+  top: 50%;
+  transform: translate(0, -50%);
+}