From 1a6079cc813377897fc59532323eaa3ba7f5655d Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 22 Jul 2021 16:40:58 +0200 Subject: [PATCH] Removed "colors" global variable --- js/ColorModule.js | 16 +++++++++------- js/History.js | 12 ++++++------ js/Startup.js | 2 +- js/_jscolor.js | 6 +++--- js/_mouseEvents.js | 6 +++--- js/_variables.js | 5 +---- 6 files changed, 23 insertions(+), 24 deletions(-) diff --git a/js/ColorModule.js b/js/ColorModule.js index 676508c..7e7776e 100644 --- a/js/ColorModule.js +++ b/js/ColorModule.js @@ -6,7 +6,9 @@ const ColorModule = (() => { let currentPalette = []; // Reference to the HTML palette const coloursList = document.getElementById("palette-list"); - + // Reference to the colours menu + const colorsMenu = document.getElementById("colors-menu"); + // Binding events to callbacks console.info("Initialized Color Module.."); document.getElementById('jscolor-hex-input').addEventListener('change',colorChanged, false); @@ -52,7 +54,7 @@ const ColorModule = (() => { colors = document.getElementsByClassName('color-button'); //loop through all colors in palette - for (var i = 0; i < colors.length; i++) { + for (let i = 0; i < colors.length; i++) { //if generated color matches this color if (newColorHex == colors[i].jscolor.toString()) { //if the color isnt the one that has the picker currently open @@ -254,7 +256,7 @@ const ColorModule = (() => { //if color is a string, then find the corresponding button if (typeof color === 'string') { //get all colors in palette - colors = document.getElementsByClassName('color-button'); + let colors = document.getElementsByClassName('color-button'); //loop through colors for (var i = 0; i < colors.length; i++) { @@ -278,12 +280,12 @@ const ColorModule = (() => { color.jscolor.hide(); //find lightest color in palette - var colors = document.getElementsByClassName('color-button'); - var lightestColor = [0,null]; - for (var i = 0; i < colors.length; i++) { + let colors = document.getElementsByClassName('color-button'); + let lightestColor = [0,null]; + for (let i = 0; i < colors.length; i++) { //get colors lightness - var lightness = Color.rgbToHsl(colors[i].jscolor.toRgb()).l; + let lightness = Color.rgbToHsl(colors[i].jscolor.toRgb()).l; //if not the color we're deleting if (colors[i] != color) { diff --git a/js/History.js b/js/History.js index b515195..e366175 100644 --- a/js/History.js +++ b/js/History.js @@ -416,12 +416,12 @@ class HistoryState { this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.undo = function () { - var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); + let currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); currentLayer.context.putImageData(this.canvas, 0, 0); //find new color in palette and change it back to old color - var colors = document.getElementsByClassName('color-button'); - for (var i = 0; i < colors.length; i++) { + let colors = document.getElementsByClassName('color-button'); + for (let i = 0; i < colors.length; i++) { //console.log(newColorValue, '==', colors[i].jscolor.toString()); if (newColorValue == colors[i].jscolor.toString()) { colors[i].jscolor.fromString(oldColorValue); @@ -433,12 +433,12 @@ class HistoryState { }; this.redo = function () { - var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); + let currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); currentLayer.context.putImageData(this.canvas, 0, 0); //find old color in palette and change it back to new color - var colors = document.getElementsByClassName('color-button'); - for (var i = 0; i < colors.length; i++) { + let colors = document.getElementsByClassName('color-button'); + for (let i = 0; i < colors.length; i++) { //console.log(oldColorValue, '==', colors[i].jscolor.toString()); if (oldColorValue == colors[i].jscolor.toString()) { colors[i].jscolor.fromString(newColorValue); diff --git a/js/Startup.js b/js/Startup.js index cc47b75..e9d3477 100644 --- a/js/Startup.js +++ b/js/Startup.js @@ -152,7 +152,7 @@ const Startup = (() => { let selectedPalette = Util.getText('palette-button' + splashPostfix); //remove current palette - colors = document.getElementsByClassName('color-button'); + let colors = document.getElementsByClassName('color-button'); while (colors.length > 0) { colors[0].parentElement.remove(); } diff --git a/js/_jscolor.js b/js/_jscolor.js index 11efd26..dc5fd29 100644 --- a/js/_jscolor.js +++ b/js/_jscolor.js @@ -1102,15 +1102,15 @@ if (!window.jscolor) { window.jscolor = (function () { hexInput.colorElement = this.styleElement; //disable delete button if last color - var colors = document.getElementsByClassName('color-button'); - var deleteButton = document.getElementsByClassName('delete-color-button')[0]; + let colors = document.getElementsByClassName('color-button'); + let deleteButton = document.getElementsByClassName('delete-color-button')[0]; if(colors.length == 1) deleteButton.classList.add('disabled'); else deleteButton.classList.remove('disabled'); //hide duplicate color warning - var duplicateColorWarning = document.getElementById('duplicate-color-warning'); + let duplicateColorWarning = document.getElementById('duplicate-color-warning'); duplicateColorWarning.style.visibility = 'hidden'; }; diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index b1f4511..85de950 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -99,13 +99,13 @@ window.addEventListener("mouseup", function (mouseEvent) { layers[i].context.fillStyle = currentGlobalColor; } - var colors = document.getElementsByClassName('color-button'); - for (var i = 0; i < colors.length; i++) { + let colors = document.getElementsByClassName('color-button'); + for (let i = 0; i < colors.length; i++) { //if picked color matches this color if (newColor == colors[i].jscolor.toString()) { //remove current color selection - var selectedColor = document.querySelector("#colors-menu li.selected") + let selectedColor = document.querySelector("#colors-menu li.selected") if (selectedColor) selectedColor.classList.remove("selected"); //set current color diff --git a/js/_variables.js b/js/_variables.js index f20dcfe..a6cda99 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -1,7 +1,7 @@ //init variables var canvasSize; // REFACTOR: Canvas class / getCanvasSize method var zoom = 7; // REFACTOR: EditorState class/IIFE? -var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter? +var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter? <- probably editor state as it is changed by tools var documentCreated = false; // REFACTOR: EditorState //common elements @@ -11,9 +11,6 @@ var eyedropperPreview = document.getElementById("eyedropper-preview"); // REFACTOR: File class? var canvasView = document.getElementById("canvas-view"); -// REFACTOR: find some way to put these in ColorModule? -var colors = document.getElementsByClassName("color-button"); -var colorsMenu = document.getElementById("colors-menu"); // main canvas // REFACTOR: carefully check if it's possible to remove this one