added warning for image not being square and universal warning method

cthit · Feb 2, 2024 · c0d3fae · c0d3fae
1 parent 903b7dd
commit c0d3fae
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 67 deletions.
diff --git a/css/style.css b/css/style.css
@@ -36,7 +36,6 @@ body {
         position: relative;
 
         width: 25rem;
-        min-width: max-content;
         border: var(--border-width) solid #ddd;
         margin-inline: auto;
     }
@@ -89,6 +88,7 @@ body {
             align-items: center;
 
             height: 3rem;
+
         }
 
             .selectImageContainer {
@@ -101,6 +101,7 @@ body {
                 padding: 20;
                 border: 0;
                 outline: var(--border-width) solid #ddd;
+                padding-right: 1rem;
             }
 
                 #selectImageButton {
@@ -113,9 +114,13 @@ body {
 
                     transition: all .3s ease-in-out;
                 }
+
                 #selectImageButton:hover {
-                    background: #606060;
-                    transition: all .1s ease-in-out;
+                    background-color: #2f83bc;
+                    border-radius: 100%;
+
+                    transition: all .3s ease-in-out;
+                    transform: rotate(360deg); 
                 }
 
                 .fileName {
@@ -137,13 +142,6 @@ body {
                 transition: all .1s ease-in-out;
             }
 
-            #selectImageButton:hover {
-                background-color: #2f83bc;
-                transition: all .3s ease-in-out;
-                transform:rotate(360deg);
-                transform: scale(2), rotate(360deg);
-            }
-
             #generateTemplateButton:active {
                 background-color: rgb(61, 50, 222);
                 transition: all .1s ease-in-out;

diff --git a/index.html b/index.html
@@ -11,10 +11,11 @@
     <link rel="stylesheet" href="css/style.css">
 
     <script src="js/script.js" defer></script>
+
 
 
 </head>
-<body>
+<body>    
     <div id="inputDiv">
         <div id="imageNotSquareWarning" class="hidden">
             <img id="logo" src="images/warning.svg" alt="EqualIT logo" height="30">
@@ -37,7 +38,7 @@
         </div>
     </div>
 
-    <footer class="hidden">            
+    <footer class="">            
         Made as a gift from 
         <a href="https://wiki.chalmers.it/index.php/G%C3%B6ken">
             <!-- <img src="images/goken-pa-market.png" alt="Gökens mark" height="10"> -->

diff --git a/js/script.js b/js/script.js
@@ -1,4 +1,3 @@
-var userLanguage = navigator.language || navigator.userLanguage;
 
 var generateTemplateButton = document.getElementById("generateTemplateButton")
 var selectImageInput = document.getElementById('selectImageInput');
@@ -7,14 +6,43 @@ var previewImage = document.getElementById('previewImage');
 var imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
 var selectImageButton = document.getElementById('selectImageButton');
 var fileName = document.getElementById('fileName');
+var uglyDuckling = document.getElementById('uglyDuckling');
 
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+
+
+function createImageGrid() {
+    imageContainer.innerHTML = ""; // Clear the image container
+
+
+    // Ensure an image is selected
+    if (imageIsUploaded()) {
+        var imageUrl = URL.createObjectURL(selectImageInput.files[0]);
+
+        // Create the grid of images
+        for (var row = 0; row < 6; row++) {
+            var imgRow = document.createElement("div");
+            imgRow.classList.add("imageRow");
+
+            for (var col = 0; col < 4; col++) {
+                var imgElement = document.createElement('img');
+                imgElement.src = imageUrl;
+                imgElement.alt = 'Duplicated Image';
+                imgElement.classList.add('pinImage');
+                imgRow.appendChild(imgElement);
+            }
+            imageContainer.appendChild(imgRow);
+        };
+
+    };
+};
 
 function uploadedImageChanged() {
-    if (!imageIsSquare()) {
-        warnImageIsNotSquare();
-    }
     changeFileName();
     setImagePreview();
+
+    setTimeout(warnImageIsNotSquare, 100);
 };
 
 function changeFileName() {
@@ -23,82 +51,60 @@ function changeFileName() {
 };
 
 function warnImageIsNotSquare() {
-    imageNotSquareWarningDialog.classList.remove('hidden');
-
-    setTimeout(function() {
-        imageNotSquareWarningDialog.classList.add('hidden');
-    }, 2000);
+    if (imageIsSquare()) {
+        console.log("image is square");
+        disableWarning();
+    } else{
+        console.log("image is not square");
+        showWarning("Image is not square");
+    }
 };
 
+function showWarning(message){
+    imageNotSquareWarningDialog.querySelector('p').innerHTML = message;
+    imageNotSquareWarningDialog.classList.remove('hidden');
 
+}
 
-function imageIsSquare() {
-    if (selectImageInput.files.length > 0) {
-        var image = new Image();
-        image.src = URL.createObjectURL(selectImageInput.files[0]);
-
-        image.onload = function() {
-            var width = this.width;
-            var height = this.height;
+function disableWarning() {
+    imageNotSquareWarningDialog.classList.add('hidden');
+}
 
-            if (width === height) {
-                console.log("true");
 
-                return true;
-            } else {
-                console.log("false");
+function imageIsSquare() {
+    var image = previewImage;
+    console.log(image.naturalWidth + " " + image.naturalHeight);
 
-                return false;
-            }
-        };
+    if (image.naturalWidth === image.naturalHeight) {
+        console.log("true");
+        return true;
     }
+    return false;
 }
 
 function setImagePreview() {
     if (selectImageInput.files.length > 0) {
         var imageUrl = URL.createObjectURL(selectImageInput.files[0]);
-        previewImage.src = imageUrl;
+        previewImage.src = imageUrl
+
         createImageGrid(); // has to be here. if placed before print, the grid will not load in time for print
     }
 }
 
 
 
-function createImageGrid() {
-    imageContainer.innerHTML = ""; // Clear the image container
-
-
-    // Ensure an image is selected
-    if (imageIsUploaded()) {
-        var imageUrl = URL.createObjectURL(selectImageInput.files[0]);
-
-        // Create the grid of images
-        for (var row = 0; row < 6; row++) {
-            var imgRow = document.createElement("div");
-            imgRow.classList.add("imageRow");
-
-            for (var col = 0; col < 4; col++) {
-                var imgElement = document.createElement('img');
-                imgElement.src = imageUrl;
-                imgElement.alt = 'Duplicated Image';
-                imgElement.classList.add('pinImage');
-                imgRow.appendChild(imgElement);
-                console.log("Image added");
-            }
-            imageContainer.appendChild(imgRow);
-        };
-
-    };
-};
 
 function imageIsUploaded(){
     if (selectImageInput.files.length > 0) {
         return true;
-    } else {
-        return false;
-    }
+    } 
+    console.log("FILE NOT UPLOADED");
+    return false;
 }
 
+function checkIfSquare(width, height) {
+    return width === height;
+}