Balakrishnan Balasubramanian
12b4386f14
1. Simplify template css to use grid always and use ABCD for area names 2. Add 3 new templates 3. Set data attribute dynamically for templates 4. Minor reformatting in js files 5. Fix URL path
143 lines
3.7 KiB
JavaScript
143 lines
3.7 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 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 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 HTMLImageElement[] */
|
|
const photoImgs = albumPhotosDiv.children
|
|
for(const photo of photoImgs) {
|
|
photo.onclick = () => {
|
|
selectedPhotoImg.src = photo.src
|
|
}
|
|
}
|
|
} catch(e) {
|
|
console.log(e)
|
|
}
|
|
})();
|
|
}
|
|
|
|
function gotoCollage() {
|
|
/** @type 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()
|