implemented image upload and cropping system, mostly work. it's too zoomed in and appears to be using the xy coords from the top left of the crop selector.

2025-03-29 22:57:43 -06:00
parent 9a45075010
commit ff7e799b7f
14 changed files with 609 additions and 130 deletions
@@ -0,0 +1,168 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var user_actions_modal = document.getElementById("user_actions_modal");
+  var modal_content = document.getElementById("modal_content");
+  var profile_picture_input = document.getElementById("profile_picture");
+
+  // Event listener on the file input
+  profile_picture_input.addEventListener('change', function() {
+    if (profile_picture_input.files && profile_picture_input.files[0]) {
+      var file = profile_picture_input.files[0];
+      var form_data = new FormData();
+      form_data.append('upload', file);
+      form_data.append('test_key', 'test_value');
+
+
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', 'http://localhost:2025/functions/functions.php', true);
+      xhr.setRequestHeader('enctype', 'multipart/form-data');
+
+      xhr.onload = function() {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          filepath = '/data/tmp/' + profile_picture_input.files[0].name;
+          openModal('profile_cropper', filepath);
+        } else {
+          console.error('Error uploading file:', xhr.status, xhr.statusText);
+        }
+
+        xhr.onerror = function() {
+          console.error('Network error occurred.');
+        };
+      };
+
+      xhr.send(form_data);
+    }
+  });
+
+  // Open modal function
+  function openModal(formId, filePath = null) {
+    let content = document.getElementById(formId).innerHTML;
+    if (filePath) {
+      content = content.replace('IMG_UPLOAD_PATH', filePath);
+    }
+    modal_content.innerHTML = content;
+    user_actions_modal.style.display = "block";
+
+    cropper();
+  }
+
+  function cropper() {
+    let img_to_crop = document.getElementById('img_to_crop');
+    let selection_box = document.getElementById('img_crop_selection');
+    let crop_button = document.getElementById('crop_button');
+    let corners = document.querySelectorAll('.corner');
+
+    let selection = {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      is_resizing: false,
+      is_dragging: false,
+      resize_corner: null,
+    };
+
+    function updateSelection() {
+      selection_box.style.left = `${selection.x}px`;
+      selection_box.style.top = `${selection.y}px`;
+      selection_box.style.width = `${selection.width}px`;
+      selection_box.style.height = `${selection.height}px`;
+    }
+
+    img_to_crop.addEventListener('mousemove', (e) => {
+      const { clientX, clientY } = e;
+      if (!selection_box.classList.contains('stop')) {
+
+        // const img_bounds = img_to_crop.getBoundingClientRect();
+        // const box_bounds = selection_box.getBoundingClientRect();
+        //
+        // console.log('img_bounds: ' + img_bounds.top);
+        // console.log('box_bounds: ' + box_bounds.top);
+        // if (box_bounds.left > img_bounds.left || box_bounds.right < img_bounds.right)
+        selection.x = clientX;
+        // if (box_bounds.top > img_bounds.top || box_bounds.bottom > img_bounds.bottom)
+        selection.y = clientY;
+
+        updateSelection();
+      } else if (selection.is_resizing) {
+        resizing(e);
+      }
+    });
+
+    img_to_crop.addEventListener('click', function(event) {
+      if (selection_box.classList.contains('stop')) {
+        selection.is_resizing = false;
+        selection_box.classList.remove('stop');
+      }
+      else {
+        selection_box.classList.add('stop');
+      }
+    })
+
+    corners.forEach((corner) => {
+      corner.addEventListener('mousedown', (e) => {
+        console.log('resizing');
+        selection.resize_corner = corner.id;
+        selection.is_resizing = true;
+        e.stopPropagation(); // Prevent image click event
+      });
+
+      corner.addEventListener('dragstart', (e) => {
+        e.preventDefault();
+      })
+    });
+
+    crop_button.addEventListener('click', () => {
+      document.getElementById('crop_x').value = selection.x + (selection.width / 1.5);
+      document.getElementById('crop_y').value = selection.y + (selection.width / 1.5);
+      document.getElementById('crop_width').value = selection.width;
+
+      closeModal();
+    });
+
+    function resizing(e) {
+      if (!selection.is_resizing) return;
+
+      const aspect_ratio = 1;
+
+      let newWidth = selection.width;
+
+      switch (selection.resize_corner) {
+        case 'corner_nw':
+          newWidth = selection.x - e.clientX;
+          break;
+        case 'corner_sw':
+          newWidth = selection.x - e.clientX;
+          break;
+        case 'corner_ne':
+          newWidth = e.clientX - selection.x;
+          break;
+        case 'corner_se':
+          newWidth = e.clientX - selection.x;
+          break;
+      }
+
+      selection.width = newWidth;
+      selection.height = newWidth / aspect_ratio;
+      // }
+      updateSelection();
+    }
+  }
+
+  modal_content.addEventListener('click', function(event) {
+    if (event.target.classList.contains('modal_close')) {
+      closeModal();
+    }
+  });
+
+  window.onclick = function(event) {
+    if (event.target.classList.contains('modal')) {
+      closeModal();
+    }
+  };
+
+  // Close modal function
+  function closeModal() {
+    modal_content.innerHTML = ""; // Clear content when closing
+    user_actions_modal.style.display = "none";
+  }
+});
@@ -0,0 +1,12 @@
+const file_inputs = document.getElementsByClassName('file_input');
+const filename_displays = document.getElementsByClassName('file_input_feedback');
+
+for (let i = 0; i < file_inputs.length; i++) {
+  file_inputs[i].addEventListener('change', function() {
+    const selected_file = event.target.files[0];
+    if (selected_file)
+      filename_displays[i].textContent = 'File uploaded: ' + selected_file.name;
+    else
+      filename_displays[i].textContent = 'No file selected.';
+  })
+}
@@ -1,23 +1,22 @@
 document.addEventListener('DOMContentLoaded', function() {
-  var modal = document.getElementById("user_actions_modal");
+  var user_actions_modal = document.getElementById("user_actions_modal");
  var modal_content = document.getElementById("modal_content");
  var buttons = document.getElementsByClassName("modal_button");
-  var spans = document.getElementsByClassName("modal_close");

  for (let i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
-      switch (i) {
-        case 0:
-          openModal("reset_pw_form");
+      switch (buttons[i].id) {
+        case 'reset_pw_form_button':
+          openModal('reset_pw_form');
          break;
-        case 1:
-          openModal("update_email_form");
+        case 'update_email_form_button':
+          openModal('update_email_form');
          break;
-        case 2:
-          openModal("update_username_form");
+        case 'update_username_form_button':
+          openModal('update_username_form');
          break;
-        case 3:
-          openModal("delete_account_form");
+        case 'delete_account_form_button':
+          openModal('delete_account_form');
          break;
        // case 3:
        //   openModal("request_role_form");
@@ -31,7 +30,7 @@ document.addEventListener('DOMContentLoaded', function() {
  // Open modal function
  function openModal(formId) {
    modal_content.innerHTML = document.getElementById(formId).innerHTML;
-    modal.style.display = "block";
+    user_actions_modal.style.display = "block";
  }

  modal_content.addEventListener('click', function(event) {
@@ -49,7 +48,7 @@ document.addEventListener('DOMContentLoaded', function() {
  // Close modal function
  function closeModal() {
    modal_content.innerHTML = ""; // Clear content when closing
-    modal.style.display = "none";
+    user_actions_modal.style.display = "none";
  }

 });