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
Add link to Select images and skip basename in urls
2024-08-09 01:51:52 -04:00 · 2024-08-09 00:12:31 -04:00
4 changed files with 108 additions and 76 deletions
--- a/web/choose.js
+++ b/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[]
-     */
-    let photoUrls = [];
+    /** @type String[] */
+    const 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))
--- a/web/index.css
+++ b/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 {
-    width: 100%;
-    height: 100%;
+.single {
+    display: grid;
 }

 .one-two {
    display: grid;
    grid-template-areas: 
-    "one two"
-    "one three";
+    "A B"
+    "A C";
 }
 .one-two .img1{
-    grid-area: one;
+    grid-area: A;
 }

-.half-leftright {
-    display:flex;
-}
-
-.half-leftright .img {
-    flex: 50%;
-}
-
-.half-topbottom .img {
-    width: 100%;
-    height: 50%;
+.half-topbottom {
+    display: grid;
 }

 .two-one-two-leftright {
    display: grid;
-    grid-template-areas: 
-    "one two two three"
-    "four two two five";
+    grid-template-areas:
+    "A  B  B  C"
+    "D  B  B  E";
 }
-.two-one-two-leftright .img2 {
-    grid-area: two;
+.two-one-two-leftright .img1 {
+    grid-area: B;
 }

 .two-one-two-topbottom {
    display: grid;
    grid-template-areas: 
-    "one two"
-    "three three"
-    "three three"
-    "four five"
+    "A  B"
+    "C  C"
+    "C  C"
+    "D  E"
 }

-.two-one-two-topbottom .img3 {
-    grid-area: three;
+.two-one-two-topbottom .img1 {
+    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"
 }
--- a/web/index.html
+++ b/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>
--- a/web/index.js
+++ b/web/index.js
@ -51,16 +51,8 @@ let collageUrlA

 let crops = [];
 let pageSize = "letter-landscape";
-let 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",
-]
+/** @type {String[]} */
+let imageUrls = []


 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} */
Author	SHA1	Message	Date
Balakrishnan Balasubramanian	12b4386f14	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	2024-08-09 01:51:52 -04:00
Balakrishnan Balasubramanian	c009c01a3f	Add link to Select images and skip basename in urls	2024-08-09 00:12:31 -04:00