diff --git a/web/index.js b/web/index.js index aa5c1be..cfa8bc2 100644 --- a/web/index.js +++ b/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() }