Implement selecting template for collage

web/index.js

@@ -1,4 +1,6 @@
-var pageSizes = {
+"use strict";
+
+const pageSizes = {
     "letter-portrait" : {
         "ap": "85 / 110",
         "width": 3264,
@@ -34,21 +36,32 @@ var pageSizes = {
 // elements
 
 /** @type {HTMLButtonElement} */
-var snapButton
+let snapButton
 
 /** @type {HTMLDivElement} */
-var collageDiv
+let collageDiv
 
 /** @type {HTMLSelectElement} */
-var pageSizeSelect
+let pageSizeSelect
 
 /** @type {HTMLAnchorElement} */
-var collageUrlA
+let collageUrlA
 
 // collage state
 
-var crops = [];
-var pageSize = "letter-landscape";
+let crops = [];
+let pageSize = "letter-landscape";
+const imageUrls = [
+    , // images start with index 1
+    "images/img1.jpg",
+    "images/img2.jpg",
+    "images/img3.jpg",
+    "images/img4.jpg",
+    "images/img5.jpg",
+    "images/img6.jpg",
+    "images/img7.jpg",
+]
+
 
 function main() {
     snapButton = document.getElementById("snapper")
@@ -56,10 +69,14 @@ function main() {
     pageSizeSelect = document.getElementById("page_size_selector")
     collageUrlA = document.getElementById("collage-url")
 
-    initCollage()
-
     snapButton.onclick = () => snap()
     pageSizeSelect.onchange  = () => pageSizeChange()
+
+    for(const tmpl of document.getElementsByClassName("template")) {
+        tmpl.onclick = () => applyTemplate(tmpl)
+    }
+
+    applyTemplate(document.getElementById("default_template"))
 }
 
 /** 
@@ -67,7 +84,7 @@ function main() {
  * @param {string} imgUrl
  */
 function makeCroppieElem(elem, imgUrl) {
-    cpie = new Croppie(elem, {
+    const cpie = new Croppie(elem, {
         viewport: {
             width: elem.clientWidth,
             height: elem.clientHeight,
@@ -85,11 +102,12 @@ function makeCroppieElem(elem, imgUrl) {
 
 
 function initCollage() {
-    for(cpie of crops) {
+    for(const cpie of crops) {
         cpie.destroy()
     }
     crops = []
-    for(elem of collageDiv.getElementsByClassName("collage-img")) {
+
+    for(const elem of collageDiv.getElementsByClassName("img")) {
         const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
         const lastLen = crops.push(cpie)
         elem.dataset.collageCropieIndex = lastLen - 1
@@ -116,10 +134,10 @@ async function makeCollage(req) {
 }
 
 function snap() {
-    col = collageDiv.offsetLeft;
-    cot = collageDiv.offsetTop;
+    const col = collageDiv.offsetLeft;
+    const cot = collageDiv.offsetTop;
     console.log("----------------------")
-    req = {
+    const req = {
         background_image: "",
         aspect: {
             width: pageSizes[pageSize]["width"],
@@ -132,7 +150,7 @@ function snap() {
         photos: [],
     };
 
-    for(elem of collageDiv.getElementsByClassName("collage-img")) {
+    for(const elem of collageDiv.getElementsByClassName("img")) {
         const cpie = crops[elem.dataset.collageCropieIndex]
         // console.log(cpie.get().points)
         // console.log(elem.offsetLeft - col)
@@ -170,7 +188,7 @@ function snap() {
 
     console.log(JSON.stringify(req));
     (async () => {
-        collagFile = await makeCollage(req)
+        const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
         collageUrlA.text = `${collagFile} generated`;
     })();
@@ -182,4 +200,27 @@ function pageSizeChange() {
     initCollage()
 }
 
+/** 
+ * @param {HTMLDivElement} templateDiv 
+ */
+function applyTemplate(templateDiv) {
+    /** @type {HTMLDivElement} */
+    const templateClone = templateDiv.cloneNode(true)
+    for (const index in imageUrls) {
+        const url = imageUrls[index]
+        const imgClass = `img${index}`
+
+        const [imgDiv] = templateClone.getElementsByClassName(imgClass)
+        if(imgDiv === undefined) {
+            break;
+        }
+        imgDiv.dataset.collageImageUrl = url;
+    }
+    collageDiv.replaceChildren(...templateClone.children)
+    collageDiv.classList.remove(collageDiv.dataset.collageTemplate)
+    collageDiv.classList.add(templateDiv.dataset.collageTemplate)
+    collageDiv.dataset.collageTemplate = templateDiv.dataset.collageTemplate
+    initCollage()
+}
+
 main()