@w0s/footnote-reference-popover 7.2.1 → 7.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -29
- package/dist/attribute/FootnoteElement.js +1 -1
- package/dist/attribute/FootnoteElement.js.map +1 -1
- package/dist/attribute/Mouseenter.d.ts +2 -2
- package/dist/attribute/Mouseenter.d.ts.map +1 -1
- package/dist/attribute/Mouseenter.js +7 -9
- package/dist/attribute/Mouseenter.js.map +1 -1
- package/dist/attribute/Mouseleave.d.ts +2 -2
- package/dist/attribute/Mouseleave.d.ts.map +1 -1
- package/dist/attribute/Mouseleave.js +7 -9
- package/dist/attribute/Mouseleave.js.map +1 -1
- package/dist/custom-element/Popover.d.ts +13 -6
- package/dist/custom-element/Popover.d.ts.map +1 -1
- package/dist/custom-element/Popover.js +77 -57
- package/dist/custom-element/Popover.js.map +1 -1
- package/dist/event/popover/mouseenter.d.ts +12 -0
- package/dist/event/popover/mouseenter.d.ts.map +1 -0
- package/dist/event/popover/mouseenter.js +16 -0
- package/dist/event/popover/mouseenter.js.map +1 -0
- package/dist/event/popover/mouseleave.d.ts +12 -0
- package/dist/event/popover/mouseleave.d.ts.map +1 -0
- package/dist/event/popover/mouseleave.js +16 -0
- package/dist/event/popover/mouseleave.js.map +1 -0
- package/dist/event/popover-hidden-button/click.d.ts +13 -0
- package/dist/event/popover-hidden-button/click.d.ts.map +1 -0
- package/dist/event/popover-hidden-button/click.js +11 -0
- package/dist/event/popover-hidden-button/click.js.map +1 -0
- package/dist/event/popover-trigger/click.d.ts +13 -0
- package/dist/event/popover-trigger/click.d.ts.map +1 -0
- package/dist/event/popover-trigger/click.js +14 -0
- package/dist/event/popover-trigger/click.js.map +1 -0
- package/dist/event/popover-trigger/mouseenter.d.ts +17 -0
- package/dist/event/popover-trigger/mouseenter.d.ts.map +1 -0
- package/dist/event/popover-trigger/mouseenter.js +29 -0
- package/dist/event/popover-trigger/mouseenter.js.map +1 -0
- package/dist/event/popover-trigger/mouseleave.d.ts +14 -0
- package/dist/event/popover-trigger/mouseleave.d.ts.map +1 -0
- package/dist/event/popover-trigger/mouseleave.js +15 -0
- package/dist/event/popover-trigger/mouseleave.js.map +1 -0
- package/dist/footnoteReferencePopover.d.ts +23 -0
- package/dist/footnoteReferencePopover.d.ts.map +1 -0
- package/dist/footnoteReferencePopover.js +143 -0
- package/dist/footnoteReferencePopover.js.map +1 -0
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +44 -48
- package/dist/FootnoteReferencePopover.d.ts +0 -11
- package/dist/FootnoteReferencePopover.d.ts.map +0 -1
- package/dist/FootnoteReferencePopover.js +0 -196
- package/dist/FootnoteReferencePopover.js.map +0 -1
package/README.md
CHANGED
|
@@ -13,18 +13,26 @@
|
|
|
13
13
|
- The popover is generated the first time a request is made to display the popover, not when the web page loads. This minimizes DOM processing at load time when a large number of popovers are embedded in the page.
|
|
14
14
|
- Customizable delay time for showing and hiding for mouse operations.
|
|
15
15
|
|
|
16
|
+
## Browser support
|
|
17
|
+
|
|
18
|
+
Using the Popover feature. ([Can I use...](https://caniuse.com/wf-popover))
|
|
19
|
+
|
|
20
|
+
- Firefox 125+
|
|
21
|
+
- Safari 17.0+
|
|
22
|
+
- Chrome 116+
|
|
23
|
+
- Edge 116+
|
|
24
|
+
|
|
16
25
|
## Demo
|
|
17
26
|
|
|
18
27
|
- [Demo page](https://saekitominaga.github.io/js-library-browser/packages/footnote-reference-popover/demo/)
|
|
19
28
|
|
|
20
29
|
## Examples
|
|
21
30
|
|
|
22
|
-
```
|
|
31
|
+
```html
|
|
23
32
|
<script type="importmap">
|
|
24
33
|
{
|
|
25
34
|
"imports": {
|
|
26
|
-
"@w0s/footnote-reference-popover": "..."
|
|
27
|
-
"@w0s/shadow-append-css": "..."
|
|
35
|
+
"@w0s/footnote-reference-popover": "..."
|
|
28
36
|
}
|
|
29
37
|
}
|
|
30
38
|
</script>
|
|
@@ -34,28 +42,30 @@
|
|
|
34
42
|
footnoteReferencePopover(document.querySelectorAll('.js-footnote-reference-popover')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
|
|
35
43
|
</script>
|
|
36
44
|
|
|
37
|
-
<a class="js-footnote-reference-popover"
|
|
38
|
-
href="#footnote-1"
|
|
39
|
-
>[1]</a>
|
|
45
|
+
<a class="js-footnote-reference-popover" href="#footnote-1">[1]</a>
|
|
40
46
|
|
|
41
|
-
<a
|
|
47
|
+
<a
|
|
48
|
+
class="js-footnote-reference-popover"
|
|
42
49
|
href="#footnote-2"
|
|
43
50
|
data-popover-label="Note"
|
|
44
51
|
data-popover-class="my-popover"
|
|
45
|
-
data-popover-hide-text="Close"
|
|
46
|
-
data-popover-hide-image-src="
|
|
47
|
-
data-popover-hide-image-width="
|
|
48
|
-
data-popover-hide-image-height="
|
|
49
|
-
data-mouseenter-delay="
|
|
50
|
-
data-mouseleave-delay="
|
|
51
|
-
>[
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<li id="footnote-
|
|
52
|
+
data-popover-hide-text="Popover Close"
|
|
53
|
+
data-popover-hide-image-src="./popover-close.svg"
|
|
54
|
+
data-popover-hide-image-width="18"
|
|
55
|
+
data-popover-hide-image-height="18"
|
|
56
|
+
data-mouseenter-delay="1000"
|
|
57
|
+
data-mouseleave-delay="1000"
|
|
58
|
+
>[2]</a
|
|
59
|
+
>
|
|
60
|
+
|
|
61
|
+
<ul>
|
|
62
|
+
<li id="footnote-1">Footnote text.</li>
|
|
63
|
+
<li id="footnote-2">Footnote text. <a href="#">link</a> <code>code</code> <em>emphasis</em></li>
|
|
56
64
|
</ul>
|
|
57
65
|
```
|
|
58
66
|
|
|
67
|
+
\* **`@w0s/shadow-append-css` is no longer required since version 7.3**
|
|
68
|
+
|
|
59
69
|
## HTML attributes
|
|
60
70
|
|
|
61
71
|
<dl>
|
|
@@ -84,19 +94,30 @@
|
|
|
84
94
|
The popover markup looks like this.
|
|
85
95
|
|
|
86
96
|
```html
|
|
87
|
-
<a
|
|
88
|
-
|
|
89
|
-
|
|
97
|
+
<a
|
|
98
|
+
class="js-footnote-reference-popover"
|
|
99
|
+
href="#footnote"
|
|
100
|
+
data-popover-label="Note"
|
|
101
|
+
data-popover-class="my-popover"
|
|
102
|
+
data-popover-hide-text="Popover Close"
|
|
103
|
+
data-popover-hide-image-src="./popover-close.svg"
|
|
104
|
+
data-popover-hide-image-width="18"
|
|
105
|
+
data-popover-hide-image-height="18"
|
|
106
|
+
data-mouseenter-delay="1000"
|
|
107
|
+
data-mouseleave-delay="1000"
|
|
108
|
+
>[1]</a
|
|
109
|
+
>
|
|
110
|
+
|
|
111
|
+
<x-popover popover="" aria-label="Note" class="my-popover">
|
|
90
112
|
#shadow-root (open)
|
|
91
113
|
<span id="first-focusable" tabindex="0"></span>
|
|
92
114
|
|
|
93
115
|
<div tabindex="-1" part="content">
|
|
94
116
|
<slot>...</slot>
|
|
95
117
|
|
|
96
|
-
<button type="button" popovertarget="" popovertargetaction="hide" part="hide-button">Close</button>
|
|
97
|
-
or
|
|
98
118
|
<button type="button" popovertarget="" popovertargetaction="hide" part="hide-button">
|
|
99
|
-
<
|
|
119
|
+
<span part="hide-button-text" hidden="">Popover Close</span>
|
|
120
|
+
<img part="hide-button-image" src="./popover-close.svg" alt="Popover Close" width="18" height="18" />
|
|
100
121
|
</button>
|
|
101
122
|
</div>
|
|
102
123
|
|
|
@@ -107,7 +128,7 @@ The popover markup looks like this.
|
|
|
107
128
|
Therefore, you can customize the style using [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) CSS pseudo-element.
|
|
108
129
|
|
|
109
130
|
```css
|
|
110
|
-
.my-popover
|
|
131
|
+
.my-popover {
|
|
111
132
|
&::part(content) {
|
|
112
133
|
...
|
|
113
134
|
}
|
|
@@ -115,9 +136,5 @@ Therefore, you can customize the style using [`::part`](https://developer.mozill
|
|
|
115
136
|
&::part(hide-button) {
|
|
116
137
|
...
|
|
117
138
|
}
|
|
118
|
-
|
|
119
|
-
&::part(hide-button-image) {
|
|
120
|
-
...
|
|
121
|
-
}
|
|
122
139
|
}
|
|
123
140
|
```
|
|
@@ -7,7 +7,7 @@ export default class {
|
|
|
7
7
|
* @param value - Attribute value
|
|
8
8
|
*/
|
|
9
9
|
constructor(value) {
|
|
10
|
-
if (value === null || value === undefined
|
|
10
|
+
if (value === null || value === undefined) {
|
|
11
11
|
throw new TypeError('The `href` attribute is not set.');
|
|
12
12
|
}
|
|
13
13
|
if (!URL.canParse(value)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FootnoteElement.js","sourceRoot":"","sources":["../../src/attribute/FootnoteElement.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,QAAQ,CAAc;IAE/B;;OAEG;IACH,YAAY,KAAgC;QAC3C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"FootnoteElement.js","sourceRoot":"","sources":["../../src/attribute/FootnoteElement.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,QAAQ,CAAc;IAE/B;;OAEG;IACH,YAAY,KAAgC;QAC3C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3C,MAAM,IAAI,SAAS,CAAC,kCAAkC,CAAC,CAAC;QACzD,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,MAAM,IAAI,SAAS,CAAC,kDAAkD,CAAC,CAAC;QACzE,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;QAE3B,IAAI,GAAG,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ,EAAE,CAAC;YAC1E,MAAM,IAAI,SAAS,CAAC,mDAAmD,CAAC,CAAC;QAC1E,CAAC;QAED,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACjC,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;QACpD,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;IACjC,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;CACD"}
|
|
@@ -8,8 +8,8 @@ export default class {
|
|
|
8
8
|
* @param value.delay - `data-mouseenter-delay`
|
|
9
9
|
*/
|
|
10
10
|
constructor(value: Readonly<{
|
|
11
|
-
delay: string
|
|
11
|
+
delay: string;
|
|
12
12
|
}>);
|
|
13
|
-
get delay(): number
|
|
13
|
+
get delay(): number;
|
|
14
14
|
}
|
|
15
15
|
//# sourceMappingURL=Mouseenter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mouseenter.d.ts","sourceRoot":"","sources":["../../src/attribute/Mouseenter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAGb;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Mouseenter.d.ts","sourceRoot":"","sources":["../../src/attribute/Mouseenter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAGb;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAa9C,IAAI,KAAK,IAAI,MAAM,CAElB;CACD"}
|
|
@@ -8,16 +8,14 @@ export default class {
|
|
|
8
8
|
* @param value.delay - `data-mouseenter-delay`
|
|
9
9
|
*/
|
|
10
10
|
constructor(value) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
throw new TypeError('The value of the `data-mouseenter-delay` attribute must be a number.');
|
|
15
|
-
}
|
|
16
|
-
if (delay <= 0) {
|
|
17
|
-
throw new TypeError('The value of the `data-mouseenter-delay` attribute must be a number greater than zero.');
|
|
18
|
-
}
|
|
19
|
-
this.#delay = delay;
|
|
11
|
+
const delay = Number(value.delay);
|
|
12
|
+
if (!Number.isFinite(delay)) {
|
|
13
|
+
throw new TypeError('The value of the `data-mouseenter-delay` attribute must be a number.');
|
|
20
14
|
}
|
|
15
|
+
if (delay <= 0) {
|
|
16
|
+
throw new TypeError('The value of the `data-mouseenter-delay` attribute must be a number greater than zero.');
|
|
17
|
+
}
|
|
18
|
+
this.#delay = delay;
|
|
21
19
|
}
|
|
22
20
|
get delay() {
|
|
23
21
|
return this.#delay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mouseenter.js","sourceRoot":"","sources":["../../src/attribute/Mouseenter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,MAAM,
|
|
1
|
+
{"version":3,"file":"Mouseenter.js","sourceRoot":"","sources":["../../src/attribute/Mouseenter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,MAAM,CAAS;IAExB;;;OAGG;IACH,YAAY,KAAkC;QAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,SAAS,CAAC,sEAAsE,CAAC,CAAC;QAC7F,CAAC;QACD,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YAChB,MAAM,IAAI,SAAS,CAAC,wFAAwF,CAAC,CAAC;QAC/G,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;CACD"}
|
|
@@ -8,8 +8,8 @@ export default class {
|
|
|
8
8
|
* @param value.delay - `data-mouseleave-delay`
|
|
9
9
|
*/
|
|
10
10
|
constructor(value: Readonly<{
|
|
11
|
-
delay: string
|
|
11
|
+
delay: string;
|
|
12
12
|
}>);
|
|
13
|
-
get delay(): number
|
|
13
|
+
get delay(): number;
|
|
14
14
|
}
|
|
15
15
|
//# sourceMappingURL=Mouseleave.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mouseleave.d.ts","sourceRoot":"","sources":["../../src/attribute/Mouseleave.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAGb;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Mouseleave.d.ts","sourceRoot":"","sources":["../../src/attribute/Mouseleave.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAGb;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAa9C,IAAI,KAAK,IAAI,MAAM,CAElB;CACD"}
|
|
@@ -8,16 +8,14 @@ export default class {
|
|
|
8
8
|
* @param value.delay - `data-mouseleave-delay`
|
|
9
9
|
*/
|
|
10
10
|
constructor(value) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
throw new TypeError('The value of the `data-mouseleave-delay` attribute must be a number.');
|
|
15
|
-
}
|
|
16
|
-
if (delay <= 0) {
|
|
17
|
-
throw new TypeError('The value of the `data-mouseleave-delay` attribute must be a number greater than zero.');
|
|
18
|
-
}
|
|
19
|
-
this.#delay = delay;
|
|
11
|
+
const delay = Number(value.delay);
|
|
12
|
+
if (!Number.isFinite(delay)) {
|
|
13
|
+
throw new TypeError('The value of the `data-mouseleave-delay` attribute must be a number.');
|
|
20
14
|
}
|
|
15
|
+
if (delay <= 0) {
|
|
16
|
+
throw new TypeError('The value of the `data-mouseleave-delay` attribute must be a number greater than zero.');
|
|
17
|
+
}
|
|
18
|
+
this.#delay = delay;
|
|
21
19
|
}
|
|
22
20
|
get delay() {
|
|
23
21
|
return this.#delay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mouseleave.js","sourceRoot":"","sources":["../../src/attribute/Mouseleave.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,MAAM,
|
|
1
|
+
{"version":3,"file":"Mouseleave.js","sourceRoot":"","sources":["../../src/attribute/Mouseleave.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,MAAM,CAAS;IAExB;;;OAGG;IACH,YAAY,KAAkC;QAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,SAAS,CAAC,sEAAsE,CAAC,CAAC;QAC7F,CAAC;QACD,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YAChB,MAAM,IAAI,SAAS,CAAC,wFAAwF,CAAC,CAAC;QAC/G,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;CACD"}
|
|
@@ -1,22 +1,21 @@
|
|
|
1
|
+
type State = 'open' | 'closed';
|
|
1
2
|
export interface ToggleEventDetail {
|
|
2
|
-
newState:
|
|
3
|
+
newState: State;
|
|
3
4
|
eventType: string;
|
|
4
5
|
}
|
|
5
6
|
/**
|
|
6
7
|
* Popover
|
|
7
8
|
*/
|
|
8
|
-
export default class
|
|
9
|
+
export default class extends HTMLElement {
|
|
9
10
|
#private;
|
|
10
11
|
static get observedAttributes(): string[];
|
|
11
12
|
constructor();
|
|
12
13
|
connectedCallback(): void;
|
|
13
14
|
disconnectedCallback(): void;
|
|
14
15
|
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
15
|
-
get
|
|
16
|
-
set label(value: string | null);
|
|
17
|
-
get hideText(): string | null;
|
|
16
|
+
get hideText(): string;
|
|
18
17
|
set hideText(value: string | null);
|
|
19
|
-
get hideImageSrc(): string
|
|
18
|
+
get hideImageSrc(): string;
|
|
20
19
|
set hideImageSrc(value: string | null);
|
|
21
20
|
get hideImageWidth(): number | null;
|
|
22
21
|
set hideImageWidth(value: number | null);
|
|
@@ -24,5 +23,13 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
24
23
|
set hideImageHeight(value: number | null);
|
|
25
24
|
get width(): number;
|
|
26
25
|
get hideButtonElement(): HTMLButtonElement;
|
|
26
|
+
get triggerElement(): HTMLElement | undefined;
|
|
27
|
+
set triggerElement(triggerElement: HTMLElement | undefined);
|
|
28
|
+
get mouseenterTimeoutId(): NodeJS.Timeout | undefined;
|
|
29
|
+
set mouseenterTimeoutId(value: NodeJS.Timeout | undefined);
|
|
30
|
+
get mouseleaveTimeoutId(): NodeJS.Timeout | undefined;
|
|
31
|
+
set mouseleaveTimeoutId(value: NodeJS.Timeout | undefined);
|
|
32
|
+
get state(): State | undefined;
|
|
27
33
|
}
|
|
34
|
+
export {};
|
|
28
35
|
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/custom-element/Popover.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/custom-element/Popover.ts"],"names":[],"mappings":"AAAA,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IACjC,QAAQ,EAAE,KAAK,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,MAAO,SAAQ,WAAW;;IAyBvC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;;IAsDD,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAS5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAsB/F,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAKhC;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAUpC;IAED,IAAI,cAAc,IAAI,MAAM,GAAG,IAAI,CAElC;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAMtC;IAED,IAAI,eAAe,IAAI,MAAM,GAAG,IAAI,CAEnC;IAED,IAAI,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAMvC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,iBAAiB,IAAI,iBAAiB,CAEzC;IAED,IAAI,cAAc,IAAI,WAAW,GAAG,SAAS,CAE5C;IAED,IAAI,cAAc,CAAC,cAAc,EAAE,WAAW,GAAG,SAAS,EAEzD;IAED,IAAI,mBAAmB,IAAI,MAAM,CAAC,OAAO,GAAG,SAAS,CAEpD;IAED,IAAI,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,EAIxD;IAED,IAAI,mBAAmB,IAAI,MAAM,CAAC,OAAO,GAAG,SAAS,CAEpD;IAED,IAAI,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,EAIxD;IAED,IAAI,KAAK,IAAI,KAAK,GAAG,SAAS,CAE7B;CA4CD"}
|
|
@@ -1,62 +1,71 @@
|
|
|
1
|
-
import shadowAppendCss from '@w0s/shadow-append-css';
|
|
2
1
|
/**
|
|
3
2
|
* Popover
|
|
4
3
|
*/
|
|
5
|
-
export default class
|
|
4
|
+
export default class extends HTMLElement {
|
|
6
5
|
#contentElement;
|
|
7
6
|
#firstFocusableElement;
|
|
8
7
|
#lastFocusableElement;
|
|
9
8
|
#hideButtonElement;
|
|
9
|
+
#hideButtonTextElement;
|
|
10
10
|
#hideButtonImageElement;
|
|
11
|
-
#
|
|
11
|
+
#HIDE_TEXT_INITIAL_VALUE = 'Close';
|
|
12
|
+
#hideText = this.#HIDE_TEXT_INITIAL_VALUE;
|
|
13
|
+
#mouseenterTimeoutId; // ポップオーバーを表示する際のタイマーの識別 ID(`clearTimeout()` で使用)
|
|
14
|
+
#mouseleaveTimeoutId; // ポップオーバーを非表示にする際のタイマーの識別 ID(`clearTimeout()` で使用)
|
|
15
|
+
#triggerElement;
|
|
16
|
+
#state; // test で使用(JSDOM が `:popover-open` 疑似クラスに対応したら不要になる https://github.com/jsdom/jsdom/issues/3721 )
|
|
12
17
|
static get observedAttributes() {
|
|
13
|
-
return ['
|
|
18
|
+
return ['hide-text', 'hide-image-src', 'hide-image-width', 'hide-image-height'];
|
|
14
19
|
}
|
|
15
20
|
constructor() {
|
|
16
21
|
super();
|
|
17
|
-
const htmlString = `
|
|
18
|
-
<span id="first-focusable" tabindex="0"></span>
|
|
19
|
-
<div tabindex="-1" part="content">
|
|
20
|
-
<slot></slot>
|
|
21
|
-
<button type="button" popovertargetaction="hide" part="hide-button"
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
const htmlString = `
|
|
23
|
+
<span id="first-focusable" tabindex="0"></span>
|
|
24
|
+
<div tabindex="-1" part="content">
|
|
25
|
+
<slot></slot>
|
|
26
|
+
<button type="button" popovertargetaction="hide" part="hide-button">
|
|
27
|
+
<span part="hide-button-text"></span>
|
|
28
|
+
<img part="hide-button-image" hidden="" /></span>
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
<span id="last-focusable" tabindex="0"></span>
|
|
24
32
|
`;
|
|
25
|
-
const cssString = `
|
|
26
|
-
:host {
|
|
27
|
-
position: absolute;
|
|
28
|
-
contain: layout;
|
|
29
|
-
margin: 0;
|
|
30
|
-
border: none;
|
|
31
|
-
padding: 0;
|
|
32
|
-
overflow: visible;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host::part(content) {
|
|
36
|
-
border: solid;
|
|
37
|
-
padding: 0.25em;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:host::part(hide-button
|
|
41
|
-
display:
|
|
42
|
-
}
|
|
33
|
+
const cssString = `
|
|
34
|
+
:host {
|
|
35
|
+
position: absolute;
|
|
36
|
+
contain: layout;
|
|
37
|
+
margin: 0;
|
|
38
|
+
border: none;
|
|
39
|
+
padding: 0;
|
|
40
|
+
overflow: visible;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host::part(content) {
|
|
44
|
+
border: solid;
|
|
45
|
+
padding: 0.25em;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host::part(hide-button) {
|
|
49
|
+
display: inline flex;
|
|
50
|
+
}
|
|
43
51
|
`;
|
|
44
52
|
const shadow = this.attachShadow({ mode: 'open' });
|
|
45
53
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
46
54
|
'setHTMLUnsafe' in shadow ? shadow.setHTMLUnsafe(htmlString) : (shadow.innerHTML = htmlString);
|
|
47
|
-
|
|
55
|
+
const css = new CSSStyleSheet();
|
|
56
|
+
css.replaceSync(cssString);
|
|
57
|
+
shadow.adoptedStyleSheets.push(css);
|
|
48
58
|
this.#contentElement = shadow.querySelector('[part="content"]');
|
|
49
59
|
this.#hideButtonElement = shadow.querySelector('[part="hide-button"]');
|
|
60
|
+
this.#hideButtonTextElement = shadow.querySelector('[part="hide-button-text"]');
|
|
61
|
+
this.#hideButtonImageElement = shadow.querySelector('[part="hide-button-image"]');
|
|
50
62
|
this.#firstFocusableElement = shadow.getElementById('first-focusable');
|
|
51
63
|
this.#lastFocusableElement = shadow.getElementById('last-focusable');
|
|
52
|
-
this.#hideButtonImageElement = document.createElement('img');
|
|
53
|
-
this.#hideButtonImageElement.setAttribute('part', 'hide-button-image');
|
|
54
|
-
this.#hideButtonElement.textContent = this.#hideText;
|
|
55
64
|
}
|
|
56
65
|
connectedCallback() {
|
|
57
66
|
this.popover = '';
|
|
58
67
|
this.#hideButtonElement.popoverTargetElement = this;
|
|
59
|
-
/* コピー元の HTML 中に id 属性が設定されていた場合、ページ中に ID が重複してしまうのを防ぐ */
|
|
68
|
+
/* コピー元の HTML 中に `id` 属性が設定されていた場合、ページ中に ID が重複してしまうのを防ぐ */
|
|
60
69
|
const hostElement = this.shadowRoot?.host;
|
|
61
70
|
if (hostElement !== undefined) {
|
|
62
71
|
hostElement.querySelectorAll('[id]').forEach((element) => {
|
|
@@ -78,10 +87,6 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
78
87
|
}
|
|
79
88
|
attributeChangedCallback(name, _oldValue, newValue) {
|
|
80
89
|
switch (name) {
|
|
81
|
-
case 'label': {
|
|
82
|
-
this.label = newValue;
|
|
83
|
-
break;
|
|
84
|
-
}
|
|
85
90
|
case 'hide-text': {
|
|
86
91
|
this.hideText = newValue;
|
|
87
92
|
break;
|
|
@@ -101,21 +106,12 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
101
106
|
default:
|
|
102
107
|
}
|
|
103
108
|
}
|
|
104
|
-
get label() {
|
|
105
|
-
return this.ariaLabel;
|
|
106
|
-
}
|
|
107
|
-
set label(value) {
|
|
108
|
-
this.ariaLabel = value;
|
|
109
|
-
}
|
|
110
109
|
get hideText() {
|
|
111
110
|
return this.#hideText;
|
|
112
111
|
}
|
|
113
112
|
set hideText(value) {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
this.#hideText = value;
|
|
118
|
-
this.#hideButtonElement.textContent = value;
|
|
113
|
+
this.#hideText = value ?? this.#HIDE_TEXT_INITIAL_VALUE;
|
|
114
|
+
this.#hideButtonTextElement.textContent = this.#hideText;
|
|
119
115
|
this.#hideButtonImageElement.alt = this.#hideText;
|
|
120
116
|
}
|
|
121
117
|
get hideImageSrc() {
|
|
@@ -123,13 +119,13 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
123
119
|
}
|
|
124
120
|
set hideImageSrc(value) {
|
|
125
121
|
if (value === null) {
|
|
126
|
-
this.#
|
|
127
|
-
this.#
|
|
122
|
+
this.#hideButtonTextElement.hidden = false;
|
|
123
|
+
this.#hideButtonImageElement.hidden = true;
|
|
128
124
|
return;
|
|
129
125
|
}
|
|
126
|
+
this.#hideButtonTextElement.hidden = true;
|
|
130
127
|
this.#hideButtonImageElement.src = value;
|
|
131
|
-
this.#
|
|
132
|
-
this.#hideButtonElement.appendChild(this.#hideButtonImageElement);
|
|
128
|
+
this.#hideButtonImageElement.hidden = false;
|
|
133
129
|
}
|
|
134
130
|
get hideImageWidth() {
|
|
135
131
|
return this.#hideButtonImageElement.width;
|
|
@@ -137,9 +133,8 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
137
133
|
set hideImageWidth(value) {
|
|
138
134
|
if (value === null) {
|
|
139
135
|
this.#hideButtonImageElement.removeAttribute('width');
|
|
140
|
-
return;
|
|
141
136
|
}
|
|
142
|
-
this.#hideButtonImageElement.width = value;
|
|
137
|
+
this.#hideButtonImageElement.width = value ?? 0;
|
|
143
138
|
}
|
|
144
139
|
get hideImageHeight() {
|
|
145
140
|
return this.#hideButtonImageElement.height;
|
|
@@ -147,9 +142,8 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
147
142
|
set hideImageHeight(value) {
|
|
148
143
|
if (value === null) {
|
|
149
144
|
this.#hideButtonImageElement.removeAttribute('height');
|
|
150
|
-
return;
|
|
151
145
|
}
|
|
152
|
-
this.#hideButtonImageElement.height = value;
|
|
146
|
+
this.#hideButtonImageElement.height = value ?? 0;
|
|
153
147
|
}
|
|
154
148
|
get width() {
|
|
155
149
|
return this.#contentElement.getBoundingClientRect().width;
|
|
@@ -157,6 +151,31 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
157
151
|
get hideButtonElement() {
|
|
158
152
|
return this.#hideButtonElement;
|
|
159
153
|
}
|
|
154
|
+
get triggerElement() {
|
|
155
|
+
return this.#triggerElement;
|
|
156
|
+
}
|
|
157
|
+
set triggerElement(triggerElement) {
|
|
158
|
+
this.#triggerElement = triggerElement;
|
|
159
|
+
}
|
|
160
|
+
get mouseenterTimeoutId() {
|
|
161
|
+
return this.#mouseenterTimeoutId;
|
|
162
|
+
}
|
|
163
|
+
set mouseenterTimeoutId(value) {
|
|
164
|
+
if (value !== undefined) {
|
|
165
|
+
this.#mouseenterTimeoutId = value;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
get mouseleaveTimeoutId() {
|
|
169
|
+
return this.#mouseleaveTimeoutId;
|
|
170
|
+
}
|
|
171
|
+
set mouseleaveTimeoutId(value) {
|
|
172
|
+
if (value !== undefined) {
|
|
173
|
+
this.#mouseleaveTimeoutId = value;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
get state() {
|
|
177
|
+
return this.#state;
|
|
178
|
+
}
|
|
160
179
|
/**
|
|
161
180
|
* ポップオーバーの表示/非表示状態が変化したの処理
|
|
162
181
|
*
|
|
@@ -178,6 +197,7 @@ export default class CustomElementPopover extends HTMLElement {
|
|
|
178
197
|
}
|
|
179
198
|
default:
|
|
180
199
|
}
|
|
200
|
+
this.#state = detail.newState;
|
|
181
201
|
};
|
|
182
202
|
/**
|
|
183
203
|
* 最初の循環フォーカス要素にフォーカスされたときの処理
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/custom-element/Popover.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/custom-element/Popover.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `mouseenter` event
|
|
3
|
+
*
|
|
4
|
+
* @param ev - MouseEvent
|
|
5
|
+
* @param data - Elements, attributes and another data
|
|
6
|
+
* @param data.delay - Delay time between mouse cursor moved within the trigger element and showing the popover (milliseconds)
|
|
7
|
+
*/
|
|
8
|
+
declare const _default: (ev: MouseEvent, data: Readonly<{
|
|
9
|
+
delay: number;
|
|
10
|
+
}>) => void;
|
|
11
|
+
export default _default;
|
|
12
|
+
//# sourceMappingURL=mouseenter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseenter.d.ts","sourceRoot":"","sources":["../../../src/event/popover/mouseenter.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;yBAEF,IAAI,UAAU,EACd,MAAM,QAAQ,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,KACA,IAAI;AALP,wBAaE"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { show } from "../../footnoteReferencePopover.js";
|
|
2
|
+
/**
|
|
3
|
+
* `mouseenter` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param data - Elements, attributes and another data
|
|
7
|
+
* @param data.delay - Delay time between mouse cursor moved within the trigger element and showing the popover (milliseconds)
|
|
8
|
+
*/
|
|
9
|
+
export default (ev, data) => {
|
|
10
|
+
const popoverElement = ev.currentTarget;
|
|
11
|
+
clearTimeout(popoverElement.mouseleaveTimeoutId);
|
|
12
|
+
popoverElement.mouseenterTimeoutId = setTimeout(() => {
|
|
13
|
+
show(ev.type, popoverElement);
|
|
14
|
+
}, data.delay);
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=mouseenter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseenter.js","sourceRoot":"","sources":["../../../src/event/popover/mouseenter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAEzD;;;;;;GAMG;AACH,eAAe,CACd,EAAc,EACd,IAEE,EACK,EAAE;IACT,MAAM,cAAc,GAAG,EAAE,CAAC,aAA+B,CAAC;IAE1D,YAAY,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAEjD,cAAc,CAAC,mBAAmB,GAAG,UAAU,CAAC,GAAS,EAAE;QAC1D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC/B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAChB,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `mouseleave` event
|
|
3
|
+
*
|
|
4
|
+
* @param ev - MouseEvent
|
|
5
|
+
* @param data - Elements, attributes and another data
|
|
6
|
+
* @param data.delay - Delay time between mouse cursor moved out of the trigger element or popover and closing the popover (milliseconds)
|
|
7
|
+
*/
|
|
8
|
+
declare const _default: (ev: MouseEvent, data: Readonly<{
|
|
9
|
+
delay: number;
|
|
10
|
+
}>) => void;
|
|
11
|
+
export default _default;
|
|
12
|
+
//# sourceMappingURL=mouseleave.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseleave.d.ts","sourceRoot":"","sources":["../../../src/event/popover/mouseleave.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;yBAEF,IAAI,UAAU,EACd,MAAM,QAAQ,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,KACA,IAAI;AALP,wBAaE"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { hide } from "../../footnoteReferencePopover.js";
|
|
2
|
+
/**
|
|
3
|
+
* `mouseleave` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param data - Elements, attributes and another data
|
|
7
|
+
* @param data.delay - Delay time between mouse cursor moved out of the trigger element or popover and closing the popover (milliseconds)
|
|
8
|
+
*/
|
|
9
|
+
export default (ev, data) => {
|
|
10
|
+
const popoverElement = ev.currentTarget;
|
|
11
|
+
clearTimeout(popoverElement.mouseenterTimeoutId);
|
|
12
|
+
popoverElement.mouseleaveTimeoutId = setTimeout(() => {
|
|
13
|
+
hide(ev.type, popoverElement);
|
|
14
|
+
}, data.delay);
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=mouseleave.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseleave.js","sourceRoot":"","sources":["../../../src/event/popover/mouseleave.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAEzD;;;;;;GAMG;AACH,eAAe,CACd,EAAc,EACd,IAEE,EACK,EAAE;IACT,MAAM,cAAc,GAAG,EAAE,CAAC,aAA+B,CAAC;IAE1D,YAAY,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAEjD,cAAc,CAAC,mBAAmB,GAAG,UAAU,CAAC,GAAS,EAAE;QAC1D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC/B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAChB,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type PopoverElement from '../../custom-element/Popover.ts';
|
|
2
|
+
/**
|
|
3
|
+
* `click` event
|
|
4
|
+
*
|
|
5
|
+
* @param _ev - MouseEvent
|
|
6
|
+
* @param data - Elements, attributes and another data
|
|
7
|
+
* @param data.popoverElement - PopoverElement
|
|
8
|
+
*/
|
|
9
|
+
declare const _default: (_ev: MouseEvent, data: Readonly<{
|
|
10
|
+
popoverElement: PopoverElement;
|
|
11
|
+
}>) => void;
|
|
12
|
+
export default _default;
|
|
13
|
+
//# sourceMappingURL=click.d.ts.map
|