display profile picture image

src/pages/profile_page.html

@@ -102,8 +102,11 @@
 </div>
 
 <div id="resize_photo_dialouge" class="card static_center hidden">
-    <div id="resize_photo_box"></div>
+    <div id="image_container">
         <img id="new_profile_image" alt="new-profile-image" />
+        <div id="darken_part"></div>
+    </div>
+    <div id="resize_photo_box"></div>
     <button id="confirm_change">Confirm Change</button>
 </div>
 
@@ -178,9 +181,11 @@
     const button = document.getElementById("edit_picture_button");
     const fileInput = document.getElementById("file_input");
     const confirm_change = document.getElementById("confirm_change");
+    const resize_photo_box = document.getElementById("resize_photo_box");
+    const new_profile_image = document.getElementById("new_profile_image");
 
     button.addEventListener("click", () => {
-        fileInput.click(); // opens file picker
+        fileInput.click();
     });
 </script>
 
@@ -189,6 +194,9 @@
         image = null,
         file = null;
 
+    var x_start = 0,
+        y_start = 0;
+
     fileInput.addEventListener("change", async () => {
         document.getElementById("popup_background").classList.remove("hidden");
 
@@ -207,16 +215,15 @@
         image = URL.createObjectURL(file);
         const bitmap = await createImageBitmap(file);
 
-        var new_profile_image = document.getElementById("new_profile_image");
         new_profile_image.src = image;
-        var resize_photo_box = document.getElementById("resize_photo_box");
 
-        resize_photo_box.style.setProperty("--img-width", bitmap.width + "px");
         resize_photo_box.style.setProperty(
-            "--img-height",
-            bitmap.height + "px",
+            "--image-width",
+            bitmap.width + "px",
         );
-        return;
+
+        new_profile_image.style.setProperty("--x-offset", "0px");
+        new_profile_image.style.setProperty("--y-offset", "0px");
     });
 
     confirm_change.addEventListener("click", async () => {
@@ -248,9 +255,37 @@
         img.src = image;
         currentPreviewURL = image;
     });
+
+    // var mouseClicked = false;
+    // resize_photo_box.addEventListener("mousemove", () => {
+    //     if (!mouseClicked) return;
+    //     pos_difference_x = currentX - x_start;
+    //     pos_difference_y = currentY - y_start;
+
+    //     resize_photo_box.style.setProperty(
+    //         "--x-offset",
+    //         pos_difference_x + "px",
+    //     );
+    //     resize_photo_box.style.setProperty(
+    //         "--y-offset",
+    //         pos_difference_y + "px",
+    //     );
+    // });
+
+    // resize_photo_box.addEventListener("mousedown", () => {
+    //     x_start = currentX;
+    //     y_start = currentY;
+    //     mouseClicked = true;
+    //     console.log("fdsfsd");
+    // });
+
+    // resize_photo_box.addEventListener("mouseup", () => {
+    //     mouseClicked = false;
+    // });
 </script>
 
 <script src="/static/error/error.js" type="text/javascript"></script>
+<script src="/static/javascript/cursor.js" type="text/javascript"></script>
 <script
     src="/static/javascript/password_strength.js"
     type="text/javascript"

static/card.css

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: column;
     gap: 15px;
+    overflow: hidden;
 }
 
 .static_center {

static/profile_page.css

@@ -154,13 +154,58 @@
     color: var(--text-main);
 }
 
-#resize_photo_box {
-    background-color: black;
-    width: 100px;
-    height: 100px;
-
+#image_container {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
 }
+
+#darken_part {
+    /*background-color: black;*/
+    z-index: 3;
+    width: 100vw;
+    height: 100vh;
+}
+
+#confirm_change {
+    z-index: 2;
+}
+
+#new_profile_image {
+    z-index: 1;
+    transform: translateX(calc(-50% + var(--x-offset)))
+        translateY(calc(-50% + var(--y-offset)));
+    position: absolute;
+    left: calc(350px / 2);
+    top: calc(350px / 2);
+}
+
+#resize_photo_box {
+    background-color: rgba(0, 0, 0, 0);
+    width: 350px;
+    aspect-ratio: 1 / 1;
+
+    border-style: dashed;
+    border-color: black;
+    border-width: 5px;
+    z-index: 4;
+}
+
+/*
+
+#resize_photo_box:hover {
+    cursor: grab;
+}
+
+#new_profile_image {
+    height: 350px;
+    position: absolute;
+    transform: translateX(5px) translateY(5px);
+    object-fit: cover;
+}
+
+
+#image_container {
+    height: 350px;
+    width: fit-content;
+    position: absolute;
+    background-color: red;
+}*/