From d97b6f5ca58e410985a518ca01e703e124b34e25 Mon Sep 17 00:00:00 2001 From: NSSure <19178714+NSSure@users.noreply.github.com> Date: Thu, 12 Aug 2021 22:54:35 -0400 Subject: [PATCH 1/3] Added export dialogue for file name --- css/_export.scss | 19 ++++++++++ css/_popup-container.scss | 12 +++++++ css/pixel-editor.scss | 3 +- js/_fileMenu.js | 54 +--------------------------- js/_pixelExport.js | 70 ++++++++++++++++++++++++++++++++++++ js/pixel-editor.js | 1 + views/index.hbs | 1 + views/pixel-export-popup.hbs | 14 ++++++++ 8 files changed, 120 insertions(+), 54 deletions(-) create mode 100644 css/_export.scss create mode 100644 js/_pixelExport.js create mode 100644 views/pixel-export-popup.hbs diff --git a/css/_export.scss b/css/_export.scss new file mode 100644 index 0000000..c4a4e39 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/css/_popup-container.scss b/css/_popup-container.scss index 5191f9c..c38aea1 100644 --- a/css/_popup-container.scss +++ b/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; diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 3f87961..2d59fc7 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -14,4 +14,5 @@ @import 'compatibility'; @import 'resize-menus'; @import 'palette-editor'; -@import 'splash-page'; \ No newline at end of file +@import 'splash-page'; +@import "export"; \ No newline at end of file diff --git a/js/_fileMenu.js b/js/_fileMenu.js index 16c6b1c..b206661 100644 --- a/js/_fileMenu.js +++ b/js/_fileMenu.js @@ -67,59 +67,7 @@ for (var i = 1; i < mainMenuItems.length; i++) { break; case 'Export': - if (documentCreated) { - //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 (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); + + // Merging every layer on the export canvas + for (let i=0; i changelog-popup}} {{> credits-popup}} {{> settings-popup}} + {{> pixel-export-popup}} diff --git a/views/pixel-export-popup.hbs b/views/pixel-export-popup.hbs new file mode 100644 index 0000000..464d4f8 --- /dev/null +++ b/views/pixel-export-popup.hbs @@ -0,0 +1,14 @@ +
+ + +

Export File

+ +
+

File Name

+ +
+ +
+ +
+
\ No newline at end of file From f9a1cfc3d3f2f6c6c89dd3818e766da55e1ff657 Mon Sep 17 00:00:00 2001 From: NSSure <19178714+NSSure@users.noreply.github.com> Date: Sat, 14 Aug 2021 11:20:53 -0400 Subject: [PATCH 2/3] Added save project dialogue --- css/_export.scss | 9 --------- css/_popup-container.scss | 11 ++++++++++- css/_save-project.scss | 10 ++++++++++ css/pixel-editor.scss | 3 ++- js/_fileMenu.js | 22 +--------------------- js/_saveProject.js | 33 +++++++++++++++++++++++++++++++++ js/pixel-editor.js | 1 + views/index.hbs | 1 + views/pixel-export-popup.hbs | 2 +- views/save-project-popup.hbs | 14 ++++++++++++++ 10 files changed, 73 insertions(+), 33 deletions(-) create mode 100644 css/_save-project.scss create mode 100644 js/_saveProject.js create mode 100644 views/save-project-popup.hbs diff --git a/css/_export.scss b/css/_export.scss index c4a4e39..01f45a1 100644 --- a/css/_export.scss +++ b/css/_export.scss @@ -7,13 +7,4 @@ flex: 1; } } - - .export-actions { - display: flex; - justify-content: center; - - button { - font-size: 18px; - } - } } \ No newline at end of file diff --git a/css/_popup-container.scss b/css/_popup-container.scss index c38aea1..b81cf3e 100644 --- a/css/_popup-container.scss +++ b/css/_popup-container.scss @@ -78,7 +78,7 @@ } } - div.pixel-export { + div.pixel-export, div.save-project { input { background: $indent; border: none; @@ -164,4 +164,13 @@ } } } + + .popup-actions { + display: flex; + justify-content: center; + + button { + font-size: 18px; + } + } } \ No newline at end of file diff --git a/css/_save-project.scss b/css/_save-project.scss new file mode 100644 index 0000000..16519cf --- /dev/null +++ b/css/_save-project.scss @@ -0,0 +1,10 @@ +#save-project { + .save-project-configuration { + display: flex; + flex-direction: column; + + input { + flex: 1; + } + } +} \ No newline at end of file diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 2d59fc7..eb94914 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -15,4 +15,5 @@ @import 'resize-menus'; @import 'palette-editor'; @import 'splash-page'; -@import "export"; \ No newline at end of file +@import "export"; +@import "save-project"; \ No newline at end of file diff --git a/js/_fileMenu.js b/js/_fileMenu.js index b206661..5ce18ed 100644 --- a/js/_fileMenu.js +++ b/js/_fileMenu.js @@ -30,27 +30,7 @@ for (var i = 1; i < mainMenuItems.length; i++) { showDialogue('new-pixel'); break; case 'Save project': - //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]+'.lpe'; - } else { - var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe'; - selectedPalette = 'none'; - } - - //set download link - var linkHolder = document.getElementById('save-project-link-holder'); - // create file content - var content = getProjectData(); - - linkHolder.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content); - linkHolder.download = fileName; - linkHolder.click(); - - ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ - + openSaveProjectWindow(); break; case 'Open': //if a document exists diff --git a/js/_saveProject.js b/js/_saveProject.js new file mode 100644 index 0000000..ff5e7a5 --- /dev/null +++ b/js/_saveProject.js @@ -0,0 +1,33 @@ +function openSaveProjectWindow() { + //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]; + } else { + var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]; + selectedPalette = 'none'; + } + + setValue('lpe-file-name', fileName); + + document.getElementById("save-project-confirm").addEventListener("click", saveProject); + + showDialogue('save-project', false); +} + +function saveProject() { + var fileName = `${getValue('lpe-file-name')}.lpe`; + + // create file content + var content = getProjectData(); + + //set download link + var linkHolder = document.getElementById('save-project-link-holder'); + + linkHolder.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content); + linkHolder.download = fileName; + linkHolder.click(); + + ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ +} \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 334b070..5174489 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -54,6 +54,7 @@ //=include _paletteBlock.js //=include _splashPage.js //=include _pixelExport.js +//=include _saveProject.js /**load file**/ //=include _loadImage.js diff --git a/views/index.hbs b/views/index.hbs index d3a62ed..a83052d 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -37,6 +37,7 @@ {{> credits-popup}} {{> settings-popup}} {{> pixel-export-popup}} + {{> save-project-popup}} diff --git a/views/pixel-export-popup.hbs b/views/pixel-export-popup.hbs index 464d4f8..17fa4d3 100644 --- a/views/pixel-export-popup.hbs +++ b/views/pixel-export-popup.hbs @@ -8,7 +8,7 @@ -
+
\ No newline at end of file diff --git a/views/save-project-popup.hbs b/views/save-project-popup.hbs new file mode 100644 index 0000000..1b4319e --- /dev/null +++ b/views/save-project-popup.hbs @@ -0,0 +1,14 @@ +
+ + +

Save Project

+ +
+

File Name

+ +
+ +
+ +
+
\ No newline at end of file From 2a40c022d0d65506adbe752a586174c08275c109 Mon Sep 17 00:00:00 2001 From: NSSure <19178714+NSSure@users.noreply.github.com> Date: Sat, 14 Aug 2021 11:21:56 -0400 Subject: [PATCH 3/3] Added comments to save project functions --- js/_saveProject.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/_saveProject.js b/js/_saveProject.js index ff5e7a5..4e987b4 100644 --- a/js/_saveProject.js +++ b/js/_saveProject.js @@ -1,3 +1,6 @@ +/** + * Opens the save project window and initializes events for save project customization. + */ function openSaveProjectWindow() { //create name var selectedPalette = getText('palette-button'); @@ -16,6 +19,9 @@ function openSaveProjectWindow() { showDialogue('save-project', false); } +/** + * Downloads the .lpe file for the current project. + */ function saveProject() { var fileName = `${getValue('lpe-file-name')}.lpe`;