Added export dialogue for file name

css/_export.scss

@@ -0,0 +1,19 @@
+#export {
+    .export-configuration {
+        display: flex;
+        flex-direction: column;
+
+        input {
+            flex: 1;
+        }
+    }
+
+    .export-actions {
+        display: flex;
+        justify-content: center;
+
+        button {
+            font-size: 18px;
+        }
+    }
+}

css/_popup-container.scss

@@ -77,6 +77,18 @@
 			text-align: center;
 		}
 	}
+
+	div.pixel-export {
+		input {
+			background: $indent;
+			border: none;
+			border-radius: 4px;
+			color: $indenttext;
+			padding: 10px 20px;
+			margin: 0;
+			text-align: left;
+		}
+	}
 	/*
 	input {
 		background: $indent;

css/pixel-editor.scss

@@ -14,4 +14,5 @@
 @import 'compatibility';
 @import 'resize-menus';
 @import 'palette-editor';
-@import 'splash-page';
+@import 'splash-page';
+@import "export";

js/_fileMenu.js

@@ -67,59 +67,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
                     break;
 
                 case 'Export':
-                    if (documentCreated) {
+                    openPixelExportWindow();
-                        //create name
-                        var selectedPalette = getText('palette-button');
-                        if (selectedPalette != 'Choose a palette...'){
-                            var paletteAbbreviation = palettes[selectedPalette].abbreviation;
-                            var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
-                        } else {
-                            var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
-                            selectedPalette = 'none';
-                        }
-
-                        //set download link
-                        var linkHolder = document.getElementById('save-image-link-holder');
-                        // Creating a tmp canvas to flatten everything
-                        var exportCanvas = document.createElement("canvas");
-                        var emptyCanvas = document.createElement("canvas");
-                        var layersCopy = layers.slice();
-
-                        exportCanvas.width = canvasSize[0];
-                        exportCanvas.height = canvasSize[1];
-
-                        emptyCanvas.width = canvasSize[0];
-                        emptyCanvas.height = canvasSize[1];
-
-                        // Sorting the layers by z index
-                        layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
-
-                        // Merging every layer on the export canvas
-                        for (let i=0; i<layersCopy.length; i++) {
-                            if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) {
-                                mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
-                            }
-                            // I'm not going to find out why the layer ordering screws up if you don't copy
-                            // a blank canvas when layers[i] is not set as visible, but if you have time to
-                            // spend, feel free to investigate (comment the else, create 3 layers: hide the 
-                            // middle one and export, the other 2 will be swapped in their order)
-                            else {
-                                mergeLayers(exportCanvas.getContext('2d'), emptyCanvas.getContext('2d'));
-                            }
-                        }
-
-                        linkHolder.href = exportCanvas.toDataURL();
-                        linkHolder.download = fileName;
-
-                        linkHolder.click();
-
-                        emptyCanvas.remove();
-                        exportCanvas.remove();
-
-                        //track google event
-                        ga('send', 'event', 'Pixel Editor Export', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
-                    }
-
                     break;
 
                 case 'Exit':

js/_pixelExport.js

@@ -0,0 +1,70 @@
+/**
+ * Opens the export window and initializes events for export customization.
+ */
+function openPixelExportWindow() {
+    var selectedPalette = getText('palette-button');
+
+    if (selectedPalette != 'Choose a palette...'){
+        var paletteAbbreviation = palettes[selectedPalette].name;
+        var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
+    } else {
+        var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
+        selectedPalette = 'none';
+    }
+
+    setValue('file-name', fileName);
+
+    document.getElementById("export-confirm").addEventListener("click", exportPixel);
+
+    showDialogue('export', false);
+}
+
+/**
+ * Exports the pixel based on the export dialogue.
+ */
+function exportPixel() {
+    if (documentCreated) {
+        var fileName = getValue('file-name');
+
+        //set download link
+        var linkHolder = document.getElementById('save-image-link-holder');
+        // Creating a tmp canvas to flatten everything
+        var exportCanvas = document.createElement("canvas");
+        var emptyCanvas = document.createElement("canvas");
+        var layersCopy = layers.slice();
+
+        exportCanvas.width = canvasSize[0];
+        exportCanvas.height = canvasSize[1];
+
+        emptyCanvas.width = canvasSize[0];
+        emptyCanvas.height = canvasSize[1];
+
+        // Sorting the layers by z index
+        layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
+
+        // Merging every layer on the export canvas
+        for (let i=0; i<layersCopy.length; i++) {
+            if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) {
+                mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
+            }
+            // I'm not going to find out why the layer ordering screws up if you don't copy
+            // a blank canvas when layers[i] is not set as visible, but if you have time to
+            // spend, feel free to investigate (comment the else, create 3 layers: hide the 
+            // middle one and export, the other 2 will be swapped in their order)
+            else {
+                mergeLayers(exportCanvas.getContext('2d'), emptyCanvas.getContext('2d'));
+            }
+        }
+
+        linkHolder.href = exportCanvas.toDataURL();
+        linkHolder.download = fileName;
+
+        linkHolder.click();
+
+        emptyCanvas.remove();
+        exportCanvas.remove();
+
+        //track google event
+        ga('send', 'event', 'Pixel Editor Export', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
+    }
+}

js/pixel-editor.js

@@ -53,6 +53,7 @@
 //=include _colorPicker.js
 //=include _paletteBlock.js
 //=include _splashPage.js
+//=include _pixelExport.js
 
 /**load file**/
 //=include _loadImage.js

views/index.hbs

@@ -36,6 +36,7 @@
 		{{> changelog-popup}}
 		{{> credits-popup}}
 		{{> settings-popup}}
+		{{> pixel-export-popup}}
     </div>
 
     <script src="/pixel-editor/pixel-editor.js"></script>

views/pixel-export-popup.hbs

@@ -0,0 +1,14 @@
+<div id="export" class="pixel-export">
+	<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+	
+	<h1>Export File</h1>
+
+	<div class="export-configuration">
+		<h2>File Name</h2>
+		<input id="file-name" autocomplete="off" />
+	</div>
+
+	<div class="export-actions">
+		<button class="default" id = "export-confirm">Export</button>
+	</div>
+</div>