155 lines
4.1 KiB
JavaScript
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 noticeP
|
|
|
|
/** @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")
|
|
noticeP = document.getElementById("notice_p")
|
|
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) {
|
|
noticeP.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()
|