Show images from urls

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>

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()

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()