From f31fd5b5053e9146924066a6019275597e185cb7 Mon Sep 17 00:00:00 2001
From: Nicola <nicpal2000@gmail.com>
Date: Thu, 6 Oct 2022 11:20:09 +0200
Subject: [PATCH] Attempted to resize palette squares on scroll

---
 css/_colors-menu.scss | 10 ++--------
 js/ColorModule.js     | 24 +++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/css/_colors-menu.scss b/css/_colors-menu.scss
index b03bfa7..d4326bd 100644
--- a/css/_colors-menu.scss
+++ b/css/_colors-menu.scss
@@ -18,14 +18,8 @@
     resize: vertical;
 
 	li {
-		width: var(--top-nav-height);
-		height: var(--top-nav-height);
-		flex-basis: var(--top-nav-height);
-
-		&.noshrink {
-			flex-grow: 0;
-			flex-shrink: 0;
-		}
+		width: 48px;
+		height: 48px;
 	}
 
     svg {
diff --git a/js/ColorModule.js b/js/ColorModule.js
index fb22de3..cb7452f 100644
--- a/js/ColorModule.js
+++ b/js/ColorModule.js
@@ -7,13 +7,15 @@ const ColorModule = (() => {
     // Reference to the HTML palette
     const coloursList = document.getElementById("palette-list");
     // Reference to the colours menu
-    const colorsMenu = document.getElementById("colors-menu");
+    let colorsMenu = document.getElementById("colors-menu");
      
     // Binding events to callbacks
     document.getElementById('jscolor-hex-input').addEventListener('change',colorChanged, false);
     document.getElementById('jscolor-hex-input').addEventListener('input', colorChanged, false);
     document.getElementById('add-color-button').addEventListener('click', addColorButtonEvent, false);
 
+    Events.on("wheel", "colors-menu", resizeSquares);
+
     // const resizeObserver = new ResizeObserver(function(mutations) {
     //     console.log('mutations:', mutations);
     //     const h = mutations[0].contentRect.height;
@@ -31,6 +33,26 @@ const ColorModule = (() => {
         draggable: ".draggable-colour",
         onEnd: function() {Events.simulateMouseEvent(window, "mouseup");}
     });
+
+    function resizeSquares(event) {
+        for (let i=0; i< coloursList.children.length; i++) {
+            let width = parseInt(coloursList.children[i].style.width.replace("px", ""), 10);
+            let newWidth = (width - 2 * Math.sign(event.deltaY)) + "px";
+
+           /* coloursList.children[i].setAttribute("style", "width: " +  (width - 2 * Math.sign(event.deltaY)) + "px");
+            coloursList.children[i].setAttribute("style", "height: " +  (width - 2 * Math.sign(event.deltaY)) + "px");*/
+
+            coloursList.children[i].setAttribute("style", "width: 500px");
+            coloursList.children[i].style.width = '500px';
+            coloursList.children[i].setAttribute("style", "height: 500px");
+            coloursList.children[i].style.height = '500px';
+
+        }
+
+        let width = coloursList.children[0].style.width;
+        console.log(width);
+    }
+
     /** Changes all of one color to another after being changed from the color picker
      * 
      * @param {*} colorHexElement The element that has been changed