refactor: Moved resizing to a CSS property and not a JS function

Through this the resizing is now smooth and consistent
puksh · Nov 4, 2024 · 9861097 · 9861097
1 parent 8277ab0
commit 9861097
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 128 deletions.
diff --git a/scripts/window.js b/scripts/window.js
@@ -64,7 +64,6 @@ function createWindow(appName) {
   }px`;
 
   makeDraggable(windowElement, titleBar);
-  makeResizable(windowElement);
 
   loadApp(appName, content);
 }
@@ -95,133 +94,6 @@ function makeDraggable(element, handle) {
   }
 }
 
-function makeResizable(element) {
-  let isResizing = false;
-  let initialWidth, initialHeight, initialX, initialY;
-  let currentResizeSide = null;
-
-  element.addEventListener("mousemove", (event) => {
-    const rect = element.getBoundingClientRect();
-    const mouseX = event.clientX - rect.left;
-    const mouseY = event.clientY - rect.top;
-    const margin = 10;
-
-    if (mouseX < margin && mouseY < margin) {
-      element.style.cursor = "nwse-resize";
-      currentResizeSide = "top-left";
-    } else if (mouseX < margin && mouseY > rect.height - margin) {
-      element.style.cursor = "nesw-resize";
-      currentResizeSide = "bottom-left";
-    } else if (mouseX > rect.width - margin && mouseY < margin) {
-      element.style.cursor = "nesw-resize";
-      currentResizeSide = "top-right";
-    } else if (mouseX > rect.width - margin && mouseY > rect.height - margin) {
-      element.style.cursor = "nwse-resize";
-      currentResizeSide = "bottom-right";
-    } else if (mouseX < margin) {
-      element.style.cursor = "ew-resize";
-      currentResizeSide = "left";
-    } else if (mouseX > rect.width - margin) {
-      element.style.cursor = "ew-resize";
-      currentResizeSide = "right";
-    } else if (mouseY < margin) {
-      element.style.cursor = "ns-resize";
-      currentResizeSide = "top";
-    } else if (mouseY > rect.height - margin) {
-      element.style.cursor = "ns-resize";
-      currentResizeSide = "bottom";
-    } else {
-      element.style.cursor = "default";
-      currentResizeSide = null;
-    }
-  });
-
-  element.addEventListener("mousedown", (event) => {
-    if (currentResizeSide) {
-      isResizing = true;
-      initialWidth = element.offsetWidth;
-      initialHeight = element.offsetHeight;
-      initialX = event.clientX;
-      initialY = event.clientY;
-      document.body.classList.add("disable-select"); // Add this line
-      document.addEventListener("mousemove", onResize);
-      document.addEventListener("mouseup", stopResize);
-    }
-  });
-
-  function onResize(event) {
-    if (isResizing) {
-      switch (currentResizeSide) {
-        case "top-left":
-          element.style.width = `${
-            initialWidth - (event.clientX - initialX)
-          }px`;
-          element.style.height = `${
-            initialHeight - (event.clientY - initialY)
-          }px`;
-          element.style.left = `${event.clientX}px`;
-          element.style.top = `${event.clientY}px`;
-          break;
-        case "top-right":
-          element.style.width = `${
-            initialWidth + (event.clientX - initialX)
-          }px`;
-          element.style.height = `${
-            initialHeight - (event.clientY - initialY)
-          }px`;
-          element.style.top = `${event.clientY}px`;
-          break;
-        case "bottom-left":
-          element.style.width = `${
-            initialWidth - (event.clientX - initialX)
-          }px`;
-          element.style.height = `${
-            initialHeight + (event.clientY - initialY)
-          }px`;
-          element.style.left = `${event.clientX}px`;
-          break;
-        case "bottom-right":
-          element.style.width = `${
-            initialWidth + (event.clientX - initialX)
-          }px`;
-          element.style.height = `${
-            initialHeight + (event.clientY - initialY)
-          }px`;
-          break;
-        case "left":
-          element.style.width = `${
-            initialWidth - (event.clientX - initialX)
-          }px`;
-          element.style.left = `${event.clientX}px`;
-          break;
-        case "right":
-          element.style.width = `${
-            initialWidth + (event.clientX - initialX)
-          }px`;
-          break;
-        case "top":
-          element.style.height = `${
-            initialHeight - (event.clientY - initialY)
-          }px`;
-          element.style.top = `${event.clientY}px`;
-          break;
-        case "bottom":
-          element.style.height = `${
-            initialHeight + (event.clientY - initialY)
-          }px`;
-          break;
-      }
-    }
-  }
-
-  function stopResize() {
-    isResizing = false;
-    document.body.classList.remove("disable-select"); // Add this line
-    document.removeEventListener("mousemove", onResize);
-    document.removeEventListener("mouseup", stopResize);
-  }
-}
-
 function minimizeWindow(element) {
   console.log("Minimizing window");
   element.classList.add("minimized");

diff --git a/styles.css b/styles.css
@@ -156,6 +156,8 @@ h1 {
   display: flex;
   flex-direction: column;
   z-index: 4 !important;
+  resize: both;
+  overflow: hidden;
 }
 
 .content {