add page size select

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()