Simplify UI

web/index.js

@@ -44,6 +44,9 @@ let collageDiv
 /** @type {HTMLSelectElement} */
 let pageSizeSelect
 
+/** @type {HTMLDialogElement} */
+let noticeDialog
+
 /** @type {HTMLAnchorElement} */
 let collageUrlA
 
@@ -59,6 +62,7 @@ function main() {
     snapButton = document.getElementById("snapper")
     collageDiv = document.getElementById("collage")
     pageSizeSelect = document.getElementById("page_size_selector")
+    noticeDialog = document.getElementById("notice_dialog")
     collageUrlA = document.getElementById("collage-url")
 
     snapButton.onclick = () => snap()
@@ -74,6 +78,7 @@ function main() {
     // Skipping first entry in array to make the images start with index 1
     imageUrls = [,].concat(queryUrls)
 
+    pageSizeChange()
     applyTemplate(document.getElementById("default_template"))
 }
 
@@ -171,6 +176,7 @@ function snap() {
     }
 
     (async () => {
+        noticeDialog.show()
         collageUrlA.text = "Collage is being generated...";
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
@@ -179,7 +185,8 @@ function snap() {
 }
 
 function pageSizeChange() {
-    collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
+    // https://stackoverflow.com/a/37802204
+    document.documentElement.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
     pageSize = pageSizeSelect.value
     initCollage()
 }