Started binding splash page events (new custom pixel section)

js/_createButton.js

@@ -1,3 +1,43 @@
+// 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
+    if (isSplash) {
+        splashPostfix = '-splash';
+    }
+
+    var width = getValue('size-width' + splashPostfix);
+    var height = getValue('size-height' + splashPostfix);
+
+    // If I'm creating from the splash screen, I use the splashMode variable
+    var mode = isSplash ? splashMode : getValue('editor-mode');
+
+    newPixel(width, height, mode);
+    
+    // If I'm not creating from the splash page, then this is not the first project I've created
+    if (!isSplash)
+        document.getElementById('new-pixel-warning').style.display = 'block';
+
+    //get selected palette name
+    var selectedPalette = getText('palette-button' + splashPostfix);
+    if (selectedPalette == 'Choose a palette...') 
+        selectedPalette = 'none';
+
+    //track google event
+    ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
+
+
+    //reset new form
+    setValue('size-width', 64);
+    setValue('size-height', 64);
+    setValue("editor-mode", 'Advanced')
+
+    setText('editor-mode-button', 'Choose a mode...');
+    setText('palette-button', 'Choose a palette...');
+    setText('preset-button', 'Choose a preset...');
+}
+
 /** Triggered when the "Create" button in the new pixel dialogue is pressed
  * 
  */
@@ -29,3 +69,35 @@ on('click', 'create-button', function (){
     setText('palette-button', 'Choose a palette...');
     setText('preset-button', 'Choose a preset...');
 });
+
+/** Triggered when the "Create" button in the new pixel dialogue is pressed
+ * 
+ */
+on('click', 'create-button-splash', function (){
+    // Getting the values of the form
+    var width = getValue('size-width-splash');
+    var height = getValue('size-height-splash');
+    var mode = 'basic';
+
+    // Creating a new pixel with those properties
+    newPixel(width, height, mode);
+    document.getElementById('new-pixel-warning').style.display = 'block';
+
+    //get selected palette name
+    /*var selectedPalette = getText('palette-button');
+    if (selectedPalette == 'Choose a palette...') */
+        selectedPalette = 'none';
+
+    //track google event
+    ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
+
+
+    //reset new form
+    setValue('size-width-splash', 64);
+    setValue('size-height-splash', 64);
+    /*setValue("editor-mode", 'Advanced')
+
+    setText('editor-mode-button', 'Choose a mode...');
+    setText('palette-button', 'Choose a palette...');
+    setText('preset-button', 'Choose a preset...');*/   
+});

js/_palettes.js

@@ -1,40 +1,62 @@
+const { on } = require("gulp");
+
 //populate palettes list in new pixel menu
 Object.keys(palettes).forEach(function(paletteName,index) {
 
     var palettesMenu = document.getElementById('palette-menu');
+    var splashPalettes = document.getElementById('palette-menu-splash');
 
     //create button
     var button = document.createElement('button');
     button.appendChild(document.createTextNode(paletteName));
 
-    //insert new element
-    palettesMenu.appendChild(button);
-
     //if the palette was specified by the user, change the dropdown to it
     if (palettes[paletteName].specified == true) {
         setText('palette-button', paletteName);
+        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';
     }
 
-    on('click', button, function() {
+    var buttonEvent = function() {
 
         //hide the dropdown menu
         deselect('palette-menu');
         deselect('palette-button');
+        deselect('palette-menu-splash');
+        deselect('palette-button-splash');
 
         //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);
-    });
+        setText('palette-button-splash', paletteName);
+    };
+
+    on('click', button, buttonEvent);
+
+    //insert new element
+    palettesMenu.appendChild(button);
+
+    // Making a copy for the splash page too
+    var copyButton = button.cloneNode(true);
+    // Attaching the same event
+    on('click', copyButton, buttonEvent);
+    // Appending it to the splash palette menu
+    splashPalettes.appendChild(copyButton);
 });
 
 //select no palette
 on('click', 'no-palette-button', 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
@@ -43,13 +65,20 @@ on('click', 'load-palette-button', function () {
 });
 
 
-
 on('click', 'palette-button', function (e){
     toggle('palette-button');
     toggle('palette-menu');
 
     deselect('preset-button');
     deselect('preset-menu');
+
+    // Splash version
+    toggle('palette-button-splash');
+    toggle('palette-menu-splash');
+
+    deselect('preset-button-splash');
+    deselect('preset-menu-splash');
+
     e.stopPropagation();
 });
 
@@ -59,4 +88,10 @@ on('click', 'new-pixel', function (){
     deselect('preset-menu');
     deselect('palette-button');
     deselect('palette-menu');
+
+    // Splash version
+    deselect('palette-button-splash');
+    deselect('palette-menu-splash');
 });
+
+// ISSUE: use the same functions for the splash menu