Implement fetching photos from photoprism #19
@ -16,6 +16,7 @@
|
||||
<button id="load_albums_button">Load Albums</button>
|
||||
<select id="album_selector" size="8"> </select>
|
||||
<button id="load_photos_button">Load Photos</button>
|
||||
<button id="make_collage_button">Make Collage</button>
|
||||
</div>
|
||||
<div id="selected_photos">
|
||||
<div>1<img src="stock.svg" /> </div>
|
||||
|
@ -8,6 +8,9 @@ let loadAlbumsBtn
|
||||
/** @type {HTMLButtonElement} */
|
||||
let loadPhotosBtn
|
||||
|
||||
/** @type {HTMLButtonElement} */
|
||||
let makeCollageBtn
|
||||
|
||||
/** @type {HTMLSelectElement} */
|
||||
let albumSelect
|
||||
|
||||
@ -30,12 +33,14 @@ function main() {
|
||||
albumSelect = document.getElementById("album_selector")
|
||||
loadAlbumsBtn = document.getElementById("load_albums_button")
|
||||
loadPhotosBtn = document.getElementById("load_photos_button")
|
||||
makeCollageBtn = document.getElementById("make_collage_button")
|
||||
noticeDialog = document.getElementById("notice_dialog")
|
||||
albumPhotosDiv = document.getElementById("album_photos")
|
||||
selectedPhotosDiv = document.getElementById("selected_photos")
|
||||
noticeP = document.getElementById("notice_p")
|
||||
loadAlbumsBtn.onclick = () => loadAlbums()
|
||||
loadPhotosBtn.onclick = () => loadPhotos()
|
||||
makeCollageBtn.onclick = () => gotoCollage()
|
||||
|
||||
/**
|
||||
* @type HTMLImageElement[]
|
||||
@ -125,5 +130,24 @@ function loadPhotos() {
|
||||
})();
|
||||
}
|
||||
|
||||
function gotoCollage() {
|
||||
/**
|
||||
* @type HTMLImageElement[]
|
||||
*/
|
||||
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
|
||||
/**
|
||||
* @type String[]
|
||||
*/
|
||||
let photoUrls = [];
|
||||
|
||||
for (const img of selectedPhotos) {
|
||||
if (!img.src.endsWith("stock.svg")) {
|
||||
photoUrls.push(img.src)
|
||||
}
|
||||
}
|
||||
const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))
|
||||
window.location.href = `index.html?urls=${encodedURLS}`
|
||||
}
|
||||
|
||||
|
||||
main()
|
||||
|
10
web/index.js
10
web/index.js
@ -51,7 +51,7 @@ let collageUrlA
|
||||
|
||||
let crops = [];
|
||||
let pageSize = "letter-landscape";
|
||||
const imageUrls = [
|
||||
let imageUrls = [
|
||||
, // images start with index 1
|
||||
"images/img1.jpg",
|
||||
"images/img2.jpg",
|
||||
@ -75,6 +75,8 @@ function main() {
|
||||
for(const tmpl of document.getElementsByClassName("template")) {
|
||||
tmpl.onclick = () => applyTemplate(tmpl)
|
||||
}
|
||||
const queryUrls = loadImageUrlsFromQuery()
|
||||
imageUrls = [,].concat(queryUrls)
|
||||
|
||||
applyTemplate(document.getElementById("default_template"))
|
||||
}
|
||||
@ -210,4 +212,10 @@ function applyTemplate(templateDiv) {
|
||||
initCollage()
|
||||
}
|
||||
|
||||
function loadImageUrlsFromQuery() {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const urlsstr = params.get('urls')
|
||||
return JSON.parse(urlsstr)
|
||||
}
|
||||
|
||||
main()
|
||||
|
Loading…
Reference in New Issue
Block a user