implement reorder

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