From 4457d2178cdf1ebbb83c79e8621f49aaddc93b4f Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Mon, 12 Jul 2021 11:36:30 +0200 Subject: [PATCH] Added Input.js Got rid of the "on" files, refactored the rest of the code to use the functions declared in Input.js --- js/Input.js | 26 +++++++++++++++++++++++ js/_createButton.js | 4 ++-- js/_editorMode.js | 4 ++-- js/_fileMenu.js | 2 +- js/_layer.js | 2 +- js/_settings.js | 2 +- js/_toolButtons.js | 43 ++++++++++++++++++-------------------- js/pixel-editor.js | 5 +---- js/util/on.js | 22 ------------------- js/util/onChildren.js | 14 ------------- js/util/onClick.js | 9 -------- js/util/onClickChildren.js | 13 ------------ 12 files changed, 54 insertions(+), 92 deletions(-) create mode 100644 js/Input.js delete mode 100644 js/util/on.js delete mode 100644 js/util/onChildren.js delete mode 100644 js/util/onClick.js delete mode 100644 js/util/onClickChildren.js diff --git a/js/Input.js b/js/Input.js new file mode 100644 index 0000000..3725b3d --- /dev/null +++ b/js/Input.js @@ -0,0 +1,26 @@ +class Input { + static on(event, elementId, functionCallback, ...args) { + //if element provided is string, get the actual element + const element = Util.getElement(elementId); + + element.addEventListener(event, + function (e) { + // e = event + //this = element clicked + functionCallback(e, this, args); + //if you need to access the event or this variable, you need to add them + //when you define the callback, but you cant use the word this, eg: + //on('click', menuButton, function (e, button) {}); + }); + } + + static onChildren(event, parentElement, functionCallback, ...args) { + parentElement = Util.getElement(parentElement); + const children = parentElement.children; + + //loop through children and add onClick listener + for (var i = 0; i < children.length; i++) { + on(event, children[i], functionCallback, args); + } + } +} \ No newline at end of file diff --git a/js/_createButton.js b/js/_createButton.js index d0f516d..c7b92d2 100644 --- a/js/_createButton.js +++ b/js/_createButton.js @@ -37,7 +37,7 @@ function create(isSplash) { /** Triggered when the "Create" button in the new pixel dialogue is pressed * */ -on('click', 'create-button', function (){ +Input.on('click', 'create-button', function (){ console.log("Here"); // Getting the values of the form var width = Util.getValue('size-width'); @@ -70,7 +70,7 @@ on('click', 'create-button', function (){ /** Triggered when the "Create" button in the new pixel dialogue is pressed * */ -on('click', 'create-button-splash', function (){ + Input.on('click', 'create-button-splash', function (){ // Getting the values of the form var width = Util.getValue('size-width-splash'); var height = Util.getValue('size-height-splash'); diff --git a/js/_editorMode.js b/js/_editorMode.js index 9d98cf2..6fab5b3 100644 --- a/js/_editorMode.js +++ b/js/_editorMode.js @@ -7,7 +7,7 @@ let modes = { } } -on('click', 'switch-editor-mode-splash', function (e) { +Input.on('click', 'switch-editor-mode-splash', function (e) { console.log('switching mode') switchMode(); }); @@ -69,6 +69,6 @@ function switchMode(mustConfirm = true) { } } -on('click', 'switch-mode-button', function (e) { +Input.on('click', 'switch-mode-button', function (e) { switchMode(); }); diff --git a/js/_fileMenu.js b/js/_fileMenu.js index 59ad06e..301c14a 100644 --- a/js/_fileMenu.js +++ b/js/_fileMenu.js @@ -8,7 +8,7 @@ for (var i = 1; i < mainMenuItems.length; i++) { var menuButton = menuItem.children[0]; //when you click a main menu items button - on('click', menuButton, function (e, button) { + Input.on('click', menuButton, function (e, button) { Util.select(button.parentElement); }); diff --git a/js/_layer.js b/js/_layer.js index 7ad32ca..0787620 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -24,7 +24,7 @@ let oldLayerName = null; let dragStartLayer; // Binding the add layer button to the function -on('click',"add-layer-button", addLayer, false); +Input.on('click',"add-layer-button", addLayer, false); /** Handler class for a single canvas (a single layer) * diff --git a/js/_settings.js b/js/_settings.js index 22df17d..0b61465 100644 --- a/js/_settings.js +++ b/js/_settings.js @@ -26,7 +26,7 @@ else{ console.log(settings); //on clicking the save button in the settings dialog -on('click', 'save-settings', saveSettings); +Input.on('click', 'save-settings', saveSettings); function saveSettings() { //check if values are valid diff --git a/js/_toolButtons.js b/js/_toolButtons.js index 32faf91..fe726a2 100644 --- a/js/_toolButtons.js +++ b/js/_toolButtons.js @@ -1,38 +1,38 @@ //pencil -on('click',"pencil-button", function(){ +Input.on('click',"pencil-button", function(){ tool.pencil.switchTo(); }, false); //pencil bigger -on('click',"pencil-bigger-button", function(){ +Input.on('click',"pencil-bigger-button", function(){ tool.pencil.brushSize++; }, false); //pencil smaller -on('click',"pencil-smaller-button", function(){ +Input.on('click',"pencil-smaller-button", function(){ if(tool.pencil.brushSize > 1) tool.pencil.brushSize--; }, false); //eraser -on('click',"eraser-button", function(){ +Input.on('click',"eraser-button", function(){ console.log("selecting eraser"); tool.eraser.switchTo(); }, false); //eraser bigger -on('click',"eraser-bigger-button", function(){ +Input.on('click',"eraser-bigger-button", function(){ tool.eraser.brushSize++; }, false); //eraser smaller -on('click',"eraser-smaller-button", function(e){ +Input.on('click',"eraser-smaller-button", function(e){ if(tool.eraser.brushSize > 1) tool.eraser.brushSize--; }, false); // rectangle -on('click','rectangle-button', function(e){ +Input.on('click','rectangle-button', function(e){ // If the user clicks twice on the button, they change the draw mode if (currentTool.name == 'rectangle') { if (rectangleDrawMode == 'empty') { @@ -50,7 +50,7 @@ on('click','rectangle-button', function(e){ }, false); // ellipse -on('click','ellipse-button', function(e){ +Input.on('click','ellipse-button', function(e){ // If the user clicks twice on the button, they change the draw mode if (currentTool.name == 'ellipse') { if (ellipseDrawMode == 'empty') { @@ -68,60 +68,57 @@ on('click','ellipse-button', function(e){ }, false); // rectangle bigger -on('click',"rectangle-bigger-button", function(){ +Input.on('click',"rectangle-bigger-button", function(){ tool.rectangle.brushSize++; }, false); // rectangle smaller -on('click',"rectangle-smaller-button", function(e){ +Input.on('click',"rectangle-smaller-button", function(e){ if(tool.rectangle.brushSize > 1) tool.rectangle.brushSize--; }, false); // ellipse bigger -on('click',"ellipse-bigger-button", function(){ +Input.on('click',"ellipse-bigger-button", function(){ tool.ellipse.brushSize++; }, false); // ellipse smaller -on('click',"ellipse-smaller-button", function(e){ +Input.on('click',"ellipse-smaller-button", function(e){ if(tool.ellipse.brushSize > 1) tool.ellipse.brushSize--; }, false); //fill -on('click',"fill-button", function(){ +Input.on('click',"fill-button", function(){ tool.fill.switchTo(); }, false); //pan -on('click',"pan-button", function(){ +Input.on('click',"pan-button", function(){ tool.pan.switchTo(); }, false); //eyedropper -on('click',"eyedropper-button", function(){ +Input.on('click',"eyedropper-button", function(){ tool.eyedropper.switchTo(); }, false); //rectangular selection button -on('click', "rectselect-button", function(){ +Input.on('click', "rectselect-button", function(){ tool.rectselect.switchTo(); }, false); //line -on('click',"line-button", function(){ +Input.on('click',"line-button", function(){ tool.line.switchTo(); }, false); -on('click',"line-bigger-button", function(){ +Input.on('click',"line-bigger-button", function(){ tool.line.brushSize++; }, false); -on('click',"line-smaller-button", function(){ +Input.on('click',"line-smaller-button", function(){ if(tool.line.brushSize > 1) tool.line.brushSize--; -}, false); - - -/*global on */ +}, false); \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 383bb3f..a5176ad 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -1,12 +1,9 @@ /**utilities**/ -//=include util/on.js -//=include util/onChildren.js -//=include util/onClick.js -//=include util/onClickChildren.js //=include lib/cookies.js //=include _pixelEditorUtility.js //=include lib/sortable.js //=include Util.js +//=include Input.js //=include Color.js /**init**/ diff --git a/js/util/on.js b/js/util/on.js deleted file mode 100644 index 8eba088..0000000 --- a/js/util/on.js +++ /dev/null @@ -1,22 +0,0 @@ -//add event listener for any element which calls a function -//element can be provided as a direct reference or with just a string of the name - -function on(event, elementId, functionCallback) { - - - - //if element provided is string, get the actual element - var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId); - - //console.log('added '+event+' event listener on '+element) - - element.addEventListener(event, - function (e) { - // e = event - //this = element clicked - functionCallback(e, this); - //if you need to access the event or this variable, you need to add them - //when you define the callback, but you cant use the word this, eg: - //on('click', menuButton, function (e, button) {}); - }); -} \ No newline at end of file diff --git a/js/util/onChildren.js b/js/util/onChildren.js deleted file mode 100644 index 4ad6f16..0000000 --- a/js/util/onChildren.js +++ /dev/null @@ -1,14 +0,0 @@ -//add event listener to each of specified element's children - -function onChildren(event, parentElement, functionCallback) { - console.log('onChildren()'); - - var parentElement = (typeof parentElement == 'string' ? document.getElementById(parentElement) : parentElement); - - var children = parentElement.children; - - //loop through children and add onClick listener - for (var i = 0; i < children.length; i++) { - on(event, children[i],functionCallback); - } -} \ No newline at end of file diff --git a/js/util/onClick.js b/js/util/onClick.js deleted file mode 100644 index f70c671..0000000 --- a/js/util/onClick.js +++ /dev/null @@ -1,9 +0,0 @@ -//DEPRECATED - USE on('click') - - -//add click event listener for any element which calls a function -//element can be provided as a direct reference or with just a string of the name -function onClick(elementId, functionCallback) { - var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId); - element.addEventListener('click',functionCallback); -} \ No newline at end of file diff --git a/js/util/onClickChildren.js b/js/util/onClickChildren.js deleted file mode 100644 index a4b073a..0000000 --- a/js/util/onClickChildren.js +++ /dev/null @@ -1,13 +0,0 @@ -//add click listener to each of specified element's children - -function onClickChildren(parentElement, functionCallback) { - - var parentElement = (typeof parentElement == 'string' ? document.getElementById(parentElement) : parentElement); - - var children = parentElement.children; - - //loop through children and add onClick listener - for (var i = 0; i < children.length; i++) { - onClick(children[i],functionCallback); - } -} \ No newline at end of file