Skip to content

Commit 7918d81

Browse files
samthorsamthor
authored
Merge pull request #176 from mreinstein/master
support esm, cjs modules #164 and remove bower support
2 parents 26222dd + fc90485 commit 7918d81

20 files changed

+2277
-77
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
.DS_Store
2-
bower_components
2+
node_modules

‎README.md‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,33 @@ See the [HTML spec](https://html.spec.whatwg.org/multipage/forms.html#the-dialog
99

1010
### Installation
1111

12-
You may optionally install via NPM or Bower-
12+
You may optionally install via NPM -
1313

1414
$ npm install dialog-polyfill
15-
$ bower install dialog-polyfill
15+
16+
17+
There are several ways that to include the dialog polyfill:
18+
19+
* include `dialog-polyfill.js` script directly in your HTML, which exposes a global `dialogPolyfill` function.
20+
* `import` (es modules)
21+
* `require` (commonjs/node)
22+
23+
24+
```javascript
25+
// direct import (script module, deno)
26+
import dialogPolyfill from './node_modules/dialog-polyfill/index.js';
27+
28+
// *OR*
29+
30+
// modern es modules with rollup/webpack bundlers, and node via esm module
31+
import dialogPolyfill from 'dialog-polyfill'
32+
33+
// *OR*
34+
35+
// traditional commonjs/node and browserify bundler
36+
const dialogPolyfill = require('dialog-polyfill')
37+
```
38+
1639

1740
### Supports
1841

@@ -25,11 +48,11 @@ This polyfill works on modern versions of all major browsers. It also supports I
2548
3. Register the elements using `dialogPolyfill.registerDialog()`, passing it one node at a time. This polyfill won't replace native support.
2649
4. Use your `<dialog>` elements!
2750

28-
## Example
51+
## Script Global Example
2952

3053
```html
3154
<head>
32-
<link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
55+
<link rel="stylesheet" type="text/css" href="dist/dialog-polyfill.css" />
3356
</head>
3457
<body>
3558
<dialog>
@@ -38,7 +61,7 @@ This polyfill works on modern versions of all major browsers. It also supports I
3861
<input type="submit" value="Close" />
3962
</form>
4063
</dialog>
41-
<script src="dialog-polyfill.js"></script>
64+
<script src="dist/dialog-polyfill.js"></script>
4265
<script>
4366
var dialog = document.querySelector('dialog');
4467
dialogPolyfill.registerDialog(dialog);

‎bower.json‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎dist/dialog-polyfill.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
dialog {
2+
position: absolute;
3+
left: 0; right: 0;
4+
width: -moz-fit-content;
5+
width: -webkit-fit-content;
6+
width: fit-content;
7+
height: -moz-fit-content;
8+
height: -webkit-fit-content;
9+
height: fit-content;
10+
margin: auto;
11+
border: solid;
12+
padding: 1em;
13+
background: white;
14+
color: black;
15+
display: block;
16+
}
17+
18+
dialog:not([open]) {
19+
display: none;
20+
}
21+
22+
dialog + .backdrop {
23+
position: fixed;
24+
top: 0; right: 0; bottom: 0; left: 0;
25+
background: rgba(0,0,0,0.1);
26+
}
27+
28+
._dialog_overlay {
29+
position: fixed;
30+
top: 0; right: 0; bottom: 0; left: 0;
31+
}
32+
33+
dialog.fixed {
34+
position: fixed;
35+
top: 50%;
36+
transform: translate(0, -50%);
37+
}

0 commit comments

Comments
 (0)