Removed _loadPalette.js and moved its logic to FileManager.js

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,

js/_loadPalette.js

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

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