@spectrum-web-components/overlay 0.42.2 → 0.42.4
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/custom-elements.json +285 -114
- package/package.json +15 -7
- package/src/AbstractOverlay.d.ts +2 -30
- package/src/AbstractOverlay.dev.js +0 -37
- package/src/AbstractOverlay.dev.js.map +2 -2
- package/src/AbstractOverlay.js +1 -1
- package/src/AbstractOverlay.js.map +3 -3
- package/src/ClickController.dev.js +2 -2
- package/src/ClickController.dev.js.map +2 -2
- package/src/ClickController.js +1 -1
- package/src/ClickController.js.map +2 -2
- package/src/HoverController.d.ts +1 -0
- package/src/HoverController.dev.js +26 -20
- package/src/HoverController.dev.js.map +2 -2
- package/src/HoverController.js +1 -1
- package/src/HoverController.js.map +2 -2
- package/src/InteractionController.d.ts +18 -4
- package/src/InteractionController.dev.js +46 -5
- package/src/InteractionController.dev.js.map +2 -2
- package/src/InteractionController.js +1 -1
- package/src/InteractionController.js.map +3 -3
- package/src/LongpressController.dev.js +15 -16
- package/src/LongpressController.dev.js.map +2 -2
- package/src/LongpressController.js +1 -1
- package/src/LongpressController.js.map +3 -3
- package/src/Overlay.d.ts +3 -8
- package/src/Overlay.dev.js +18 -34
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +2 -2
- package/src/Overlay.js.map +3 -3
- package/src/OverlayDialog.dev.js +2 -3
- package/src/OverlayDialog.dev.js.map +2 -2
- package/src/OverlayDialog.js +1 -1
- package/src/OverlayDialog.js.map +3 -3
- package/src/OverlayNoPopover.dev.js +5 -3
- package/src/OverlayNoPopover.dev.js.map +2 -2
- package/src/OverlayNoPopover.js +1 -1
- package/src/OverlayNoPopover.js.map +3 -3
- package/src/OverlayPopover.dev.js +5 -3
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +3 -3
- package/src/OverlayStack.dev.js +7 -15
- package/src/OverlayStack.dev.js.map +2 -2
- package/src/OverlayStack.js +1 -1
- package/src/OverlayStack.js.map +3 -3
- package/src/OverlayTrigger.d.ts +1 -1
- package/src/OverlayTrigger.dev.js +1 -2
- package/src/OverlayTrigger.dev.js.map +2 -2
- package/src/OverlayTrigger.js.map +1 -1
- package/src/PlacementController.d.ts +1 -1
- package/src/PlacementController.dev.js +3 -6
- package/src/PlacementController.dev.js.map +1 -1
- package/src/events.d.ts +23 -0
- package/src/events.dev.js +39 -0
- package/src/events.dev.js.map +7 -0
- package/src/events.js +2 -0
- package/src/events.js.map +7 -0
- package/src/overlay-events.js +1 -1
- package/src/overlay-trigger-directive.d.ts +5 -6
- package/src/overlay-trigger-directive.dev.js +12 -11
- package/src/overlay-trigger-directive.dev.js.map +2 -2
- package/src/overlay-trigger-directive.js +1 -1
- package/src/overlay-trigger-directive.js.map +3 -3
- package/src/overlay-types.d.ts +10 -10
- package/src/slottable-request-directive.d.ts +1 -1
- package/src/slottable-request-directive.dev.js +7 -4
- package/src/slottable-request-directive.dev.js.map +2 -2
- package/src/slottable-request-directive.js +1 -1
- package/src/slottable-request-directive.js.map +2 -2
- package/src/slottable-request-event.js +1 -1
- package/src/strategies.d.ts +8 -0
- package/src/strategies.dev.js +10 -0
- package/src/strategies.dev.js.map +7 -0
- package/src/strategies.js +2 -0
- package/src/strategies.js.map +7 -0
- package/stories/overlay-element.stories.js +22 -0
- package/stories/overlay-element.stories.js.map +2 -2
- package/stories/overlay-story-components.js +6 -12
- package/stories/overlay-story-components.js.map +1 -1
- package/stories/overlay.stories.js +3 -4
- package/stories/overlay.stories.js.map +2 -2
- package/test/index.js +10 -10
- package/test/index.js.map +2 -2
- package/test/overlay-element.test.js +69 -28
- package/test/overlay-element.test.js.map +2 -2
- package/test/overlay-memory.test.js +10 -0
- package/test/overlay-memory.test.js.map +7 -0
- package/test/overlay-update.test.js +1 -0
- package/test/overlay-update.test.js.map +2 -2
- package/test/overlay-v1.test.js +2 -1
- package/test/overlay-v1.test.js.map +2 -2
|
@@ -6,19 +6,57 @@ export var InteractionTypes = /* @__PURE__ */ ((InteractionTypes2) => {
|
|
|
6
6
|
return InteractionTypes2;
|
|
7
7
|
})(InteractionTypes || {});
|
|
8
8
|
export class InteractionController {
|
|
9
|
-
constructor(
|
|
10
|
-
this.host = host;
|
|
9
|
+
constructor(target, { overlay, isPersistent, handleOverlayReady }) {
|
|
11
10
|
this.target = target;
|
|
12
|
-
this.isPersistent =
|
|
13
|
-
this.
|
|
14
|
-
this.
|
|
11
|
+
this.isPersistent = false;
|
|
12
|
+
this.isPersistent = !!isPersistent;
|
|
13
|
+
this.handleOverlayReady = handleOverlayReady;
|
|
15
14
|
if (this.isPersistent) {
|
|
16
15
|
this.init();
|
|
17
16
|
}
|
|
17
|
+
this.overlay = overlay;
|
|
18
18
|
}
|
|
19
19
|
get activelyOpening() {
|
|
20
20
|
return false;
|
|
21
21
|
}
|
|
22
|
+
get open() {
|
|
23
|
+
var _a, _b;
|
|
24
|
+
return (_b = (_a = this.overlay) == null ? void 0 : _a.open) != null ? _b : false;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Set `open` against the associated Overlay lazily.
|
|
28
|
+
*/
|
|
29
|
+
set open(open) {
|
|
30
|
+
if (this.overlay) {
|
|
31
|
+
this.overlay.open = open;
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (!open) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
customElements.whenDefined("sp-overlay").then(async () => {
|
|
38
|
+
const { Overlay } = await import("./Overlay.dev.js");
|
|
39
|
+
this.overlay = new Overlay();
|
|
40
|
+
this.overlay.open = true;
|
|
41
|
+
});
|
|
42
|
+
import("@spectrum-web-components/overlay/sp-overlay.js");
|
|
43
|
+
}
|
|
44
|
+
get overlay() {
|
|
45
|
+
return this._overlay;
|
|
46
|
+
}
|
|
47
|
+
set overlay(overlay) {
|
|
48
|
+
var _a;
|
|
49
|
+
if (!overlay) return;
|
|
50
|
+
if (this.overlay === overlay) return;
|
|
51
|
+
if (this.overlay) {
|
|
52
|
+
this.overlay.removeController(this);
|
|
53
|
+
}
|
|
54
|
+
this._overlay = overlay;
|
|
55
|
+
this.overlay.addController(this);
|
|
56
|
+
this.initOverlay();
|
|
57
|
+
this.prepareDescription(this.target);
|
|
58
|
+
(_a = this.handleOverlayReady) == null ? void 0 : _a.call(this, this.overlay);
|
|
59
|
+
}
|
|
22
60
|
prepareDescription(_) {
|
|
23
61
|
}
|
|
24
62
|
releaseDescription() {
|
|
@@ -28,6 +66,9 @@ export class InteractionController {
|
|
|
28
66
|
/* c8 ignore next 3 */
|
|
29
67
|
init() {
|
|
30
68
|
}
|
|
69
|
+
/* c8 ignore next 3 */
|
|
70
|
+
initOverlay() {
|
|
71
|
+
}
|
|
31
72
|
abort() {
|
|
32
73
|
var _a;
|
|
33
74
|
this.releaseDescription();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["InteractionController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveController } from '
|
|
5
|
-
"mappings": ";AAeO,WAAK,mBAAL,kBAAKA,sBAAL;AACH,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AAHQ,SAAAA;AAAA,GAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveController } from '@spectrum-web-components/base';\nimport { AbstractOverlay } from './AbstractOverlay.dev.js'\n\nexport enum InteractionTypes {\n 'click',\n 'hover',\n 'longpress',\n}\n\nexport type ControllerOptions = {\n overlay?: AbstractOverlay;\n handleOverlayReady?: (overlay: AbstractOverlay) => void;\n isPersistent?: boolean;\n};\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private handleOverlayReady?: (overlay: AbstractOverlay) => void;\n\n public get open(): boolean {\n return this.overlay?.open ?? false;\n }\n\n /**\n * Set `open` against the associated Overlay lazily.\n */\n public set open(open: boolean) {\n if (this.overlay) {\n // If there already is an Overlay, apply the value of `open` directly.\n this.overlay.open = open;\n return;\n }\n if (!open) {\n // When `open` moves to `false` and there is not yet an Overlay,\n // assume that no Overlay and a closed Overlay are the same and return early.\n return;\n }\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import('./Overlay.dev.js');\n this.overlay = new Overlay();\n this.overlay.open = true;\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n if (this.overlay) {\n this.overlay.removeController(this);\n }\n this._overlay = overlay;\n this.overlay.addController(this);\n this.initOverlay();\n this.prepareDescription(this.target);\n this.handleOverlayReady?.(this.overlay);\n }\n\n private _overlay!: AbstractOverlay;\n\n protected isPersistent = false;\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n { overlay, isPersistent, handleOverlayReady }: ControllerOptions\n ) {\n this.isPersistent = !!isPersistent;\n this.handleOverlayReady = handleOverlayReady;\n if (this.isPersistent) {\n this.init();\n }\n this.overlay = overlay;\n }\n\n prepareDescription(_: HTMLElement): void {}\n\n releaseDescription(): void {}\n\n shouldCompleteOpen(): void {}\n\n /* c8 ignore next 3 */\n init(): void {\n // Abstract init() method.\n }\n\n /* c8 ignore next 3 */\n initOverlay(): void {\n // Abstract initOverlay() method.\n }\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n }\n\n hostDisconnected(): void {\n if (!this.isPersistent) {\n this.abort();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAeO,WAAK,mBAAL,kBAAKA,sBAAL;AACH,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AAHQ,SAAAA;AAAA,GAAA;AAYL,aAAM,sBAAoD;AAAA,EA8D7D,YACW,QACP,EAAE,SAAS,cAAc,mBAAmB,GAC9C;AAFS;AALX,SAAU,eAAe;AAQrB,SAAK,eAAe,CAAC,CAAC;AACtB,SAAK,qBAAqB;AAC1B,QAAI,KAAK,cAAc;AACnB,WAAK,KAAK;AAAA,IACd;AACA,SAAK,UAAU;AAAA,EACnB;AAAA,EArEA,IAAI,kBAA2B;AAC3B,WAAO;AAAA,EACX;AAAA,EAIA,IAAW,OAAgB;AApC/B;AAqCQ,YAAO,gBAAK,YAAL,mBAAc,SAAd,YAAsB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAW,KAAK,MAAe;AAC3B,QAAI,KAAK,SAAS;AAEd,WAAK,QAAQ,OAAO;AACpB;AAAA,IACJ;AACA,QAAI,CAAC,MAAM;AAGP;AAAA,IACJ;AAGA,mBACK,YAAY,YAAY,EACxB,KAAK,YAA2B;AAC7B,YAAM,EAAE,QAAQ,IAAI,MAAM,OAAO,kBAAkB;AACnD,WAAK,UAAU,IAAI,QAAQ;AAC3B,WAAK,QAAQ,OAAO;AAAA,IACxB,CAAC;AACL,WAAO,gDAAgD;AAAA,EAC3D;AAAA,EAEA,IAAW,UAA2B;AAClC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,QAAQ,SAAsC;AAtE7D;AAuEQ,QAAI,CAAC,QAAS;AACd,QAAI,KAAK,YAAY,QAAS;AAC9B,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,iBAAiB,IAAI;AAAA,IACtC;AACA,SAAK,WAAW;AAChB,SAAK,QAAQ,cAAc,IAAI;AAC/B,SAAK,YAAY;AACjB,SAAK,mBAAmB,KAAK,MAAM;AACnC,eAAK,uBAAL,8BAA0B,KAAK;AAAA,EACnC;AAAA,EAoBA,mBAAmB,GAAsB;AAAA,EAAC;AAAA,EAE1C,qBAA2B;AAAA,EAAC;AAAA,EAE5B,qBAA2B;AAAA,EAAC;AAAA;AAAA,EAG5B,OAAa;AAAA,EAEb;AAAA;AAAA,EAGA,cAAoB;AAAA,EAEpB;AAAA,EAEA,QAAc;AArHlB;AAsHQ,SAAK,mBAAmB;AACxB,eAAK,oBAAL,mBAAsB;AAAA,EAC1B;AAAA,EAEA,gBAAsB;AAClB,SAAK,KAAK;AAAA,EACd;AAAA,EAEA,mBAAyB;AACrB,QAAI,CAAC,KAAK,cAAc;AACpB,WAAK,MAAM;AAAA,IACf;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": ["InteractionTypes"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";export var InteractionTypes=(
|
|
1
|
+
"use strict";export var InteractionTypes=(r=>(r[r.click=0]="click",r[r.hover=1]="hover",r[r.longpress=2]="longpress",r))(InteractionTypes||{});export class InteractionController{constructor(e,{overlay:t,isPersistent:r,handleOverlayReady:o}){this.target=e;this.isPersistent=!1;this.isPersistent=!!r,this.handleOverlayReady=o,this.isPersistent&&this.init(),this.overlay=t}get activelyOpening(){return!1}get open(){var e,t;return(t=(e=this.overlay)==null?void 0:e.open)!=null?t:!1}set open(e){if(this.overlay){this.overlay.open=e;return}e&&(customElements.whenDefined("sp-overlay").then(async()=>{const{Overlay:t}=await import("./Overlay.js");this.overlay=new t,this.overlay.open=!0}),import("@spectrum-web-components/overlay/sp-overlay.js"))}get overlay(){return this._overlay}set overlay(e){var t;e&&this.overlay!==e&&(this.overlay&&this.overlay.removeController(this),this._overlay=e,this.overlay.addController(this),this.initOverlay(),this.prepareDescription(this.target),(t=this.handleOverlayReady)==null||t.call(this,this.overlay))}prepareDescription(e){}releaseDescription(){}shouldCompleteOpen(){}init(){}initOverlay(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init()}hostDisconnected(){this.isPersistent||this.abort()}}
|
|
2
2
|
//# sourceMappingURL=InteractionController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["InteractionController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveController } from '
|
|
5
|
-
"mappings": "aAeO,WAAK,kBAAAA,IACRA,IAAA,iBACAA,IAAA,iBACAA,IAAA,yBAHQA,IAAA,
|
|
6
|
-
"names": ["InteractionTypes", "
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveController } from '@spectrum-web-components/base';\nimport { AbstractOverlay } from './AbstractOverlay.js';\n\nexport enum InteractionTypes {\n 'click',\n 'hover',\n 'longpress',\n}\n\nexport type ControllerOptions = {\n overlay?: AbstractOverlay;\n handleOverlayReady?: (overlay: AbstractOverlay) => void;\n isPersistent?: boolean;\n};\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private handleOverlayReady?: (overlay: AbstractOverlay) => void;\n\n public get open(): boolean {\n return this.overlay?.open ?? false;\n }\n\n /**\n * Set `open` against the associated Overlay lazily.\n */\n public set open(open: boolean) {\n if (this.overlay) {\n // If there already is an Overlay, apply the value of `open` directly.\n this.overlay.open = open;\n return;\n }\n if (!open) {\n // When `open` moves to `false` and there is not yet an Overlay,\n // assume that no Overlay and a closed Overlay are the same and return early.\n return;\n }\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import('./Overlay.js');\n this.overlay = new Overlay();\n this.overlay.open = true;\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n if (this.overlay) {\n this.overlay.removeController(this);\n }\n this._overlay = overlay;\n this.overlay.addController(this);\n this.initOverlay();\n this.prepareDescription(this.target);\n this.handleOverlayReady?.(this.overlay);\n }\n\n private _overlay!: AbstractOverlay;\n\n protected isPersistent = false;\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n { overlay, isPersistent, handleOverlayReady }: ControllerOptions\n ) {\n this.isPersistent = !!isPersistent;\n this.handleOverlayReady = handleOverlayReady;\n if (this.isPersistent) {\n this.init();\n }\n this.overlay = overlay;\n }\n\n prepareDescription(_: HTMLElement): void {}\n\n releaseDescription(): void {}\n\n shouldCompleteOpen(): void {}\n\n /* c8 ignore next 3 */\n init(): void {\n // Abstract init() method.\n }\n\n /* c8 ignore next 3 */\n initOverlay(): void {\n // Abstract initOverlay() method.\n }\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n }\n\n hostDisconnected(): void {\n if (!this.isPersistent) {\n this.abort();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "aAeO,WAAK,kBAAAA,IACRA,IAAA,iBACAA,IAAA,iBACAA,IAAA,yBAHQA,IAAA,sBAYL,aAAM,qBAAoD,CA8D7D,YACWC,EACP,CAAE,QAAAC,EAAS,aAAAC,EAAc,mBAAAC,CAAmB,EAC9C,CAFS,YAAAH,EALX,KAAU,aAAe,GAQrB,KAAK,aAAe,CAAC,CAACE,EACtB,KAAK,mBAAqBC,EACtB,KAAK,cACL,KAAK,KAAK,EAEd,KAAK,QAAUF,CACnB,CArEA,IAAI,iBAA2B,CAC3B,MAAO,EACX,CAIA,IAAW,MAAgB,CApC/B,IAAAG,EAAAC,EAqCQ,OAAOA,GAAAD,EAAA,KAAK,UAAL,YAAAA,EAAc,OAAd,KAAAC,EAAsB,EACjC,CAKA,IAAW,KAAKC,EAAe,CAC3B,GAAI,KAAK,QAAS,CAEd,KAAK,QAAQ,KAAOA,EACpB,MACJ,CACKA,IAOL,eACK,YAAY,YAAY,EACxB,KAAK,SAA2B,CAC7B,KAAM,CAAE,QAAAC,CAAQ,EAAI,KAAM,QAAO,cAAc,EAC/C,KAAK,QAAU,IAAIA,EACnB,KAAK,QAAQ,KAAO,EACxB,CAAC,EACL,OAAO,gDAAgD,EAC3D,CAEA,IAAW,SAA2B,CAClC,OAAO,KAAK,QAChB,CAEA,IAAW,QAAQN,EAAsC,CAtE7D,IAAAG,EAuEaH,GACD,KAAK,UAAYA,IACjB,KAAK,SACL,KAAK,QAAQ,iBAAiB,IAAI,EAEtC,KAAK,SAAWA,EAChB,KAAK,QAAQ,cAAc,IAAI,EAC/B,KAAK,YAAY,EACjB,KAAK,mBAAmB,KAAK,MAAM,GACnCG,EAAA,KAAK,qBAAL,MAAAA,EAAA,UAA0B,KAAK,SACnC,CAoBA,mBAAmBI,EAAsB,CAAC,CAE1C,oBAA2B,CAAC,CAE5B,oBAA2B,CAAC,CAG5B,MAAa,CAEb,CAGA,aAAoB,CAEpB,CAEA,OAAc,CArHlB,IAAAJ,EAsHQ,KAAK,mBAAmB,GACxBA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEA,eAAsB,CAClB,KAAK,KAAK,CACd,CAEA,kBAAyB,CAChB,KAAK,cACN,KAAK,MAAM,CAEnB,CACJ",
|
|
6
|
+
"names": ["InteractionTypes", "target", "overlay", "isPersistent", "handleOverlayReady", "_a", "_b", "open", "Overlay", "_"]
|
|
7
7
|
}
|
|
@@ -6,7 +6,10 @@ import {
|
|
|
6
6
|
import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
|
|
7
7
|
import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
|
|
8
8
|
import { noop } from "./AbstractOverlay.dev.js";
|
|
9
|
-
import {
|
|
9
|
+
import {
|
|
10
|
+
InteractionController,
|
|
11
|
+
InteractionTypes
|
|
12
|
+
} from "./InteractionController.dev.js";
|
|
10
13
|
const LONGPRESS_DURATION = 300;
|
|
11
14
|
export const LONGPRESS_INSTRUCTIONS = {
|
|
12
15
|
touch: "Double tap and long press for additional options",
|
|
@@ -20,10 +23,10 @@ export class LongpressController extends InteractionController {
|
|
|
20
23
|
this.longpressState = null;
|
|
21
24
|
this.releaseDescription = noop;
|
|
22
25
|
this.handlePointerup = () => {
|
|
26
|
+
var _a;
|
|
23
27
|
clearTimeout(this.timeout);
|
|
24
|
-
if (!this.target)
|
|
25
|
-
|
|
26
|
-
this.longpressState = this.host.state === "opening" ? "pressed" : null;
|
|
28
|
+
if (!this.target) return;
|
|
29
|
+
this.longpressState = ((_a = this.overlay) == null ? void 0 : _a.state) === "opening" ? "pressed" : null;
|
|
27
30
|
document.removeEventListener("pointerup", this.handlePointerup);
|
|
28
31
|
document.removeEventListener("pointercancel", this.handlePointerup);
|
|
29
32
|
};
|
|
@@ -32,23 +35,19 @@ export class LongpressController extends InteractionController {
|
|
|
32
35
|
return this.longpressState === "opening" || this.longpressState === "pressed";
|
|
33
36
|
}
|
|
34
37
|
handleLongpress() {
|
|
35
|
-
this.
|
|
38
|
+
this.open = true;
|
|
36
39
|
this.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
|
|
37
40
|
}
|
|
38
41
|
handlePointerdown(event) {
|
|
39
|
-
if (!this.target)
|
|
40
|
-
|
|
41
|
-
if (event.button !== 0)
|
|
42
|
-
return;
|
|
42
|
+
if (!this.target) return;
|
|
43
|
+
if (event.button !== 0) return;
|
|
43
44
|
this.longpressState = "potential";
|
|
44
45
|
document.addEventListener("pointerup", this.handlePointerup);
|
|
45
46
|
document.addEventListener("pointercancel", this.handlePointerup);
|
|
46
47
|
const triggerHandlesLongpress = "holdAffordance" in this.target;
|
|
47
|
-
if (triggerHandlesLongpress)
|
|
48
|
-
return;
|
|
48
|
+
if (triggerHandlesLongpress) return;
|
|
49
49
|
this.timeout = setTimeout(() => {
|
|
50
|
-
if (!this.target)
|
|
51
|
-
return;
|
|
50
|
+
if (!this.target) return;
|
|
52
51
|
this.target.dispatchEvent(
|
|
53
52
|
new CustomEvent("longpress", {
|
|
54
53
|
bubbles: true,
|
|
@@ -92,7 +91,7 @@ export class LongpressController extends InteractionController {
|
|
|
92
91
|
if (
|
|
93
92
|
// do not reapply until target is recycled
|
|
94
93
|
this.releaseDescription !== noop || // require "longpress content" to apply relationship
|
|
95
|
-
!this.
|
|
94
|
+
!this.overlay.elements.length
|
|
96
95
|
) {
|
|
97
96
|
return;
|
|
98
97
|
}
|
|
@@ -102,9 +101,9 @@ export class LongpressController extends InteractionController {
|
|
|
102
101
|
longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
|
|
103
102
|
longpressDescription.slot = "longpress-describedby-descriptor";
|
|
104
103
|
const triggerParent = trigger.getRootNode();
|
|
105
|
-
const overlayParent = this.
|
|
104
|
+
const overlayParent = this.overlay.getRootNode();
|
|
106
105
|
if (triggerParent === overlayParent) {
|
|
107
|
-
this.
|
|
106
|
+
this.overlay.append(longpressDescription);
|
|
108
107
|
} else {
|
|
109
108
|
longpressDescription.hidden = !("host" in triggerParent);
|
|
110
109
|
trigger.insertAdjacentElement("afterend", longpressDescription);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["LongpressController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { noop } from './AbstractOverlay.dev.js'\nimport {
|
|
5
|
-
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { noop } from './AbstractOverlay.dev.js'\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\n\nconst LONGPRESS_DURATION = 300;\nexport const LONGPRESS_INSTRUCTIONS = {\n touch: 'Double tap and long press for additional options',\n keyboard: 'Press Space or Alt+Down Arrow for additional options',\n mouse: 'Click and hold for additional options',\n};\n\ntype LongpressEvent = {\n source: 'pointer' | 'keyboard';\n};\n\nexport class LongpressController extends InteractionController {\n override type = InteractionTypes.longpress;\n\n override get activelyOpening(): boolean {\n return (\n this.longpressState === 'opening' ||\n this.longpressState === 'pressed'\n );\n }\n\n protected longpressState: null | 'potential' | 'opening' | 'pressed' = null;\n\n override releaseDescription = noop;\n\n private timeout!: ReturnType<typeof setTimeout>;\n\n handleLongpress(): void {\n this.open = true;\n this.longpressState =\n this.longpressState === 'potential' ? 'opening' : 'pressed';\n }\n\n handlePointerdown(event: PointerEvent): void {\n if (!this.target) return;\n if (event.button !== 0) return;\n this.longpressState = 'potential';\n document.addEventListener('pointerup', this.handlePointerup);\n document.addEventListener('pointercancel', this.handlePointerup);\n // Only dispatch longpress event if the trigger element isn't doing it for us.\n const triggerHandlesLongpress = 'holdAffordance' in this.target;\n if (triggerHandlesLongpress) return;\n this.timeout = setTimeout(() => {\n if (!this.target) return;\n this.target.dispatchEvent(\n new CustomEvent<LongpressEvent>('longpress', {\n bubbles: true,\n composed: true,\n detail: {\n source: 'pointer',\n },\n })\n );\n }, LONGPRESS_DURATION);\n }\n\n private handlePointerup = (): void => {\n clearTimeout(this.timeout);\n if (!this.target) return;\n // When triggered by the pointer, the last of `opened`\n // or `pointerup` should move the `longpressState` to\n // `null` so that the earlier event can void the \"light\n // dismiss\" and keep the Overlay open.\n this.longpressState =\n this.overlay?.state === 'opening' ? 'pressed' : null;\n document.removeEventListener('pointerup', this.handlePointerup);\n document.removeEventListener('pointercancel', this.handlePointerup);\n };\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code, altKey } = event;\n if (altKey && code === 'ArrowDown') {\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n }\n\n private handleKeyup(event: KeyboardEvent): void {\n const { code, altKey } = event;\n if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n if (!this.target) {\n return;\n }\n event.stopPropagation();\n this.target.dispatchEvent(\n new CustomEvent<LongpressEvent>('longpress', {\n bubbles: true,\n composed: true,\n detail: {\n source: 'keyboard',\n },\n })\n );\n setTimeout(() => {\n this.longpressState = null;\n });\n }\n }\n\n override prepareDescription(trigger: HTMLElement): void {\n if (\n // do not reapply until target is recycled\n this.releaseDescription !== noop ||\n // require \"longpress content\" to apply relationship\n !this.overlay.elements.length\n ) {\n return;\n }\n\n const longpressDescription = document.createElement('div');\n longpressDescription.id = `longpress-describedby-descriptor-${randomID()}`;\n const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';\n longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];\n longpressDescription.slot = 'longpress-describedby-descriptor';\n const triggerParent = trigger.getRootNode() as HTMLElement;\n const overlayParent = this.overlay.getRootNode() as HTMLElement;\n // Manage the placement of the helper element in an accessible place with\n // the lowest chance of negatively affecting the layout of the page.\n if (triggerParent === overlayParent) {\n // Trigger and Overlay in same DOM tree...\n // Append helper element to Overlay.\n this.overlay.append(longpressDescription);\n } else {\n // If Trigger in <body>, hide helper\n longpressDescription.hidden = !('host' in triggerParent);\n // Trigger and Overlay in different DOM tree, Trigger in shadow tree...\n // Insert helper element after Trigger.\n trigger.insertAdjacentElement('afterend', longpressDescription);\n }\n\n const releaseDescription = conditionAttributeWithId(\n trigger,\n 'aria-describedby',\n [longpressDescription.id]\n );\n this.releaseDescription = () => {\n releaseDescription();\n longpressDescription.remove();\n this.releaseDescription = noop;\n };\n }\n\n override shouldCompleteOpen(): void {\n // When triggered by the pointer, the last of `opened`\n // or `pointerup` should move the `longpressState` to\n // `null` so that the earlier event can void the \"light\n // dismiss\" and keep the Overlay open.\n this.longpressState =\n this.longpressState === 'pressed' ? null : this.longpressState;\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'longpress',\n () => this.handleLongpress(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerdown',\n (event: PointerEvent) => this.handlePointerdown(event),\n { signal }\n );\n\n this.prepareDescription(this.target);\n if (\n (this.target as HTMLElement & { holdAffordance: boolean })\n .holdAffordance\n ) {\n // Only bind keyboard events when the trigger element isn't doing it for us.\n return;\n }\n this.target.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => this.handleKeydown(event),\n { signal }\n );\n this.target.addEventListener(\n 'keyup',\n (event: KeyboardEvent) => this.handleKeyup(event),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,MAAM,qBAAqB;AACpB,aAAM,yBAAyB;AAAA,EAClC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AACX;AAMO,aAAM,4BAA4B,sBAAsB;AAAA,EAAxD;AAAA;AACH,SAAS,OAAO,iBAAiB;AASjC,SAAU,iBAA6D;AAEvE,SAAS,qBAAqB;AAiC9B,SAAQ,kBAAkB,MAAY;AAjF1C;AAkFQ,mBAAa,KAAK,OAAO;AACzB,UAAI,CAAC,KAAK,OAAQ;AAKlB,WAAK,mBACD,UAAK,YAAL,mBAAc,WAAU,YAAY,YAAY;AACpD,eAAS,oBAAoB,aAAa,KAAK,eAAe;AAC9D,eAAS,oBAAoB,iBAAiB,KAAK,eAAe;AAAA,IACtE;AAAA;AAAA,EArDA,IAAa,kBAA2B;AACpC,WACI,KAAK,mBAAmB,aACxB,KAAK,mBAAmB;AAAA,EAEhC;AAAA,EAQA,kBAAwB;AACpB,SAAK,OAAO;AACZ,SAAK,iBACD,KAAK,mBAAmB,cAAc,YAAY;AAAA,EAC1D;AAAA,EAEA,kBAAkB,OAA2B;AACzC,QAAI,CAAC,KAAK,OAAQ;AAClB,QAAI,MAAM,WAAW,EAAG;AACxB,SAAK,iBAAiB;AACtB,aAAS,iBAAiB,aAAa,KAAK,eAAe;AAC3D,aAAS,iBAAiB,iBAAiB,KAAK,eAAe;AAE/D,UAAM,0BAA0B,oBAAoB,KAAK;AACzD,QAAI,wBAAyB;AAC7B,SAAK,UAAU,WAAW,MAAM;AAC5B,UAAI,CAAC,KAAK,OAAQ;AAClB,WAAK,OAAO;AAAA,QACR,IAAI,YAA4B,aAAa;AAAA,UACzC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ;AAAA,YACJ,QAAQ;AAAA,UACZ;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ,GAAG,kBAAkB;AAAA,EACzB;AAAA,EAeQ,cAAc,OAA4B;AAC9C,UAAM,EAAE,MAAM,OAAO,IAAI;AACzB,QAAI,UAAU,SAAS,aAAa;AAChC,YAAM,gBAAgB;AACtB,YAAM,yBAAyB;AAAA,IACnC;AAAA,EACJ;AAAA,EAEQ,YAAY,OAA4B;AAC5C,UAAM,EAAE,MAAM,OAAO,IAAI;AACzB,QAAI,SAAS,WAAY,UAAU,SAAS,aAAc;AACtD,UAAI,CAAC,KAAK,QAAQ;AACd;AAAA,MACJ;AACA,YAAM,gBAAgB;AACtB,WAAK,OAAO;AAAA,QACR,IAAI,YAA4B,aAAa;AAAA,UACzC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ;AAAA,YACJ,QAAQ;AAAA,UACZ;AAAA,QACJ,CAAC;AAAA,MACL;AACA,iBAAW,MAAM;AACb,aAAK,iBAAiB;AAAA,MAC1B,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAES,mBAAmB,SAA4B;AACpD;AAAA;AAAA,MAEI,KAAK,uBAAuB;AAAA,MAE5B,CAAC,KAAK,QAAQ,SAAS;AAAA,MACzB;AACE;AAAA,IACJ;AAEA,UAAM,uBAAuB,SAAS,cAAc,KAAK;AACzD,yBAAqB,KAAK,oCAAoC,SAAS,CAAC;AACxE,UAAM,cAAc,MAAM,KAAK,UAAU,IAAI,UAAU;AACvD,yBAAqB,cAAc,uBAAuB,WAAW;AACrE,yBAAqB,OAAO;AAC5B,UAAM,gBAAgB,QAAQ,YAAY;AAC1C,UAAM,gBAAgB,KAAK,QAAQ,YAAY;AAG/C,QAAI,kBAAkB,eAAe;AAGjC,WAAK,QAAQ,OAAO,oBAAoB;AAAA,IAC5C,OAAO;AAEH,2BAAqB,SAAS,EAAE,UAAU;AAG1C,cAAQ,sBAAsB,YAAY,oBAAoB;AAAA,IAClE;AAEA,UAAM,qBAAqB;AAAA,MACvB;AAAA,MACA;AAAA,MACA,CAAC,qBAAqB,EAAE;AAAA,IAC5B;AACA,SAAK,qBAAqB,MAAM;AAC5B,yBAAmB;AACnB,2BAAqB,OAAO;AAC5B,WAAK,qBAAqB;AAAA,IAC9B;AAAA,EACJ;AAAA,EAES,qBAA2B;AAKhC,SAAK,iBACD,KAAK,mBAAmB,YAAY,OAAO,KAAK;AAAA,EACxD;AAAA,EAES,OAAa;AAhL1B;AAkLQ,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB,IAAI,gBAAgB;AAC3C,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,gBAAgB;AAAA,MAC3B,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,CAAC,UAAwB,KAAK,kBAAkB,KAAK;AAAA,MACrD,EAAE,OAAO;AAAA,IACb;AAEA,SAAK,mBAAmB,KAAK,MAAM;AACnC,QACK,KAAK,OACD,gBACP;AAEE;AAAA,IACJ;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,CAAC,UAAyB,KAAK,cAAc,KAAK;AAAA,MAClD,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,CAAC,UAAyB,KAAK,YAAY,KAAK;AAAA,MAChD,EAAE,OAAO;AAAA,IACb;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{isAndroid as a,isIOS as d}from"@spectrum-web-components/shared/src/platform.js";import{conditionAttributeWithId as p}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{randomID as l}from"@spectrum-web-components/shared/src/random-id.js";import{noop as r}from"./AbstractOverlay.js";import{InteractionController as h,InteractionTypes as c}from"./InteractionController.js";const g=300;export const LONGPRESS_INSTRUCTIONS={touch:"Double tap and long press for additional options",keyboard:"Press Space or Alt+Down Arrow for additional options",mouse:"Click and hold for additional options"};export class LongpressController extends h{constructor(){super(...arguments);this.type=c.longpress;this.longpressState=null;this.releaseDescription=r;this.handlePointerup=()=>{clearTimeout(this.timeout),this.target&&(this.longpressState=this.
|
|
1
|
+
"use strict";import{isAndroid as a,isIOS as d}from"@spectrum-web-components/shared/src/platform.js";import{conditionAttributeWithId as p}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{randomID as l}from"@spectrum-web-components/shared/src/random-id.js";import{noop as r}from"./AbstractOverlay.js";import{InteractionController as h,InteractionTypes as c}from"./InteractionController.js";const g=300;export const LONGPRESS_INSTRUCTIONS={touch:"Double tap and long press for additional options",keyboard:"Press Space or Alt+Down Arrow for additional options",mouse:"Click and hold for additional options"};export class LongpressController extends h{constructor(){super(...arguments);this.type=c.longpress;this.longpressState=null;this.releaseDescription=r;this.handlePointerup=()=>{var e;clearTimeout(this.timeout),this.target&&(this.longpressState=((e=this.overlay)==null?void 0:e.state)==="opening"?"pressed":null,document.removeEventListener("pointerup",this.handlePointerup),document.removeEventListener("pointercancel",this.handlePointerup))}}get activelyOpening(){return this.longpressState==="opening"||this.longpressState==="pressed"}handleLongpress(){this.open=!0,this.longpressState=this.longpressState==="potential"?"opening":"pressed"}handlePointerdown(e){!this.target||e.button!==0||(this.longpressState="potential",document.addEventListener("pointerup",this.handlePointerup),document.addEventListener("pointercancel",this.handlePointerup),"holdAffordance"in this.target)||(this.timeout=setTimeout(()=>{this.target&&this.target.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},g))}handleKeydown(e){const{code:t,altKey:o}=e;o&&t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation())}handleKeyup(e){const{code:t,altKey:o}=e;if(t==="Space"||o&&t==="ArrowDown"){if(!this.target)return;e.stopPropagation(),this.target.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),setTimeout(()=>{this.longpressState=null})}}prepareDescription(e){if(this.releaseDescription!==r||!this.overlay.elements.length)return;const t=document.createElement("div");t.id=`longpress-describedby-descriptor-${l()}`;const o=d()||a()?"touch":"keyboard";t.textContent=LONGPRESS_INSTRUCTIONS[o],t.slot="longpress-describedby-descriptor";const n=e.getRootNode(),s=this.overlay.getRootNode();n===s?this.overlay.append(t):(t.hidden=!("host"in n),e.insertAdjacentElement("afterend",t));const i=p(e,"aria-describedby",[t.id]);this.releaseDescription=()=>{i(),t.remove(),this.releaseDescription=r}}shouldCompleteOpen(){this.longpressState=this.longpressState==="pressed"?null:this.longpressState}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("longpress",()=>this.handleLongpress(),{signal:e}),this.target.addEventListener("pointerdown",o=>this.handlePointerdown(o),{signal:e}),this.prepareDescription(this.target),!this.target.holdAffordance&&(this.target.addEventListener("keydown",o=>this.handleKeydown(o),{signal:e}),this.target.addEventListener("keyup",o=>this.handleKeyup(o),{signal:e}))}}
|
|
2
2
|
//# sourceMappingURL=LongpressController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["LongpressController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { noop } from './AbstractOverlay.js';\nimport {
|
|
5
|
-
"mappings": "aAYA,OACI,aAAAA,EACA,SAAAC,MACG,kDACP,OAAS,4BAAAC,MAAgC,mEACzC,OAAS,YAAAC,MAAgB,mDAEzB,OAAS,QAAAC,MAAY,uBACrB,
|
|
6
|
-
"names": ["isAndroid", "isIOS", "conditionAttributeWithId", "randomID", "noop", "InteractionController", "InteractionTypes", "LONGPRESS_DURATION", "event", "code", "altKey", "trigger", "longpressDescription", "messageType", "triggerParent", "overlayParent", "releaseDescription", "
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport { noop } from './AbstractOverlay.js';\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\n\nconst LONGPRESS_DURATION = 300;\nexport const LONGPRESS_INSTRUCTIONS = {\n touch: 'Double tap and long press for additional options',\n keyboard: 'Press Space or Alt+Down Arrow for additional options',\n mouse: 'Click and hold for additional options',\n};\n\ntype LongpressEvent = {\n source: 'pointer' | 'keyboard';\n};\n\nexport class LongpressController extends InteractionController {\n override type = InteractionTypes.longpress;\n\n override get activelyOpening(): boolean {\n return (\n this.longpressState === 'opening' ||\n this.longpressState === 'pressed'\n );\n }\n\n protected longpressState: null | 'potential' | 'opening' | 'pressed' = null;\n\n override releaseDescription = noop;\n\n private timeout!: ReturnType<typeof setTimeout>;\n\n handleLongpress(): void {\n this.open = true;\n this.longpressState =\n this.longpressState === 'potential' ? 'opening' : 'pressed';\n }\n\n handlePointerdown(event: PointerEvent): void {\n if (!this.target) return;\n if (event.button !== 0) return;\n this.longpressState = 'potential';\n document.addEventListener('pointerup', this.handlePointerup);\n document.addEventListener('pointercancel', this.handlePointerup);\n // Only dispatch longpress event if the trigger element isn't doing it for us.\n const triggerHandlesLongpress = 'holdAffordance' in this.target;\n if (triggerHandlesLongpress) return;\n this.timeout = setTimeout(() => {\n if (!this.target) return;\n this.target.dispatchEvent(\n new CustomEvent<LongpressEvent>('longpress', {\n bubbles: true,\n composed: true,\n detail: {\n source: 'pointer',\n },\n })\n );\n }, LONGPRESS_DURATION);\n }\n\n private handlePointerup = (): void => {\n clearTimeout(this.timeout);\n if (!this.target) return;\n // When triggered by the pointer, the last of `opened`\n // or `pointerup` should move the `longpressState` to\n // `null` so that the earlier event can void the \"light\n // dismiss\" and keep the Overlay open.\n this.longpressState =\n this.overlay?.state === 'opening' ? 'pressed' : null;\n document.removeEventListener('pointerup', this.handlePointerup);\n document.removeEventListener('pointercancel', this.handlePointerup);\n };\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code, altKey } = event;\n if (altKey && code === 'ArrowDown') {\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n }\n\n private handleKeyup(event: KeyboardEvent): void {\n const { code, altKey } = event;\n if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n if (!this.target) {\n return;\n }\n event.stopPropagation();\n this.target.dispatchEvent(\n new CustomEvent<LongpressEvent>('longpress', {\n bubbles: true,\n composed: true,\n detail: {\n source: 'keyboard',\n },\n })\n );\n setTimeout(() => {\n this.longpressState = null;\n });\n }\n }\n\n override prepareDescription(trigger: HTMLElement): void {\n if (\n // do not reapply until target is recycled\n this.releaseDescription !== noop ||\n // require \"longpress content\" to apply relationship\n !this.overlay.elements.length\n ) {\n return;\n }\n\n const longpressDescription = document.createElement('div');\n longpressDescription.id = `longpress-describedby-descriptor-${randomID()}`;\n const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';\n longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];\n longpressDescription.slot = 'longpress-describedby-descriptor';\n const triggerParent = trigger.getRootNode() as HTMLElement;\n const overlayParent = this.overlay.getRootNode() as HTMLElement;\n // Manage the placement of the helper element in an accessible place with\n // the lowest chance of negatively affecting the layout of the page.\n if (triggerParent === overlayParent) {\n // Trigger and Overlay in same DOM tree...\n // Append helper element to Overlay.\n this.overlay.append(longpressDescription);\n } else {\n // If Trigger in <body>, hide helper\n longpressDescription.hidden = !('host' in triggerParent);\n // Trigger and Overlay in different DOM tree, Trigger in shadow tree...\n // Insert helper element after Trigger.\n trigger.insertAdjacentElement('afterend', longpressDescription);\n }\n\n const releaseDescription = conditionAttributeWithId(\n trigger,\n 'aria-describedby',\n [longpressDescription.id]\n );\n this.releaseDescription = () => {\n releaseDescription();\n longpressDescription.remove();\n this.releaseDescription = noop;\n };\n }\n\n override shouldCompleteOpen(): void {\n // When triggered by the pointer, the last of `opened`\n // or `pointerup` should move the `longpressState` to\n // `null` so that the earlier event can void the \"light\n // dismiss\" and keep the Overlay open.\n this.longpressState =\n this.longpressState === 'pressed' ? null : this.longpressState;\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'longpress',\n () => this.handleLongpress(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerdown',\n (event: PointerEvent) => this.handlePointerdown(event),\n { signal }\n );\n\n this.prepareDescription(this.target);\n if (\n (this.target as HTMLElement & { holdAffordance: boolean })\n .holdAffordance\n ) {\n // Only bind keyboard events when the trigger element isn't doing it for us.\n return;\n }\n this.target.addEventListener(\n 'keydown',\n (event: KeyboardEvent) => this.handleKeydown(event),\n { signal }\n );\n this.target.addEventListener(\n 'keyup',\n (event: KeyboardEvent) => this.handleKeyup(event),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["isAndroid", "isIOS", "conditionAttributeWithId", "randomID", "noop", "InteractionController", "InteractionTypes", "LONGPRESS_DURATION", "_a", "event", "code", "altKey", "trigger", "longpressDescription", "messageType", "triggerParent", "overlayParent", "releaseDescription", "signal"]
|
|
7
7
|
}
|
package/src/Overlay.d.ts
CHANGED
|
@@ -4,16 +4,11 @@ import type { OpenableElement, OverlayState, OverlayTypes, Placement, TriggerInt
|
|
|
4
4
|
import { AbstractOverlay } from './AbstractOverlay.js';
|
|
5
5
|
import { VirtualTrigger } from './VirtualTrigger.js';
|
|
6
6
|
import { PlacementController } from './PlacementController.js';
|
|
7
|
-
import { ClickController } from './ClickController.js';
|
|
8
|
-
import { HoverController } from './HoverController.js';
|
|
9
|
-
import { LongpressController } from './LongpressController.js';
|
|
7
|
+
import type { ClickController } from './ClickController.js';
|
|
8
|
+
import type { HoverController } from './HoverController.js';
|
|
9
|
+
import type { LongpressController } from './LongpressController.js';
|
|
10
10
|
export { LONGPRESS_INSTRUCTIONS } from './LongpressController.js';
|
|
11
11
|
declare let OverlayFeatures: typeof AbstractOverlay & import("./overlay-types.js").Constructor<import("@spectrum-web-components/base").SpectrumElement>;
|
|
12
|
-
export declare const strategies: {
|
|
13
|
-
click: typeof ClickController;
|
|
14
|
-
longpress: typeof LongpressController;
|
|
15
|
-
hover: typeof HoverController;
|
|
16
|
-
};
|
|
17
12
|
/**
|
|
18
13
|
* @element sp-overlay
|
|
19
14
|
*
|
package/src/Overlay.dev.js
CHANGED
|
@@ -6,8 +6,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
6
6
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
7
|
if (decorator = decorators[i])
|
|
8
8
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
-
if (kind && result)
|
|
10
|
-
__defProp(target, key, result);
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
11
10
|
return result;
|
|
12
11
|
};
|
|
13
12
|
import {
|
|
@@ -35,10 +34,8 @@ import { OverlayNoPopover } from "./OverlayNoPopover.dev.js";
|
|
|
35
34
|
import { overlayStack } from "./OverlayStack.dev.js";
|
|
36
35
|
import { VirtualTrigger } from "./VirtualTrigger.dev.js";
|
|
37
36
|
import { PlacementController } from "./PlacementController.dev.js";
|
|
38
|
-
import { ClickController } from "./ClickController.dev.js";
|
|
39
|
-
import { HoverController } from "./HoverController.dev.js";
|
|
40
|
-
import { LongpressController } from "./LongpressController.dev.js";
|
|
41
37
|
export { LONGPRESS_INSTRUCTIONS } from "./LongpressController.dev.js";
|
|
38
|
+
import { strategies } from "./strategies.dev.js";
|
|
42
39
|
import {
|
|
43
40
|
removeSlottableRequest,
|
|
44
41
|
SlottableRequestEvent
|
|
@@ -51,11 +48,6 @@ if (supportsPopover) {
|
|
|
51
48
|
} else {
|
|
52
49
|
OverlayFeatures = OverlayNoPopover(OverlayFeatures);
|
|
53
50
|
}
|
|
54
|
-
export const strategies = {
|
|
55
|
-
click: ClickController,
|
|
56
|
-
longpress: LongpressController,
|
|
57
|
-
hover: HoverController
|
|
58
|
-
};
|
|
59
51
|
const _Overlay = class _Overlay extends OverlayFeatures {
|
|
60
52
|
constructor() {
|
|
61
53
|
super(...arguments);
|
|
@@ -129,12 +121,9 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
129
121
|
}
|
|
130
122
|
set open(open) {
|
|
131
123
|
var _a;
|
|
132
|
-
if (open && this.disabled)
|
|
133
|
-
|
|
134
|
-
if (
|
|
135
|
-
return;
|
|
136
|
-
if (((_a = this.strategy) == null ? void 0 : _a.activelyOpening) && !open)
|
|
137
|
-
return;
|
|
124
|
+
if (open && this.disabled) return;
|
|
125
|
+
if (open === this.open) return;
|
|
126
|
+
if (((_a = this.strategy) == null ? void 0 : _a.activelyOpening) && !open) return;
|
|
138
127
|
this._open = open;
|
|
139
128
|
if (this.open) {
|
|
140
129
|
_Overlay.openCount += 1;
|
|
@@ -149,8 +138,7 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
149
138
|
}
|
|
150
139
|
set state(state2) {
|
|
151
140
|
var _a;
|
|
152
|
-
if (state2 === this.state)
|
|
153
|
-
return;
|
|
141
|
+
if (state2 === this.state) return;
|
|
154
142
|
const oldState = this.state;
|
|
155
143
|
this._state = state2;
|
|
156
144
|
if (this.state === "opened" || this.state === "closed") {
|
|
@@ -183,15 +171,13 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
183
171
|
}
|
|
184
172
|
}
|
|
185
173
|
get requiresPosition() {
|
|
186
|
-
if (this.type === "page" || !this.open)
|
|
187
|
-
return false;
|
|
174
|
+
if (this.type === "page" || !this.open) return false;
|
|
188
175
|
if (!this.triggerElement || !this.placement && this.type !== "hint")
|
|
189
176
|
return false;
|
|
190
177
|
return true;
|
|
191
178
|
}
|
|
192
179
|
managePosition() {
|
|
193
|
-
if (!this.requiresPosition || !this.open)
|
|
194
|
-
return;
|
|
180
|
+
if (!this.requiresPosition || !this.open) return;
|
|
195
181
|
const offset = this.offset || 0;
|
|
196
182
|
const trigger = this.triggerElement;
|
|
197
183
|
const placement = this.placement || "right";
|
|
@@ -240,8 +226,7 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
240
226
|
}
|
|
241
227
|
returnFocus() {
|
|
242
228
|
var _a;
|
|
243
|
-
if (this.open || this.type === "hint")
|
|
244
|
-
return;
|
|
229
|
+
if (this.open || this.type === "hint") return;
|
|
245
230
|
const getAncestors = () => {
|
|
246
231
|
var _a2, _b;
|
|
247
232
|
const ancestors = [];
|
|
@@ -258,14 +243,13 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
258
243
|
}
|
|
259
244
|
return ancestors;
|
|
260
245
|
};
|
|
261
|
-
if (((_a = this.triggerElement) == null ? void 0 : _a.focus) && (this.contains(this.getRootNode().activeElement) || getAncestors().includes(this) || // eslint-disable-next-line @spectrum-web-components/document-active-element
|
|
246
|
+
if (this.receivesFocus !== "false" && !!((_a = this.triggerElement) == null ? void 0 : _a.focus) && (this.contains(this.getRootNode().activeElement) || getAncestors().includes(this) || // eslint-disable-next-line @spectrum-web-components/document-active-element
|
|
262
247
|
document.activeElement === document.body)) {
|
|
263
248
|
this.triggerElement.focus();
|
|
264
249
|
}
|
|
265
250
|
}
|
|
266
251
|
async manageOpen(oldOpen) {
|
|
267
|
-
if (!this.isConnected && this.open)
|
|
268
|
-
return;
|
|
252
|
+
if (!this.isConnected && this.open) return;
|
|
269
253
|
if (!this.hasUpdated) {
|
|
270
254
|
await this.updateComplete;
|
|
271
255
|
}
|
|
@@ -325,13 +309,13 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
325
309
|
var _a;
|
|
326
310
|
(_a = this.strategy) == null ? void 0 : _a.abort();
|
|
327
311
|
this.strategy = void 0;
|
|
328
|
-
if (!this.hasNonVirtualTrigger)
|
|
329
|
-
|
|
330
|
-
if (!this.triggerInteraction)
|
|
331
|
-
return;
|
|
312
|
+
if (!this.hasNonVirtualTrigger) return;
|
|
313
|
+
if (!this.triggerInteraction) return;
|
|
332
314
|
this.strategy = new strategies[this.triggerInteraction](
|
|
333
|
-
this,
|
|
334
|
-
|
|
315
|
+
this.triggerElement,
|
|
316
|
+
{
|
|
317
|
+
overlay: this
|
|
318
|
+
}
|
|
335
319
|
);
|
|
336
320
|
}
|
|
337
321
|
handleBeforetoggle(event) {
|
|
@@ -390,7 +374,7 @@ const _Overlay = class _Overlay extends OverlayFeatures {
|
|
|
390
374
|
`${this.tagName.toLowerCase()}-${randomID()}`
|
|
391
375
|
);
|
|
392
376
|
}
|
|
393
|
-
if (changes.has("open") && (
|
|
377
|
+
if (changes.has("open") && (this.hasUpdated || this.open)) {
|
|
394
378
|
this.manageOpen(changes.get("open"));
|
|
395
379
|
}
|
|
396
380
|
if (changes.has("trigger")) {
|