dees-catalog/ts_web/elements/dees-contextmenu.ts

140 lines
3.2 KiB
TypeScript
Raw Normal View History

2023-01-12 18:19:31 +00:00
import * as plugins from './plugins.js';
2023-01-12 17:14:59 +00:00
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
2023-01-12 23:30:56 +00:00
import { DeesWindowLayer } from './dees-windowlayer.js';
2023-01-12 17:14:59 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-contextmenu': DeesContextmenu;
}
}
@customElement('dees-contextmenu')
export class DeesContextmenu extends DeesElement {
2023-01-12 23:30:56 +00:00
// DEMO
2023-01-12 17:14:59 +00:00
public static demo = () => html`
2023-01-12 23:30:56 +00:00
<style>
.withMargin {
display: block;
margin: 20px;
2023-01-12 18:19:31 +00:00
}
2023-01-12 23:30:56 +00:00
</style>
<dees-button @click=${() => {
DeesContextmenu.openContextMenuWithOptions();
}}>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>
2023-01-12 17:14:59 +00:00
`;
2023-01-12 23:30:56 +00:00
// 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[] = [];
2023-01-12 17:14:59 +00:00
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
}
.mainbox {
2023-01-12 23:30:56 +00:00
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);
2023-01-12 17:14:59 +00:00
}
2023-01-12 23:30:56 +00:00
.mainbox .menuitem:hover {
cursor: pointer;
background: #ffffff10;
}
.mainbox .menuitem:active {
cursor: pointer;
background: #ffffff05;
}
2023-01-12 17:14:59 +00:00
`,
];
public render(): TemplateResult {
return html`
<div class="mainbox">
2023-01-12 23:30:56 +00:00
${this.menuItems.map((menuItemArg) => {
return html`
<div class="menuitem">
<dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
>${menuItemArg.name}
</div>
`;
})}
2023-01-12 17:14:59 +00:00
</div>
`;
}
public async firstUpdated() {
2023-01-12 23:30:56 +00:00
if (!this.menuItems || this.menuItems.length === 0) {
const mainbox = this.shadowRoot.querySelector('.mainbox');
mainbox.textContent = 'no menu items present';
2023-01-12 17:14:59 +00:00
}
}
}