implement reorder

This commit is contained in:
Balakrishnan Balasubramanian 2024-08-12 22:56:50 -04:00
parent e10efabcd5
commit 3d044b5076
3 changed files with 116 additions and 3 deletions

View File

@ -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;

View File

@ -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>

View File

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