Implement importing GIMP and .hex palettes.

js/FileManager.js

@@ -295,15 +295,29 @@ const FileManager = (() => {
     function loadPalette() {
         if (browsePaletteHolder.files && browsePaletteHolder.files[0]) {
             //make sure file is allowed filetype
-            var fileContentType = browsePaletteHolder.files[0].type;
+            let file = browsePaletteHolder.files[0];
-            if (fileContentType == 'image/png' || fileContentType == 'image/gif') {
+            var fileContentType =
+              file.type
+              || file.name.split('.').slice(-1)[0];
 
+            var fileReader = new FileReader();
+
+            let addPalette = (colors) => {
+                //add to palettes so that it can be loaded when they click okay
+                palettes['Loaded palette'] = {};
+                palettes['Loaded palette'].colors = colors;
+                Util.setText('palette-button', 'Loaded palette');
+                Util.setText('palette-button-splash', 'Loaded palette');
+                Util.toggle('palette-menu-splash');
+            }
+
+            switch (fileContentType) {
+              case 'image/png':
+              case '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');
@@ -326,18 +340,73 @@ const FileManager = (() => {
                             }
                         }
 
-                        //add to palettes so that it can be loaded when they click okay
+                        addPalette(colorPalette);
-                        palettes['Loaded palette'] = {};
-                        palettes['Loaded palette'].colors = colorPalette;
-                        Util.setText('palette-button', 'Loaded palette');
-                        Util.setText('palette-button-splash', 'Loaded palette');
-                        Util.toggle('palette-menu-splash');
                     };
                     img.src = e.target.result;
                 };
-                fileReader.readAsDataURL(browsePaletteHolder.files[0]);
+                break;
+              case 'gpl':
+                fileReader.onload = function() {
+                    file.text().then((content) => {
+                        let colorPalette = content.split(/\r?\n/)
+                            // Skip header line
+                            .slice(1)
+                            .map((line) => line.trim())
+                            .filter((line) => line != "")
+                            // discard comment lines
+                            .filter((line) => !line.startsWith('#'))
+                            // discard meta data lines
+                            .filter((line) => !line.includes(':'))
+                            .map((line) => {
+                                let components = line.split(/\s+/);
+
+                                if (components.length < 3) {
+                                    alert(`Invalid color specification ${line}.`);
+                                    return "#000000"
+                                }
+
+                                let [r, g, b, ...rest] = components;
+                                let color = {
+                                    r: parseInt(r),
+                                    g: parseInt(g),
+                                    b: parseInt(b),
+                                };
+
+                                if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b)) {
+                                    alert(`Invalid color specification ${line}.`);
+                                    return "#000000"
+                                }
+
+                                return '#' + Color.rgbToHex(color);
+                            });
+
+                        addPalette(colorPalette);
+                    });
+                };
+                break;
+              case 'hex':
+                fileReader.onload = function() {
+                  file.text().then((content) => {
+                      let colorPalette = content.split(/\r?\n/)
+                          .map((line) => line.trim())
+                          .filter((line) => line != "")
+                          // discard comment lines
+                          .filter((line) => !line.startsWith('#'))
+                          .map((line) => {
+                            if (line.match(/[0-9A-Fa-f]{6}/)) {
+                              return '#' + line;
+                            }
+                            alert(`Invalid hex color ${line}.`);
+                            return '#000000';
+                          });
+                      addPalette(colorPalette);
+                  });
+                };
+                break;
+              default:
+                alert('Only PNG, GIF, .hex and .gpl files are supported at this time.');
             }
-            else alert('Only PNG and GIF files are supported at this time.');
+            fileReader.readAsDataURL(browsePaletteHolder.files[0]);
         }
 
         browsePaletteHolder.value = null;

views/holders.hbs

@@ -2,7 +2,7 @@
 	<a id="save-image-link-holder" href="#">dl</a>
 	<a id="save-project-link-holder" href="#">dl</a>
 	<input id="open-image-browse-holder" type="file" accept="image/png, image/gif, .lpe" />
-	<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif" />
+	<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif, .gpl, .hex" />
 	<input id="import-image-browse-holder" type="file" accept="image/png" />
 	<canvas id="load-palette-canvas-holder"></canvas>
 </div>