initial commit

.gitignore

@@ -1,5 +0,0 @@
-/docs
-/filesystem
-/img
-/lib
-/theme.css

lib/components/taskbar/taskbar.js

@@ -0,0 +1,88 @@
+(
+  function taskbarRender () {
+    let componentHTML = document.createElement("div");
+    componentHTML.className = "taskbar";
+    componentHTML.id = "taskbar";
+
+    componentHTML.innerHTML = `
+      <div class="div-menusuper">
+        <div class="div-menusuper__actionbar">
+          <div class"menusuper__actionbar-item menusuper__actionbar-user">
+            <p>User: ${SW_userData.username}</p>
+          </div>
+          <div class"menusuper__actionbar-item menusuper__actionbar-user item">
+            <p>User: ${SW_userData.username}</p>
+          </div>
+          <div class"menusuper__actionbar-item menusuper__actionbar-user item">
+            <p>User: ${SW_userData.username}</p>
+          </div>
+        </div>
+        <div class="div-menusuper__applications">
+          
+        </div>
+      </div>
+      <div class="taskbar-flex">
+        <div class="taskbar-items">
+          <button class="btn-menusuper">MENU</button>
+        </div>
+        <div class="taskbar-items">
+        aqui fica a taskbar
+        </div>
+        <div class="taskbar-items">
+        aqui fica a bandeja do sistema
+        </div>
+      </div>
+    `;
+
+    componentHTML.querySelector(".btn-menusuper").addEventListener("click", () => {
+      taskbarActions("toggle-visibility-menusuper");
+    });
+
+    document.body.querySelector("#system").appendChild(componentHTML);
+
+    taskbarUpdateAppMenu()
+  }
+)();
+
+/* Taskbar actions */
+function taskbarActions(action, params) {
+  const taskbar = document.querySelector("#taskbar");
+  const taskbarmenusuper = document.querySelector(".div-menusuper");
+
+  switch (action) {
+    case "toggle-visibility-menusuper":
+      toggleMenubarVisibility();
+      break;
+    default:
+      console.log("Ops, your action exists?")
+
+  }
+
+  function toggleMenubarVisibility() {
+    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", app: "terminal", icon: "" }
+  ];
+
+  apps.forEach((app) => {
+    const item = document.createElement("div")
+    item.className = "menusuper__applicationsItem";
+    item.innerHTML = `
+      <div class="menusuper__applicationsIcon">
+        <img src="${app.icon}" />
+      </div>
+      <div class="menusuper__applicationsName">${app.name}</div>
+    `
+
+    applist.appendChild(item);
+  })
+}

lib/renderUI.js

@@ -0,0 +1,18 @@
+function renderUI() {
+  SW_UILayout.forEach((elem) => {
+    const elemname = elem.name;
+    const ElementHTML = document.querySelector(`#${elemname}`);
+
+    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);
+    }
+  })
+}
+
+renderUI();

lib/systemboot.js

@@ -0,0 +1,15 @@
+/* load core files */
+(() => {
+  const libPath = "./lib"
+  const components = [
+    `${libPath}/systemconfig.js`,
+    `${libPath}/systemhandlescripts.js`,
+    `${libPath}/renderUI.js`
+  ]
+
+  components.forEach((elem) => {
+    const loadScript = document.createElement("script");
+    loadScript.src = elem;
+    document.head.appendChild(loadScript);
+  })
+})();

lib/systemconfig.js

@@ -0,0 +1,26 @@
+const SW_SystemConfig = {
+  theme: "default",
+  version: "0.1",
+}
+
+const SW_userData = {
+  username: "MB",
+
+}
+
+/* Elements that will be rendered on the user's screen. */
+const SW_UILayout = [
+  {
+    name: "taskbar",
+    position: { x: 0, y: 100, w: 100, h: 15 },
+    active: true
+  }
+]
+
+/* ,
+  {
+    name: "topbar",
+    position: { x: 0, y: 0, w: 100, h: 10 },
+    active: true
+  }
+*/

lib/systemhandlescripts.js

@@ -0,0 +1,33 @@
+/* 
+option: Qual ação irá realizar (carregar ou remover).
+path: Caminho relativo onde está o arquivo.
+name: Nome da biblioteca, para referências.
+*/
+function swdehandlescr(option, path, name) {
+    function loadscript (pathtofile) {
+
+        const ElementHTML = document.querySelectorAll(`head > script`);
+
+        ElementHTML.forEach((elem) => {
+            const elemsrc = elem.attributes.src.nodeValue; 
+            if (elemsrc == path) { elem.remove(); }
+        })
+
+        if(ElementHTML) {
+            /** Import element to head (load file). */
+            let component = document.createElement("script");
+            component.src = pathtofile;
+
+            document.head.appendChild(component);
+        }
+
+    }
+
+    switch (option) {
+        case "load":
+            loadscript(path, name);
+            break;
+        default:
+            console.log("Ops, erro ao tentar carregar o arquivo.");
+    }
+}

theme.css

@@ -0,0 +1,69 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    color: white;
+    background-image: url('./filesystem/wallpapers/pexels-janez-podnar.jpg');
+}
+
+/* Native taskbar */
+#taskbar {
+    position: absolute;
+    display: block;
+    width: 100vw;
+    height: 5vh;
+    bottom: 0;
+}
+.taskbar-flex {
+    display: flex;
+    background-color: #2A2E32;
+    width: 100%;
+    height: 100%;
+
+}
+.taskbar-items {
+    width: 100%;
+}
+
+.btn-menusuper {
+    width: 200px;
+    height: 100%;
+    padding: 10px;
+    color: white;
+    border: 1px solid white;
+    background-color: #2A2E32;
+}
+
+.div-menusuper {
+    position: absolute;
+    display: block;
+    width: 500px;
+    height: 50vh;
+    background-color: #2A2E32;
+    bottom: 5vh;
+}
+
+.menusuper__applicationsItem {
+    display: flex;
+    padding: 5px;
+    background-color: #2f3133;
+    border-bottom: 1px solid white;
+}
+
+.div-menusuper__actionbar {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    padding: 10px;
+}
+
+.menusuper__actionbar-item {
+    width: 100%;
+}
+
+.hidden {
+    display: none;
+}