REFA,FEAT: Contextmenu behaviour

src/component.js

@@ -162,8 +162,8 @@ class Component extends StyleAndScriptStoringComponent {
      * @todo extract into an extra function(allity) provider
      * 
      * @param {Component} component 
-     * @param {Function<HTMLElement|Event> => Sides} getRefPos 
+     * @param {Sides|Function<HTMLElement|Event> => Sides} getRefPos 
-     * @param {null|ExtStorage} [extStore=null] 
+     * @param {ExtStorage} [extStore=null] 
      * @returns {Component}
      */
     contextMenu(component, getRefPos = null, extStore = null) {
@@ -178,60 +178,16 @@ class Component extends StyleAndScriptStoringComponent {
             }
         }
 
-        let cMenuWenity = component.generate();
         this.subscribeOnGenerate(CommonCompelGroups.HAS_CONTEXT_MENU);
 
-        let identifier = cMenuWenity.html.getAttribute("data-autocompel");
+        let identifier = component._compName;
-
-        function hideCMenu(el) {
-            el.setAttribute("hidden", "hidden");
-            el.style.display = "none";
-        }
-
-        function hideOnEscape(event) {
-            if (event.key === "Escape") {
-                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
-                hideCMenu(menu);
-                document.removeEventListener("keyup")
-            }
-        }
-
-
-        function hideOnClickOutsideOfBounds(event) {
-            let menu = document.querySelector(`[data-autocompel="${identifier}"`);
-
-            let area = getEnclosingBounds(menu);
-
-            if (!areXYInArea(area, event.clientX, event.clientY)) {
-                //if (event.target.offsetParent != menu) {
-                hideCMenu(menu);
-                document.removeEventListener("click")
-            }
-        }
 
         this.addEventListener(
             "contextmenu",
-            function (event) {
+            DefaultContextMenu.openContextMenuAction(identifier, getRefPos)
-                event.preventDefault();
-
-                /**
-                 * @type {Sides}
-                 */
-                const pos = getRefPos(event);
-
-                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
-
-                menu.style.left = `${pos.getByIndex(SideDirections.LEFT)}px`;
-                menu.style.top = `${pos.getByIndex(SideDirections.TOP)}px`;
-
-                menu.style["display"] = "block";
-                menu.removeAttribute("hidden");
-                document.addEventListener("click", hideOnClickOutsideOfBounds);
-                document.addEventListener("keyup", hideOnEscape);
-            }
         );
 
-        return this;
+        return this.childContext(component);
     }
 
     /**

src/modifications/contextMenu.js

@@ -0,0 +1,67 @@
+/**
+ * 
+ */
+
+/**
+ * 
+ */
+const DefaultContextMenu = {
+    openContextMenuAction: function (identifier, refPos) {
+        if (!refPos) {
+            refPos = function (event) {
+                return new Sides()
+                    .left(event.pageX)
+                    .top(event.pageY);
+            }
+        }
+
+        return function (event) {
+            event.preventDefault();
+
+            if (refPos instanceof Function) {
+                refPos = refPos(event);
+            }
+
+            let menu = document.querySelector(`[data-autocompel="${identifier}"`);
+
+            menu.style.left = `${refPos.getByIndex(SideDirections.LEFT)}px`;
+            menu.style.top = `${refPos.getByIndex(SideDirections.TOP)}px`;
+
+            toggleElementVisibility(menu, true);
+            toggleElementVisibility(menu);
+
+            document.addEventListener(
+                "click",
+                DefaultContextMenu.hideOnClickOutsideBoundsAction(identifier)
+            );
+            document.addEventListener(
+                "keyup",
+                DefaultContextMenu.hideOnEscapeAction(identifier)
+            );
+        }
+
+    }
+    ,
+    hideOnEscapeAction: function (identifier) {
+        return function (event) {
+            if (event.key === "Escape") {
+                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
+                toggleElementVisibility(menu, true);
+                document.removeEventListener("keyup");
+            }
+        }
+    }
+    ,
+    hideOnClickOutsideBoundsAction: function (identifier) {
+        return function (event) {
+            let menu = document.querySelector(`[data-autocompel="${identifier}"`);
+
+            let area = getEnclosingBounds(menu);
+
+            if (!areXYInArea(area, event.clientX, event.clientY)) {
+                toggleElementVisibility(menu, true);
+                document.removeEventListener("click")
+            }
+        }
+    }
+};