diff --git a/web/index.js b/web/index.js
index 162e0d3..aa5c1be 100644
--- a/web/index.js
+++ b/web/index.js
@@ -1,6 +1,54 @@
+const pageSizes = {
+ "letter-portrait" : {
+ "ap": "85 / 110",
+ "width": 3264,
+ "height": 4224,
+ },
+ "letter-landscape" : {
+ "ap": "110 / 85",
+ "width": 4224,
+ "height": 3264,
+ },
+ "fiveseven-portrait" : {
+ "ap": "5 / 7",
+ "width": 2250,
+ "height": 3150,
+ },
+ "fiveseven-landscape" : {
+ "ap": "7 / 5",
+ "width": 3150,
+ "height": 2250,
+ },
+ "foursix-portrait" : {
+ "ap": "4 / 6",
+ "width": 1800,
+ "height": 2700,
+ },
+ "foursix-landscape" : {
+ "ap": "6 / 4",
+ "width": 2700,
+ "height": 1800,
+ },
+}
+
+// elements -- dummy createElement for language server type hint
+var snapButton = document.createElement("button")
+var collageDiv = document.createElement("div")
+var pageSizeSelect = document.createElement("select")
+var collageUrlA = document.createElement("a");
+
+// collage state
+var crops = [];
+var pageSize = "letter-landscape";
function main() {
- initCollage("collage")
+ snapButton = document.getElementById("snapper")
+ collageDiv = document.getElementById("collage")
+ pageSizeSelect = document.getElementById("page_size_selector")
+ collageUrlA = document.getElementById("collage-url")
+ initCollage()
+ snapButton.onclick = () => snap()
+ pageSizeSelect.onchange = () => pageSizeChange(pageSizeSelect)
}
function makeCroppieElem(elem, imgUrl) {
@@ -18,17 +66,14 @@ function makeCroppieElem(elem, imgUrl) {
});
return cpie
-
}
-// collage state
-var collageDivId;
-var crops = [];
-
-function initCollage(divId) {
- collageDivId = divId
- const collageDiv = document.getElementById(collageDivId)
+function initCollage() {
+ for(cpie of crops) {
+ cpie.destroy()
+ }
+ crops = []
for(elem of collageDiv.getElementsByClassName("collage-img")) {
const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
const lastLen = crops.push(cpie)
@@ -56,15 +101,14 @@ async function makeCollage(req) {
}
function snap() {
- const collageDiv = document.getElementById(collageDivId)
col = collageDiv.offsetLeft;
cot = collageDiv.offsetTop;
console.log("----------------------")
req = {
background_image: "",
aspect: {
- width: 3150,
- height: 2250,
+ width: pageSizes[pageSize]["width"],
+ height: pageSizes[pageSize]["height"],
},
dimension: {
width: collageDiv.clientWidth,
@@ -112,9 +156,15 @@ function snap() {
console.log(JSON.stringify(req));
(async () => {
collagFile = await makeCollage(req)
- // const collageUrlA = document.createElement("a");
- const collageUrlA = document.getElementById("collage-url");
collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`;
})();
}
+
+function pageSizeChange(selectElem) {
+ document.getElementById("collage").style.setProperty('--collage-ap', pageSizes[selectElem.value]["ap"])
+ pageSize = selectElem.value
+ initCollage()
+}
+
+main()