collage-maker/web/choose.js

155 lines
4.1 KiB
JavaScript

"use strict";
// elements
/** @type {HTMLButtonElement} */
let loadAlbumsBtn
/** @type {HTMLButtonElement} */
let loadPhotosBtn
/** @type {HTMLButtonElement} */
let makeCollageBtn
/** @type {HTMLSelectElement} */
let albumSelect
/** @type {HTMLParagraphElement} */
let noticeSpan
/** @type {HTMLDialogElement} */
let noticeDialog
/** @type {HTMLDivElement} */
let albumPhotosDiv
/** @type {HTMLDivElement} */
let selectedPhotosDiv
/** @type {HTMLImageElement} */
let selectedPhotoImg
function main() {
loadAlbumsBtn = document.getElementById("load_albums_button")
loadPhotosBtn = document.getElementById("load_photos_button")
makeCollageBtn = document.getElementById("make_collage_button")
albumSelect = document.getElementById("album_selector")
noticeSpan = document.getElementById("notice_span")
noticeDialog = document.getElementById("notice_dialog")
albumPhotosDiv = document.getElementById("album_photos")
selectedPhotosDiv = document.getElementById("selected_photos")
loadAlbumsBtn.onclick = () => loadAlbums()
loadPhotosBtn.onclick = () => loadPhotos()
makeCollageBtn.onclick = () => gotoCollage()
/** @type HTMLCollectionOf<HTMLImageElement> */
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()
}
function moveToNextSlot() {
/** @type HTMLCollectionOf<HTMLImageElement> */
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
for (const img of selectedPhotos) {
if(img.src.endsWith("stock.svg")) {
img.click()
return
}
}
}
function loadAlbums() {
(async () => {
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)
}
})();
}
function closeNotice() {
noticeDialog.close()
}
/** @param {string} notice */
function showNotice(notice) {
noticeSpan.textContent = notice
noticeDialog.show()
}
function loadPhotos() {
closeNotice()
const selected = albumSelect.selectedOptions
if(selected.length != 1) {
showNotice("Select an album to load photos")
return
}
const [elem] = selected;
(async () => {
try {
const resp = await fetch(`load-photos/${elem.value}`)
/** @type String[] */
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 HTMLCollectionOf<HTMLImageElement> */
const photoImgs = albumPhotosDiv.children
for(const photo of photoImgs) {
photo.onclick = () => {
selectedPhotoImg.src = photo.src
moveToNextSlot()
}
}
} catch(e) {
console.log(e)
}
})();
}
function gotoCollage() {
/** @type HTMLCollectionOf<HTMLImageElement> */
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
/** @type String[] */
const photoUrls = [];
for (const img of selectedPhotos) {
if (!img.src.endsWith("stock.svg")) {
photoUrls.push((new URL(img.src)).pathname)
}
}
const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))
window.location.href = `index.html?urls=${encodedURLS}`
}
main()