Started work on userlist profile tooltips and context menus.

www/js/utils.js

@@ -34,13 +34,51 @@ class canopyUXUtils{
                 new canopyUXUtils.popup(`<h3>Server Error:</h3><p><br>${err.msg}</p>`);
             });
         }catch(err){
-            console.error("Display Error Error:");
+            console.error("Display Error Body:");
             console.error(body);
             console.error("Display Error Error:");
             console.error(err);
         }
     }
 
+    displayTooltip(event, content, ajaxTooltip, cb, soft = false){
+        //Create the tooltip
+        const tooltip = new canopyUXUtils.tooltip(content, ajaxTooltip, ()=>{
+            //Call mouse move again after ajax load to re-calculate position within context of the new content
+            tooltip.moveToMouse(event);
+            //If we have a callback function
+            if(typeof cb == "function"){
+                //Call async callback
+                cb();
+            }
+        });
+
+        //Move the tooltip with the mouse
+        event.target.addEventListener('mousemove', tooltip.moveToMouse.bind(tooltip));
+
+        //Do intial mouse move
+        tooltip.moveToMouse(event);
+
+        //remove the tooltip on mouseleave
+        event.target.addEventListener('mouseleave', tooltip.remove.bind(tooltip));
+
+        if(soft){
+            //remove the tooltip on context menu open
+            event.target.addEventListener('click', tooltip.remove.bind(tooltip));
+            event.target.addEventListener('contextmenu', tooltip.remove.bind(tooltip));
+        }
+    }
+
+    displayContextMenu(event, title, menuMap){
+        event.preventDefault();
+
+        //Create context menu
+        const contextMenu = new canopyUXUtils.contextMenu(title, menuMap);
+
+        //Move context menu to mouse
+        contextMenu.moveToMouse(event);
+    }
+
 
     //We should really move this over to uxutils along with newrow & newtable functions
     newTableCell(content, firstCol = false){
@@ -174,6 +212,50 @@ class canopyUXUtils{
         }
     }
 
+    static contextMenu = class extends this.tooltip{
+        constructor(title, menuMap){
+            //Call inherited tooltip constructor
+            super('Loading Menu...');
+            //Set tooltip class
+            this.tooltip.classList.add('context-menu');
+
+            //Set title and menu map
+            this.title = title;
+            this.menuMap = menuMap;
+
+            this.constructMenu();
+        }
+
+        constructMenu(){
+            //Clear out tooltip
+            this.tooltip.innerHTML = '';
+
+            //Create menu title
+            const menuTitle = document.createElement('h2');
+            menuTitle.innerHTML = this.title;
+
+            //Append the title to the tooltip
+            this.tooltip.append(menuTitle);
+
+            for(let choice of this.menuMap){
+                //Create button
+                const button = document.createElement('button');
+                button.innerHTML = choice[0];
+
+                //Add event listeners
+                button.addEventListener('click', choice[1]);
+
+                //Append the button to the menu div
+                this.tooltip.appendChild(button);
+            }
+
+            //Create event listener to remove tooltip whenever anything is clicked, inside or out of the menu
+            //Little hacky but we have to do it a bit later to prevent the opening event from closing the menu
+            setTimeout(()=>{document.body.addEventListener('click', this.remove.bind(this));}, 1);
+            setTimeout(()=>{document.body.addEventListener('contextmenu', this.remove.bind(this));}, 1);
+        }
+    }
+
     static popup = class{
         constructor(content, ajaxPopup = false, cb){
             //Define non-popup node values
@@ -326,7 +408,6 @@ class canopyUXUtils{
         }
 
         drag(event){
-
             if(this.dragLock){
                 if(this.leftHandle){
                     //get difference between mouse and right edge of element