From 6c8a27fde574591976e6eb68ab724934a34e4323 Mon Sep 17 00:00:00 2001
From: thomas <22506439+thomasasfk@users.noreply.github.com>
Date: Fri, 31 Mar 2023 20:16:41 +0100
Subject: [PATCH] Round to multiples of 8 always (#37)

It was set at 8 for a reason, I was a bit dumb to change this in the first place...
---
 javascript/aspectRatioController.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/javascript/aspectRatioController.js b/javascript/aspectRatioController.js
index af8bcc8..3db6fcb 100644
--- a/javascript/aspectRatioController.js
+++ b/javascript/aspectRatioController.js
@@ -43,9 +43,15 @@ class ContainerController {
     }
 
     setVal(text) {
-        this.updateVal(text);
+        this.updateVal(
+            ContainerController.roundToClosestMultipleOf8(text)
+        );
         this.eventHandler();
     }
+
+    static roundToClosestMultipleOf8(num) {
+        return Math.round(Number(num) / 8) * 8;
+    }
 }
 
 function _reverseAspectRatio(ar) {
@@ -76,7 +82,6 @@ class AspectRatioController {
         };
 
         Object.values(this.dimensions).forEach(dimension => {
-            dimension.step = 1;
             dimension.addEventListener('change', (e) => {
                 e.preventDefault()
                 this._syncValues(dimension);
@@ -227,10 +232,10 @@ class AspectRatioController {
                 <div id="${page}_ratio" class="gr-block gr-box relative w-full border-solid border border-gray-200 gr-padded">
                   <select id="${page}_select_aspect_ratio" class="gr-box gr-input w-full disabled:cursor-not-allowed">
                   ${
-                      [...new Set(allOptions)].map(r => {
-                          return '<option class="ar-option">' + r + '</option>'
-                      }).join('\n')
-                  }
+                    [...new Set(allOptions)].map(r => {
+                        return '<option class="ar-option">' + r + '</option>'
+                    }).join('\n')
+                }
                   </select>
                 </div>
                 `;