@w0s/footnote-reference-popover 7.2.0 → 7.3.0
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 +4 -4
- 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 +4 -4
- 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/attribute/PopoverHide.d.ts +2 -2
- package/dist/attribute/PopoverHide.d.ts.map +1 -1
- package/dist/attribute/PopoverHide.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 +57 -37
- package/dist/custom-element/Popover.js.map +1 -1
- package/dist/event/popover/mouseenter.d.ts +13 -0
- package/dist/event/popover/mouseenter.d.ts.map +1 -0
- package/dist/event/popover/mouseenter.js +15 -0
- package/dist/event/popover/mouseenter.js.map +1 -0
- package/dist/event/popover/mouseleave.d.ts +13 -0
- package/dist/event/popover/mouseleave.d.ts.map +1 -0
- package/dist/event/popover/mouseleave.js +15 -0
- package/dist/event/popover/mouseleave.js.map +1 -0
- package/dist/event/popover-hidden-button/click.d.ts +10 -0
- package/dist/event/popover-hidden-button/click.d.ts.map +1 -0
- package/dist/event/popover-hidden-button/click.js +10 -0
- package/dist/event/popover-hidden-button/click.js.map +1 -0
- package/dist/event/popover-trigger/click.d.ts +10 -0
- package/dist/event/popover-trigger/click.d.ts.map +1 -0
- package/dist/event/popover-trigger/click.js +13 -0
- package/dist/event/popover-trigger/click.js.map +1 -0
- package/dist/event/popover-trigger/mouseenter.d.ts +14 -0
- package/dist/event/popover-trigger/mouseenter.d.ts.map +1 -0
- package/dist/event/popover-trigger/mouseenter.js +25 -0
- package/dist/event/popover-trigger/mouseenter.js.map +1 -0
- package/dist/event/popover-trigger/mouseleave.d.ts +13 -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 +137 -0
- package/dist/footnoteReferencePopover.js.map +1 -0
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +2 -6
- 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
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type PopoverElement from '../../custom-element/Popover.ts';
|
|
2
|
+
/**
|
|
3
|
+
* `click` event
|
|
4
|
+
*
|
|
5
|
+
* @param _ev - MouseEvent
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
*/
|
|
8
|
+
declare const _default: (_ev: MouseEvent, popover: PopoverElement) => void;
|
|
9
|
+
export default _default;
|
|
10
|
+
//# sourceMappingURL=click.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/event/popover-hidden-button/click.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,iCAAiC,CAAC;AAElE;;;;;GAKG;yBACa,KAAK,UAAU,EAAE,SAAS,cAAc,KAAG,IAAI;AAA/D,wBAEE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `click` event
|
|
3
|
+
*
|
|
4
|
+
* @param _ev - MouseEvent
|
|
5
|
+
* @param popover - PopoverElement
|
|
6
|
+
*/
|
|
7
|
+
export default (_ev, popover) => {
|
|
8
|
+
clearTimeout(popover.mouseenterTimeoutId); // タッチデバイスで閉じるボタンをタップした際に `mouseenter` イベントの発火により表示処理が遅延実行されるのを防ぐ
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=click.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"click.js","sourceRoot":"","sources":["../../../src/event/popover-hidden-button/click.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAe,CAAC,GAAe,EAAE,OAAuB,EAAQ,EAAE;IACjE,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,iEAAiE;AAC7G,CAAC,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type PopoverElement from '../../custom-element/Popover.ts';
|
|
2
|
+
/**
|
|
3
|
+
* `click` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
*/
|
|
8
|
+
declare const _default: (ev: MouseEvent, popover: PopoverElement) => void;
|
|
9
|
+
export default _default;
|
|
10
|
+
//# sourceMappingURL=click.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/event/popover-trigger/click.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,iCAAiC,CAAC;AAGlE;;;;;GAKG;yBACa,IAAI,UAAU,EAAE,SAAS,cAAc,KAAG,IAAI;AAA9D,wBAME"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { show } from "../../footnoteReferencePopover.js";
|
|
2
|
+
/**
|
|
3
|
+
* `click` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
*/
|
|
8
|
+
export default (ev, popover) => {
|
|
9
|
+
ev.preventDefault();
|
|
10
|
+
clearTimeout(popover.mouseleaveTimeoutId);
|
|
11
|
+
show(ev.type, popover);
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=click.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"click.js","sourceRoot":"","sources":["../../../src/event/popover-trigger/click.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAEzD;;;;;GAKG;AACH,eAAe,CAAC,EAAc,EAAE,OAAuB,EAAQ,EAAE;IAChE,EAAE,CAAC,cAAc,EAAE,CAAC;IAEpB,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE1C,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACxB,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type PopoverElement from '../../custom-element/Popover.ts';
|
|
2
|
+
/**
|
|
3
|
+
* `mouseenter` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
* @param options -
|
|
8
|
+
*/
|
|
9
|
+
declare const _default: (ev: MouseEvent, popover: PopoverElement, options: Readonly<{
|
|
10
|
+
delay: number;
|
|
11
|
+
preloadImageSrc: string | undefined;
|
|
12
|
+
}>) => void;
|
|
13
|
+
export default _default;
|
|
14
|
+
//# sourceMappingURL=mouseenter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseenter.d.ts","sourceRoot":"","sources":["../../../src/event/popover-trigger/mouseenter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,iCAAiC,CAAC;AAclE;;;;;;GAMG;yBAEF,IAAI,UAAU,EACd,SAAS,cAAc,EACvB,SAAS,QAAQ,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC,KACA,IAAI;AAPP,wBAeE"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { show } from "../../footnoteReferencePopover.js";
|
|
2
|
+
/**
|
|
3
|
+
* @param imageSrc - 画像パス
|
|
4
|
+
*/
|
|
5
|
+
const preload = (imageSrc) => {
|
|
6
|
+
if (imageSrc === undefined || imageSrc.startsWith('data:')) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
new Image().src = imageSrc;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* `mouseenter` event
|
|
13
|
+
*
|
|
14
|
+
* @param ev - MouseEvent
|
|
15
|
+
* @param popover - PopoverElement
|
|
16
|
+
* @param options -
|
|
17
|
+
*/
|
|
18
|
+
export default (ev, popover, options) => {
|
|
19
|
+
clearTimeout(popover.mouseleaveTimeoutId);
|
|
20
|
+
preload(options.preloadImageSrc);
|
|
21
|
+
popover.mouseenterTimeoutId = setTimeout(() => {
|
|
22
|
+
show(ev.type, popover);
|
|
23
|
+
}, options.delay);
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=mouseenter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseenter.js","sourceRoot":"","sources":["../../../src/event/popover-trigger/mouseenter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAEzD;;GAEG;AACH,MAAM,OAAO,GAAG,CAAC,QAA4B,EAAQ,EAAE;IACtD,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QAC5D,OAAO;IACR,CAAC;IAED,IAAI,KAAK,EAAE,CAAC,GAAG,GAAG,QAAQ,CAAC;AAC5B,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,eAAe,CACd,EAAc,EACd,OAAuB,EACvB,OAGE,EACK,EAAE;IACT,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE1C,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAEjC,OAAO,CAAC,mBAAmB,GAAG,UAAU,CAAC,GAAS,EAAE;QACnD,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AACnB,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type PopoverElement from '../../custom-element/Popover.ts';
|
|
2
|
+
/**
|
|
3
|
+
* `mouseleave` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
* @param options -
|
|
8
|
+
*/
|
|
9
|
+
declare const _default: (ev: MouseEvent, popover: PopoverElement, options: Readonly<{
|
|
10
|
+
delay: number;
|
|
11
|
+
}>) => void;
|
|
12
|
+
export default _default;
|
|
13
|
+
//# sourceMappingURL=mouseleave.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseleave.d.ts","sourceRoot":"","sources":["../../../src/event/popover-trigger/mouseleave.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,iCAAiC,CAAC;AAGlE;;;;;;GAMG;yBAEF,IAAI,UAAU,EACd,SAAS,cAAc,EACvB,SAAS,QAAQ,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,KACA,IAAI;AANP,wBAYE"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { hide } from "../../footnoteReferencePopover.js";
|
|
2
|
+
/**
|
|
3
|
+
* `mouseleave` event
|
|
4
|
+
*
|
|
5
|
+
* @param ev - MouseEvent
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
* @param options -
|
|
8
|
+
*/
|
|
9
|
+
export default (ev, popover, options) => {
|
|
10
|
+
clearTimeout(popover.mouseenterTimeoutId);
|
|
11
|
+
popover.mouseleaveTimeoutId = setTimeout(() => {
|
|
12
|
+
hide(ev.type, popover);
|
|
13
|
+
}, options.delay);
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=mouseleave.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mouseleave.js","sourceRoot":"","sources":["../../../src/event/popover-trigger/mouseleave.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAEzD;;;;;;GAMG;AACH,eAAe,CACd,EAAc,EACd,OAAuB,EACvB,OAEE,EACK,EAAE;IACT,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE1C,OAAO,CAAC,mBAAmB,GAAG,UAAU,CAAC,GAAS,EAAE;QACnD,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AACnB,CAAC,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import PopoverElement from './custom-element/Popover.ts';
|
|
2
|
+
/**
|
|
3
|
+
* ポップオーバーを表示する
|
|
4
|
+
*
|
|
5
|
+
* @param eventType - イベントの識別名
|
|
6
|
+
* @param popover - PopoverElement
|
|
7
|
+
*/
|
|
8
|
+
export declare const show: (eventType: string, popover: PopoverElement) => void;
|
|
9
|
+
/**
|
|
10
|
+
* ポップオーバーを非表示にする
|
|
11
|
+
*
|
|
12
|
+
* @param eventType - イベントの識別名
|
|
13
|
+
* @param popover - PopoverElement
|
|
14
|
+
*/
|
|
15
|
+
export declare const hide: (eventType: string, popover: PopoverElement) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Footnote reference popover
|
|
18
|
+
*
|
|
19
|
+
* @param thisElement - Target element
|
|
20
|
+
*/
|
|
21
|
+
declare const _default: (thisElement: HTMLAnchorElement) => void;
|
|
22
|
+
export default _default;
|
|
23
|
+
//# sourceMappingURL=footnoteReferencePopover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footnoteReferencePopover.d.ts","sourceRoot":"","sources":["../src/footnoteReferencePopover.ts"],"names":[],"mappings":"AAMA,OAAO,cAA0C,MAAM,6BAA6B,CAAC;AAUrF;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,WAAW,MAAM,EAAE,SAAS,cAAc,KAAG,IAwCjE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,WAAW,MAAM,EAAE,SAAS,cAAc,KAAG,IAUjE,CAAC;AAEF;;;;GAIG;yBACa,aAAa,iBAAiB,KAAG,IAAI;AAArD,wBAoGE"}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import FootnoteElementAttribute from "./attribute/FootnoteElement.js";
|
|
2
|
+
import MouseenterAttribute from "./attribute/Mouseenter.js";
|
|
3
|
+
import MouseleaveAttribute from "./attribute/Mouseleave.js";
|
|
4
|
+
import PopoverClassAttribute from "./attribute/PopoverClass.js";
|
|
5
|
+
import PopoverHideAttribute from "./attribute/PopoverHide.js";
|
|
6
|
+
import PopoverLabelAttribute from "./attribute/PopoverLabel.js";
|
|
7
|
+
import PopoverElement, {} from "./custom-element/Popover.js";
|
|
8
|
+
import popoverMouseenterEvent from "./event/popover/mouseenter.js";
|
|
9
|
+
import popoverMouseleaveEvent from "./event/popover/mouseleave.js";
|
|
10
|
+
import popoverHiddenButtonClickEvent from "./event/popover-hidden-button/click.js";
|
|
11
|
+
import popoverTriggerClickEvent from "./event/popover-trigger/click.js";
|
|
12
|
+
import popoverTriggerMouseenterEvent from "./event/popover-trigger/mouseenter.js";
|
|
13
|
+
import popoverTriggerMouseleaveEvent from "./event/popover-trigger/mouseleave.js";
|
|
14
|
+
const POPOVER_ELEMENT_NAME = 'x-popover';
|
|
15
|
+
/**
|
|
16
|
+
* ポップオーバーを表示する
|
|
17
|
+
*
|
|
18
|
+
* @param eventType - イベントの識別名
|
|
19
|
+
* @param popover - PopoverElement
|
|
20
|
+
*/
|
|
21
|
+
export const show = (eventType, popover) => {
|
|
22
|
+
if (!popover.isConnected) {
|
|
23
|
+
/* 初回表示時はポップオーバーの挿入を行う */
|
|
24
|
+
document.body.appendChild(popover);
|
|
25
|
+
}
|
|
26
|
+
const triggerRect = popover.triggerElement?.getBoundingClientRect();
|
|
27
|
+
if (triggerRect !== undefined) {
|
|
28
|
+
/* ポップオーバーの上位置を設定(トリガー要素の下端を基準にする) */
|
|
29
|
+
popover.style.width = 'auto';
|
|
30
|
+
popover.style.top = `${String(Math.round(triggerRect.bottom) + window.scrollY)}px`;
|
|
31
|
+
popover.style.right = 'auto';
|
|
32
|
+
popover.style.left = 'auto';
|
|
33
|
+
}
|
|
34
|
+
/* ポップオーバーを表示 */
|
|
35
|
+
const eventDetail = {
|
|
36
|
+
newState: 'open',
|
|
37
|
+
eventType: eventType,
|
|
38
|
+
};
|
|
39
|
+
popover.dispatchEvent(new CustomEvent('my-toggle', {
|
|
40
|
+
detail: eventDetail,
|
|
41
|
+
}));
|
|
42
|
+
if (triggerRect !== undefined) {
|
|
43
|
+
/* ポップオーバーの左右位置を設定(トリガー要素の左端を基準にする) */
|
|
44
|
+
const documentWidth = document.documentElement.offsetWidth;
|
|
45
|
+
const popoverWidth = popover.width;
|
|
46
|
+
const triggerRectLeft = triggerRect.left;
|
|
47
|
+
popover.style.width = `${String(popoverWidth)}px`;
|
|
48
|
+
if (documentWidth - triggerRectLeft < popoverWidth) {
|
|
49
|
+
popover.style.right = '0';
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
popover.style.left = `${String(triggerRectLeft)}px`;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* ポップオーバーを非表示にする
|
|
58
|
+
*
|
|
59
|
+
* @param eventType - イベントの識別名
|
|
60
|
+
* @param popover - PopoverElement
|
|
61
|
+
*/
|
|
62
|
+
export const hide = (eventType, popover) => {
|
|
63
|
+
const eventDetail = {
|
|
64
|
+
newState: 'closed',
|
|
65
|
+
eventType: eventType,
|
|
66
|
+
};
|
|
67
|
+
popover.dispatchEvent(new CustomEvent('my-toggle', {
|
|
68
|
+
detail: eventDetail,
|
|
69
|
+
}));
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* Footnote reference popover
|
|
73
|
+
*
|
|
74
|
+
* @param thisElement - Target element
|
|
75
|
+
*/
|
|
76
|
+
export default (thisElement) => {
|
|
77
|
+
if (!('showPopover' in thisElement)) {
|
|
78
|
+
console.info('This browser does not support popover');
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
const { href: hrefAttributeValue } = thisElement;
|
|
82
|
+
const { popoverLabel: popoverLabelAttributeValue, popoverClass: popoverClassAttributeValue, popoverHideText: popoverHideTextAttributeValue, popoverHideImageSrc: popoverHideImageSrcAttributeValue, popoverHideImageWidth: popoverHideImageWidthAttributeValue, popoverHideImageHeight: popoverHideImageHeightAttributeValue, mouseenterDelay: mouseenterDelayAttributeValue, mouseleaveDelay: mouseleaveDelayAttributeValue, } = thisElement.dataset;
|
|
83
|
+
const footnoteElement = new FootnoteElementAttribute(hrefAttributeValue);
|
|
84
|
+
const popoverLabel = new PopoverLabelAttribute(popoverLabelAttributeValue);
|
|
85
|
+
const popoverClass = new PopoverClassAttribute(popoverClassAttributeValue);
|
|
86
|
+
const popoverHide = new PopoverHideAttribute({
|
|
87
|
+
text: popoverHideTextAttributeValue,
|
|
88
|
+
imageSrc: popoverHideImageSrcAttributeValue,
|
|
89
|
+
imageWidth: popoverHideImageWidthAttributeValue,
|
|
90
|
+
imageHeight: popoverHideImageHeightAttributeValue,
|
|
91
|
+
});
|
|
92
|
+
const mouseenter = new MouseenterAttribute({ delay: mouseenterDelayAttributeValue ?? '250' });
|
|
93
|
+
const mouseleave = new MouseleaveAttribute({ delay: mouseleaveDelayAttributeValue ?? '250' });
|
|
94
|
+
if (customElements.get(POPOVER_ELEMENT_NAME) === undefined) {
|
|
95
|
+
customElements.define(POPOVER_ELEMENT_NAME, PopoverElement);
|
|
96
|
+
}
|
|
97
|
+
const popoverElement = document.createElement(POPOVER_ELEMENT_NAME);
|
|
98
|
+
if (popoverClass.name !== undefined) {
|
|
99
|
+
popoverElement.className = popoverClass.name;
|
|
100
|
+
}
|
|
101
|
+
popoverElement.ariaLabel = popoverLabel.text ?? null;
|
|
102
|
+
popoverElement.hideText = popoverHide.text ?? null;
|
|
103
|
+
popoverElement.hideImageSrc = popoverHide.imageSrc ?? null;
|
|
104
|
+
popoverElement.hideImageWidth = popoverHide.imageWidth ?? null;
|
|
105
|
+
popoverElement.hideImageHeight = popoverHide.imageHeight ?? null;
|
|
106
|
+
popoverElement.triggerElement = thisElement;
|
|
107
|
+
popoverElement.insertAdjacentHTML('afterbegin', 'getHTML' in footnoteElement.element ? footnoteElement.element.getHTML() : footnoteElement.element.innerHTML);
|
|
108
|
+
thisElement.setAttribute('role', 'button');
|
|
109
|
+
thisElement.addEventListener('click', (ev) => {
|
|
110
|
+
popoverTriggerClickEvent(ev, popoverElement);
|
|
111
|
+
});
|
|
112
|
+
thisElement.addEventListener('mouseenter', (ev) => {
|
|
113
|
+
popoverTriggerMouseenterEvent(ev, popoverElement, {
|
|
114
|
+
delay: mouseenter.delay,
|
|
115
|
+
preloadImageSrc: popoverHide.imageSrc,
|
|
116
|
+
});
|
|
117
|
+
}, { passive: true });
|
|
118
|
+
thisElement.addEventListener('mouseleave', (ev) => {
|
|
119
|
+
popoverTriggerMouseleaveEvent(ev, popoverElement, {
|
|
120
|
+
delay: mouseleave.delay,
|
|
121
|
+
});
|
|
122
|
+
}, { passive: true });
|
|
123
|
+
popoverElement.addEventListener('mouseenter', (ev) => {
|
|
124
|
+
popoverMouseenterEvent(ev, popoverElement, {
|
|
125
|
+
delay: mouseenter.delay,
|
|
126
|
+
});
|
|
127
|
+
}, { passive: true });
|
|
128
|
+
popoverElement.addEventListener('mouseleave', (ev) => {
|
|
129
|
+
popoverMouseleaveEvent(ev, popoverElement, {
|
|
130
|
+
delay: mouseenter.delay,
|
|
131
|
+
});
|
|
132
|
+
}, { passive: true });
|
|
133
|
+
popoverElement.hideButtonElement.addEventListener('click', (ev) => {
|
|
134
|
+
popoverHiddenButtonClickEvent(ev, popoverElement);
|
|
135
|
+
}, { passive: true });
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=footnoteReferencePopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footnoteReferencePopover.js","sourceRoot":"","sources":["../src/footnoteReferencePopover.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import footnoteReferencePopover from "./footnoteReferencePopover.js";
|
|
2
2
|
const validate = (element) => {
|
|
3
3
|
if (!(element instanceof HTMLAnchorElement)) {
|
|
4
4
|
throw new Error('Element must be a `HTMLAnchorElement`');
|
|
@@ -10,12 +10,12 @@ export default (elementOrElements) => {
|
|
|
10
10
|
return;
|
|
11
11
|
}
|
|
12
12
|
if (elementOrElements instanceof Element) {
|
|
13
|
-
|
|
13
|
+
footnoteReferencePopover(validate(elementOrElements));
|
|
14
14
|
}
|
|
15
15
|
else {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
16
|
+
Array.from(elementOrElements).forEach((element) => {
|
|
17
|
+
footnoteReferencePopover(validate(element));
|
|
18
|
+
});
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,QAAQ,GAAG,CAAC,OAAgB,EAAqB,EAAE;IACxD,IAAI,CAAC,CAAC,OAAO,YAAY,iBAAiB,CAAC,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC1D,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,CAAC,iBAAmF,EAAQ,EAAE;IAC5G,IAAI,iBAAiB,KAAK,IAAI,EAAE,CAAC;QAChC,OAAO;IACR,CAAC;IAED,IAAI,iBAAiB,YAAY,OAAO,EAAE,CAAC;QAC1C,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,QAAQ,GAAG,CAAC,OAAgB,EAAqB,EAAE;IACxD,IAAI,CAAC,CAAC,OAAO,YAAY,iBAAiB,CAAC,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC1D,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,CAAC,iBAAmF,EAAQ,EAAE;IAC5G,IAAI,iBAAiB,KAAK,IAAI,EAAE,CAAC;QAChC,OAAO;IACR,CAAC;IAED,IAAI,iBAAiB,YAAY,OAAO,EAAE,CAAC;QAC1C,wBAAwB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACvD,CAAC;SAAM,CAAC;QACP,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACjD,wBAAwB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;IACJ,CAAC;AACF,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@w0s/footnote-reference-popover",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.3.0",
|
|
4
4
|
"description": "Footnote reference popover",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"footnote",
|
|
@@ -31,17 +31,13 @@
|
|
|
31
31
|
"url": "git+https://github.com/SaekiTominaga/js-library-browser.git"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
|
-
"
|
|
34
|
+
"dev": "conc \"http-server -o demo -c-1\" \"tsc -w\"",
|
|
35
35
|
"prebuild": "rimraf dist/* -g",
|
|
36
36
|
"build": "tsc",
|
|
37
|
-
"watch": "tsc -w",
|
|
38
37
|
"lint": "eslint src/**/*.ts",
|
|
39
38
|
"pretest": "npm run build",
|
|
40
39
|
"test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest dist/.+\\.test\\.js -c ../../jest.config.mjs --roots packages/footnote-reference-popover"
|
|
41
40
|
},
|
|
42
|
-
"dependencies": {
|
|
43
|
-
"@w0s/shadow-append-css": "^1.1.0"
|
|
44
|
-
},
|
|
45
41
|
"publishConfig": {
|
|
46
42
|
"access": "public"
|
|
47
43
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FootnoteReferencePopover.d.ts","sourceRoot":"","sources":["../src/FootnoteReferencePopover.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAuBb;;OAEG;gBACS,WAAW,EAAE,iBAAiB;CAkO1C"}
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
import FootnoteElement from "./attribute/FootnoteElement.js";
|
|
2
|
-
import Mouseenter from "./attribute/Mouseenter.js";
|
|
3
|
-
import Mouseleave from "./attribute/Mouseleave.js";
|
|
4
|
-
import PopoverClass from "./attribute/PopoverClass.js";
|
|
5
|
-
import PopoverHide from "./attribute/PopoverHide.js";
|
|
6
|
-
import PopoverLabel from "./attribute/PopoverLabel.js";
|
|
7
|
-
import CustomElementPopover, {} from "./custom-element/Popover.js";
|
|
8
|
-
customElements.define('x-popover', CustomElementPopover);
|
|
9
|
-
/**
|
|
10
|
-
* Footnote reference popover
|
|
11
|
-
*/
|
|
12
|
-
export default class {
|
|
13
|
-
#popoverTriggerElement;
|
|
14
|
-
#popoverElement;
|
|
15
|
-
#footnoteElement; // 脚注要素(ポップオーバーの内容をここからコピーする)
|
|
16
|
-
#popoverLabel; // ポップオーバーに設定するラベル
|
|
17
|
-
#popoverClass; // ポップオーバーに設定するクラス名
|
|
18
|
-
#popoverHide; // ポップオーバーの閉じるボタン
|
|
19
|
-
#mouseenter; // mouseenter 時のデータ
|
|
20
|
-
#mouseleave; // mouseleave 時のデータ
|
|
21
|
-
#mouseenterTimeoutId; // ポップオーバーを表示する際のタイマーの識別 ID(`clearTimeout()` で使用)
|
|
22
|
-
#mouseleaveTimeoutId; // ポップオーバーを非表示にする際のタイマーの識別 ID(`clearTimeout()` で使用)
|
|
23
|
-
#preloadProcessed = false; // `<link rel="preload" as="image" />` の生成処理を実行したかどうか
|
|
24
|
-
/**
|
|
25
|
-
* @param thisElement - Target element
|
|
26
|
-
*/
|
|
27
|
-
constructor(thisElement) {
|
|
28
|
-
this.#popoverTriggerElement = thisElement;
|
|
29
|
-
const { href: hrefAttribute } = thisElement;
|
|
30
|
-
const { popoverLabel: popoverLabelAttribute, popoverClass: popoverClassAttribute, popoverHideText: popoverHideTextAttribute, popoverHideImageSrc: popoverHideImageSrcAttribute, popoverHideImageWidth: popoverHideImageWidthAttribute, popoverHideImageHeight: popoverHideImageHeightAttribute, mouseenterDelay: mouseenterDelayAttribute, mouseleaveDelay: mouseleaveDelayAttribute, } = thisElement.dataset;
|
|
31
|
-
this.#footnoteElement = new FootnoteElement(hrefAttribute);
|
|
32
|
-
this.#popoverLabel = new PopoverLabel(popoverLabelAttribute);
|
|
33
|
-
this.#popoverClass = new PopoverClass(popoverClassAttribute);
|
|
34
|
-
this.#popoverHide = new PopoverHide({
|
|
35
|
-
text: popoverHideTextAttribute,
|
|
36
|
-
imageSrc: popoverHideImageSrcAttribute,
|
|
37
|
-
imageWidth: popoverHideImageWidthAttribute,
|
|
38
|
-
imageHeight: popoverHideImageHeightAttribute,
|
|
39
|
-
});
|
|
40
|
-
this.#mouseenter = new Mouseenter({ delay: mouseenterDelayAttribute ?? '250' });
|
|
41
|
-
this.#mouseleave = new Mouseleave({ delay: mouseleaveDelayAttribute ?? '250' });
|
|
42
|
-
this.#popoverElement = document.createElement('x-popover');
|
|
43
|
-
if (!('showPopover' in this.#popoverElement)) {
|
|
44
|
-
console.info('This browser does not support popover');
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
thisElement.setAttribute('role', 'button');
|
|
48
|
-
thisElement.addEventListener('click', this.#clickEvent);
|
|
49
|
-
thisElement.addEventListener('mouseenter', this.#mouseEnterEvent, { passive: true });
|
|
50
|
-
thisElement.addEventListener('mouseleave', this.#mouseLeaveEvent, { passive: true });
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* `click` event
|
|
54
|
-
*
|
|
55
|
-
* @param ev - MouseEvent
|
|
56
|
-
*/
|
|
57
|
-
#clickEvent = (ev) => {
|
|
58
|
-
ev.preventDefault();
|
|
59
|
-
clearTimeout(this.#mouseleaveTimeoutId);
|
|
60
|
-
this.#show(ev.type);
|
|
61
|
-
};
|
|
62
|
-
/**
|
|
63
|
-
* `mouseenter` event
|
|
64
|
-
*
|
|
65
|
-
* @param ev - MouseEvent
|
|
66
|
-
*/
|
|
67
|
-
#mouseEnterEvent = (ev) => {
|
|
68
|
-
clearTimeout(this.#mouseleaveTimeoutId);
|
|
69
|
-
this.#imagePreloadElementCreate();
|
|
70
|
-
this.#mouseenterTimeoutId = setTimeout(() => {
|
|
71
|
-
this.#show(ev.type);
|
|
72
|
-
}, this.#mouseenter.delay);
|
|
73
|
-
};
|
|
74
|
-
/**
|
|
75
|
-
* `mouseleave` event
|
|
76
|
-
*
|
|
77
|
-
* @param ev - MouseEvent
|
|
78
|
-
*/
|
|
79
|
-
#mouseLeaveEvent = (ev) => {
|
|
80
|
-
clearTimeout(this.#mouseenterTimeoutId);
|
|
81
|
-
this.#mouseleaveTimeoutId = setTimeout(() => {
|
|
82
|
-
this.#hide(ev.type);
|
|
83
|
-
}, this.#mouseleave.delay);
|
|
84
|
-
};
|
|
85
|
-
/**
|
|
86
|
-
* ポップオーバーを生成する
|
|
87
|
-
*/
|
|
88
|
-
#create() {
|
|
89
|
-
const footnoteElement = this.#footnoteElement.element;
|
|
90
|
-
const popoverElement = this.#popoverElement;
|
|
91
|
-
if (this.#popoverClass.name !== undefined) {
|
|
92
|
-
popoverElement.className = this.#popoverClass.name;
|
|
93
|
-
}
|
|
94
|
-
popoverElement.label = this.#popoverLabel.text ?? null;
|
|
95
|
-
popoverElement.hideText = this.#popoverHide.text ?? null;
|
|
96
|
-
popoverElement.hideImageSrc = this.#popoverHide.imageSrc ?? null;
|
|
97
|
-
popoverElement.hideImageWidth = this.#popoverHide.imageWidth ?? null;
|
|
98
|
-
popoverElement.hideImageHeight = this.#popoverHide.imageHeight ?? null;
|
|
99
|
-
popoverElement.insertAdjacentHTML('afterbegin', 'getHTML' in footnoteElement ? footnoteElement.getHTML() : footnoteElement.innerHTML);
|
|
100
|
-
document.body.appendChild(popoverElement);
|
|
101
|
-
popoverElement.addEventListener('mouseenter', (ev) => {
|
|
102
|
-
clearTimeout(this.#mouseleaveTimeoutId);
|
|
103
|
-
this.#mouseenterTimeoutId = setTimeout(() => {
|
|
104
|
-
this.#show(ev.type);
|
|
105
|
-
}, this.#mouseenter.delay);
|
|
106
|
-
}, { passive: true });
|
|
107
|
-
popoverElement.addEventListener('mouseleave', (ev) => {
|
|
108
|
-
clearTimeout(this.#mouseenterTimeoutId);
|
|
109
|
-
this.#mouseleaveTimeoutId = setTimeout(() => {
|
|
110
|
-
this.#hide(ev.type);
|
|
111
|
-
}, this.#mouseleave.delay);
|
|
112
|
-
}, { passive: true });
|
|
113
|
-
popoverElement.hideButtonElement.addEventListener('click', () => {
|
|
114
|
-
clearTimeout(this.#mouseenterTimeoutId); // タッチデバイスで閉じるボタンをタップした際に `mouseenter` イベントの発火により表示処理が遅延実行されるのを防ぐ
|
|
115
|
-
}, { passive: true });
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* ポップオーバーを表示する
|
|
119
|
-
*
|
|
120
|
-
* @param eventType - イベントの識別名
|
|
121
|
-
*/
|
|
122
|
-
#show(eventType) {
|
|
123
|
-
const popoverElement = this.#popoverElement;
|
|
124
|
-
if (!popoverElement.isConnected) {
|
|
125
|
-
/* 初回表示時はポップオーバーの生成を行う */
|
|
126
|
-
this.#create();
|
|
127
|
-
}
|
|
128
|
-
const triggerRect = this.#popoverTriggerElement.getBoundingClientRect();
|
|
129
|
-
/* ポップオーバーの上位置を設定(トリガー要素の下端を基準にする) */
|
|
130
|
-
popoverElement.style.width = 'auto';
|
|
131
|
-
popoverElement.style.top = `${String(Math.round(triggerRect.bottom) + window.scrollY)}px`;
|
|
132
|
-
popoverElement.style.right = 'auto';
|
|
133
|
-
popoverElement.style.left = 'auto';
|
|
134
|
-
/* ポップオーバーを表示 */
|
|
135
|
-
const eventDetail = {
|
|
136
|
-
newState: 'open',
|
|
137
|
-
eventType: eventType,
|
|
138
|
-
};
|
|
139
|
-
popoverElement.dispatchEvent(new CustomEvent('my-toggle', {
|
|
140
|
-
detail: eventDetail,
|
|
141
|
-
}));
|
|
142
|
-
/* ポップオーバーの左右位置を設定(トリガー要素の左端を基準にする) */
|
|
143
|
-
const documentWidth = document.documentElement.offsetWidth;
|
|
144
|
-
const popoverWidth = popoverElement.width;
|
|
145
|
-
const triggerRectLeft = triggerRect.left;
|
|
146
|
-
popoverElement.style.width = `${String(popoverWidth)}px`;
|
|
147
|
-
if (documentWidth - triggerRectLeft < popoverWidth) {
|
|
148
|
-
popoverElement.style.right = '0';
|
|
149
|
-
}
|
|
150
|
-
else {
|
|
151
|
-
popoverElement.style.left = `${String(triggerRectLeft)}px`;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
/**
|
|
155
|
-
* ポップオーバーを非表示にする
|
|
156
|
-
*
|
|
157
|
-
* @param eventType - イベントの識別名
|
|
158
|
-
*/
|
|
159
|
-
#hide(eventType) {
|
|
160
|
-
const eventDetail = {
|
|
161
|
-
newState: 'closed',
|
|
162
|
-
eventType: eventType,
|
|
163
|
-
};
|
|
164
|
-
this.#popoverElement.dispatchEvent(new CustomEvent('my-toggle', {
|
|
165
|
-
detail: eventDetail,
|
|
166
|
-
}));
|
|
167
|
-
}
|
|
168
|
-
/**
|
|
169
|
-
* `<link rel="preload" as="image" />` を生成する
|
|
170
|
-
*/
|
|
171
|
-
#imagePreloadElementCreate() {
|
|
172
|
-
if (this.#preloadProcessed) {
|
|
173
|
-
/* 生成処理は1回のみ */
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
this.#preloadProcessed = true;
|
|
177
|
-
const popoverHideImageSrc = this.#popoverHide.imageSrc;
|
|
178
|
-
if (popoverHideImageSrc !== undefined &&
|
|
179
|
-
!popoverHideImageSrc.startsWith('data:') &&
|
|
180
|
-
document.querySelector(`link[rel="preload"][as="image"][href="${popoverHideImageSrc}"]`) === null) {
|
|
181
|
-
const parentElement = document.head;
|
|
182
|
-
const preloadElement = document.createElement('link');
|
|
183
|
-
preloadElement.rel = 'preload';
|
|
184
|
-
preloadElement.as = 'image';
|
|
185
|
-
preloadElement.href = popoverHideImageSrc;
|
|
186
|
-
const alreadyHeadLinkElements = parentElement.querySelectorAll('link');
|
|
187
|
-
if (alreadyHeadLinkElements.length === 0) {
|
|
188
|
-
parentElement.appendChild(preloadElement);
|
|
189
|
-
}
|
|
190
|
-
else {
|
|
191
|
-
[...alreadyHeadLinkElements].at(-1)?.insertAdjacentElement('afterend', preloadElement);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
//# sourceMappingURL=FootnoteReferencePopover.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FootnoteReferencePopover.js","sourceRoot":"","sources":["../src/FootnoteReferencePopover.ts"],"names":[],"mappings":"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"}
|