collage-maker/web/choose.js

143 lines
3.7 KiB
JavaScript
Raw Normal View History

2024-08-03 00:38:54 -04:00
"use strict";
// elements
/** @type {HTMLButtonElement} */
let loadAlbumsBtn
/** @type {HTMLButtonElement} */
let loadPhotosBtn
2024-08-08 12:05:40 -04:00
/** @type {HTMLButtonElement} */
let makeCollageBtn
2024-08-03 00:38:54 -04:00
/** @type {HTMLSelectElement} */
let albumSelect
2024-08-03 01:47:22 -04:00
/** @type {HTMLParagraphElement} */
let noticeP
/** @type {HTMLDialogElement} */
let noticeDialog
2024-08-07 18:07:41 -04:00
/** @type {HTMLDivElement} */
let albumPhotosDiv
/** @type {HTMLDivElement} */
let selectedPhotosDiv
/** @type {HTMLImageElement} */
let selectedPhotoImg
2024-08-03 00:38:54 -04:00
function main() {
loadAlbumsBtn = document.getElementById("load_albums_button")
loadPhotosBtn = document.getElementById("load_photos_button")
2024-08-08 12:05:40 -04:00
makeCollageBtn = document.getElementById("make_collage_button")
albumSelect = document.getElementById("album_selector")
noticeP = document.getElementById("notice_p")
2024-08-03 01:47:22 -04:00
noticeDialog = document.getElementById("notice_dialog")
2024-08-07 18:07:41 -04:00
albumPhotosDiv = document.getElementById("album_photos")
selectedPhotosDiv = document.getElementById("selected_photos")
2024-08-03 00:38:54 -04:00
loadAlbumsBtn.onclick = () => loadAlbums()
loadPhotosBtn.onclick = () => loadPhotos()
2024-08-08 12:05:40 -04:00
makeCollageBtn.onclick = () => gotoCollage()
2024-08-07 18:07:41 -04:00
/** @type HTMLImageElement[] */
2024-08-07 18:07:41 -04:00
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
for (const img of selectedPhotos) {
img.onclick = () => {
selectedPhotoImg?.classList.remove("current")
selectedPhotoImg = img
selectedPhotoImg.classList.add("current")
}
}
selectedPhotos[0].click()
2024-08-03 00:38:54 -04:00
}
function loadAlbums() {
(async () => {
2024-08-03 01:47:22 -04:00
try {
closeNotice()
const resp = await fetch("get-albums")
const albums = await resp.json()
if(albums.length == 0) {
showNotice("No Albums found")
return
}
albumSelect.replaceChildren() // This empties existing options
for(const album of albums) {
albumSelect.add(new Option(album.Title, album.UID))
}
} catch(e) {
console.log(e)
2024-08-03 00:38:54 -04:00
}
})();
}
2024-08-03 01:47:22 -04:00
function closeNotice() {
noticeDialog.close()
}
/** @param {string} notice */
2024-08-03 01:47:22 -04:00
function showNotice(notice) {
noticeP.textContent = notice
noticeDialog.show()
}
2024-08-03 00:38:54 -04:00
function loadPhotos() {
2024-08-03 01:47:22 -04:00
closeNotice()
2024-08-03 00:38:54 -04:00
const selected = albumSelect.selectedOptions
if(selected.length != 1) {
2024-08-03 01:47:22 -04:00
showNotice("Select an album to load photos")
2024-08-03 00:38:54 -04:00
return
}
2024-08-07 19:42:43 -04:00
const [elem] = selected;
2024-08-07 18:07:41 -04:00
(async () => {
try {
const resp = await fetch(`load-photos/${elem.value}`)
/** @type String[] */
2024-08-07 18:07:41 -04:00
const photos = await resp.json()
if(photos.length == 0) {
showNotice("No Photos found")
return
}
albumPhotosDiv.replaceChildren()
for(const url of photos) {
const img = new Image()
img.src = url
albumPhotosDiv.appendChild(img)
}
/** @type HTMLImageElement[] */
2024-08-07 18:07:41 -04:00
const photoImgs = albumPhotosDiv.children
for(const photo of photoImgs) {
photo.onclick = () => {
selectedPhotoImg.src = photo.src
}
}
} catch(e) {
console.log(e)
}
})();
2024-08-03 00:38:54 -04:00
}
2024-08-08 12:05:40 -04:00
function gotoCollage() {
/** @type HTMLImageElement[] */
2024-08-08 12:05:40 -04:00
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
/** @type String[] */
const photoUrls = [];
2024-08-08 12:05:40 -04:00
for (const img of selectedPhotos) {
if (!img.src.endsWith("stock.svg")) {
photoUrls.push((new URL(img.src)).pathname)
2024-08-08 12:05:40 -04:00
}
}
const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))
window.location.href = `index.html?urls=${encodedURLS}`
}
2024-08-03 00:38:54 -04:00
main()