More things work now

frontend/app/services/ContextMenu.js

@@ -0,0 +1,148 @@
+// You should hide the context menu when the element that has the
+// event gets removed
+
+let margin = -3;
+
+let cursorX = 0;
+let cursorY = 0;
+
+let arrowIcon = "icons/iconoir/regular/nav-arrow-right.svg";
+
+import { animate } from 'motion'
+
+function Show(){
+    let contextMenu = document.getElementById('context-menu');
+    contextMenu.style.display = "flex";
+    contextMenu.style.top = (cursorY + margin) + "px";
+    contextMenu.style.left = (cursorX + margin) + "px";
+}
+
+function HideContextMenu(){
+    let contextMenu = document.getElementById('context-menu');
+    contextMenu.style.display = "none";
+}
+
+function PopulateContext(val){
+    let children = [];
+
+    let elementNum = 0;
+    val.forEach(element => {
+        let contextMenuElement = document.createElement('div');
+        contextMenuElement.classList.add("context-menu-element");
+        if(element.action)
+            contextMenuElement.addEventListener("click", element.action);
+        
+        let spanInfo = document.createElement('span');
+        spanInfo.innerHTML = element.name;
+        contextMenuElement.appendChild(spanInfo);
+
+        if(element.icon){
+            let iconContextElement = document.createElement('img');
+            iconContextElement.src = element.icon;
+            contextMenuElement.appendChild(iconContextElement);
+        }
+
+        if(element.context){
+            let iconContextElement = document.createElement('img');
+            iconContextElement.src = arrowIcon;
+            contextMenuElement.appendChild(iconContextElement);
+
+            let childContextMenuElement = document.createElement('div');
+            childContextMenuElement.classList.add("context-menu");
+            childContextMenuElement.style.left = "100%";
+            childContextMenuElement.style.top = "0";
+            childContextMenuElement.style.display = "none";
+    
+            let childChildren = PopulateContext(element.context);
+            childChildren.forEach((child) => childContextMenuElement.appendChild(child));
+    
+            contextMenuElement.addEventListener("mouseenter", () => {
+                childContextMenuElement.style.display = "flex";
+            });
+
+            contextMenuElement.addEventListener("mouseleave", () => {
+                childContextMenuElement.style.display = "none";
+            })
+
+            contextMenuElement.appendChild(childContextMenuElement);
+        }
+
+        children.push(contextMenuElement);
+
+        animate(contextMenuElement, {
+            opacity: [0, 1],
+            translateY: [-20, -2]
+        }, {duration: 0.15}).finished.then(() => {
+
+        });
+        elementNum++;
+    });
+
+    return children;
+}
+
+function PopulateContextMenu(val){
+    let contextMenu = document.getElementById('context-menu');
+    let children = PopulateContext(val);
+
+    contextMenu.replaceChildren();
+    children.forEach((el) => contextMenu.appendChild(el));
+}
+
+function AddContextMenu(element, val, options = {}){
+    element._dr_context = val;
+
+    function show(e){
+        e.preventDefault();
+        PopulateContextMenu(val);
+        Show();
+        if(options.dropdown){
+            let rect = element.getBoundingClientRect();
+            let contextMenu = document.getElementById('context-menu');
+            contextMenu.style.top = rect.bottom + "px";
+            contextMenu.style.left = rect.left + "px";
+        }
+    }
+
+    element.addEventListener('contextmenu', show);
+    if(options.dropdown) element.addEventListener('click', show);
+}
+
+
+
+function UpdateVisibility(){
+    let contextMenu = document.getElementById('context-menu');
+    let element = document.elementFromPoint(cursorX, cursorY);
+    let mustHide = true;
+    while(element){
+        if(element == contextMenu){
+            mustHide = false;
+            break;
+        }
+        element = element.parentElement;
+    }
+    if(mustHide) HideContextMenu();
+}
+
+function SetupContextMenu(){
+    HideContextMenu();
+
+    document.addEventListener('mousemove', (e) => {
+        cursorX = e.clientX;
+        cursorY = e.clientY;
+    });
+
+    document.addEventListener('mousedown', UpdateVisibility);
+}
+
+function ShowContextMenu(val){
+    PopulateContextMenu(val);
+    Show();
+}
+
+export {
+    SetupContextMenu,
+    AddContextMenu,
+    ShowContextMenu,
+    HideContextMenu
+};

frontend/app/services/WindowDefinitions.js

@@ -1,9 +1,13 @@
-import { ClearWindowsWithType, GetFirstWindowId } from './Windows'
+import { ClearWindow, GetFirstWindowId } from './Windows'
 
 /*
 Put here all dragonroll windows
 */
 const defWindows = {
+  example: {
+    title: 'windows.example',
+    component: () => import('~/components/windows/ExampleWindow.vue'),
+  },
   login: {
     title: 'windows.login',
     movable: false,
@@ -18,16 +22,18 @@ const defWindows = {
     title: 'windows.main-menu',
     component: () => import('~/components/windows/MainMenuWindow.vue'),
   },
-  example: {
-    title: 'windows.example',
-    component: () => import('~/components/windows/ExampleWindow.vue'),
-  },
   edit_profile: {
     title: "windows.edit-profile",
     component: () => import('~/components/windows/EditProfileWindow.vue'),
-    close: () => ClearWindowsWithType(GetFirstWindowId('edit_profile')),
+    close: () => ClearWindow({type: 'edit_profile'}),
     movable: true
   },
+  settings: {
+    title: "windows.settings",
+    component: () => import('~/components/windows/SettingsWindow.vue'),
+    close: () => ClearWindow({type: 'settings'}),
+    movable: true
+  }
 }
 
 export {

frontend/app/services/Windows.js

@@ -23,7 +23,6 @@ let currentId = 0;
 function SetupHandle(id, handle) {
 
     // Update window info with handle info
-    console.log(id);
     let win = GetWindowWithId(id);
 
     let currentWindowId = "window-wrapper-" + id;
@@ -189,7 +188,6 @@ function GetPosition(id) {
 }
 
 function ResetPosition(id, pos) {
-    console.log("The id: ", id)
     let win = GetWindowWithId(id);
     let data = { x: win.x, y: win.y };
 
@@ -202,9 +200,6 @@ function ResetPosition(id, pos) {
 
 
 function CreateWindow(type, data = {}) {
-    console.log("Creating window")
-    console.log(windows.value);
-
     let finalData = { ...{ type, id: currentId }, ...defWindows[type], ...data }
     currentId++;
     
@@ -217,25 +212,19 @@ function CreateWindow(type, data = {}) {
     }
     if (!contains) {
         windows.value.push(finalData);
-    
-        console.log(windows.value)
         setTimeout(() => {
-            SetOnTop(finalData.id);
             if (finalData.create) finalData.create();
         }, 0);
     }
 }
 
 function CreateChildWindow(parentId, type, data = {}) {
-    console.log("Creating child window")
-    console.log(parentId, type, data);
-    let finalData = { ...{ type }, ...defWindows[type], ...data }
-
+    const newId = currentId;
     let parent = GetWindowWithId(parentId);
-    console.log(parent);
-    if (parent.children) parent.children.push(finalData.type);
-    else parent.children = [finalData.type];
+    if (parent.children) parent.children.push(newId); // We will create the child window right now
+    else parent.children = [newId];
     CreateWindow(type, data);
+    console.log(windows.value);
 }
 
 function GetFirstWindowId(type) {
@@ -250,26 +239,29 @@ function ClearAll() {
     });
 }
 
-function ClearWindows(data) {
-    for (let i = 0; i < windows.value.length; i++) {
-        ClearWindow(windows.value[i].type);
-    }
-    // reload.value += 1;
-}
-
-function ClearWindowsWithType(type) {
-    const index = windows.value.findIndex(w => w.type === type);
-    if (index !== -1) ClearWindow(windows.value[index].id)
-    // reload.value += 1;
-}
-
-function ClearWindow(id) {
+function clearWindowById(id){
     let win = GetWindowWithId(id);
-    console.log(win);
     if (!win) return;
-    if (win.children) for (let i = 0; i < win.children.length; i++) ClearWindow(win.children[i].id);
-    const index = windows.value.findIndex(w => w.type === id)
+    if (win.children) for (let i = 0; i < win.children.length; i++) clearWindowById(win.children[i]);
+    const index = windows.value.findIndex(w => w.id === id)
     if (index !== -1) windows.value.splice(index, 1)
+}
+
+function ClearWindow(selector) {
+    if(selector.type !== undefined) {
+        const type = selector.type;
+        for(let i = 0; i < windows.value.length; i++) {
+            if(windows.value[i].type == type) {
+                clearWindowById(windows.value[i].id);
+                break;
+            }
+        }
+    }
+    if(selector.id !== undefined) {
+        const id = selector.id;
+        clearWindowById(id);
+    }
+    
     // reload.value += 1;
 }
 
@@ -300,6 +292,13 @@ function SetOnTop(id) {
     } catch(e) {}
 }
 
+function Top(element) {
+    try {
+        currentIndex += 1;
+        element.value.style.zIndex = currentIndex;
+    } catch(e) {}
+}
+
 export {
     windows,
     SetupHandle,
@@ -311,7 +310,6 @@ export {
     SetMovable,
     ResetPosition,
     WindowMap,
-    ClearWindows,
     CreateWindow,
     CreateChildWindow,
     GetFirstWindowId,
@@ -320,7 +318,7 @@ export {
     SaveWindowPos,
     GetPosition,
     ClearWindow,
-    ClearWindowsWithType,
     ClearAll,
+    Top,
     getComponent
 }