Added save project dialogue

This commit is contained in:
NSSure 2021-08-14 11:20:53 -04:00
parent d97b6f5ca5
commit f9a1cfc3d3
10 changed files with 73 additions and 33 deletions

View File

@ -7,13 +7,4 @@
flex: 1;
}
}
.export-actions {
display: flex;
justify-content: center;
button {
font-size: 18px;
}
}
}

View File

@ -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;
}
}
}

10
css/_save-project.scss Normal file
View File

@ -0,0 +1,10 @@
#save-project {
.save-project-configuration {
display: flex;
flex-direction: column;
input {
flex: 1;
}
}
}

View File

@ -16,3 +16,4 @@
@import 'palette-editor';
@import 'splash-page';
@import "export";
@import "save-project";

View File

@ -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

33
js/_saveProject.js Normal file
View File

@ -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*/
}

View File

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

View File

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

View File

@ -8,7 +8,7 @@
<input id="file-name" autocomplete="off" />
</div>
<div class="export-actions">
<div class="popup-actions">
<button class="default" id = "export-confirm">Export</button>
</div>
</div>

View File

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