From 8ca148e34caf6089dea6e779cd6d283fa162afbe Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 23 Jul 2021 16:35:42 +0200 Subject: [PATCH] Removed _loadPalette.js and moved its logic to FileManager.js --- js/FileManager.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++ js/_loadPalette.js | 52 -------------------------------------------- js/pixel-editor.js | 3 --- 3 files changed, 54 insertions(+), 55 deletions(-) delete mode 100644 js/_loadPalette.js diff --git a/js/FileManager.js b/js/FileManager.js index cac3397..c6cf442 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -1,8 +1,13 @@ +// TODO: the button to load a palette disappeared for some reason, should add it back + const FileManager = (() => { // Binding the browse holder change event to file loading const browseHolder = document.getElementById('open-image-browse-holder'); + const browsePaletteHolder = document.getElementById('load-palette-browse-holder'); + Events.on('change', browseHolder, loadFile); + Events.on('change', browsePaletteHolder, loadPalette); function saveProject() { //create name @@ -188,6 +193,55 @@ const FileManager = (() => { return JSON.stringify(dictionary); } + function loadPalette() { + if (this.files && this.files[0]) { + //make sure file is allowed filetype + var fileContentType = this.files[0].type; + if (fileContentType == 'image/png' || fileContentType == 'image/gif') { + + //load file + var fileReader = new FileReader(); + fileReader.onload = function(e) { + var img = new Image(); + img.onload = function() { + + //draw image onto the temporary canvas + var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder'); + var loadPaletteContext = loadPaletteCanvas.getContext('2d'); + + loadPaletteCanvas.width = img.width; + loadPaletteCanvas.height = img.height; + + loadPaletteContext.drawImage(img, 0, 0); + + //create array to hold found colors + var colorPalette = []; + var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data; + + //loop through pixels looking for colors to add to palette + for (var i = 0; i < imagePixelData.length; i += 4) { + const newColor = {r:imagePixelData[i],g:imagePixelData[i + 1],b:imagePixelData[i + 2]}; + var color = '#' + Color.rgbToHex(newColor); + if (colorPalette.indexOf(color) == -1) { + colorPalette.push(color); + } + } + + //add to palettes so that it can be loaded when they click okay + palettes['Loaded palette'] = {}; + palettes['Loaded palette'].colors = colorPalette; + Util.setText('palette-button', 'Loaded palette'); + Util.setText('palette-button-splash', 'Loaded palette'); + toggle('palette-menu-splash'); + }; + img.src = e.target.result; + }; + fileReader.readAsDataURL(this.files[0]); + } + else alert('Only PNG and GIF files are supported at this time.'); + } + } + return { saveProject, exportProject, diff --git a/js/_loadPalette.js b/js/_loadPalette.js deleted file mode 100644 index 2003f34..0000000 --- a/js/_loadPalette.js +++ /dev/null @@ -1,52 +0,0 @@ -//this is called when a user picks a file after selecting "load palette" from the new pixel dialogue - -// REFACTOR: ColorModule? Or maybe move it to _palettes and give a name to that IIFE -// TODO: load palette from .lpe file -document.getElementById('load-palette-browse-holder').addEventListener('change', function () { - if (this.files && this.files[0]) { - //make sure file is allowed filetype - var fileContentType = this.files[0].type; - if (fileContentType == 'image/png' || fileContentType == 'image/gif') { - - //load file - var fileReader = new FileReader(); - fileReader.onload = function(e) { - var img = new Image(); - img.onload = function() { - - //draw image onto the temporary canvas - var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder'); - var loadPaletteContext = loadPaletteCanvas.getContext('2d'); - - loadPaletteCanvas.width = img.width; - loadPaletteCanvas.height = img.height; - - loadPaletteContext.drawImage(img, 0, 0); - - //create array to hold found colors - var colorPalette = []; - var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data; - - //loop through pixels looking for colors to add to palette - for (var i = 0; i < imagePixelData.length; i += 4) { - const newColor = {r:imagePixelData[i],g:imagePixelData[i + 1],b:imagePixelData[i + 2]}; - var color = '#' + Color.rgbToHex(newColor); - if (colorPalette.indexOf(color) == -1) { - colorPalette.push(color); - } - } - - //add to palettes so that it can be loaded when they click okay - palettes['Loaded palette'] = {}; - palettes['Loaded palette'].colors = colorPalette; - Util.setText('palette-button', 'Loaded palette'); - Util.setText('palette-button-splash', 'Loaded palette'); - toggle('palette-menu-splash'); - }; - img.src = e.target.result; - }; - fileReader.readAsDataURL(this.files[0]); - } - else alert('Only PNG and GIF files are supported at this time.'); - } -}); diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 2e525e1..111ec89 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -39,9 +39,6 @@ //=include _paletteBlock.js //=include SplashPage.js -/**load file**/ -//=include _loadPalette.js - /**buttons**/ //=include _toolButtons.js //=include FileManager.js