Frontend improvements

1. Simplify template css to use grid always and use ABCD for area names
2. Add 3 new templates
3. Set data attribute dynamically for templates
4. Minor reformatting in js files
5. Fix URL path

web/choose.js

@@ -30,21 +30,20 @@ let selectedPhotosDiv
 let selectedPhotoImg
 
 function main() {
-    albumSelect = document.getElementById("album_selector")
     loadAlbumsBtn = document.getElementById("load_albums_button")
     loadPhotosBtn = document.getElementById("load_photos_button")
     makeCollageBtn = document.getElementById("make_collage_button")
+    albumSelect = document.getElementById("album_selector")
+    noticeP = document.getElementById("notice_p")
     noticeDialog = document.getElementById("notice_dialog")
     albumPhotosDiv = document.getElementById("album_photos")
     selectedPhotosDiv = document.getElementById("selected_photos")
-    noticeP = document.getElementById("notice_p")
+
     loadAlbumsBtn.onclick = () => loadAlbums()
     loadPhotosBtn.onclick = () => loadPhotos()
     makeCollageBtn.onclick = () => gotoCollage()
 
-    /**
+    /** @type HTMLImageElement[] */
-     * @type HTMLImageElement[]
-     */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
     for (const img of selectedPhotos) {
         img.onclick = () => {
@@ -80,9 +79,7 @@ function closeNotice() {
     noticeDialog.close()
 }
 
-/**
+/** @param {string} notice */
- * @param {string} notice
- */
 function showNotice(notice) {
     noticeP.textContent = notice
     noticeDialog.show()
@@ -100,9 +97,7 @@ function loadPhotos() {
     (async () => {
         try {
             const resp = await fetch(`load-photos/${elem.value}`)
-            /**
+            /** @type String[] */
-             * @type String[]
-             */
             const photos = await resp.json()
             if(photos.length == 0) {
                 showNotice("No Photos found")
@@ -115,9 +110,7 @@ function loadPhotos() {
                 albumPhotosDiv.appendChild(img)
             }
 
-            /**
+            /** @type HTMLImageElement[] */
-             * @type HTMLImageElement[]
-             */
             const photoImgs = albumPhotosDiv.children
             for(const photo of photoImgs) {
                 photo.onclick = () => {
@@ -131,18 +124,14 @@ function loadPhotos() {
 }
 
 function gotoCollage() {
-    /**
+    /** @type HTMLImageElement[] */
-     * @type HTMLImageElement[]
-     */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
-    /**
+    /** @type String[] */
-     * @type String[]
+    const photoUrls = [];
-     */
-    let photoUrls = [];
 
     for (const img of selectedPhotos) {
         if (!img.src.endsWith("stock.svg")) {
-            photoUrls.push(img.src)
+            photoUrls.push((new URL(img.src)).pathname)
         }
     }
     const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))

web/index.css

@@ -32,7 +32,7 @@
 .templates {
     display: flex;
     flex-wrap: wrap;
-     gap: 1rem;
+    gap: 1rem;
 }
 
 .templates li {
@@ -56,53 +56,61 @@
     border: 1px solid;
 }
 
-.single div {
+.single {
-    width: 100%;
+    display: grid;
-    height: 100%;
 }
 
 .one-two {
     display: grid;
     grid-template-areas: 
-    "one two"
+    "A B"
-    "one three";
+    "A C";
 }
 .one-two .img1{
-    grid-area: one;
+    grid-area: A;
 }
 
-.half-leftright {
+.half-topbottom {
-    display:flex;
+    display: grid;
-}
-
-.half-leftright .img {
-    flex: 50%;
-}
-
-.half-topbottom .img {
-    width: 100%;
-    height: 50%;
 }
 
 .two-one-two-leftright {
     display: grid;
     grid-template-areas:
-    "one two two three"
+    "A  B  B  C"
-    "four two two five";
+    "D  B  B  E";
 }
-.two-one-two-leftright .img2 {
+.two-one-two-leftright .img1 {
-    grid-area: two;
+    grid-area: B;
 }
 
 .two-one-two-topbottom {
     display: grid;
     grid-template-areas: 
-    "one two"
+    "A  B"
-    "three three"
+    "C  C"
-    "three three"
+    "C  C"
-    "four five"
+    "D  E"
 }
 
-.two-one-two-topbottom .img3 {
+.two-one-two-topbottom .img1 {
-    grid-area: three;
+    grid-area: C;
+}
+
+.two-row {
+    display: grid;
+    grid-template-areas: 
+    "A B"
+}
+
+.three-row {
+    display: grid;
+    grid-template-areas:
+    "A B C"
+}
+
+.four-row {
+    display: grid;
+    grid-template-areas:
+    "A B C D"
 }

web/index.html

@@ -12,10 +12,11 @@
         <div class="container">
             <div class="controls">
 
+                <p><a href="choose.html">Select Images</a></p>
 
                 <label>
                     <span>Paper size</span>
-                    <select id="page_size_selector" size=8>
+                    <select id="page_size_selector" size=6>
                           <option          value="letter-portrait"     > Letter (Portrait)  </option>
                           <option selected value="letter-landscape"    > Letter (Landscape) </option>
                           <option          value="fiveseven-portrait"  > 5 × 7 (Portrait)   </option>
@@ -28,31 +29,31 @@
 
                 <ul class="templates">
                     <li>
-                        <div id="default_template" class="template single" data-collage-template="single">
+                        <div id="default_template" class="template single">
                             <div class="img img1"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template one-two" data-collage-template="one-two">
+                        <div class="template one-two">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                             <div class="img img3"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template half-leftright" data-collage-template="half-leftright">
+                        <div class="template two-row">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template half-topbottom" data-collage-template="half-topbottom">
+                        <div class="template half-topbottom">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                         </div>
                     </li>
                     <li>
-                        <div class="template two-one-two-leftright" data-collage-template="two-one-two-leftright">
+                        <div class="template two-one-two-leftright">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                             <div class="img img3"></div>
@@ -61,13 +62,56 @@
                         </div>
                     </li>
                     <li>
-                        <div class="template two-one-two-topbottom" data-collage-template="two-one-two-topbottom">
+                        <div class="template two-one-two-topbottom">
                             <div class="img img1"></div>
                             <div class="img img2"></div>
                             <div class="img img3"></div>
                             <div class="img img4"></div>
                             <div class="img img5"></div>
                         </div>
+                    <li>
+                        <div class="template four-row">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                            <div class="img img5"></div>
+                            <div class="img img6"></div>
+                            <div class="img img7"></div>
+                            <div class="img img8"></div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="template four-row">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                            <div class="img img5"></div>
+                            <div class="img img6"></div>
+                            <div class="img img7"></div>
+                            <div class="img img8"></div>
+                            <div class="img img9"></div>
+                            <div class="img img10"></div>
+                            <div class="img img11"></div>
+                            <div class="img img12"></div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="template three-row">
+                            <div class="img img1"></div>
+                            <div class="img img2"></div>
+                            <div class="img img3"></div>
+                            <div class="img img4"></div>
+                            <div class="img img5"></div>
+                            <div class="img img6"></div>
+                            <div class="img img7"></div>
+                            <div class="img img8"></div>
+                            <div class="img img9"></div>
+                            <div class="img img10"></div>
+                            <div class="img img11"></div>
+                            <div class="img img12"></div>
+                        </div>
                     </li>
                 </ul>
                 <button id="snapper" class="showbuton">Snap Collage</button>

web/index.js

@@ -51,16 +51,8 @@ let collageUrlA
 
 let crops = [];
 let pageSize = "letter-landscape";
-let imageUrls = [
+/** @type {String[]} */
-    , // images start with index 1
+let imageUrls = []
-    "images/img1.jpg",
-    "images/img2.jpg",
-    "images/img3.jpg",
-    "images/img4.jpg",
-    "images/img5.jpg",
-    "images/img6.jpg",
-    "images/img7.jpg",
-]
 
 
 function main() {
@@ -73,9 +65,13 @@ function main() {
     pageSizeSelect.onchange  = () => pageSizeChange()
 
     for(const tmpl of document.getElementsByClassName("template")) {
+        // Assumes second class in the template is the collage's template
+        const [_, collageTemplate] = tmpl.classList
+        tmpl.dataset.collageTemplate = collageTemplate
         tmpl.onclick = () => applyTemplate(tmpl)
     }
     const queryUrls = loadImageUrlsFromQuery()
+    // Skipping first entry in array to make the images start with index 1
     imageUrls = [,].concat(queryUrls)
 
     applyTemplate(document.getElementById("default_template"))
@@ -148,12 +144,8 @@ function snap() {
         const fsx = elem.offsetLeft - col
         const fsy = elem.offsetTop - cot
         const [sx, sy, ex, ey] = cpie.get().points;
-        const imageFile = (() => {
-            const u = new URL(elem.dataset.collageImageUrl)
-            return u.pathname.slice("/photos/".length)
-        })();
         const photo = {
-            image: imageFile,
+            image: elem.dataset.collageImageUrl.slice("/photos/".length),
             crop: {
                 start: {
                     x: parseInt(sx),
@@ -179,6 +171,7 @@ function snap() {
     }
 
     (async () => {
+        collageUrlA.text = "Collage is being generated...";
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
         collageUrlA.text = `${collagFile} generated`;
@@ -191,9 +184,7 @@ function pageSizeChange() {
     initCollage()
 }
 
-/** 
+/** @param {HTMLDivElement} templateDiv */
- * @param {HTMLDivElement} templateDiv 
- */
 function applyTemplate(templateDiv) {
     document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
     /** @type {HTMLDivElement} */