From c3df73616f4c1cf77f8c7a4617c4164b0b105ed2 Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Fri, 13 Jan 2023 02:15:30 +0100
Subject: [PATCH] fix(core): update

---
 ts_web/00_commitinfo_data.ts        |  2 +-
 ts_web/elements/dees-contextmenu.ts | 57 +++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 46886b9..13361e7 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.140',
+  version: '1.0.141',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts
index 0af1320..1e9dbae 100644
--- a/ts_web/elements/dees-contextmenu.ts
+++ b/ts_web/elements/dees-contextmenu.ts
@@ -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);
+  }
 }