From ef1f8c63b9b22e52aedb121476b0a49f2533b4ce Mon Sep 17 00:00:00 2001
From: Marvin Scham <dev@marvinscham.de>
Date: Sun, 2 May 2021 03:04:22 +0200
Subject: [PATCH] Rewrote JS for better readability

---
 main.html |  4 +--
 script.js | 87 +++++++++++++++++++++++++++++++++++--------------------
 2 files changed, 57 insertions(+), 34 deletions(-)
diff --git a/main.html b/main.html
index 31f3f01..b9e89f2 100644
--- a/main.html
+++ b/main.html
@@ -8,13 +8,13 @@
     <link rel="stylesheet" href="style.css">
     <title>Cover Builder</title>
 </head>
-<body onresize="renewReflection();">
+<body onresize="renew();">
     <div id="header">
         <span>Cover Builder</span>
     </div>
     <div id="content">
         <div class="block">
-            <input type="file" name="file" id="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0]); renewReflection();">    
+            <input type="file" name="file" id="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0]); renew();">    
             <label for="file" id="filelabel">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                     <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
diff --git a/script.js b/script.js
index 7539fbb..89d5be8 100644
--- a/script.js
+++ b/script.js
@@ -1,18 +1,22 @@
 const colorThief = new ColorThief();
 
-function renewReflection() {
+function renew() {
     setTimeout(function () {
-        var ref = document.getElementById("reflection");
-        var img = document.getElementById("img");
-        var container = document.getElementById("container");
-
-        ref.style.width = img.offsetWidth + "px";
-        ref.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
-        img.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
-        reload_palette();
+        adjustReflection();
+        getAndSetColors();
     }, 100);
 }
 
+function adjustReflection() {
+    var ref = document.getElementById("reflection");
+    var img = document.getElementById("img");
+    var container = document.getElementById("container");
+
+    ref.style.width = img.offsetWidth + "px";
+    ref.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
+    img.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
+}
+
 function copyToClipboard(string) {
     var el = document.createElement('textarea');
     el.value = string;
@@ -25,46 +29,65 @@ function copyToClipboard(string) {
     document.body.removeChild(el);
 }
 
-function reload_palette() {
+function getAndSetDominantColor() {
     const img = document.getElementById("img");
-    var dc = [0, 0, 0];
-    var palette = [[0, 0, 0]];
+    var rgbCol;
 
     if (img.complete) {
-        dc = colorThief.getColor(img);
-        palette = colorThief.getPalette(img);
+        rgbCol = colorThief.getColor(img);
     } else {
         img.addEventListener('load', function () {
-            dc = colorThief.getColor(img);
-            palette = colorThief.getPalette(img);
-        })
+            rgbCol = colorThief.getColor(img);
+        });
     }
 
-    document.getElementById("dc").style.backgroundColor = rgbToHex(dc[0], dc[1], dc[2]);
-    document.getElementById("dc").title = rgbToHex(dc[0], dc[1], dc[2]);
-    img.style.borderColor = rgbToHex(dc[0], dc[1], dc[2]);
+    var hexCol = rgbToHex(rgbCol[0], rgbCol[1], rgbCol[2]);
+    var dc = document.getElementById("dc");
 
-    var tag;
-    var el = document.getElementById("palette");
-    el.innerHTML = "";
+    dc.style.backgroundColor = hexCol;
+    dc.title = hexCol;
+    img.style.borderColor = hexCol;
+}
+
+function getAndSetPalette() {
+    const img = document.getElementById("img");
+    var tag, rgbCols, hexCol;
+    var palette = document.getElementById("palette");
+
+    palette.innerHTML = "" // Remove old palette
+
+    if (img.complete) {
+        rgbCols = colorThief.getPalette(img);
+    } else {
+        img.addEventListener('load', function () {
+            rgbCols = colorThief.getPalette(img);
+        });
+    }
+
+    rgbCols.forEach(function (c) {
+        hexCol = rgbToHex(c[0], c[1], c[2]);
 
-    palette.forEach(function (a) {
         tag = document.createElement("div");
         tag.classList.add("col");
-        tag.style.backgroundColor = rgbToHex(a[0], a[1], a[2]);
-        tag.title = rgbToHex(a[0], a[1], a[2]);
-        el.appendChild(tag);
+        tag.style.backgroundColor = hexCol;
+        tag.title = hexCol;
+        palette.appendChild(tag);
     });
 
     var cols = document.getElementsByClassName("col");
-    [...cols].forEach(function (c) {
-        c.addEventListener('click', function () {
-            copyToClipboard(c.title);
-            img.style.borderColor = c.title;
+    [...cols].forEach(function (co) {
+        co.addEventListener('click', function () {
+            copyToClipboard(co.title);
+            img.style.borderColor = co.title;
         });
     });
 }
 
+function getAndSetColors() {
+    getAndSetDominantColor();
+    getAndSetPalette();
+}
+
 function componentToHex(c) {
     var hex = c.toString(16);
     return hex.length == 1 ? "0" + hex : hex;
@@ -76,4 +99,4 @@ function rgbToHex(r, g, b) {
 
 //##########################################################################################################################
 
-renewReflection();
\ No newline at end of file
+renew();
\ No newline at end of file
