feat: Make window moveable, maximize and minimizable

meesam4687 · May 21, 2024 · ff10671 · ff10671
1 parent b292eb3
commit ff10671
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -19,9 +19,9 @@
             <div class="terminalNavBar" id="navBar">
                 <div class="title"><img src='./assets/icons/terminal.svg'>Terminal</div>
                 <div class="buttons">
-                    <div class="nav-icon minimize clickable"><img src="./assets/icons/minimize.svg"></div>
-                    <div class="nav-icon maximize clickable"><img src="./assets/icons/maximize.svg"></div>
-                    <div class="nav-icon close clickable"><img src="./assets/icons/close.svg"></div>
+                    <div class="nav-icon minimize clickable" onclick="minimizeWindow()"><img src="./assets/icons/minimize.svg"></div>
+                    <div class="nav-icon maximize clickable" onclick="maximizeWindow()"><img src="./assets/icons/maximize.svg"></div>
+                    <div class="nav-icon close clickable" onclick="closeWindow()"><img src="./assets/icons/close.svg"></div>
                 </div>
             </div>
             <div class="separator"></div>

diff --git a/scripts/windowManager.js b/scripts/windowManager.js
@@ -21,4 +21,29 @@ windowNavBar.addEventListener('mousedown', function(e) {
 
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
-})
+})
+
+function closeWindow(){
+    window.close();
+}
+
+function maximizeWindow(){
+    let window = windowNavBar.parentElement;
+    window.style.width = "100vw";
+    window.style.height = "100vh";
+    window.style.maxWidth = "99vw";
+    window.style.maxHeight = "97.5vh";
+    window.style.top = "0";
+    window.style.left = "0";
+
+}
+
+function minimizeWindow(){
+    let window = windowNavBar.parentElement;
+    window.style.width = "84%";
+    window.style.height = "70%";
+    window.style.maxWidth = "900px";
+    window.style.maxHeight = "501px";
+    window.style.top = "inherit";
+    window.style.left = "inherit";
+}