implement reorder

web/index.css

@@ -31,6 +31,23 @@
     aspect-ratio: var(--collage-ap);
 }
 
+#image-chooser-controls {
+    display: none;
+    width: 100%;
+}
+
+#image-preview-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 80%;
+}
+
+#image-preview-box img {
+    width: 50px;
+    height: 50px;
+}
+
 .main-controls {
     display: flex;
     gap: 0.5rem;

web/index.html

@@ -28,11 +28,19 @@
                 <a href="choose.html"><button>Select</button></a>
 
                 <button id="snapper" class="showbuton">Snap</button>
-                <a href="/collages/?layout=grid" target="_blank" ><button>All</button></a>
+                <a href="/collages/?sort=time&order=desc&layout=grid" target="_blank" ><button>All</button></a>
+                <button id="reorder_btn">Reorder</button>
               </div>
 
-
+              <div id="image-chooser-controls">
-
+                <div>
+                  <button id="image_prev_btn">Previous</button>
+                  <button id="image_next_btn">Next</button>
+                  <button id="image_done_btn">Done</button>
+                </div>
+                <div id="image-preview-box">
+                </div>
+              </div>
 
                 <ul class="templates">
                     <li>

web/index.js

@@ -50,9 +50,28 @@ let noticeDialog
 /** @type {HTMLAnchorElement} */
 let collageUrlA
 
+/** @type {HTMLButtonElement} */
+let reorderButton
+
+/** @type {HTMLDivElement} */
+let previewDiv
+
+/** @type {HTMLButtonElement} */
+let imagePrevBtn
+
+/** @type {HTMLButtonElement} */
+let imageNextBtn
+
+/** @type {HTMLButtonElement} */
+let imageDoneBtn
+
+/** @type {HTMLDivElement} */
+let imageChooserControls
+
 // collage state
 
 let crops = [];
+let currentCropIndex = -1;
 let pageSize = "letter-landscape";
 /** @type {String[]} */
 let imageUrls = []
@@ -64,9 +83,45 @@ function main() {
     pageSizeSelect = document.getElementById("page_size_selector")
     noticeDialog = document.getElementById("notice_dialog")
     collageUrlA = document.getElementById("collage-url")
+    reorderButton = document.getElementById("reorder_btn")
+    previewDiv = document.getElementById("image-preview-box")
+    imageChooserControls = document.getElementById("image-chooser-controls")
+
+    imagePrevBtn = document.getElementById("image_prev_btn")
+    imageNextBtn = document.getElementById("image_next_btn")
+    imageDoneBtn = document.getElementById("image_done_btn")
+
+    imagePrevBtn.onclick = () => {
+        let newIndex = currentCropIndex - 1;
+        if(newIndex < 0) {
+            newIndex = 0
+        }
+        currentCropIndex = newIndex
+        changeOpacity()
+    }
+
+    imageNextBtn.onclick = () => {
+        let newIndex = currentCropIndex + 1;
+        if(newIndex >= crops.length) {
+            newIndex = crops.length - 1
+        }
+        currentCropIndex = newIndex
+        changeOpacity()
+    }
+
+    imageDoneBtn.onclick = () => {
+        currentCropIndex = -1
+        imageChooserControls.style.display = 'none';
+        /** @type {HTMLCollectionOf<HTMLDivElement> */
+        const divs = collageDiv.getElementsByClassName("img")
+        for(const elem of divs) {
+            elem.style.opacity = "100%"
+        }
+    }
 
     snapButton.onclick = () => snap()
     pageSizeSelect.onchange  = () => pageSizeChange()
+    reorderButton.onclick = () => reorder()
 
     for(const tmpl of document.getElementsByClassName("template")) {
         // Assumes second class in the template is the collage's template
@@ -212,6 +267,7 @@ function applyTemplate(templateDiv) {
     collageDiv.classList.add(templateDiv.dataset.collageTemplate)
     collageDiv.dataset.collageTemplate = templateDiv.dataset.collageTemplate
     initCollage()
+    imageDoneBtn.click()
 }
 
 function loadImageUrlsFromQuery() {
@@ -220,4 +276,36 @@ function loadImageUrlsFromQuery() {
     return JSON.parse(urlsstr)
 }
 
+function reorder() {
+    imageChooserControls.style.display = 'block';
+    previewDiv.replaceChildren()
+    currentCropIndex = 0;
+    for (const index in imageUrls) {
+        const url = imageUrls[index]
+        const img = new Image()
+        img.src =  url
+        previewDiv.appendChild(img)
+        img.onclick = () => {
+            const cpie = crops[currentCropIndex]
+            const elem = cpie.element
+            elem.dataset.collageImageUrl = url
+            cpie.destroy()
+            crops[currentCropIndex] = makeCroppieElem(elem, url)
+        }
+    }
+    changeOpacity()
+}
+
+function changeOpacity() {
+    /** @type {HTMLCollectionOf<HTMLDivElement> */
+    const divs = collageDiv.getElementsByClassName("img")
+    for(const elem of divs) {
+        if (elem.dataset.collageCropieIndex != currentCropIndex) {
+            elem.style.opacity = "25%"
+        } else {
+            elem.style.opacity = "100%"
+        }
+    }
+}
+
 main()