Skip to content
This repository was archived by the owner on Sep 22, 2022. It is now read-only.

Commit 8862388

Browse files
muanmuan
authored
Merge pull request #56 from github/shadowDOM
Add support for Shadow DOM & convert to TypeScript
2 parents a7e1690 + 8667d74 commit 8862388

16 files changed

+2959
-4410
lines changed

‎.babelrc

-13
This file was deleted.

‎.eslintrc.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
22
"extends": [
3+
"plugin:github/browser",
34
"plugin:github/es6",
4-
"plugin:github/browser"
5+
"plugin:github/typescript"
56
],
6-
"parser": "babel-eslint",
7+
"globals": {
8+
"DetailsDialogElement": "readable"
9+
},
710
"overrides": [
811
{
912
"files": "test/**/*.js",
10-
"env": {
11-
"mocha": true
12-
},
13-
"globals": {
14-
"assert": true
13+
"rules": {
14+
"github/unescaped-html-literal": "off"
1515
}
1616
}
1717
]

‎.flowconfig

-9
This file was deleted.

‎content.html renamed to ‎example/content.html

File renamed without changes.

‎index.html renamed to ‎example/index.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<!-- <script type="text/javascript" src="dist/index.umd.js"></script> -->
6-
<script type="text/javascript" src="https://unpkg.com/@github/details-dialog-element@latest"></script>
5+
<script src="./shadow-demo.js"></script>
6+
<!-- <script type="module" src="../dist/index.js"></script> -->
7+
<script type="module" src="https://unpkg.com/@github/details-dialog-element@latest"></script>
78
<script type="text/javascript" src="https://unpkg.com/@github/include-fragment-element@latest"></script>
89
<title>details-dialog-element demo</title>
9-
<link href="./index.css" rel="stylesheet">
10+
<link href="../src/index.css" rel="stylesheet">
1011
<link href="https://unpkg.com/primer@latest/build/build.css" rel="stylesheet">
1112
<style>
1213
.details-with-dialog[open] > summary {
@@ -95,5 +96,7 @@
9596
</details>
9697

9798
<button type="button" class="btn mt-4" onclick="document.querySelector('details').open = true">JS trigger: focus should return here</button>
99+
100+
<shadow-dialog></shadow-dialog>
98101
</body>
99102
</html>

‎example/shadow-demo.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
class ShadowDialog extends HTMLElement {
2+
constructor() {
3+
super()
4+
const root = this.attachShadow({mode: 'open'})
5+
root.innerHTML = `
6+
<style>
7+
details {
8+
margin-top: 2em;
9+
}
10+
summary {
11+
padding: .5em;
12+
border: 1px solid;
13+
border-radius: .3em;
14+
display: inline-block;
15+
}
16+
details[open] summary:before {
17+
position: fixed;
18+
content: '';
19+
display: block;
20+
left: 0;
21+
right: 0;
22+
bottom: 0;
23+
top: 0;
24+
background: rgba(0, 0, 0, 0.3);
25+
}
26+
details-dialog {
27+
position: fixed;
28+
height: 50vh;
29+
top: 50%;
30+
margin-top: -25vh;
31+
width: 50vw;
32+
min-width: 20em;
33+
left: 50%;
34+
transform: translateX(-50%);
35+
background: #fff;
36+
border-radius: .5em;
37+
padding: 1em;
38+
}
39+
</style>
40+
<details>
41+
<summary>Dialog with Shadow DOM</summary>
42+
<details-dialog aria-label="Shadow dialog">
43+
<button type="button" data-close-dialog>Close</button>
44+
content
45+
<button type="button" data-close-dialog>Close</button>
46+
</details-dialog>
47+
</details>`
48+
}
49+
}
50+
51+
window.customElements.define('shadow-dialog', ShadowDialog)

‎index.d.ts

-12
This file was deleted.

‎index.js.flow

-7
This file was deleted.

0 commit comments

Comments
 (0)