Binded new pixel events to splash page and to create dialogue

css/pixel-editor.scss

@@ -1709,8 +1709,10 @@ div#pb-options {
 					text-align: center;
 					height:25px;
 					cursor:pointer;
-	
+					z-index:1;
+
 					p {
+						z-index:0;
 						-ms-transform: translateY(-60%);
 						transform: translateY(-60%);
 					}

js/_createButton.js

@@ -1,5 +1,3 @@
-// OPTIMIZABLE: palette is known here, so why not pass it to _newPixel.js?
-
 function create(isSplash) {
     var splashPostfix = '';
     // If I'm creating from the splash menu, I append '-splash' so I get the corresponding values

js/_editorMode.js

@@ -8,11 +8,29 @@ let modes = {
 }
 
 let infoBox = document.getElementById('editor-mode-info');
+let currentSplashButton;
 
-function switchMode(currentMode, mustConfirm = true) {
+function splashMode(mouseEvent, mode) {
+    if (currentSplashButton == undefined) {
+        currentSplashButton = mouseEvent.target;
+        return;
+    }
+
+    if (mode !== pixelEditorMode) {
+        console.log("Mode target: " + mouseEvent.target);
+        // Remove selected class to old button
+        currentSplashButton.classList.remove("sp-interface-selected");
+        // Add selected class to new button
+        mouseEvent.target.classList.add("sp-interface-selected");
+    }
+
+    currentSplashButton = mouseEvent.target;
+}
+
+function switchMode(mustConfirm = true) {
 
 	//switch to advanced mode
-    if (currentMode == 'Basic') {
+    if (pixelEditorMode == 'Basic') {
         // Switch to advanced ez pez lemon squez
         document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
 		// Show the layer menus
@@ -56,7 +74,7 @@ function switchMode(currentMode, mustConfirm = true) {
 }
 
 on('click', 'switch-mode-button', function (e) {
-    switchMode(pixelEditorMode);
+    switchMode();
 });
 
 // Makes the menu open

js/_loadPalette.js

@@ -26,8 +26,6 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
                     var colorPalette = [];
                     var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data;
 
-                    console.log(imagePixelData);
-
                     //loop through pixels looking for colors to add to palette
                     for (var i = 0; i < imagePixelData.length; i += 4) {
                         var color = '#'+rgbToHex(imagePixelData[i],imagePixelData[i + 1],imagePixelData[i + 2]);
@@ -40,6 +38,8 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
                     palettes['Loaded palette'] = {};
                     palettes['Loaded palette'].colors = colorPalette;
                     setText('palette-button', 'Loaded palette');
+                    setText('palette-button-splash', 'Loaded palette');
+                    toggle('palette-menu-splash');
                 };
                 img.src = e.target.result;
             };

js/_newPixel.js

@@ -95,7 +95,11 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	}
 
 	//add colors from selected palette
-	var selectedPalette = getText('palette-button');
+	var selectedPalette;
+	if (!firstPixel)
+		var selectedPalette = getText('palette-button');
+	else
+		var selectedPalette = getText('palette-button-splash');
 
 	// If the user selected a palette and isn't opening a file, I load the selected palette
 	if (selectedPalette != 'Choose a palette...' && fileContent == null) {
@@ -103,7 +107,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 		//if this palette isnt the one specified in the url, then reset the url
 		if (!palettes[selectedPalette].specified)
 		  history.pushState(null, null, '/pixel-editor/app');
-
+		
 		//fill the palette with specified colours
 		createColorPalette(palettes[selectedPalette].colors,true);
 	}

js/_palettes.js

@@ -1,5 +1,3 @@
-const { on } = require("gulp");
-
 //populate palettes list in new pixel menu
 Object.keys(palettes).forEach(function(paletteName,index) {
 
@@ -16,7 +14,6 @@ Object.keys(palettes).forEach(function(paletteName,index) {
         setText('palette-button-splash', paletteName)
         //Show empty palette option
         document.getElementById('no-palette-button').style.display = 'block';
-        document.getElementById('no-palette-button-splash').style.display = 'block';
     }
 
     var buttonEvent = function() {
@@ -29,7 +26,6 @@ Object.keys(palettes).forEach(function(paletteName,index) {
 
         //show empty palette option
         document.getElementById('no-palette-button').style.display = 'block';
-        document.getElementById('no-palette-button-splash').style.display = 'block';
 
         //set the text of the dropdown to the newly selected preset
         setText('palette-button', paletteName);
@@ -49,23 +45,16 @@ Object.keys(palettes).forEach(function(paletteName,index) {
     splashPalettes.appendChild(copyButton);
 });
 
-//select no palette
-on('click', 'no-palette-button', function () {
+var noPaletteButtonClickEvent = function () {
     document.getElementById('no-palette-button').style.display = 'none';
     setText('palette-button', 'Choose a palette...');
+}
 
-    // Same for splash page
-    document.getElementById('no-palette-button-splash').style.display = 'none';
-    setText('palette-button-splash', 'Choose a palette...');
-});
-
-//select load palette
-on('click', 'load-palette-button', function () {
+var loadPaletteButtonEvent = function () {
     document.getElementById('load-palette-browse-holder').click();
-});
+}
 
-
-on('click', 'palette-button', function (e){
+var clickPaletteButtonEvent = function (e){
     toggle('palette-button');
     toggle('palette-menu');
 
@@ -76,11 +65,20 @@ on('click', 'palette-button', function (e){
     toggle('palette-button-splash');
     toggle('palette-menu-splash');
 
-    deselect('preset-button-splash');
-    deselect('preset-menu-splash');
-
     e.stopPropagation();
-});
+}
+
+//select no palette
+on('click', 'no-palette-button', noPaletteButtonClickEvent);
+
+//select load palette
+on('click', 'load-palette-button', loadPaletteButtonEvent);
+//select load palette
+on('click', 'load-palette-button-splash', loadPaletteButtonEvent);
+
+// Palette menu click
+on('click', 'palette-button', clickPaletteButtonEvent);
+on('click', 'palette-button-splash', clickPaletteButtonEvent);
 
 on('click', 'new-pixel', function (){
     deselect('editor-mode-menu');
@@ -92,6 +90,4 @@ on('click', 'new-pixel', function (){
     // Splash version
     deselect('palette-button-splash');
     deselect('palette-menu-splash');
-});
-
-// ISSUE: use the same functions for the splash menu
+});

views/pixel-editor.hbs

@@ -337,8 +337,8 @@
                         <h2>Editor mode</h2>
                         <div class="sp-np-entry" id="sp-mode-palette">
                             <div class="button-menu">
-                                <div class="bm-left"><p>Basic</p></div>
-                                <div class="sp-interface-selected bm-right"><p>Advanced</p></div>
+                                <div class="bm-left" onclick="splashMode(event,'Basic')"><p>Basic</p></div>
+                                <div class="sp-interface-selected bm-right" onclick="splashMode(event,'Advanced')"><p>Advanced</p></div>
                             </div> 
                         </div>
 
@@ -349,7 +349,7 @@
                         
                         <h2>Palette</h2>
                         <button id="palette-button-splash" class="dropdown-button">Choose a palette...</button>
-                        <div id="palette-menu-splash" class="dropdown-menu"><button id="no-palette-button-splash">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
+                        <div id="palette-menu-splash" class="dropdown-menu"><button id="load-palette-button-splash">Load palette...</button></div>
 
 
                         <div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>