feat(elements): add reusable context menu element for recipient role selection
This commit is contained in:
@@ -0,0 +1,234 @@
|
||||
import { DeesElement, property, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
|
||||
|
||||
export interface ISdigContextMenuAction {
|
||||
id: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
selected?: boolean;
|
||||
disabled?: boolean;
|
||||
danger?: boolean;
|
||||
}
|
||||
|
||||
export interface ISdigContextMenuActionEventDetail {
|
||||
id: string;
|
||||
action: ISdigContextMenuAction;
|
||||
}
|
||||
|
||||
type TMenuPosition = {
|
||||
x: number;
|
||||
y: number;
|
||||
ready: boolean;
|
||||
};
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sdig-contextmenu': SdigContextmenu;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sdig-contextmenu')
|
||||
export class SdigContextmenu extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="position: relative; min-height: 260px; padding: 24px; --bg-card: hsl(0 0% 7%); --bg-input: hsl(0 0% 9%); --border: hsl(0 0% 14.9%); --border-subtle: hsl(0 0% 11%); --text: hsl(0 0% 98%); --text-sec: hsl(0 0% 63.9%); --text-muted: hsl(0 0% 48%); --hover: rgba(255,255,255,0.06); --error: #ef4444;">
|
||||
<sdig-contextmenu
|
||||
.anchorX=${80}
|
||||
.anchorY=${70}
|
||||
.title=${'Recipient'}
|
||||
.actions=${[
|
||||
{ id: 'signer', label: 'Needs signature', selected: true },
|
||||
{ id: 'copy', label: 'Final copy only' },
|
||||
{ id: 'updates', label: 'Every step update' },
|
||||
]}
|
||||
></sdig-contextmenu>
|
||||
</div>
|
||||
`;
|
||||
public static demoGroups = ['Signature Digital Primitives'];
|
||||
|
||||
@property({ type: Number }) public accessor anchorX: number = 0;
|
||||
@property({ type: Number }) public accessor anchorY: number = 0;
|
||||
@property({ type: String }) public accessor title: string = '';
|
||||
@property({ attribute: false }) public accessor actions: ISdigContextMenuAction[] = [];
|
||||
@state() private accessor position: TMenuPosition = { x: 0, y: 0, ready: false };
|
||||
|
||||
private positionUpdateFrame: number | null = null;
|
||||
|
||||
public static styles = css`
|
||||
:host { display: contents; }
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
min-width: 190px;
|
||||
max-width: min(280px, calc(100vw - 16px));
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border, hsl(0 0% 14.9%));
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card, hsl(0 0% 7%));
|
||||
color: var(--text, hsl(0 0% 98%));
|
||||
box-shadow: 0 16px 42px rgba(0,0,0,0.36);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 7px 8px;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px solid var(--border-subtle, hsl(0 0% 11%));
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-sec, hsl(0 0% 63.9%));
|
||||
}
|
||||
|
||||
.action {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
padding: 8px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-sec, hsl(0 0% 63.9%));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action:hover { background: var(--hover, rgba(255,255,255,0.06)); color: var(--text, hsl(0 0% 98%)); }
|
||||
.action.danger { color: var(--error, #ef4444); }
|
||||
.action[disabled] { opacity: 0.45; cursor: not-allowed; }
|
||||
.action[disabled]:hover { background: transparent; color: var(--text-sec, hsl(0 0% 63.9%)); }
|
||||
|
||||
.action-mark {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-mark.selected::before {
|
||||
content: '';
|
||||
width: 7px;
|
||||
height: 4px;
|
||||
border-left: 1.5px solid currentColor;
|
||||
border-bottom: 1.5px solid currentColor;
|
||||
transform: rotate(-45deg) translate(1px, -1px);
|
||||
}
|
||||
|
||||
.action-copy {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.action-description {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-muted, hsl(0 0% 48%));
|
||||
font-size: 10px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
`;
|
||||
|
||||
public connectedCallback = async () => {
|
||||
await super.connectedCallback();
|
||||
window.addEventListener('resize', this.queuePositionUpdate);
|
||||
};
|
||||
|
||||
public disconnectedCallback = async () => {
|
||||
window.removeEventListener('resize', this.queuePositionUpdate);
|
||||
if (this.positionUpdateFrame !== null) {
|
||||
globalThis.cancelAnimationFrame(this.positionUpdateFrame);
|
||||
this.positionUpdateFrame = null;
|
||||
}
|
||||
await super.disconnectedCallback();
|
||||
};
|
||||
|
||||
public updated() {
|
||||
this.queuePositionUpdate();
|
||||
}
|
||||
|
||||
private queuePositionUpdate = () => {
|
||||
if (this.positionUpdateFrame !== null) return;
|
||||
this.positionUpdateFrame = globalThis.requestAnimationFrame(() => {
|
||||
this.positionUpdateFrame = null;
|
||||
this.positionMenu();
|
||||
});
|
||||
};
|
||||
|
||||
private positionMenu() {
|
||||
const menu = this.shadowRoot?.querySelector('.menu') as HTMLElement | null;
|
||||
if (!menu) return;
|
||||
|
||||
const margin = 8;
|
||||
const gap = 4;
|
||||
const rect = menu.getBoundingClientRect();
|
||||
const viewportWidth = globalThis.innerWidth;
|
||||
const viewportHeight = globalThis.innerHeight;
|
||||
const spaceRight = viewportWidth - this.anchorX - margin;
|
||||
const spaceLeft = this.anchorX - margin;
|
||||
const spaceBelow = viewportHeight - this.anchorY - margin;
|
||||
const spaceAbove = this.anchorY - margin;
|
||||
let x = this.anchorX + gap;
|
||||
let y = this.anchorY + gap;
|
||||
|
||||
if (spaceRight < rect.width + gap && spaceLeft > spaceRight) {
|
||||
x = this.anchorX - rect.width - gap;
|
||||
}
|
||||
|
||||
if (spaceBelow < rect.height + gap && spaceAbove > spaceBelow) {
|
||||
y = this.anchorY - rect.height - gap;
|
||||
}
|
||||
|
||||
const maxX = Math.max(margin, viewportWidth - rect.width - margin);
|
||||
const maxY = Math.max(margin, viewportHeight - rect.height - margin);
|
||||
const nextPosition = {
|
||||
x: Math.round(Math.max(margin, Math.min(maxX, x))),
|
||||
y: Math.round(Math.max(margin, Math.min(maxY, y))),
|
||||
ready: true,
|
||||
};
|
||||
|
||||
if (this.position.x !== nextPosition.x || this.position.y !== nextPosition.y || this.position.ready !== nextPosition.ready) {
|
||||
this.position = nextPosition;
|
||||
}
|
||||
}
|
||||
|
||||
private selectAction(action: ISdigContextMenuAction) {
|
||||
if (action.disabled) return;
|
||||
this.dispatchEvent(new CustomEvent<ISdigContextMenuActionEventDetail>('contextmenu-action', {
|
||||
detail: { id: action.id, action },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const x = this.position.ready ? this.position.x : this.anchorX;
|
||||
const y = this.position.ready ? this.position.y : this.anchorY;
|
||||
return html`
|
||||
<div class="menu" style="left: ${x}px; top: ${y}px; visibility: ${this.position.ready ? 'visible' : 'hidden'};" @click=${(event: Event) => event.stopPropagation()} @contextmenu=${(event: Event) => event.preventDefault()}>
|
||||
${this.title ? html`<div class="title">${this.title}</div>` : ''}
|
||||
${this.actions.map((action) => html`
|
||||
<button class="action ${action.danger ? 'danger' : ''}" ?disabled=${action.disabled} @click=${() => this.selectAction(action)}>
|
||||
<span class="action-mark ${action.selected ? 'selected' : ''}"></span>
|
||||
<span class="action-copy">
|
||||
<span class="action-label">${action.label}</span>
|
||||
${action.description ? html`<span class="action-description">${action.description}</span>` : ''}
|
||||
</span>
|
||||
</button>
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user