From 1bf6bf90339388e4f8654ffcee57ec5566cd3e2d Mon Sep 17 00:00:00 2001
From: Balakrishnan Balasubramanian <git.user@balki.me>
Date: Thu, 8 Aug 2024 12:05:40 -0400
Subject: [PATCH] Show images from urls

---
 web/choose.html |  1 +
 web/choose.js   | 24 ++++++++++++++++++++++++
 web/index.js    | 10 +++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/web/choose.html b/web/choose.html
index cfdf18e..08a55ee 100644
--- a/web/choose.html
+++ b/web/choose.html
@@ -16,6 +16,7 @@
         <button id="load_albums_button">Load Albums</button>
         <select id="album_selector" size="8"> </select>
         <button id="load_photos_button">Load Photos</button>
+        <button id="make_collage_button">Make Collage</button>
       </div>
       <div id="selected_photos">
         <div>1<img src="stock.svg" /> </div>
diff --git a/web/choose.js b/web/choose.js
index 85dcfd9..eaa23fb 100644
--- a/web/choose.js
+++ b/web/choose.js
@@ -8,6 +8,9 @@ let loadAlbumsBtn
 /** @type {HTMLButtonElement} */
 let loadPhotosBtn
 
+/** @type {HTMLButtonElement} */
+let makeCollageBtn
+
 /** @type {HTMLSelectElement} */
 let albumSelect
 
@@ -30,12 +33,14 @@ 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")
     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[]
@@ -125,5 +130,24 @@ function loadPhotos() {
     })();
 }
 
+function gotoCollage() {
+    /**
+     * @type HTMLImageElement[]
+     */
+    const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
+    /**
+     * @type String[]
+     */
+    let photoUrls = [];
+
+    for (const img of selectedPhotos) {
+        if (!img.src.endsWith("stock.svg")) {
+            photoUrls.push(img.src)
+        }
+    }
+    const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))
+    window.location.href = `index.html?urls=${encodedURLS}`
+}
+
 
 main()
diff --git a/web/index.js b/web/index.js
index 14f1123..9292913 100644
--- a/web/index.js
+++ b/web/index.js
@@ -51,7 +51,7 @@ let collageUrlA
 
 let crops = [];
 let pageSize = "letter-landscape";
-const imageUrls = [
+let imageUrls = [
     , // images start with index 1
     "images/img1.jpg",
     "images/img2.jpg",
@@ -75,6 +75,8 @@ function main() {
     for(const tmpl of document.getElementsByClassName("template")) {
         tmpl.onclick = () => applyTemplate(tmpl)
     }
+    const queryUrls = loadImageUrlsFromQuery()
+    imageUrls = [,].concat(queryUrls)
 
     applyTemplate(document.getElementById("default_template"))
 }
@@ -210,4 +212,10 @@ function applyTemplate(templateDiv) {
     initCollage()
 }
 
+function loadImageUrlsFromQuery() {
+    const params = new URLSearchParams(window.location.search)
+    const urlsstr = params.get('urls')
+    return JSON.parse(urlsstr)
+}
+
 main()