Implement loading a palette from the menu.

Author: Lattay

js/ColorModule.js

@@ -388,10 +388,12 @@ const ColorModule = (() => {
      * 
      * @param {*} paletteColors The colours of the palette
      */
-    function createColorPalette(paletteColors) {
+    function createColorPalette(paletteColors, clearCurrent=true) {
         //remove current palette
-        while (colorsMenu.childElementCount > 1)
-            colorsMenu.children[0].remove();
+        if (clearCurrent) {
+            while (colorsMenu.childElementCount > 1)
+                colorsMenu.children[0].remove();
+        }
 
         var lightestColor = new Color("hex", '#000000');
         var darkestColor = new Color("hex", '#ffffff');
@@ -527,4 +529,4 @@ const ColorModule = (() => {
         updateCurrentColor,
         getSelectedColor,
     }
-})();
+})();

js/FileManager.js

@@ -293,6 +293,13 @@ const FileManager = (() => {
         return JSON.stringify(dictionary);
     }
 
+    let fromMenu = false;
+
+    function openImportPaletteWindow() {
+        fromMenu = true;
+        document.getElementById('load-palette-browse-holder').click();
+    }
+
     function loadPalette() {
         if (browsePaletteHolder.files && browsePaletteHolder.files[0]) {
             let file = browsePaletteHolder.files[0];
@@ -326,12 +333,17 @@ const FileManager = (() => {
     }
 
     function 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');
+        if (fromMenu) {
+            ColorModule.createColorPalette(colors, clearCurrent=false);
+        } else {
+            // From splash screen
+            // 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');
+        }
     }
 
     function loadPaletteFromImage(e) {
@@ -587,6 +599,7 @@ const FileManager = (() => {
         openPixelExportWindow,
         openSaveProjectWindow,
         openImportImageWindow,
+        openImportPaletteWindow,
         open
     }
 

js/TopMenuModule.js

@@ -46,6 +46,9 @@ const TopMenuModule = (() => {
                     case 'Import':
                         Events.on('click', currSubmenuButton, FileManager.openImportImageWindow);
                         break;
+                    case 'Load palette':
+                        Events.on('click', currSubmenuButton, FileManager.openImportPaletteWindow);
+                        break;
                     case 'Export':
                         Events.on('click', currSubmenuButton, FileManager.openPixelExportWindow);
                         break;
@@ -139,4 +142,4 @@ const TopMenuModule = (() => {
         addInfoElement,
         resetInfos
     }
-})();
+})();

views/main-menu.hbs

@@ -7,6 +7,7 @@
 			<li><button>Save project</button></li>
 			<li><button>Open</button></li>
 			<li><button>Import</button></li>
+			<li><button>Load palette</button></li>
 			<li><button id="export-button" class="disabled">Export</button></li>
 			<li><a href="https://lospec.com/pixel-editor">Exit</a></li>
 		</ul>
@@ -74,4 +75,4 @@
 			<li>{{> checkbox}}</li>
 		</ul>
 	</li>
-</ul>
+</ul>