From e621a59815946774e8f915d5533500ce08a677e3 Mon Sep 17 00:00:00 2001
From: olechrib <olechrib@stud.ntnu.no>
Date: Tue, 5 Apr 2022 11:54:59 +0200
Subject: [PATCH] long method in scripts/gallery.js refactored
---
frontend/www/scripts/gallery.js | 101 ++++++++++++++++----------------
1 file changed, 52 insertions(+), 49 deletions(-)
diff --git a/frontend/www/scripts/gallery.js b/frontend/www/scripts/gallery.js
index 300ff47..4bb3ecf 100644
--- a/frontend/www/scripts/gallery.js
+++ b/frontend/www/scripts/gallery.js
@@ -1,14 +1,58 @@
let goBackButton;
+let filesDiv = document.getElementById("img-collection");
+let filesDeleteDiv = document.getElementById("img-collection-delete");
+const currentImageFileElement = document.querySelector("#current");
+let isFirstImg = true;
+let fileCounter = 0;
+
+function handleImageElements(){
+ const otherImageFileElements = document.querySelectorAll(".imgs img");
+ const selectedOpacity = 0.6;
+ otherImageFileElements[0].style.opacity = selectedOpacity;
-function addImages(workoutData){
- let filesDiv = document.getElementById("img-collection");
- let filesDeleteDiv = document.getElementById("img-collection-delete");
+ otherImageFileElements.forEach((imageFileElement) => imageFileElement.addEventListener("click", (event) => {
+ //Changes the main image
+ currentImageFileElement.src = event.target.src;
- const currentImageFileElement = document.querySelector("#current");
- let isFirstImg = true;
+ //Adds the fade animation
+ currentImageFileElement.classList.add('fade-in')
+ setTimeout(() => currentImageFileElement.classList.remove('fade-in'), 500);
- let fileCounter = 0;
+ //Sets the opacity of the selected image to 0.4
+ otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
+ event.target.style.opacity = selectedOpacity;
+ }));
+}
+
+function appendImage(file){
+ let deleteImgButton = document.createElement("input");
+ deleteImgButton.type = "button";
+ deleteImgButton.className = "btn btn-close";
+ deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
+ deleteImgButton.addEventListener(
+ 'click',
+ () => handleDeleteImgClick(deleteImgButton.id,
+ "DELETE",
+ `Could not delete workout ${deleteImgButton.id}!`,
+ HOST,
+ ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]
+ ));
+ filesDeleteDiv.appendChild(deleteImgButton);
+
+ let img = document.createElement("img");
+ img.src = file.file;
+ filesDiv.appendChild(img);
+ deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
+ deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
+
+ if(isFirstImg){
+ currentImageFileElement.src = file.file;
+ isFirstImg = false;
+ }
+ fileCounter++;
+}
+function addImages(workoutData){
for (let file of workoutData.files) {
let a = document.createElement("a");
a.href = file.file;
@@ -19,34 +63,10 @@ function addImages(workoutData){
let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
if(isImage){
- let deleteImgButton = document.createElement("input");
- deleteImgButton.type = "button";
- deleteImgButton.className = "btn btn-close";
- deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
- deleteImgButton.addEventListener(
- 'click',
- () => handleDeleteImgClick(deleteImgButton.id,
- "DELETE",
- `Could not delete workout ${deleteImgButton.id}!`,
- HOST,
- ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]
- ));
- filesDeleteDiv.appendChild(deleteImgButton);
-
- let img = document.createElement("img");
- img.src = file.file;
-
- filesDiv.appendChild(img);
- deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
- deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
-
- if(isFirstImg){
- currentImageFileElement.src = file.file;
- isFirstImg = false;
- }
- fileCounter++;
+ appendImage(file);
}
}
+ handleImageElements();
}
@@ -64,23 +84,6 @@ function handleWorkoutData(workoutData){
noImageText.classList.add("hide");
addImages(workoutData);
-
- const otherImageFileElements = document.querySelectorAll(".imgs img");
- const selectedOpacity = 0.6;
- otherImageFileElements[0].style.opacity = selectedOpacity;
-
- otherImageFileElements.forEach((imageFileElement) => imageFileElement.addEventListener("click", (event) => {
- //Changes the main image
- currentImageFileElement.src = event.target.src;
-
- //Adds the fade animation
- currentImageFileElement.classList.add('fade-in')
- setTimeout(() => currentImageFileElement.classList.remove('fade-in'), 500);
-
- //Sets the opacity of the selected image to 0.4
- otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
- event.target.style.opacity = selectedOpacity;
- }));
}
async function retrieveWorkoutImages(id) {
--
GitLab