AGENDA2 work mostly - started work on application menu and taskbar in

general, implemented destroyWindow and moveToFront, expanded upon creating html for applications and such, etc etc etc
2025-04-06 07:24:46 -05:00 · 2025-04-06 07:24:46 -05:00 · 668ced0356
parent 65663ca23b
commit 668ced0356
5 changed files with 328 additions and 76 deletions
--- a/root/hypervisor/installations/main/bootloader/os/index.php
+++ b/root/hypervisor/installations/main/bootloader/os/index.php
@ -12,15 +12,25 @@
    <head>
        <link rel="stylesheet" href="<?= $wm ?>/css/desktop.css">
        <link rel="stylesheet" href="<?= $wm ?>/css/mobile.css">
+        <link rel="stylesheet" href="<?= $wm ?>/css/standard.css">
+        <title>DremJS v0.3.0</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="dremjs">
            <div id="taskbar">
+                <div>
+                    <div onclick="toggleAppMenu();" class="appMenu" id="appMenu">
+                        
+                    </div>
+                </div>
            </div>
            <div id="applications">
            </div>
        </div>

+        <div id="appMenuContainer"></div>
+
        <script src="core/dremjs-core.js"></script>
        <script src="<?= $wm ?>/agenda2.js"></script>
    </body>
--- a/root/hypervisor/installations/main/fs/lib/agenda2/agenda2.js
+++ b/root/hypervisor/installations/main/fs/lib/agenda2/agenda2.js
@ -13,14 +13,21 @@
 *                                                       (C) Innovation Science LLC 2024
 */

-var currentWID = 0
+var currentWID = 0;
+var openWindows = [];
+var currentZIndex = 0;

+// Load mobile-detect magic js file to instantiate a MobileDetect and return mobile status (null if not mobile).
 var mobileStatus = import("./mobile-detect.js").then((md) => {
    var detector = new MobileDetect(window.navigator.userAgent);
    return detector.mobile();
 });

+/*
+ * initAgendaWM starts the window manager.
+ */
 async function initAgendaWM() {
+    // We need to wait for mobileStatus to resolve.
    mobileStatus = await mobileStatus;
    if(!mobileStatus) {
        initAgendaDesktop();
@ -31,29 +38,107 @@ async function initAgendaWM() {

 function initAgendaDesktop() {
    console.log("AGENDA2 Desktop");
+
+    var taskbar = createTaskbarHtml();
+    var taskbarContainer = document.getElementById("appMenuContainer");
+    taskbarContainer.insertAdjacentHTML('beforeend', taskbar);
    
-    createWindow("Test App 1", "/temp.html", true);
-    createWindow("Test App 2", "/temp.html", true);
+    createWindow("Test App 1", "/temp.html");
+    createWindow("Test App 2", "/temp.html");
 }

 function initAgendaMobile() {
    console.log("AGENDA2 Mobile");
+
+    var taskbar = createTaskbarHtml();
+    var taskbarContainer = document.getElementById("appMenuContainer");
+    taskbarContainer.insertAdjacentHTML('beforeend', taskbar);
+
+    createWindow("Test App 1", "/temp.html");
+    createWindow("Test App 2", "/temp.html");
 }

-function createWindow(name, href, draggable) {
+function createTaskbarHtml() {
+    if(mobileStatus) {
+        return taskbar = createTaskbarHtmlMobile();
+    }
+    return taskbar = createTaskbarHtmlDesktop();
+}
+
+function createTaskbarHtmlDesktop() {
+    var taskbar = `
+    <div class="dAppMenuContent" id="appMenuContent">
+        <a onclick="createWindow('Test', '/temp.html')"><p><img src="/nope.png" class="appMenuImage">Test App</p></a>
+        <hr />
+        <a target="_top" href="#"><p><img src="/nope.png" class="appMenuImage">Shutdown DremJS</p></a>
+    </div>
+    `
+
+    return taskbar;
+}
+
+function createTaskbarHtmlMobile() {
+    var taskbar = `
+    <div class="mAppMenuContent" id="appMenuContent">
+        <a onclick="createWindow('Test', '/test.html')"><p><img src="/nope.png" class="appMenuImage"> Test App</p></a>
+        <hr />
+        <a target="_top" href="#"><p><img src="/nope.png" class="appMenuImage"> Shutdown DremJS</p></a>
+    </div>
+    `
+    return taskbar;
+}
+
+/*
+ * Create window does exactly what it says on the tin.
+ * It takes a human-friendly window name, href to the application,
+ *  and also whether or not it's draggable or not (default true).
+*/
+function createWindow(name, href, draggable = true, widget = false) {
+    // The window strings are just html. Actually a decent bit lifted from og Agenda, but implemented better obviously.
    var wid = getNewWID();
-    var window = `\
-    <div onclick="moveToFront(${wid});"
+    var window = createWindowHtml(name, href, draggable, widget);
+    var icon = createIconHtml(name, href, draggable, widget);
+
+    console.log(window);
+    // Now we can insert the new window text into the applications container. 
+    var parent=document.getElementById('applications');
+    parent.insertAdjacentHTML('beforeend', window);
+
+    // We don't want to make the window draggable if AGENDA2 is in mobile mode
+    //  or the window explicitly said not to be draggable.
+    if(draggable && !mobileStatus) {
+        makeDraggable(wid);
+    }
+
+    // We now set the window to the foreground.
+    moveToFront(wid);
+}
+
+/*
+ * Simple decision making logic. Create a mobile HTML if in mobile mode,
+ *  and create a desktop HTML if not.
+*/
+function createWindowHtml(name, href, draggable, widget) {
+    if(mobileStatus) {
+        return createWindowHtmlMobile(name, href, draggable, widget);
+    }
+
+    return createWindowHtmlDesktop(name, href, draggable, widget);
+}
+
+function createWindowHtmlDesktop(name, href, draggable, widget) {
+    var window = `
+    <div onmousedown="moveToFront(${wid});"
        name="${name}"
        class="dAppWindow"
        id="window-${wid}">
        <div class="dAppTask" id="bar-${wid}">
            <div class="dAppTaskChild">
-                <input type="button" onclick="closeApplication(${wid})" value="X" />
-                <input type="button" onclick="maximizeApplication(${wid})" value="\u25A1" />
-                <input type="button" onclick="minimizeApplication(${wid})" value="_" />
+                <input type="button" onclick="destroyWindow(${wid})" value="X" />
+                <input type="button" onclick="maximizeWindow(${wid})" value="\u25A1" />
+                <input type="button" onclick="minimizeWindow(${wid})" value="_" />
            </div>
-            <div class="dAppTaskChild">
+            <div class="dAppTaskChild" id="text-${wid}">
                <p>${name}</p>
            </div>
        </div>
@ -62,61 +147,84 @@ function createWindow(name, href, draggable) {
            <iframe name="app-${wid}" id="app-${wid}" src="${href}"></iframe>
        </div>
    </div>
-    `;
+    `

-    var parent=document.getElementById('applications');
-    parent.insertAdjacentHTML('beforeend', window);
-
-    if(draggable && !mobileStatus) {
-        makeDraggable(wid);
-    }
+    return window;
 }

-/*function dragWindow(wid) {
-    var windowId = `window-${wid}`;
-    var barId = `bar-${wid}`;
-    var pos1 = 0;
-    var pos2 = 0;
-    var pos3 = 0;
-    var pos4 = 0;
+function createWindowHtmlMobile(name, href, draggable, widget) {
+    var window = `
+    <div onmousedown="moveToFront(${wid});"
+        name="${name}"
+        class="mAppWindow"
+        id="window-${wid}">
+        <div class="mAppTask" id="bar-${wid}">
+            <div class="mAppTaskChild">
+                <input type="button" onclick="destroyWindow(${wid})" value="X" />
+            </div>
+            <div class="mAppTaskChild" id="text-${wid}">
+                <p>${name}</p>
+            </div>
+        </div>
+        <br />
+        <div class="mAppFrame">
+            <iframe name="app-${wid}" id="app-${wid}" src="${href}"></iframe>
+        </div>
+    </div>
+    `

-    var element = document.getElementById(windowId);
-    var bar = document.getElementById(barId);
+    return window;
+}

-    bar.onmousedown = dragMouseDown;
-
-    function dragMouseDown(e) {
-        e = e || window.event;
-        e.preventDefault();
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-        document.onmouseup = closeDragElement;
-        document.onmousemove = elementDrag;
-    }
-
-    function elementDrag(e) {
-        e = e || window.event;
-        e.preventDefault();
-
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-
-        element.style.top = (element.offsetTop - pos2) + "px";
-        element.style.left = (element.offsetLeft - pos1) + "px";
-    }
-
-    function closeDragElement() {
-        document.onmouseup = null;
-        document.onmousemove = null;
-    }
-}*/
-
-function makeDraggable(wid) {
-    win = document.getElementById(`window-${wid}`);
+function createIconHtml(name, href, draggable, widget) {
    
+}
+
+/*
+ * Destroy the window by sending it's element to the shadow realm.
+ */
+function destroyWindow(wid) {
+    var window = document.getElementById(`window-${wid}`);
+    var windowContainer = document.getElementById('applications');
+
+    windowContainer.removeChild(window);
+}
+
+/*
+ * I went about moving windows to the front differently than in the original version of Agenda.
+ * A simple counter is used, and when the function is used, it sets the z-index to an incrementing
+ *  counter. It's incremented after setting the z-index, so that the next time it's run it'll be sure
+ *  to set it to the foreground. Did that make sense? I'm so tired.
+ *
+ * Obviously, this is how this should be done, unlike the bodge job before.
+*/
+function moveToFront(wid) {
+    var window = document.getElementById(`window-${wid}`);
+
+    window.style.zIndex = `${currentZIndex}`;
+    currentZIndex++;
+}
+
+function maximizeWindow(wid) {
+    console.log("maximizeWindow not yet implemented");
+}
+
+function minimizeWindow(wid) {
+    console.log("minimizeWindow not yet implemented");
+}
+
+// Actual magic chicanery which I'm pretty sure I did last time lmao
+function makeDraggable(wid) {
+    var win = document.getElementById(`window-${wid}`);
+    var bar = document.getElementById(`bar-${wid}`);
+    var barText = document.getElementById(`text-${wid}`);
+
    win.addEventListener('mousedown', function(e) {
+        // This bodge detects whether the object that was clicked
+        if(e.target != bar && e.target.parentNode != barText) {
+            reset();
+            return;
+        }
        e.preventDefault();
        var offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
        var offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);
@ -140,10 +248,24 @@ function makeDraggable(wid) {
    });
 }

+/*
+ * Return a new window id and increment it.
+ * returns wid: current window id for use in a new window
+ */
 function getNewWID() {
    wid = currentWID;
    currentWID+=1;
    return wid;
-} 
+}
+
+function toggleAppMenu() {
+    var appMenu = document.getElementById("appMenuContent");
+
+    if(appMenu.style.visibility == "hidden") {
+        appMenu.style.visibility = "visible";
+    } else {
+        appMenu.style.visibility = "hidden";
+    }
+}

 initAgendaWM();
--- a/root/hypervisor/installations/main/fs/lib/agenda2/css/desktop.css
+++ b/root/hypervisor/installations/main/fs/lib/agenda2/css/desktop.css
@ -1,20 +1,3 @@
-/* Taskbar */
-#taskbar {
-    height: 48px;
-    width: 96%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0px;
-    position: absolute;
-    background-color: black;
-}
-
-/* Applications and Windows */
-#applications {
-    width: 100%;
-    height: auto;
-}
-
 .dAppWindow {
    width:500px;
    height:300px;
@ -52,6 +35,7 @@
    float: left;
    position: relative;
    height: 24px;
+    width: 96%;
 }

 .dAppTaskChild {
@ -65,4 +49,31 @@
    margin-bottom: 0px;
    margin-top: 12px;
    font-size: 16px;
+}
+
+.dTaskbarChild {
+    float: left;
+    margin-right: 5px;
+    position: relative;
+}
+
+.dAppMenuContent {
+    position: absolute;
+    visibility: hidden;
+
+    top: 56px;
+    /*height: 100px;
+    width: 40%;*/
+    min-width: 200px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 12px 16px;
+    background-color: #f9f9f9;
+    z-index: 100000;
+}
+
+.dAppMenuContent hr {
+    position: relative;
+    width: calc(100% - 32px);
+    margin-left: auto;
+    margin-right: auto;
 }
--- a/root/hypervisor/installations/main/fs/lib/agenda2/css/mobile.css
+++ b/root/hypervisor/installations/main/fs/lib/agenda2/css/mobile.css
@ -0,0 +1,75 @@
+.mAppWindow {
+    width: calc(96% - 10px);
+    height: calc(100% - 71px);
+    margin-left: auto;
+    margin-right: auto;
+    padding: 5px;
+    position: absolute;
+    top: 61px;
+    background-color:#87CEEB;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    resize: none;
+    overflow: auto;
+}
+
+.mAppWindow br {
+    margin-top: 10px;
+}
+
+.mAppFrame {
+    /*float: none;
+    height: 93%;*/
+    position: relative;
+}
+
+.mAppFrame iframe {
+    background-color: #FFFFFF;
+    border: 0;
+    width: 100%;
+    height: calc(100% - 30px);
+    object-fit: contain;
+}
+
+.mAppTask {
+    margin-right: 10px;
+    float: left;
+    position: relative;
+    height: 24px;
+    width: 96%;
+}
+
+.mAppTaskChild {
+    float: left;
+    margin-right: 5px;
+    position: relative;
+}
+
+.mAppTaskChild p {
+    line-height: 0;
+    margin-bottom: 0px;
+    margin-top: 12px;
+    font-size: 16px;
+}
+
+.mTaskbarChild {
+    float: left;
+    margin-right: 5px;
+    position: relative;
+}
+
+.mAppMenuContent {
+    position: absolute;
+    visibility: hidden;
+
+    top: 61px;
+    /*width: calc(96% - 10px);*/
+    width: 50%;
+    max-height: calc(100% - 91px);
+    margin-left: auto;
+    margin-right: auto;
+    /*min-width: 200px;*/
+    padding: 12px 16px;
+    background-color: #f9f9f9;
+    z-index: 100000;
+    overflow: auto;
+}
--- a/root/hypervisor/installations/main/fs/lib/agenda2/css/standard.css
+++ b/root/hypervisor/installations/main/fs/lib/agenda2/css/standard.css
@ -0,0 +1,34 @@
+/* Taskbar */
+#taskbar {
+    height: 48px;
+    width: 96%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    position: absolute;
+    background-color: black;
+}
+
+/* Applications and Windows */
+#applications {
+    width: 100%;
+    height: auto;
+}
+
+.appMenuImage {
+    width: 16px;
+    height: 16px;
+    margin-right: 16;
+}
+
+.appMenu {
+    margin-right: 10px;
+    float: left;
+    position: relative;
+
+    width: 40px;
+    height: 40px;
+    top: 4px;
+    left: 4px;
+    background-color: gray;
+}