web/index.js

@@ -1,4 +1,4 @@
-const pageSizes = {
+var pageSizes = {
     "letter-portrait" : {
         "ap": "85 / 110",
         "width": 3264,
@@ -31,13 +31,22 @@ const pageSizes = {
     },
 }
 
-// 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");
+// elements
+
+/** @type {HTMLButtonElement} */
+var snapButton
+
+/** @type {HTMLDivElement} */
+var collageDiv
+
+/** @type {HTMLSelectElement} */
+var pageSizeSelect
+
+/** @type {HTMLAnchorElement} */
+var collageUrlA
 
 // collage state
+
 var crops = [];
 var pageSize = "letter-landscape";
 
@@ -46,11 +55,17 @@ function main() {
     collageDiv = document.getElementById("collage")
     pageSizeSelect = document.getElementById("page_size_selector")
     collageUrlA = document.getElementById("collage-url")
+
     initCollage()
+
     snapButton.onclick = () => snap()
-    pageSizeSelect.onchange  = () => pageSizeChange(pageSizeSelect)
+    pageSizeSelect.onchange  = () => pageSizeChange()
 }
 
+/** 
+ * @param {HTMLDivElement} elem 
+ * @param {string} imgUrl
+ */
 function makeCroppieElem(elem, imgUrl) {
     cpie = new Croppie(elem, {
         viewport: {
@@ -161,9 +176,9 @@ function snap() {
     })();
 }
 
-function pageSizeChange(selectElem) {
-    document.getElementById("collage").style.setProperty('--collage-ap', pageSizes[selectElem.value]["ap"])
-    pageSize = selectElem.value
+function pageSizeChange() {
+    collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
+    pageSize = pageSizeSelect.value
     initCollage()
 }