test release

mblithium · Nov 21, 2023 · adbb7b8 · adbb7b8
1 parent 107458c
commit adbb7b8
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 19 deletions.
diff --git a/lib/components/desktop/desktop.js b/lib/components/desktop/desktop.js
@@ -0,0 +1,5 @@
+(
+    function desktop() {
+        return
+    }
+)()
diff --git a/lib/components/taskbar/taskbar.js b/lib/components/taskbar/taskbar.js
@@ -62,15 +62,14 @@ function taskbarActions(action, params) {
     if (taskbarmenusuper.style.display === "none") { taskbarmenusuper.style.display = "block";} 
     else { taskbarmenusuper.style.display = "none"; }
   }
-  console.log(taskbar, taskbarmenusuper);
+
 }
 
 function taskbarUpdateAppMenu() {
   const applist = document.querySelector(".div-menusuper__applications");
-  console.log(applist)
   const apps = [
     { name: "Paint", app: "paint", icon: "" }, 
-    { name: "Terminal 1", app: "terminal", icon: "" },
+    { name: "Terminal 1", app: "terminal", icon: "https://cdn1.iconfinder.com/data/icons/heroicons-solid/20/terminal-512.png" },
     { name: "Terminal 2", app: "terminal", icon: "" },
     { name: "Terminal 3", app: "terminal", icon: "" },
     { name: "Terminal 4", app: "terminal", icon: "" },
@@ -89,15 +88,14 @@ function taskbarUpdateAppMenu() {
     item.className = "menusuper__applicationsItem";
     item.innerHTML = `
       <div class="menusuper__applicationsIcon">
-        <img src="${app.icon}" />
+        <img src="${app.icon == '' ? 'https://icons.iconarchive.com/icons/alecive/flatwoken/256/Apps-Application-Default-icon.png' : app.icon}" />
       </div>
-      <div class="menusuper__applicationsName">${app.name}</div>
+      <div class="menusuper__applicationsName"><p>${app.name}</p></div>
     `
     item.onclick = () => {
       createWindow(app, "blablabla")
     };
     applist.appendChild(item);
-
-    console.log(app);
   })
+
 }
diff --git a/lib/components/window/window.js b/lib/components/window/window.js
@@ -1,7 +1,8 @@
 function createWindow (appinfo, path) {
-      const swdewindow = document.createElement("div");
-      swdewindow.className = "swde-window";
-      swdewindow.innerHTML = `
+    const swdewindow = document.createElement("div");
+    swdewindow.className = "swde-window";
+    // draggable="true"
+    swdewindow.innerHTML = `
         <div class="swde-window-titlebar">
             <div class="swde-window-icon">
                 Ícone
@@ -21,8 +22,53 @@ function createWindow (appinfo, path) {
             <p>Conteúdo do aplicativo aqui</p>
         </div>
       `;
+
+    swdewindow.querySelector(".swde-window-icon").innerHTML = `
+        <img src="${appinfo.icon == '' ? 'https://icons.iconarchive.com/icons/alecive/flatwoken/256/Apps-Application-Default-icon.png' : appinfo.icon }">
+    `
+    swdewindow.querySelector(".swde-window-title > p").innerHTML = `${appinfo.name == '' ? 'Unknown Name' : appinfo.name }`
+
+    /* EVENTS */
+    swdewindow.querySelector(".swde-window-action__close").addEventListener("click", (e) => {
+        e.target.offsetParent.remove();
+    })
+
+    let isDown = false;
+    let offset = [0,0];
+
+    swdewindow.querySelector(".swde-window-titlebar").addEventListener("mousedown", (e) => {
+        document.querySelectorAll(".swde-window").forEach((thewindow) => {
+            thewindow.style.zIndex = 0;
+        })
+
+        e.target.offsetParent.style.zIndex = 5;
+
+        offset = [
+            e.target.offsetParent.offsetLeft - e.clientX,
+            e.target.offsetParent.offsetTop - e.clientY
+        ];
+
+        isDown = true;
+
+    }, true)
+
+    document.addEventListener('mouseup', function() { isDown = false; }, true);
 
-      document.body.querySelector("#system").appendChild(swdewindow);
+    document.addEventListener('mousemove', function(event) {
+        event.preventDefault();
+        if (isDown) {
+            mousePosition = {
+                x : event.clientX,
+                y : event.clientY
+            };
+
+            swdewindow.style.left = (mousePosition.x + offset[0]) + 'px';
+            swdewindow.style.top  = (mousePosition.y + offset[1]) + 'px';
+        }
+    }, true);
+    /* EVENTS */
+
+    document.body.querySelector("#system").appendChild(swdewindow);
 
 }
-  
+
diff --git a/lib/debugmode.js b/lib/debugmode.js
@@ -20,8 +20,6 @@
         "reloadPage": false,
     }
 
-    createWindow(apps[1], "blablabla");
-
     if (config.reloadPage) { 
         setTimeout(() => {
             window.location.reload();

diff --git a/lib/renderUI.js b/lib/renderUI.js
@@ -6,11 +6,7 @@ function renderUI() {
     if(ElementHTML) { document.querySelector(`#${elemname}`).remove();}
 
     if(!ElementHTML) {
-      /** Import element to head (load file). */
-      let component = document.createElement("script");
-      component.src = `./lib/components/${elemname}/${elemname}.js`;
-
-      document.head.appendChild(component);
+      swdehandlescr("load", `./lib/components/${elemname}/${elemname}.js`, elemname);
     }
   })
 }

diff --git a/lib/systemconfig.js b/lib/systemconfig.js
@@ -14,6 +14,11 @@ const SW_UILayout = [
     name: "taskbar",
     position: { x: 0, y: 100, w: 100, h: 15 },
     active: true
+  },
+  {
+    name: "desktop",
+    position: {},
+    active: true
   }
 ]
 

diff --git a/theme.css b/theme.css
@@ -2,6 +2,7 @@
     padding: 0;
     margin: 0;
     box-sizing: border-box;
+    user-select: none;
 }
 
 body {
@@ -64,6 +65,23 @@ body {
     padding: 15px;
     background-color: #2f3133;
     border-bottom: 1px solid white;
+    cursor: pointer;
+    width: 100%;
+}
+
+.menusuper__applicationsIcon img {
+    width: 50px;
+}
+
+.menusuper__applicationsName {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    margin-left: 5px;
+}
+
+.menusuper__applicationsName p {
+    text-align: center;
 }
 
 .div-menusuper__actionbar {
@@ -92,6 +110,8 @@ menusuper__actionbar-item menusuper__actionbar-user
     min-width: 300px;
     min-height: 200px;
     background-color: #5c6064;
+    border-radius: 5px;
+    border: 1px solid #2A2E32;
 }
 
 .swde-window-titlebar {
@@ -100,6 +120,11 @@ menusuper__actionbar-item menusuper__actionbar-user
     width: 100%;
     padding: 5px;
 }
+
+.swde-window-icon img {
+    width: 30px;
+}
+
 .swde-window-titlebar > * {
     width: 100%;
 }
@@ -109,8 +134,20 @@ menusuper__actionbar-item menusuper__actionbar-user
     padding: 5px;
     border-radius: 15px;
     border: 1px solid transparent;
+    cursor: pointer;
 }
 
 .swde-window-actions__buttons {
     text-align: right;
+}
+
+.swde-window-action__close {
+    background-color: rgb(230, 115, 115);
+}
+.swde-window-action__minimize {
+    background-color: rgb(238, 224, 146);
+}
+
+.swde-window-action__maximize {
+    background-color: rgb(200, 235, 148);
 }