From 51c65679058cad1f28cbcff514d796c4be3c7d0f Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ysainthilaire@hotmail.com>
Date: Mon, 23 Dec 2019 15:46:00 -0800
Subject: [PATCH] Fixed context menus in web application.

---
 package.json             |  2 +-
 public/styles/style.css  |  2 --
 views/default.handlebars | 33 +++++++++++++++++----------------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 6334e90d..a627f4ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "meshcentral",
-  "version": "0.4.6-k",
+  "version": "0.4.6-l",
   "keywords": [
     "Remote Management",
     "Intel AMT",
diff --git a/public/styles/style.css b/public/styles/style.css
index f891012e..b23f6808 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -1840,8 +1840,6 @@ a {
     /*border-radius: 4px;*/
     display: none;
     position: absolute;
-    top: 0;
-    left: 0;
     list-style: none;
     margin: 0;
     padding: 5px;
diff --git a/views/default.handlebars b/views/default.handlebars
index da2f5c8c..325211e6 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -1170,7 +1170,7 @@
             document.onkeyup = ondockeyup;
             //window.addEventListener('focus', ondocfocus, false);
             window.addEventListener('blur', ondocblur, false);
-            window.onresize = function () { masterUpdate(512); }
+            window.onresize = function () { hideContextMenu(); masterUpdate(512); }
             setTimeout(function() { masterUpdate(512); }, 200);
 
             // Connect to the mesh server
@@ -3691,35 +3691,26 @@
             if (elem && elem != null && elem.id == 'connectbutton2' && currentNode && currentNode.agent && (currentNode.agent.id > 0) && (currentNode.agent.id < 5)) {
                 contextelement = elem;
                 var contextmenudiv = document.getElementById('termShellContextMenu');
-                contextmenudiv.style.left = event.pageX + 'px';
-                contextmenudiv.style.top = event.pageY + 'px';
-                contextmenudiv.style.display = 'block';
+                showContextMenuDiv(contextmenudiv, event.pageX, event.pageY);
             } else if (elem && elem != null && elem.id == 'connectbutton2' && currentNode && currentNode.agent && (currentNode.agent.id > 4)) {
                 contextelement = elem;
                 var contextmenudiv = document.getElementById('termShellContextMenuLinux');
-                contextmenudiv.style.left = event.pageX + 'px';
-                contextmenudiv.style.top = event.pageY + 'px';
-                contextmenudiv.style.display = 'block';
+                showContextMenuDiv(contextmenudiv, event.pageX, event.pageY);
             } else if (elem && elem != null && elem.id == 'MxMESH') {
                 contextelement = elem;
                 var contextmenudiv = document.getElementById('meshContextMenu');
-                contextmenudiv.style.left = event.pageX + 'px';
-                contextmenudiv.style.top = event.pageY + 'px';
-                contextmenudiv.style.display = 'block';
+                showContextMenuDiv(contextmenudiv, event.pageX, event.pageY);
                 /*} else if (elem && elem != null && elem.classList.contains('pluginTab')) {
                     contextelement = elem;
                     var contextmenudiv = document.getElementById('pluginTabContextMenu');
-                    contextmenudiv.style.left = event.pageX + 'px';
-                    contextmenudiv.style.top = event.pageY + 'px';
-                    contextmenudiv.style.display = 'block';*/
+                    showContextMenuDiv(contextmenudiv, event.pageX, event.pageY);
+                */
             } else {
                 while (elem && elem != null && elem.id != 'devs') { elem = elem.parentElement; }
                 if (!elem || elem == null) return true;
                 contextelement = elem;
                 var contextmenudiv = document.getElementById('contextMenu');
-                contextmenudiv.style.left = event.pageX + 'px';
-                contextmenudiv.style.top = event.pageY + 'px';
-                contextmenudiv.style.display = 'block';
+                showContextMenuDiv(contextmenudiv, event.pageX, event.pageY);
 
                 // Get the node and set the menu options
                 var nodeid = contextelement.children[1].attributes.onclick.value;
@@ -3743,6 +3734,16 @@
             return haltEvent(event);
         }
 
+        function showContextMenuDiv(element, x, y) {
+            var clientRect = document.documentElement.getBoundingClientRect();
+            var docHeight = clientRect.height;
+            var docWidth = clientRect.width;
+            element.style.left = element.style.right = element.style.top = element.style.bottom = null;
+            if (x > (docWidth / 2)) { element.style.right = (docWidth - event.pageX) + 'px'; } else { element.style.left = event.pageX + 'px'; }
+            if (y > (docHeight / 2)) { element.style.bottom = (docHeight - event.pageY) + 'px'; } else { element.style.top = event.pageY + 'px'; }
+            element.style.display = 'block';
+        }
+
         function cmaction(action,event) {
             var nodeid = contextelement.children[1].attributes.onclick.value;
             nodeid = nodeid.substring(12, nodeid.length - 18);