Added Startup IIFE to take care of the creation of a new project

It includes the old _createButton and _newPixel functions and a few private methods to divide the huge newPixel function into smaller chunks depending on their purpose. Those chunks could probably be part of other IIFEs, but we'll think about that in the future.
Fixed Input bug that caused the on function to pass an array of arguments instead of single arguments. Removed data_asdfgasd.hbs

js/Input.js

@@ -7,7 +7,7 @@ class Input {
         function (e) {
             // e = event
             //this = element clicked
-            functionCallback(e, this, args);
+            functionCallback(e, ...args);
             //if you need to access the event or this variable, you need to add them
             //when you define the callback, but you cant use the word this, eg:
             //on('click', menuButton, function (e, button) {});
@@ -20,7 +20,7 @@ class Input {
         
         //loop through children and add onClick listener
         for (var i = 0; i < children.length; i++) {
-            on(event, children[i], functionCallback, args);
+            on(event, children[i], functionCallback, ...args);
         }
     }
 }

js/PresetModule.js

@@ -17,6 +17,7 @@ const PresetModule = (() => {
             presetsMenu.appendChild(button);
 
             button.addEventListener('click', () => {
+                console.log("Preset: " + presetName);
                 //change dimentions on new pixel form
                 Util.setValue('size-width', presets[presetName].width);
                 Util.setValue('size-height', presets[presetName].height);
@@ -30,7 +31,6 @@ const PresetModule = (() => {
 
                 //set the text of the dropdown to the newly selected preset
                 Util.setText('preset-button', presetName);
-
             });
         });
 

js/Startup.js

@@ -1,3 +1,264 @@
 const Startup = (() => {
 
+    let firstPixel = true;
+    let splashPostfix = '';
+
+    Input.on('click', 'create-button', create, false);
+    Input.on('click', 'create-button-splash', create, true);
+
+    function create(e, isSplash) {
+        // If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
+        if (isSplash) {
+            splashPostfix = '-splash';
+        }
+        else {
+            splashPostfix = '';
+        }
+
+        console.log("New pixel");
+    
+        var width = Util.getValue('size-width' + splashPostfix);
+        var height = Util.getValue('size-height' + splashPostfix);
+        var selectedPalette = Util.getText('palette-button' + splashPostfix);
+    
+        newPixel(width, height);
+        
+        // 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';
+    
+        resetInput();
+    
+        //track google event
+        if (typeof ga !== 'undefined')
+            ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
+    }
+
+    /** TODO:
+     *  - Remove firstPixel: it's enough to pass to newPixel whether it's been called from the splash page or not
+     *  - Divide functions depending on their purpose:
+     * 		- initLayers()
+     * 		- initPalette()
+     * 		- openLPE()
+     */    
+
+    /** Creates a new, empty file
+     * 
+     * @param {*} width Start width of the canvas
+     * @param {*} height Start height of the canvas
+     * @param {*} fileContent If fileContent != null, then the newPixel is being called from the open menu
+     */
+    function newPixel (width, height, fileContent = null) {
+        // The palette is empty, at the beginning
+        ColorModule.resetPalette();
+
+        initLayers(width, height);
+        initPalette();
+
+        //fill background of canvas with bg color
+        fillCheckerboard();
+        fillPixelGrid();
+
+        // Closing the "New Pixel dialogue"
+        Dialogue.closeDialogue();
+        // Updating the cursor of the current tool
+        currentTool.updateCursor();
+
+        // The user is now able to export the Pixel
+        document.getElementById('export-button').classList.remove('disabled');
+        documentCreated = true;
+
+        // This is not the first Pixel anymore
+        firstPixel = false;
+
+        // Now, if I opened an LPE file
+        if (fileContent != null) {
+            loadLPE(fileContent);
+            // Deleting the default layer
+            deleteLayer(false);
+        }
+    }
+
+    function initLayers(width, height) {
+         // If this is the first pixel I'm creating since the app has started
+         if (firstPixel) {
+            // I configure the layers elements
+            layerListEntry = layerList.firstElementChild;
+
+            // Creating the first layer
+            currentLayer = new Layer(width, height, canvas, layerListEntry);
+            currentLayer.canvas.style.zIndex = 2;
+        }
+        else {
+            // If it's not the first Pixel, I have to reset the app
+
+            // Deleting all the extra layers and canvases, leaving only one
+            let nLayers = layers.length;
+            for (let i=2; i < layers.length - nAppLayers; i++) {
+                let currentEntry = layers[i].menuEntry;
+                let associatedLayer;
+
+                if (currentEntry != null) {
+                    // Getting the associated layer
+                    associatedLayer = getLayerByID(currentEntry.id);
+
+                    // Deleting its canvas
+                    associatedLayer.canvas.remove();
+
+                    // Adding the id to the unused ones
+                    unusedIDs.push(currentEntry.id);
+                    // Removing the entry from the menu
+                    currentEntry.remove();
+                }
+            }
+
+            // Removing the old layers from the list
+            for (let i=2; i<nLayers - nAppLayers; i++) {
+                layers.splice(2, 1);
+            }
+
+            // Setting up the current layer
+            layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
+            currentLayer = layers[1];
+            currentLayer.canvas.style.zIndex = 2;
+            
+            // Updating canvas size to the new size
+            for (let i=0; i<nLayers; i++) {
+                layers[i].canvasSize = [width, height];
+            }
+        }
+
+        // Adding the checkerboard behind it
+        checkerBoard = new Layer(width, height, checkerBoardCanvas);
+
+        // Creating the vfx layer on top of everything
+        VFXLayer = new Layer(width, height, VFXCanvas);
+
+        // Tmp layer to draw previews on
+        TMPLayer = new Layer(width, height, TMPCanvas);
+        
+        // Pixel grid
+        pixelGrid = new Layer(width, height, pixelGridCanvas);
+        // Setting the general canvasSize
+        canvasSize = currentLayer.canvasSize;
+
+        if (firstPixel) {
+            // Cloning the entry so that when I change something on the first layer, those changes aren't
+            // propagated to the other ones
+            layerListEntry = layerListEntry.cloneNode(true);
+            // Adding the first layer and the checkerboard to the list of layers
+            layers.push(checkerBoard);
+            layers.push(currentLayer);
+            layers.push(VFXLayer);
+            layers.push(TMPLayer);
+            layers.push(pixelGrid);
+        }
+    }
+
+    function initPalette() {
+        // Get selected palette
+        let selectedPalette = Util.getText('palette-button' + splashPostfix);
+
+        //remove current palette
+        colors = document.getElementsByClassName('color-button');
+        while (colors.length > 0) {
+            colors[0].parentElement.remove();
+        }
+
+        // If the user selected a palette and isn't opening a file, I load the selected palette
+        if (selectedPalette != 'Choose a palette...') {
+            //if this palette isnt the one specified in the url, then reset the url
+            if (!palettes[selectedPalette].specified)
+            history.pushState(null, null, '/pixel-editor');
+            
+            //fill the palette with specified colours
+            createColorPalette(palettes[selectedPalette].colors,true);
+        }
+        // Otherwise, I just generate 2 semirandom colours
+        else {
+            //this wasn't a specified palette, so reset the url
+            history.pushState(null, null, '/pixel-editor');
+
+            //generate default colors
+            var fg = new Color("hsv", Math.floor(Math.random()*360), 50, 50).rgb;
+            var bg = new Color("hsv", Math.floor(Math.random()*360), 80, 100).rgb;
+
+            //convert colors to hex
+            var defaultForegroundColor = Color.rgbToHex(fg);
+            var defaultBackgroundColor = Color.rgbToHex(bg);
+
+            //add colors to palette
+            ColorModule.addColor(defaultForegroundColor).classList.add('selected');
+            ColorModule.addColor(defaultBackgroundColor);
+
+            //set current drawing color as foreground color
+            currentLayer.context.fillStyle = '#'+defaultForegroundColor;
+            currentGlobalColor = '#' + defaultForegroundColor;
+            selectedPalette = 'none';
+        }
+    }
+
+    // OPTIMIZABLE: should probably moved to a FileManagement class or something
+    function loadLPE(fileContent) {
+        // I add every layer the file had in it
+        for (let i=0; i<fileContent['nLayers']; i++) {
+            let layerData = fileContent['layer' + i];
+            let layerImage = fileContent['layer' + i + 'ImageData'];
+
+            if (layerData != null) {
+                // Setting id
+                let createdLayer = addLayer(layerData.id, false);
+                // Setting name
+                createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name;
+
+                // Adding the image (I can do that because they're sorted by increasing z-index)
+                let img = new Image();
+                img.onload = function() {
+                    createdLayer.context.drawImage(img, 0, 0);
+                    createdLayer.updateLayerPreview();
+
+                    if (i == (fileContent['nLayers'] - 1)) {
+                        createPaletteFromLayers();
+                    }
+                };
+
+                img.src = layerImage;
+
+                // Setting visibility and lock options
+                if (!layerData.isVisible) {
+                    createdLayer.hide();
+                }
+                if (layerData.isLocked) {
+                    createdLayer.lock();
+                }
+            }
+        }
+    }
+    
+    function resetInput() {
+        //reset new form
+        Util.setValue('size-width', 64);
+        Util.setValue('size-height', 64);
+    
+        Util.setText('palette-button', 'Choose a palette...');
+        Util.setText('preset-button', 'Choose a preset...');
+    }
+
+    function newFromTemplate(preset, x, y) {
+        if (preset != '') {
+            const presetProperties = PresetModule.propertiesOf(preset);
+            Util.setText('palette-button-splash', presetProperties.palette);
+            Util.setText('palette-button', presetProperties.palette);
+    
+            x = presetProperties.width;
+            y = presetProperties.height;
+        }
+        newPixel(x, y);
+    }
+
+    return {
+        create,
+        newPixel,
+        newFromTemplate
+    }
 })();

js/_createButton.js

@@ -1,42 +0,0 @@
-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 = Util.getValue('size-width' + splashPostfix);
-    var height = Util.getValue('size-height' + splashPostfix);
-
-    newPixel(width, height);
-    
-    // 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 = Util.getText('palette-button' + splashPostfix);
-    if (selectedPalette == 'Choose a palette...') 
-        selectedPalette = 'none';
-
-    //track google event
-    if (typeof ga !== 'undefined')
-        ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
-
-    //reset new form
-    Util.setValue('size-width', 64);
-    Util.setValue('size-height', 64);
-
-    Util.setText('palette-button', 'Choose a palette...');
-    Util.setText('preset-button', 'Choose a preset...');
-}
-
-/** Triggered when the "Create" button in the new pixel dialogue is pressed
- * 
- */
-Input.on('click', 'create-button', create, false);
-
-/** Triggered when the "Create" button in the splash page is pressed
- * 
- */
- Input.on('click', 'create-button-splash', create, true);

js/_fileMenu.js

@@ -8,8 +8,8 @@ for (var i = 1; i < mainMenuItems.length; i++) {
     var menuButton = menuItem.children[0];
 
     //when you click a main menu items button
-    Input.on('click', menuButton, function (e, button) {
+    Input.on('click', menuButton, function (e) {
-        Util.select(button.parentElement);
+        Util.select(e.target.parentElement);
     });
 
     var subMenu = menuItem.children[1];

js/_loadImage.js

@@ -21,7 +21,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
                 reader.onload = function (e) {
                     let dictionary = JSON.parse(e.target.result);
                     let mode = dictionary['editorMode'] == 'Advanced' ? 'Basic' : 'Advanced';
-                    newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], mode, dictionary);
+                    Startup.newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], mode, dictionary);
                 }
             }
             else {
@@ -31,7 +31,8 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
                     var img = new Image();
                     img.onload = function() {
                         //create a new pixel with the images dimentions
-                        newPixel(this.width, this.height, 'Advanced');
+                        switchMode('Advanced');
+                        Startup.newPixel(this.width, this.height);
 
                         //draw the image onto the canvas
                         currentLayer.context.drawImage(img, 0, 0);

js/_newPixel.js

@@ -1,207 +0,0 @@
-let firstPixel = true;
-
-/** Creates a new, empty file
- * 
- * @param {*} width Start width of the canvas
- * @param {*} height Start height of the canvas
- * @param {*} fileContent If fileContent != null, then the newPixel is being called from the open menu
- */
-function newPixel (width, height, fileContent = null) {
-	// The palette is empty, at the beginning
-	ColorModule.resetPalette();
-
-	// If this is the first pixel I'm creating since the app has started
-	if (firstPixel) {
-		// I configure the layers elements
-		layerListEntry = layerList.firstElementChild;
-
-		// Creating the first layer
-	    currentLayer = new Layer(width, height, canvas, layerListEntry);
-	    currentLayer.canvas.style.zIndex = 2;
-	}
-	else {
-		// If it's not the first Pixel, I have to reset the app
-
-		// Deleting all the extra layers and canvases, leaving only one
-		let nLayers = layers.length;
-		for (let i=2; i < layers.length - nAppLayers; i++) {
-			let currentEntry = layers[i].menuEntry;
-			let associatedLayer;
-
-			if (currentEntry != null) {
-				// Getting the associated layer
-				associatedLayer = getLayerByID(currentEntry.id);
-
-				// Deleting its canvas
-				associatedLayer.canvas.remove();
-
-				// Adding the id to the unused ones
-				unusedIDs.push(currentEntry.id);
-				// Removing the entry from the menu
-				currentEntry.remove();
-			}
-		}
-
-		// Removing the old layers from the list
-		for (let i=2; i<nLayers - nAppLayers; i++) {
-			layers.splice(2, 1);
-		}
-
-		// Setting up the current layer
-	    layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
-	    currentLayer = layers[1];
-		currentLayer.canvas.style.zIndex = 2;
-		
-		// Updating canvas size to the new size
-		for (let i=0; i<nLayers; i++) {
-			layers[i].canvasSize = [width, height];
-		}
-	}
-
-    // Adding the checkerboard behind it
-    checkerBoard = new Layer(width, height, checkerBoardCanvas);
-
-    // Creating the vfx layer on top of everything
-    VFXLayer = new Layer(width, height, VFXCanvas);
-
-    // Tmp layer to draw previews on
-	TMPLayer = new Layer(width, height, TMPCanvas);
-	
-	// Pixel grid
-	pixelGrid = new Layer(width, height, pixelGridCanvas);
-	// Setting the general canvasSize
-	canvasSize = currentLayer.canvasSize;
-
-	if (firstPixel) {
-		// Cloning the entry so that when I change something on the first layer, those changes aren't
-	    // propagated to the other ones
-	    layerListEntry = layerListEntry.cloneNode(true);
-		// Adding the first layer and the checkerboard to the list of layers
-		layers.push(checkerBoard);
-		layers.push(currentLayer);
-		layers.push(VFXLayer);
-		layers.push(TMPLayer);
-		layers.push(pixelGrid);
-	}
-
-	//remove current palette
-	colors = document.getElementsByClassName('color-button');
-	while (colors.length > 0) {
-		colors[0].parentElement.remove();
-	}
-
-	//add colors from selected palette
-	var selectedPalette;
-	if (!firstPixel)
-		var selectedPalette = Util.getText('palette-button');
-	else
-		var selectedPalette = Util.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) {
-		//if this palette isnt the one specified in the url, then reset the url
-		if (!palettes[selectedPalette].specified)
-		  history.pushState(null, null, '/pixel-editor');
-		
-		//fill the palette with specified colours
-		createColorPalette(palettes[selectedPalette].colors,true);
-	}
-	// Otherwise, I just generate 2 semirandom colours
-	else if (fileContent == null) {
-		//this wasn't a specified palette, so reset the url
-		history.pushState(null, null, '/pixel-editor');
-
-		//generate default colors
-		var fg = new Color("hsv", Math.floor(Math.random()*360), 50, 50).rgb;
-		var bg = new Color("hsv", Math.floor(Math.random()*360), 80, 100).rgb;
-
-		//convert colors to hex
-		var defaultForegroundColor = Color.rgbToHex(fg);
-		var defaultBackgroundColor = Color.rgbToHex(bg);
-
-		//add colors to palette
-		ColorModule.addColor(defaultForegroundColor).classList.add('selected');
-		ColorModule.addColor(defaultBackgroundColor);
-
-		//set current drawing color as foreground color
-		currentLayer.context.fillStyle = '#'+defaultForegroundColor;
-		currentGlobalColor = '#' + defaultForegroundColor;
-		selectedPalette = 'none';
-	}
-
-	//fill background of canvas with bg color
-	fillCheckerboard();
-	fillPixelGrid();
-
-	//reset undo and redo states
-	undoStates = [];
-	redoStates = [];
-
-	// Closing the "New Pixel dialogue"
-	Dialogue.closeDialogue();
-	// Updating the cursor of the current tool
-	currentTool.updateCursor();
-
-	// The user is now able to export the Pixel
-	document.getElementById('export-button').classList.remove('disabled');
-	documentCreated = true;
-
-	// This is not the first Pixel anymore
-	firstPixel = false;
-
-	// Now, if I opened an LPE file
-	if (fileContent != null) {
-		// I add every layer the file had in it
-		for (let i=0; i<fileContent['nLayers']; i++) {
-			let layerData = fileContent['layer' + i];
-			let layerImage = fileContent['layer' + i + 'ImageData'];
-
-			if (layerData != null) {
-				// Setting id
-				let createdLayer = addLayer(layerData.id, false);
-				// Setting name
-				createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name;
-
-				// Adding the image (I can do that because they're sorted by increasing z-index)
-				let img = new Image();
-				img.onload = function() {
-					createdLayer.context.drawImage(img, 0, 0);
-					createdLayer.updateLayerPreview();
-
-					if (i == (fileContent['nLayers'] - 1)) {
-						createPaletteFromLayers();
-					}
-				};
-
-				img.src = layerImage;
-
-				// Setting visibility and lock options
-				if (!layerData.isVisible) {
-					createdLayer.hide();
-				}
-				if (layerData.isLocked) {
-					createdLayer.lock();
-				}
-			}
-		}
-
-		// Deleting the default layer
-		deleteLayer(false);
-	}
-
-	// Resetting history
-	undoStates = [];
-	redoStates = [];
-}
-
-function newFromTemplate(preset, x, y) {
-	if (preset != '') {
-		const presetProperties = PresetModule.propertiesOf(preset);
-		Util.setText('palette-button-splash', presetProperties.palette);
-		Util.setText('palette-button', presetProperties.palette);
-
-		x = presetProperties.width;
-		y = presetProperties.height;
-	}
-	newPixel(x, y);
-}

js/_onLoad.js

@@ -42,12 +42,8 @@ window.onload = function () {
 					let width = dimentions.split('x')[0];
 					let height = dimentions.split('x')[1];
 					
-					console.log('dimentions were specified',width,'x',height)
-					
-					//firstPixel = false;
-
 					//create new document
-					newPixel(width, height);
+					Startup.newPixel(width, height);
 				}
 				
 				//dimentions were not specified -- show splash screen with palette preselected

js/pixel-editor.js

@@ -15,13 +15,12 @@
 //=include _settings.js
 
 /**dropdown formatting**/
-//=include _presets.js
+//=include PresetModule.js
 //=include _palettes.js
 
 /**functions**/
 //=include _tools.js
 //=include tools/*.js
-//=include _newPixel.js
 //=include _createColorPalette.js
 //=include _changeZoom.js
 //=include ColorModule.js
@@ -51,11 +50,11 @@
 /**buttons**/
 //=include _toolButtons.js
 //=include _fileMenu.js
-//=include _createButton.js
 //=include _rectSelect.js
 //=include _move.js
 //=include _rectangle.js
 //=include _ellipse.js
+//=include Startup.js
 
 /**onload**/
 //=include _onLoad.js

views/splash-page-popup.hbs

@@ -45,15 +45,15 @@
 
 				<div id="sp-quickstart">
 					<div class="sp-template" onclick="document.getElementById('open-image-browse-holder').click()"><p>Load</p></div>
-					<div class="sp-template" onclick="newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
-					<div class="sp-template" onclick="newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
-					<div class="sp-template" onclick="newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
-					<div class="sp-template" onclick="newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
-					<div class="sp-template" onclick="newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
-					<div class="sp-template" onclick="newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
-					<div class="sp-template" onclick="newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
-					<div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
-					<div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
+					<div class="sp-template" onclick="Startup.newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
 				</div>
 
 				<div class="mode-switcher">