adam
/
SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve editor download buttons

This commit is contained in:
Adam Goldsmith 2019-01-07 08:51:32 -05:00
parent 82539bfc60
commit 36a8aeaf1f
1 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/Editor.vue
View File

@ -6,19 +6,18 @@
<button type="button" @click="upload"> Save Deck </button> <button type="button" @click="upload"> Save Deck </button>
<Loader :loading="uploading"></Loader> <Loader :loading="uploading"></Loader>
Download: Download:
<button type="button" @click="jsonInputDownload"> <a class="download" :href="inputJSON"
:download="deckInfo.meta.name + '.input.json'">
Input JSON Input JSON
</button> </a>
<a class="download" :href="`/decks/${deckID}.tts.json`"
<button type="button" :download="deckInfo.meta.name + '.tts.json'">
@click="downloadFile(`/decks/${deckID}.tts.json`, deckInfo.meta.name + '.tts.json')"> Tabletop Sim Output JSON
Tabletop Output JSON </a>
</button> <a class="download" :href="`/decks/${deckID}.png`"
:download="deckInfo.meta.name + '.png'">
<button type="button"
@click="downloadFile(`/decks/${deckID}.png`, deckInfo.meta.name + '.png')">
Deck PNG Deck PNG
</button> </a>
</div> </div>
<div> <div>
@ -86,6 +85,13 @@
* 'beforeunload', e => e.returnValue = "Unsaved changes blah blah"); */ * 'beforeunload', e => e.returnValue = "Unsaved changes blah blah"); */
}, },
computed: {
inputJSON() {
return 'data:application/json;charset=utf-8,' +
encodeURIComponent(JSON.stringify(this.deckInfo))
},
},
methods: { methods: {
// deck JSON uploader // deck JSON uploader
jsonUpload(event) { jsonUpload(event) {
@ -95,14 +101,6 @@
reader.readAsText(files[0]); reader.readAsText(files[0]);
}, },
// download input JSON
jsonInputDownload() {
console.log(JSON.stringify(this.deckInfo));
this.downloadFile('data:application/json;charset=utf-8,' +
encodeURIComponent(JSON.stringify(this.deckInfo)),
this.deckID + '.input.json')
},
fileUploaded(event, prop) { fileUploaded(event, prop) {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = e => { reader.onload = e => {
@ -111,15 +109,6 @@
reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL(event.target.files[0]);
}, },
downloadFile(file, name) {
let dl = document.createElement('a');
dl.setAttribute('href', file);
dl.setAttribute('download', name);
document.body.appendChild(dl);
dl.click();
document.body.removeChild(dl);
},
upload() { upload() {
// POST the inputed json to the server // POST the inputed json to the server
this.uploading = true; this.uploading = true;
@ -156,4 +145,17 @@
.close-editor { .close-editor {
float: right; float: right;
} }
a.download {
display: inline-block;
margin-bottom: .2em;
background-color: #1976D2;
color: white;
text-decoration: none;
padding: .2em .4em;
}
a.download:hover {
background-color: #1565C0;
}
</style> </style>