Flatten editor.js code
This commit is contained in:
parent
d43804896d
commit
afcb1851cc
71
js/editor.js
71
js/editor.js
@ -1,46 +1,53 @@
|
|||||||
let deckJSON;
|
|
||||||
window.addEventListener("load", () => {
|
window.addEventListener("load", () => {
|
||||||
|
document.querySelector('#jsonUpload').addEventListener('change', event => {
|
||||||
|
let files = event.target.files;
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.onload = handleUpload;
|
||||||
|
reader.readAsText(files[0]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function getSVGTemplate(name, callback) {
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
xhr.addEventListener("load", () => {
|
xhr.addEventListener("load", () => {
|
||||||
let respSVG = xhr.responseXML.children[0];
|
let respSVG = xhr.responseXML.children[0];
|
||||||
|
callback(respSVG);
|
||||||
|
});
|
||||||
|
xhr.open("GET", "/template/" + name + ".svg");
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('#jsonUpload').addEventListener('change', event => {
|
function handleUpload(event) {
|
||||||
let files = event.target.files;
|
let deckJSON = JSON.parse(event.target.result);
|
||||||
let reader = new FileReader();
|
|
||||||
reader.onload = e => {
|
|
||||||
deckJSON = JSON.parse(e.target.result);
|
|
||||||
|
|
||||||
let deck = document.querySelector('#deck');
|
let deck = document.querySelector('#deck');
|
||||||
deck.style.width = Math.ceil(Math.sqrt(deckJSON.deck.length)) *
|
|
||||||
parseInt(respSVG.getAttribute("width")) + "pt";
|
|
||||||
deck.style.height = Math.ceil(Math.sqrt(deckJSON.deck.length)) *
|
|
||||||
parseInt(respSVG.getAttribute("height")) + "pt";
|
|
||||||
|
|
||||||
deck.innerHTML = "";
|
getSVGTemplate("environment/card", templateSVG => {
|
||||||
|
deck.style.width = Math.ceil(Math.sqrt(deckJSON.deck.length)) *
|
||||||
|
parseInt(templateSVG.getAttribute("width")) + "pt";
|
||||||
|
deck.style.height = Math.ceil(Math.sqrt(deckJSON.deck.length)) *
|
||||||
|
parseInt(templateSVG.getAttribute("height")) + "pt";
|
||||||
|
|
||||||
deckJSON.deck.forEach((card, index) => {
|
deck.innerHTML = "";
|
||||||
let cardSVG = respSVG.cloneNode(true);
|
|
||||||
deck.appendChild(cardSVG);
|
|
||||||
for (let prop in card) {
|
|
||||||
if (prop !== "count") {
|
|
||||||
wrapSVGText(cardSVG.querySelector('#' + prop),
|
|
||||||
String(card[prop]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let data = (new XMLSerializer()).serializeToString(deck);
|
deckJSON.deck.forEach((card, index) => {
|
||||||
let xhr = new XMLHttpRequest();
|
let cardSVG = templateSVG.cloneNode(true);
|
||||||
xhr.open('POST', "upload");
|
deck.appendChild(cardSVG);
|
||||||
xhr.setRequestHeader("Content-Type", "application/json");
|
for (let prop in card) {
|
||||||
xhr.send(JSON.stringify({body: data, json: deckJSON}));
|
if (prop !== "count") {
|
||||||
};
|
wrapSVGText(cardSVG.querySelector('#' + prop), String(card[prop]));
|
||||||
reader.readAsText(files[0]);
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
xhr.open("GET", "/template/environment/card.svg");
|
|
||||||
xhr.send();
|
// POST the generated SVGs to the server
|
||||||
});
|
let data = (new XMLSerializer()).serializeToString(deck);
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('POST', "upload");
|
||||||
|
xhr.setRequestHeader("Content-Type", "application/json");
|
||||||
|
xhr.send(JSON.stringify({body: data, json: deckJSON}));
|
||||||
|
}
|
||||||
|
|
||||||
function wrapSVGText(e, string) {
|
function wrapSVGText(e, string) {
|
||||||
// TODO: bold or italic text
|
// TODO: bold or italic text
|
||||||
|
Loading…
Reference in New Issue
Block a user