mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added Input.js 

Got rid of the "on" files, refactored the rest of the code to use the functions declared in Input.js
This commit is contained in:
unsettledgames 2021-07-12 11:36:30 +02:00
parent 6072528ad2
commit 4457d2178c
12 changed files with 54 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/Input.js Normal file
View File

@ -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);
}
}
}

4
js/_createButton.js
View File

@ -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');

4
js/_editorMode.js
View File

@ -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();
});

2
js/_fileMenu.js
View File

@ -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);
});

2
js/_layer.js
View File

@ -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)
*

2
js/_settings.js
View File

@ -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

43
js/_toolButtons.js
View File

@ -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);

5
js/pixel-editor.js
View File

@ -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**/

22
js/util/on.js
View File

@ -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) {});
});
}

14
js/util/onChildren.js
View File

@ -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);
}
}

9
js/util/onClick.js
View File

@ -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);
}

13
js/util/onClickChildren.js
View File

@ -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);
}
}