Added input fetching and validation

css/pixel-editor.scss

@@ -1007,10 +1007,20 @@ svg {
   input {
     position:relative;
     margin-left:10px;
-    width:10px;
-    height:10px;
+	height:10px;
+	width:20px;
   }
 
+  input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+	}
+	/* Firefox */
+	input[type=number] {
+	-moz-appearance: textfield;
+	}
+
   h2 {
     position:relative;
     display:inline-block;

js/_resizeCanvas.js

@@ -1,46 +1,61 @@
 let resizeCanvasContainer = document.getElementById("resize-canvas");
+let pivot = "middle";
+let resizeCanvasInitialized = false;
+let borders = {left: 0, right: 0, top: 0, bottom: 0};
 
 function openResizeCanvasWindow() {
+    if (!resizeCanvasInitialized) {
+        resizeCanvasInitialized = true;
+        initResizeCanvasInputs();
+    }
     showDialogue('resize-canvas');
-    console.log("aperta");
-    initButtons();
 }
 
-function initButtons() {
+function initResizeCanvasInputs() {
     let buttons = document.getElementsByClassName("pivot-button");
 
-    console.log("length: " + buttons.length);
-
     for (let i=0; i<buttons.length; i++) {
         buttons[i].addEventListener("click", changePivot);
     }
+
+    document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
+}
+
+function resizeCanvas(event) {
+    resizeCanvasUpdateBorders();
+}
+
+function resizeCanvasUpdateBorders() {
+    console.log(document.getElementById("rc-border-left").value);
+
+    // Getting input
+    borders.left = document.getElementById("rc-border-left").value;
+    borders.right = document.getElementById("rc-border-right").value;
+    borders.top = document.getElementById("rc-border-top").value;
+    borders.bottom = document.getElementById("rc-border-bottom").value;
+
+    // Validating input
+    borders.left == "" ? borders.left = 0 : borders.left = Math.round(parseInt(borders.left));
+    borders.right == "" ? borders.right = 0 : borders.right = Math.round(parseInt(borders.right));
+    borders.top == "" ? borders.top = 0 : borders.top = Math.round(parseInt(borders.top));
+    borders.bottom == "" ? borders.bottom = 0 : borders.bottom = Math.round(parseInt(borders.bottom));
+
+    console.log(borders);
 }
 
 function changePivot(event) {
-    console.log("sas");
-    console.log(event.target);
+    pivot = event.target.getAttribute("value");
 }
 
 // Use a dialogue
-    // Let the user specify data
-        // Borders
-        // Pivot
     // Apply the new sizing
     // Move the images on the layers to fit what the user actually decided
 
-// Function to handle dropdown menu for pivots
-    // Open when clicking on the button
-    // Save the chosen pivot
-    // Close the menu
-
-// Function to retrieve data from the input field
-    // Store the data in the form into variables
-    // Call the function to resize the canvases
-
 // Function to actually resize the canvases
     // Save all imageDatas
     // Resize the canvases
     // Clear the canvases
 
 // Function to place the imageDatas as specified in the pivot section
-    // Put the imageDatas in the right position
+    // Put the imageDatas in the right position
+    // Must crop the imageDatas if the canvas has being reduced

views/pixel-editor.hbs

@@ -269,19 +269,23 @@
             <!--BORDERS-->
             <span id = "borders-menu">
                 <span>
-                    Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    Left: <input id="rc-border-left" type="number" default="0" step="1" 
+                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
                 </span>
                 
                 <span>
-                    Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    Right: <input id="rc-border-right" type="number" default="0" step="1" 
+                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
                 </span>
                 
                 <span>
-                    Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    Top: <input id="rc-border-top" type="number" default="0" step="1" 
+                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
                 </span>
                 
                 <span>
-                    Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    Bottom: <input id="rc-border-bottom" default="0" step="1" type="number" 
+                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
                 </span>
 
                 <button id = "resize-canvas-confirm">Resize canvas</button>