140 lines
3.2 KiB
TypeScript
140 lines
3.2 KiB
TypeScript
import * as plugins from './plugins.js';
|
|
import {
|
|
customElement,
|
|
html,
|
|
DeesElement,
|
|
property,
|
|
TemplateResult,
|
|
cssManager,
|
|
css,
|
|
unsafeCSS,
|
|
} from '@designestate/dees-element';
|
|
|
|
import * as domtools from '@designestate/dees-domtools';
|
|
import { DeesWindowLayer } from './dees-windowlayer.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-contextmenu': DeesContextmenu;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-contextmenu')
|
|
export class DeesContextmenu extends DeesElement {
|
|
// DEMO
|
|
public static demo = () => html`
|
|
<style>
|
|
.withMargin {
|
|
display: block;
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
<dees-button @click=${(eventArg) => {
|
|
DeesContextmenu.openContextMenuWithOptions(eventArg, []);
|
|
}}>Hello</dees-button>
|
|
<dees-contextmenu class="withMargin"></dees-contextmenu>
|
|
<dees-contextmenu
|
|
class="withMargin"
|
|
.menuItems=${[
|
|
{
|
|
name: 'copy',
|
|
iconName: 'copySolid',
|
|
action: async () => {},
|
|
},
|
|
{
|
|
name: 'edit',
|
|
iconName: 'penToSquare',
|
|
action: async () => {},
|
|
},{
|
|
name: 'paste',
|
|
iconName: 'pasteSolid',
|
|
action: async () => {},
|
|
},
|
|
] as plugins.tsclass.website.IMenuItem[]}
|
|
></dees-contextmenu>
|
|
`;
|
|
|
|
// STATIC
|
|
public static openContextMenuWithOptions(eventArg, contextOptions: plugins.tsclass.website.IMenuItem[]) {
|
|
const contextMenu = new DeesContextmenu();
|
|
contextMenu.style.position = 'absolute';
|
|
contextMenu;
|
|
const windowLayer = new DeesWindowLayer();
|
|
windowLayer.append(contextMenu);
|
|
document.body.append(windowLayer);
|
|
}
|
|
|
|
@property({
|
|
type: Array,
|
|
})
|
|
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.mainbox {
|
|
color: ${cssManager.bdTheme('#222', '#ccc')};
|
|
font-size: 14px;
|
|
width: 200px;
|
|
border: 1px solid #444;
|
|
min-height: 40px;
|
|
border-radius: 3px;
|
|
background: #222;
|
|
box-shadow: 0px 1px 4px #000;
|
|
user-select: none;
|
|
}
|
|
|
|
.mainbox .menuitem {
|
|
padding: 8px;
|
|
}
|
|
|
|
.mainbox .menuitem dees-icon {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
width: 14px;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
.mainbox .menuitem:hover {
|
|
cursor: pointer;
|
|
background: #ffffff10;
|
|
}
|
|
|
|
.mainbox .menuitem:active {
|
|
cursor: pointer;
|
|
background: #ffffff05;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="mainbox">
|
|
${this.menuItems.map((menuItemArg) => {
|
|
return html`
|
|
<div class="menuitem">
|
|
<dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
|
|
>${menuItemArg.name}
|
|
</div>
|
|
`;
|
|
})}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async firstUpdated() {
|
|
if (!this.menuItems || this.menuItems.length === 0) {
|
|
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
|
mainbox.textContent = 'no menu items present';
|
|
}
|
|
}
|
|
}
|