From 5a7517ef33a1f2b6c34882ab52289ab10cc2bd3d Mon Sep 17 00:00:00 2001 From: nopara73 Date: Sun, 27 Oct 2024 11:26:28 +0100 Subject: [PATCH] Implement image upload and crop --- .../wwwroot/onboarding/convergence.html | 206 ++++++++++++------ 1 file changed, 144 insertions(+), 62 deletions(-) diff --git a/LongevityWorldCup.Website/wwwroot/onboarding/convergence.html b/LongevityWorldCup.Website/wwwroot/onboarding/convergence.html index 1e9bc62..b509f7d 100644 --- a/LongevityWorldCup.Website/wwwroot/onboarding/convergence.html +++ b/LongevityWorldCup.Website/wwwroot/onboarding/convergence.html @@ -2,6 +2,7 @@ + @@ -306,6 +319,9 @@

1. Character Creation

// Scroll the heading into view document.querySelector('h2').scrollIntoView({ behavior: 'smooth' }); + // Remove the 'clickable' class from the illustrationImage + document.getElementById('illustrationImage').classList.remove('clickable'); + if (currentStage === 1) { currentStage = 2; updateSubProgress(2); @@ -337,44 +353,47 @@

1. Character Creation

// Update the text content for stage 3 with formatting document.getElementById('content').innerHTML = ` -

Privacy is your ability to selectively reveal yourself to the world.

-

- Cristiano Ronaldo is one of the greatest football players of all time. Put yourself into his boots. You must work hard, of course, but your job doesn't end with honing your skills. You also need to display them in front of millions of people. There’s no sport without spectators. -

-

- So, does he lack privacy? No, he made a conscious decision to selectively reveal himself to the world. -

-

- It's now your turn to make that decision. -

- `; +

Privacy is your ability to selectively reveal yourself to the world.

+

+ Cristiano Ronaldo is one of the greatest football players of all time. Put yourself into his boots. You must work hard, of course, but your job doesn't end with honing your skills. You also need to display them in front of millions of people. There’s no sport without spectators. +

+

+ So, does he lack privacy? No, he made a conscious decision to selectively reveal himself to the world. +

+

+ It's now your turn to make that decision. +

+ `; // Add your specified text to the empty block (the div that held the input fields) document.getElementById('personalDetails').innerHTML = ` -

Top-ranked longevity athletes will occasionally be asked to give an interview before their results are posted. Declining means no spot on the leaderboard. By proceeding, you agree to this.

-

Just remember, we’re not gonna beat Death by hiding in the shadows!

- `; +

Top-ranked longevity athletes will occasionally be asked to give an interview before their results are posted. Declining means no spot on the leaderboard. By proceeding, you agree to this.

+

Just remember, we’re not gonna beat Death by hiding in the shadows!

+ `; document.getElementById('personalDetails').style.display = ''; } else if (currentStage === 3) { currentStage = 4; updateSubProgress(4); + // Add the 'clickable' class to the illustrationImage + document.getElementById('illustrationImage').classList.add('clickable'); + document.querySelector('h2').textContent = "4. Don't Trust, Verify"; document.getElementById('illustrationImage').src = "../assets/headshot.jpg"; document.getElementById('illustrationImage').alt = "Headshot"; document.getElementById('content').innerHTML = `

Next, provide your profile picture. Smiling is optional!

`; document.getElementById('personalDetails').innerHTML = ` -

Upload a clear headshot:

-
    -
  1. It must be you.
    2. -
  2. Face the camera directly.
    3. -
  3. Include head and shoulders.
    4. -
-
- - -
- `; +

Upload a clear headshot:

+
    +
  1. It must be you.
    2. +
  2. Face the camera directly.
    3. +
  3. Include head and shoulders.
    4. +
+
+ + +
+ `; // Check if there is a stored profile picture and set it const storedProfilePic = localStorage.getItem('profilePic'); @@ -382,42 +401,8 @@

1. Character Creation

document.getElementById('illustrationImage').src = storedProfilePic; } - // Add the event listeners here, but only if they haven't been added before - // Set up event listener for the upload button - const uploadButton = document.getElementById('uploadButton'); - if (!uploadButton.hasAttribute('data-listener')) { - uploadButton.addEventListener('click', function () { - document.getElementById('profilePicInput').click(); - }); - uploadButton.setAttribute('data-listener', 'true'); - } - - // Add click event to the image to trigger file selection - const illustrationImage = document.getElementById('illustrationImage'); - if (!illustrationImage.hasAttribute('data-listener')) { - illustrationImage.addEventListener('click', function () { - document.getElementById('profilePicInput').click(); - }); - illustrationImage.setAttribute('data-listener', 'true'); - } - - // Handle the image upload and preview - const profilePicInput = document.getElementById('profilePicInput'); - if (!profilePicInput.hasAttribute('data-listener')) { - profilePicInput.addEventListener('change', function (event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function (e) { - document.getElementById('illustrationImage').src = e.target.result; - // Optionally, store the image data in localStorage for later use - localStorage.setItem('profilePic', e.target.result); - }; - reader.readAsDataURL(file); - } - }); - profilePicInput.setAttribute('data-listener', 'true'); - } + // Call the function to attach event listeners + attachUploadEventListeners(); } else if (currentStage === 4) { currentStage = 5; updateSubProgress(5); @@ -429,6 +414,103 @@

1. Character Creation

this.setAttribute('type', 'submit'); } }); + + function attachUploadEventListeners() { + // Set up event listener for the upload button + const uploadButton = document.getElementById('uploadButton'); + if (uploadButton && !uploadButton.hasAttribute('data-listener')) { + uploadButton.addEventListener('click', function () { + document.getElementById('profilePicInput').click(); + }); + uploadButton.setAttribute('data-listener', 'true'); + } + + // Add click event to the image to trigger file selection + const illustrationImage = document.getElementById('illustrationImage'); + if (illustrationImage && !illustrationImage.hasAttribute('data-listener')) { + illustrationImage.addEventListener('click', function () { + document.getElementById('profilePicInput').click(); + }); + illustrationImage.setAttribute('data-listener', 'true'); + } + + // Handle the image upload and initialize Cropper.js + const profilePicInput = document.getElementById('profilePicInput'); + if (profilePicInput && !profilePicInput.hasAttribute('data-listener')) { + profilePicInput.addEventListener('change', function (event) { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = function (e) { + // Create an image element for cropping + const cropperImage = document.createElement('img'); + cropperImage.id = 'cropperImage'; + cropperImage.src = e.target.result; + + // Clear the current content and insert the image + document.getElementById('personalDetails').innerHTML = ''; + document.getElementById('personalDetails').appendChild(cropperImage); + + // Initialize Cropper.js on the image + const cropper = new Cropper(cropperImage, { + aspectRatio: 1024 / 768, // Set the aspect ratio + viewMode: 1, + autoCropArea: 1, + movable: true, + zoomable: true, + rotatable: false, + scalable: false, + cropBoxResizable: true, + minCropBoxWidth: 200, + minCropBoxHeight: 150, + }); + + // Add a "Crop and Save" button + const cropButton = document.createElement('button'); + cropButton.textContent = 'Crop and Save'; + cropButton.className = 'option-button'; + cropButton.style.marginTop = '1rem'; + document.getElementById('personalDetails').appendChild(cropButton); + + // Handle the crop button click + cropButton.addEventListener('click', function () { + const croppedCanvas = cropper.getCroppedCanvas({ + width: 1024, + height: 768, + }); + const croppedImageDataURL = croppedCanvas.toDataURL('image/png'); + + // Set the cropped image as the illustration image + document.getElementById('illustrationImage').src = croppedImageDataURL; + + // Store the cropped image in localStorage + localStorage.setItem('profilePic', croppedImageDataURL); + + // Remove the cropper instance and restore the content + cropper.destroy(); + document.getElementById('personalDetails').innerHTML = ` +

Upload a clear headshot:

+
    +
  1. It must be you.
    2. +
  2. Face the camera directly.
    3. +
  3. Include head and shoulders.
    4. +
+
+ + +
+ `; + // Re-attach event listeners to the new elements + attachUploadEventListeners(); + }); + }; + reader.readAsDataURL(file); + } + }); + profilePicInput.setAttribute('data-listener', 'true'); + } + } + \ No newline at end of file