Implement selecting template for collage #14

Merged
balki merged 6 commits from template-chooser into main 2023-09-06 23:59:07 -04:00
Showing only changes of commit 8a56639920 - Show all commits

View File

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