@fluid-topics/ft-floating-menu 1.0.60 → 1.0.62
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/build/ft-base-floating-menu.d.ts +42 -0
- package/build/ft-base-floating-menu.js +224 -0
- package/build/ft-base-floating-menu.properties.d.ts +15 -0
- package/build/ft-base-floating-menu.properties.js +1 -0
- package/build/ft-floating-menu.d.ts +4 -35
- package/build/ft-floating-menu.js +3 -192
- package/build/ft-floating-menu.light.js +39 -27
- package/build/ft-floating-menu.min.js +35 -23
- package/build/ft-floating-menu.properties.d.ts +2 -14
- package/build/ftds-floating-menu.d.ts +7 -0
- package/build/ftds-floating-menu.js +11 -0
- package/build/ftds-floating-menu.properties.d.ts +8 -0
- package/build/ftds-floating-menu.properties.js +1 -0
- package/build/index.d.ts +3 -0
- package/build/index.js +5 -0
- package/package.json +7 -7
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
3
|
+
import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
|
|
4
|
+
import { PropertyValues } from "lit/development";
|
|
5
|
+
import { FtBaseFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-base-floating-menu.properties";
|
|
6
|
+
export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
|
|
7
|
+
constructor();
|
|
8
|
+
}
|
|
9
|
+
export declare class FtBaseFloatingMenu extends FtLitElement implements FtBaseFloatingMenuProperties {
|
|
10
|
+
static elementDefinitions: ElementDefinitionsMap;
|
|
11
|
+
private menuOpen;
|
|
12
|
+
forceMenuOpen: boolean;
|
|
13
|
+
private container;
|
|
14
|
+
private menuWrapper;
|
|
15
|
+
private menuContent;
|
|
16
|
+
private actionButton;
|
|
17
|
+
primary: boolean;
|
|
18
|
+
secondary: boolean;
|
|
19
|
+
tertiary: boolean;
|
|
20
|
+
neutral: boolean;
|
|
21
|
+
small: boolean;
|
|
22
|
+
label?: string;
|
|
23
|
+
tooltipPosition?: Position;
|
|
24
|
+
iconVariant: FtIconVariants;
|
|
25
|
+
icon: string;
|
|
26
|
+
text?: string;
|
|
27
|
+
horizontalAlignment: FtHorizontalAlignment;
|
|
28
|
+
verticalAlignment: FtVerticalAlignment;
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
closeMenuMatchers: string[];
|
|
31
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
32
|
+
private onClick;
|
|
33
|
+
private onClickItem;
|
|
34
|
+
private hideOptions;
|
|
35
|
+
private closeMenu;
|
|
36
|
+
private onCloseEvent;
|
|
37
|
+
private onContentClick;
|
|
38
|
+
disconnectedCallback(): void;
|
|
39
|
+
protected contentAvailableCallback(props: PropertyValues): void;
|
|
40
|
+
private positionMenuWrapper;
|
|
41
|
+
private correctOutOfWindowPixels;
|
|
42
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from "lit";
|
|
8
|
+
import { property, query, state } from "lit/decorators.js";
|
|
9
|
+
import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
|
|
10
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
+
import { FtFloatingMenuItem } from "./ft-floating-menu-item";
|
|
12
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
13
|
+
export class FloatingMenuCloseEvent extends CustomEvent {
|
|
14
|
+
constructor() {
|
|
15
|
+
super("close-ft-floating-menu");
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
class FtBaseFloatingMenu extends FtLitElement {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments);
|
|
21
|
+
this.menuOpen = false;
|
|
22
|
+
this.forceMenuOpen = false;
|
|
23
|
+
this.primary = false;
|
|
24
|
+
this.secondary = false;
|
|
25
|
+
this.tertiary = false;
|
|
26
|
+
this.neutral = false;
|
|
27
|
+
this.small = false;
|
|
28
|
+
this.iconVariant = FtIconVariants.fluid_topics;
|
|
29
|
+
this.icon = "SHORTCUT_MENU";
|
|
30
|
+
this.horizontalAlignment = "left";
|
|
31
|
+
this.verticalAlignment = "bottom";
|
|
32
|
+
this.disabled = false;
|
|
33
|
+
this.closeMenuMatchers = [];
|
|
34
|
+
this.hideOptions = (e) => {
|
|
35
|
+
this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
|
|
36
|
+
if (!this.menuOpen) {
|
|
37
|
+
document.removeEventListener("click", this.hideOptions);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
const classes = {
|
|
43
|
+
"ft-floating-menu": true,
|
|
44
|
+
"ft-floating-menu--open": this.forceMenuOpen || this.menuOpen,
|
|
45
|
+
["ft-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
|
|
46
|
+
["ft-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
|
|
47
|
+
};
|
|
48
|
+
return html `
|
|
49
|
+
<div class="${classMap(classes)}">
|
|
50
|
+
|
|
51
|
+
<slot name="toggle"
|
|
52
|
+
part="toggle"
|
|
53
|
+
@click=${this.onClick}>
|
|
54
|
+
<ft-or-ftds-button id="actions-button"
|
|
55
|
+
part="button"
|
|
56
|
+
?primary=${this.primary}
|
|
57
|
+
?secondary=${this.secondary}
|
|
58
|
+
?tertiary=${this.tertiary}
|
|
59
|
+
?neutral=${this.neutral}
|
|
60
|
+
?small=${this.small}
|
|
61
|
+
dense round
|
|
62
|
+
icon="${this.icon}"
|
|
63
|
+
.iconVariant=${this.iconVariant}
|
|
64
|
+
.label=${this.label}
|
|
65
|
+
.tooltipPosition=${this.tooltipPosition}
|
|
66
|
+
?disabled=${this.disabled}
|
|
67
|
+
aria-controls="ft-floating-menu-options"
|
|
68
|
+
aria-expanded="${this.forceMenuOpen || this.menuOpen}">
|
|
69
|
+
${this.text}
|
|
70
|
+
</ft-or-ftds-button>
|
|
71
|
+
</slot>
|
|
72
|
+
<div class="ft-floating-menu--wrapper">
|
|
73
|
+
<div id="ft-floating-menu-options"
|
|
74
|
+
class="ft-floating-menu--options"
|
|
75
|
+
part="options"
|
|
76
|
+
@select="${this.onClickItem}">
|
|
77
|
+
<slot id="ft-floating-menu-content"
|
|
78
|
+
@click=${this.onContentClick}
|
|
79
|
+
@close-ft-floating-menu=${this.onCloseEvent}
|
|
80
|
+
></slot>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
`;
|
|
85
|
+
}
|
|
86
|
+
onClick() {
|
|
87
|
+
this.menuOpen = !this.menuOpen;
|
|
88
|
+
setTimeout(() => document.addEventListener("click", this.hideOptions));
|
|
89
|
+
}
|
|
90
|
+
onClickItem() {
|
|
91
|
+
this.closeMenu();
|
|
92
|
+
}
|
|
93
|
+
closeMenu() {
|
|
94
|
+
this.menuOpen = false;
|
|
95
|
+
}
|
|
96
|
+
onCloseEvent(e) {
|
|
97
|
+
e.stopPropagation();
|
|
98
|
+
this.closeMenu();
|
|
99
|
+
}
|
|
100
|
+
onContentClick(e) {
|
|
101
|
+
if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
|
|
102
|
+
this.closeMenu();
|
|
103
|
+
e.stopPropagation();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
disconnectedCallback() {
|
|
107
|
+
super.disconnectedCallback();
|
|
108
|
+
document.removeEventListener("click", this.hideOptions);
|
|
109
|
+
}
|
|
110
|
+
contentAvailableCallback(props) {
|
|
111
|
+
super.contentAvailableCallback(props);
|
|
112
|
+
if (["menuOpen"].some(p => props.has(p)) && this.menuOpen) {
|
|
113
|
+
this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned");
|
|
114
|
+
this.positionMenuWrapper();
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
positionMenuWrapper() {
|
|
118
|
+
const menuWidth = this.menuContent.offsetWidth;
|
|
119
|
+
const menuHeight = this.menuContent.offsetHeight;
|
|
120
|
+
const buttonWidth = this.actionButton.offsetWidth;
|
|
121
|
+
const buttonHeight = this.actionButton.offsetHeight;
|
|
122
|
+
let left = 0;
|
|
123
|
+
let top = 0;
|
|
124
|
+
this.menuWrapper.style.left = "0";
|
|
125
|
+
this.menuWrapper.style.top = "0";
|
|
126
|
+
switch (this.horizontalAlignment) {
|
|
127
|
+
case "left":
|
|
128
|
+
left = this.actionButton.offsetLeft - this.menuWrapper.offsetLeft;
|
|
129
|
+
break;
|
|
130
|
+
case "right":
|
|
131
|
+
left = this.actionButton.offsetLeft + buttonWidth - menuWidth - this.menuWrapper.offsetLeft;
|
|
132
|
+
break;
|
|
133
|
+
case "center":
|
|
134
|
+
left = this.actionButton.offsetLeft + (buttonWidth / 2) - (menuWidth / 2) - this.menuWrapper.offsetLeft;
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
switch (this.verticalAlignment) {
|
|
138
|
+
case "bottom":
|
|
139
|
+
top = this.actionButton.offsetTop + buttonHeight + 4 - this.menuWrapper.offsetTop;
|
|
140
|
+
break;
|
|
141
|
+
case "top":
|
|
142
|
+
top = this.actionButton.offsetTop - menuHeight - 4 - this.menuWrapper.offsetTop;
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
const style = this.menuWrapper.style;
|
|
146
|
+
style.left = left + "px";
|
|
147
|
+
style.top = top + "px";
|
|
148
|
+
const boundingClientRect = this.menuWrapper.getBoundingClientRect();
|
|
149
|
+
let leftOutOfWindowPixels = -boundingClientRect.x;
|
|
150
|
+
let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
|
|
151
|
+
style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
|
|
152
|
+
let topOutOfWindowPixels = -boundingClientRect.y;
|
|
153
|
+
let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
|
|
154
|
+
style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
|
|
155
|
+
this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
|
|
156
|
+
}
|
|
157
|
+
correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
|
|
158
|
+
return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
FtBaseFloatingMenu.elementDefinitions = {
|
|
162
|
+
"ft-floating-menu-item": FtFloatingMenuItem,
|
|
163
|
+
};
|
|
164
|
+
__decorate([
|
|
165
|
+
state()
|
|
166
|
+
], FtBaseFloatingMenu.prototype, "menuOpen", void 0);
|
|
167
|
+
__decorate([
|
|
168
|
+
state()
|
|
169
|
+
], FtBaseFloatingMenu.prototype, "forceMenuOpen", void 0);
|
|
170
|
+
__decorate([
|
|
171
|
+
query(".ft-floating-menu")
|
|
172
|
+
], FtBaseFloatingMenu.prototype, "container", void 0);
|
|
173
|
+
__decorate([
|
|
174
|
+
query(".ft-floating-menu--wrapper")
|
|
175
|
+
], FtBaseFloatingMenu.prototype, "menuWrapper", void 0);
|
|
176
|
+
__decorate([
|
|
177
|
+
query("#ft-floating-menu-options")
|
|
178
|
+
], FtBaseFloatingMenu.prototype, "menuContent", void 0);
|
|
179
|
+
__decorate([
|
|
180
|
+
query("#actions-button")
|
|
181
|
+
], FtBaseFloatingMenu.prototype, "actionButton", void 0);
|
|
182
|
+
__decorate([
|
|
183
|
+
property({ type: Boolean })
|
|
184
|
+
], FtBaseFloatingMenu.prototype, "primary", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
property({ type: Boolean })
|
|
187
|
+
], FtBaseFloatingMenu.prototype, "secondary", void 0);
|
|
188
|
+
__decorate([
|
|
189
|
+
property({ type: Boolean })
|
|
190
|
+
], FtBaseFloatingMenu.prototype, "tertiary", void 0);
|
|
191
|
+
__decorate([
|
|
192
|
+
property({ type: Boolean })
|
|
193
|
+
], FtBaseFloatingMenu.prototype, "neutral", void 0);
|
|
194
|
+
__decorate([
|
|
195
|
+
property({ type: Boolean })
|
|
196
|
+
], FtBaseFloatingMenu.prototype, "small", void 0);
|
|
197
|
+
__decorate([
|
|
198
|
+
property()
|
|
199
|
+
], FtBaseFloatingMenu.prototype, "label", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property()
|
|
202
|
+
], FtBaseFloatingMenu.prototype, "tooltipPosition", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property()
|
|
205
|
+
], FtBaseFloatingMenu.prototype, "iconVariant", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property()
|
|
208
|
+
], FtBaseFloatingMenu.prototype, "icon", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property()
|
|
211
|
+
], FtBaseFloatingMenu.prototype, "text", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property()
|
|
214
|
+
], FtBaseFloatingMenu.prototype, "horizontalAlignment", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
property()
|
|
217
|
+
], FtBaseFloatingMenu.prototype, "verticalAlignment", void 0);
|
|
218
|
+
__decorate([
|
|
219
|
+
property({ type: Boolean })
|
|
220
|
+
], FtBaseFloatingMenu.prototype, "disabled", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
jsonProperty([])
|
|
223
|
+
], FtBaseFloatingMenu.prototype, "closeMenuMatchers", void 0);
|
|
224
|
+
export { FtBaseFloatingMenu };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
2
|
+
import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
|
|
3
|
+
export type FtHorizontalAlignment = "left" | "right" | "center";
|
|
4
|
+
export type FtVerticalAlignment = "bottom" | "top";
|
|
5
|
+
export interface FtBaseFloatingMenuProperties {
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
iconVariant?: FtIconVariants;
|
|
8
|
+
icon?: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
tooltipPosition?: Position;
|
|
11
|
+
text?: string;
|
|
12
|
+
horizontalAlignment?: FtHorizontalAlignment;
|
|
13
|
+
verticalAlignment?: FtVerticalAlignment;
|
|
14
|
+
closeMenuMatchers?: string[];
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,38 +1,7 @@
|
|
|
1
|
-
import { ElementDefinitionsMap
|
|
2
|
-
import { FtFloatingMenuProperties
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { PropertyValues } from "lit/development";
|
|
6
|
-
export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
|
|
7
|
-
constructor();
|
|
8
|
-
}
|
|
9
|
-
export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMenuProperties {
|
|
1
|
+
import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { FtFloatingMenuProperties } from "./ft-floating-menu.properties";
|
|
3
|
+
import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
|
|
4
|
+
export declare class FtFloatingMenu extends FtBaseFloatingMenu implements FtFloatingMenuProperties {
|
|
10
5
|
static elementDefinitions: ElementDefinitionsMap;
|
|
11
6
|
static styles: import("lit").CSSResult;
|
|
12
|
-
private menuOpen;
|
|
13
|
-
forceMenuOpen: boolean;
|
|
14
|
-
private container;
|
|
15
|
-
private menuWrapper;
|
|
16
|
-
private menuContent;
|
|
17
|
-
private actionButton;
|
|
18
|
-
label?: string;
|
|
19
|
-
tooltipPosition?: Position;
|
|
20
|
-
iconVariant: FtIconVariants;
|
|
21
|
-
icon: string;
|
|
22
|
-
text?: string;
|
|
23
|
-
horizontalAlignment: FtHorizontalAlignment;
|
|
24
|
-
verticalAlignment: FtVerticalAlignment;
|
|
25
|
-
disabled: boolean;
|
|
26
|
-
closeMenuMatchers: string[];
|
|
27
|
-
protected render(): import("lit-html").TemplateResult<1>;
|
|
28
|
-
private onClick;
|
|
29
|
-
private onClickItem;
|
|
30
|
-
private hideOptions;
|
|
31
|
-
private closeMenu;
|
|
32
|
-
private onCloseEvent;
|
|
33
|
-
private onContentClick;
|
|
34
|
-
disconnectedCallback(): void;
|
|
35
|
-
protected contentAvailableCallback(props: PropertyValues): void;
|
|
36
|
-
private positionMenuWrapper;
|
|
37
|
-
private correctOutOfWindowPixels;
|
|
38
7
|
}
|
|
@@ -1,199 +1,10 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { html } from "lit";
|
|
8
|
-
import { property, query, state } from "lit/decorators.js";
|
|
9
|
-
import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
|
|
10
1
|
import { styles } from "./ft-floating-menu.css";
|
|
11
2
|
import { FtButton } from "@fluid-topics/ft-button";
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
|
|
15
|
-
export class FloatingMenuCloseEvent extends CustomEvent {
|
|
16
|
-
constructor() {
|
|
17
|
-
super("close-ft-floating-menu");
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
class FtFloatingMenu extends FtLitElement {
|
|
21
|
-
constructor() {
|
|
22
|
-
super(...arguments);
|
|
23
|
-
this.menuOpen = false;
|
|
24
|
-
this.forceMenuOpen = false;
|
|
25
|
-
this.iconVariant = FtIconVariants.fluid_topics;
|
|
26
|
-
this.icon = "SHORTCUT_MENU";
|
|
27
|
-
this.horizontalAlignment = "left";
|
|
28
|
-
this.verticalAlignment = "bottom";
|
|
29
|
-
this.disabled = false;
|
|
30
|
-
this.closeMenuMatchers = [];
|
|
31
|
-
this.hideOptions = (e) => {
|
|
32
|
-
this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
|
|
33
|
-
if (!this.menuOpen) {
|
|
34
|
-
document.removeEventListener("click", this.hideOptions);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
render() {
|
|
39
|
-
const classes = {
|
|
40
|
-
"ft-floating-menu": true,
|
|
41
|
-
"ft-floating-menu--open": this.forceMenuOpen || this.menuOpen,
|
|
42
|
-
["ft-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
|
|
43
|
-
["ft-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
|
|
44
|
-
};
|
|
45
|
-
return html `
|
|
46
|
-
<div class="${classMap(classes)}">
|
|
47
|
-
<ft-button id="actions-button"
|
|
48
|
-
part="button"
|
|
49
|
-
dense round
|
|
50
|
-
icon="${this.icon}"
|
|
51
|
-
.iconVariant=${this.iconVariant}
|
|
52
|
-
.label=${this.label}
|
|
53
|
-
.tooltipPosition=${this.tooltipPosition}
|
|
54
|
-
?disabled=${this.disabled}
|
|
55
|
-
@click=${this.onClick}
|
|
56
|
-
aria-controls="ft-floating-menu-options"
|
|
57
|
-
aria-expanded="${this.forceMenuOpen || this.menuOpen}">
|
|
58
|
-
${this.text}
|
|
59
|
-
</ft-button>
|
|
60
|
-
<div class="ft-floating-menu--wrapper">
|
|
61
|
-
<div id="ft-floating-menu-options"
|
|
62
|
-
class="ft-floating-menu--options"
|
|
63
|
-
part="options"
|
|
64
|
-
@select="${this.onClickItem}">
|
|
65
|
-
<slot @click=${this.onContentClick}
|
|
66
|
-
@close-ft-floating-menu=${this.onCloseEvent}
|
|
67
|
-
></slot>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
`;
|
|
72
|
-
}
|
|
73
|
-
onClick() {
|
|
74
|
-
this.menuOpen = !this.menuOpen;
|
|
75
|
-
setTimeout(() => document.addEventListener("click", this.hideOptions));
|
|
76
|
-
}
|
|
77
|
-
onClickItem() {
|
|
78
|
-
this.closeMenu();
|
|
79
|
-
}
|
|
80
|
-
closeMenu() {
|
|
81
|
-
this.menuOpen = false;
|
|
82
|
-
}
|
|
83
|
-
onCloseEvent(e) {
|
|
84
|
-
e.stopPropagation();
|
|
85
|
-
this.closeMenu();
|
|
86
|
-
}
|
|
87
|
-
onContentClick(e) {
|
|
88
|
-
if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
|
|
89
|
-
this.closeMenu();
|
|
90
|
-
e.stopPropagation();
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
disconnectedCallback() {
|
|
94
|
-
super.disconnectedCallback();
|
|
95
|
-
document.removeEventListener("click", this.hideOptions);
|
|
96
|
-
}
|
|
97
|
-
contentAvailableCallback(props) {
|
|
98
|
-
super.contentAvailableCallback(props);
|
|
99
|
-
if (["menuOpen"].some(p => props.has(p)) && this.menuOpen) {
|
|
100
|
-
this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned");
|
|
101
|
-
this.positionMenuWrapper();
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
positionMenuWrapper() {
|
|
105
|
-
const menuWidth = this.menuContent.offsetWidth;
|
|
106
|
-
const menuHeight = this.menuContent.offsetHeight;
|
|
107
|
-
const buttonWidth = this.actionButton.offsetWidth;
|
|
108
|
-
const buttonHeight = this.actionButton.offsetHeight;
|
|
109
|
-
let left = 0;
|
|
110
|
-
let top = 0;
|
|
111
|
-
this.menuWrapper.style.left = "0";
|
|
112
|
-
this.menuWrapper.style.top = "0";
|
|
113
|
-
switch (this.horizontalAlignment) {
|
|
114
|
-
case "left":
|
|
115
|
-
left = this.actionButton.offsetLeft - this.menuWrapper.offsetLeft;
|
|
116
|
-
break;
|
|
117
|
-
case "right":
|
|
118
|
-
left = this.actionButton.offsetLeft + buttonWidth - menuWidth - this.menuWrapper.offsetLeft;
|
|
119
|
-
break;
|
|
120
|
-
case "center":
|
|
121
|
-
left = this.actionButton.offsetLeft + (buttonWidth / 2) - (menuWidth / 2) - this.menuWrapper.offsetLeft;
|
|
122
|
-
break;
|
|
123
|
-
}
|
|
124
|
-
switch (this.verticalAlignment) {
|
|
125
|
-
case "bottom":
|
|
126
|
-
top = this.actionButton.offsetTop + buttonHeight + 4 - this.menuWrapper.offsetTop;
|
|
127
|
-
break;
|
|
128
|
-
case "top":
|
|
129
|
-
top = this.actionButton.offsetTop - menuHeight - 4 - this.menuWrapper.offsetTop;
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
const style = this.menuWrapper.style;
|
|
133
|
-
style.left = left + "px";
|
|
134
|
-
style.top = top + "px";
|
|
135
|
-
const boundingClientRect = this.menuWrapper.getBoundingClientRect();
|
|
136
|
-
let leftOutOfWindowPixels = -boundingClientRect.x;
|
|
137
|
-
let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
|
|
138
|
-
style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
|
|
139
|
-
let topOutOfWindowPixels = -boundingClientRect.y;
|
|
140
|
-
let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
|
|
141
|
-
style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
|
|
142
|
-
this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
|
|
143
|
-
}
|
|
144
|
-
correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
|
|
145
|
-
return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
|
|
146
|
-
}
|
|
3
|
+
import { FtBaseFloatingMenu } from "./ft-base-floating-menu";
|
|
4
|
+
class FtFloatingMenu extends FtBaseFloatingMenu {
|
|
147
5
|
}
|
|
148
6
|
FtFloatingMenu.elementDefinitions = {
|
|
149
|
-
"ft-button": FtButton,
|
|
150
|
-
"ft-floating-menu-item": FtFloatingMenuItem,
|
|
7
|
+
"ft-or-ftds-button": FtButton,
|
|
151
8
|
};
|
|
152
|
-
// language=CSS
|
|
153
9
|
FtFloatingMenu.styles = styles;
|
|
154
|
-
__decorate([
|
|
155
|
-
state()
|
|
156
|
-
], FtFloatingMenu.prototype, "menuOpen", void 0);
|
|
157
|
-
__decorate([
|
|
158
|
-
state()
|
|
159
|
-
], FtFloatingMenu.prototype, "forceMenuOpen", void 0);
|
|
160
|
-
__decorate([
|
|
161
|
-
query(".ft-floating-menu")
|
|
162
|
-
], FtFloatingMenu.prototype, "container", void 0);
|
|
163
|
-
__decorate([
|
|
164
|
-
query(".ft-floating-menu--wrapper")
|
|
165
|
-
], FtFloatingMenu.prototype, "menuWrapper", void 0);
|
|
166
|
-
__decorate([
|
|
167
|
-
query("#ft-floating-menu-options")
|
|
168
|
-
], FtFloatingMenu.prototype, "menuContent", void 0);
|
|
169
|
-
__decorate([
|
|
170
|
-
query("#actions-button")
|
|
171
|
-
], FtFloatingMenu.prototype, "actionButton", void 0);
|
|
172
|
-
__decorate([
|
|
173
|
-
property()
|
|
174
|
-
], FtFloatingMenu.prototype, "label", void 0);
|
|
175
|
-
__decorate([
|
|
176
|
-
property()
|
|
177
|
-
], FtFloatingMenu.prototype, "tooltipPosition", void 0);
|
|
178
|
-
__decorate([
|
|
179
|
-
property()
|
|
180
|
-
], FtFloatingMenu.prototype, "iconVariant", void 0);
|
|
181
|
-
__decorate([
|
|
182
|
-
property()
|
|
183
|
-
], FtFloatingMenu.prototype, "icon", void 0);
|
|
184
|
-
__decorate([
|
|
185
|
-
property()
|
|
186
|
-
], FtFloatingMenu.prototype, "text", void 0);
|
|
187
|
-
__decorate([
|
|
188
|
-
property()
|
|
189
|
-
], FtFloatingMenu.prototype, "horizontalAlignment", void 0);
|
|
190
|
-
__decorate([
|
|
191
|
-
property()
|
|
192
|
-
], FtFloatingMenu.prototype, "verticalAlignment", void 0);
|
|
193
|
-
__decorate([
|
|
194
|
-
property({ type: Boolean })
|
|
195
|
-
], FtFloatingMenu.prototype, "disabled", void 0);
|
|
196
|
-
__decorate([
|
|
197
|
-
jsonProperty([])
|
|
198
|
-
], FtFloatingMenu.prototype, "closeMenuMatchers", void 0);
|
|
199
10
|
export { FtFloatingMenu };
|