diff --git a/web/index.css b/web/index.css
index 973369d..c688b8d 100644
--- a/web/index.css
+++ b/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;
diff --git a/web/index.html b/web/index.html
index 9325b0a..4f9f576 100644
--- a/web/index.html
+++ b/web/index.html
@@ -28,11 +28,19 @@
-
+
+
-
-
+
+
+
+
+
+
+
+
+
-
diff --git a/web/index.js b/web/index.js
index 8ebc06c..5a4e26b 100644
--- a/web/index.js
+++ b/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 */
+ 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 */
+ 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()