fix(core): update

This commit is contained in:
Philipp Kunz 2023-01-13 02:15:30 +01:00
parent a03b095d14
commit c3df73616f
2 changed files with 50 additions and 9 deletions

View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@designestate/dees-catalog',
version: '1.0.140',
version: '1.0.141',
description: 'website for lossless.com'
}

View File

@ -29,8 +29,29 @@ export class DeesContextmenu extends DeesElement {
margin: 20px;
}
</style>
<dees-button @click=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, []);
<dees-button @contextmenu=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'copy',
iconName: 'copySolid',
action: async () => {
return null;
},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
]);
}}>Hello</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
@ -55,13 +76,20 @@ export class DeesContextmenu extends DeesElement {
`;
// STATIC
public static openContextMenuWithOptions(eventArg, contextOptions: plugins.tsclass.website.IMenuItem[]) {
public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
eventArg.preventDefault();
const contextMenu = new DeesContextmenu();
contextMenu.style.position = 'absolute';
contextMenu;
const windowLayer = new DeesWindowLayer();
windowLayer.append(contextMenu);
document.body.append(windowLayer);
contextMenu.style.top = `${eventArg.clientY.toString()}px`;
contextMenu.style.left = `${eventArg.clientX.toString()}px`;
contextMenu.style.opacity = '0';
contextMenu.style.transform = 'scale(0.95,0.95)';
contextMenu.style.transformOrigin = 'top left';
contextMenu.menuItems = menuItemsArg;
document.body.append(contextMenu);
await domtools.plugins.smartdelay.delayFor(0);
contextMenu.style.opacity = '1';
contextMenu.style.transform = 'scale(1,1)';
}
@property({
@ -78,6 +106,7 @@ export class DeesContextmenu extends DeesElement {
css`
:host {
display: block;
transition: all 0.1s;
}
.mainbox {
@ -120,7 +149,7 @@ export class DeesContextmenu extends DeesElement {
<div class="mainbox">
${this.menuItems.map((menuItemArg) => {
return html`
<div class="menuitem">
<div class="menuitem" @click=${() => this.handleClick(menuItemArg)}>
<dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
>${menuItemArg.name}
</div>
@ -136,4 +165,16 @@ export class DeesContextmenu extends DeesElement {
mainbox.textContent = 'no menu items present';
}
}
public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
menuItem.action();
await this.destroy();
}
public async destroy() {
this.style.opacity = '0';
this.style.transform = 'scale(0.95,0,95)';
await domtools.plugins.smartdelay.delayFor(100);
this.parentElement.removeChild(this);
}
}