Compare commits

..

No commits in common. "12b4386f14b7ceffd21ec2d92010ed90af477f3d" and "efda3b72b8f433ff80b8b3d93f36d66d67d43a98" have entirely different histories.

4 changed files with 76 additions and 108 deletions

View File

@ -30,20 +30,21 @@ let selectedPhotosDiv
let selectedPhotoImg
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")
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")
noticeP = document.getElementById("notice_p")
loadAlbumsBtn.onclick = () => loadAlbums()
loadPhotosBtn.onclick = () => loadPhotos()
makeCollageBtn.onclick = () => gotoCollage()
/** @type HTMLImageElement[] */
/**
* @type HTMLImageElement[]
*/
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
for (const img of selectedPhotos) {
img.onclick = () => {
@ -79,7 +80,9 @@ function closeNotice() {
noticeDialog.close()
}
/** @param {string} notice */
/**
* @param {string} notice
*/
function showNotice(notice) {
noticeP.textContent = notice
noticeDialog.show()
@ -97,7 +100,9 @@ function loadPhotos() {
(async () => {
try {
const resp = await fetch(`load-photos/${elem.value}`)
/** @type String[] */
/**
* @type String[]
*/
const photos = await resp.json()
if(photos.length == 0) {
showNotice("No Photos found")
@ -110,7 +115,9 @@ function loadPhotos() {
albumPhotosDiv.appendChild(img)
}
/** @type HTMLImageElement[] */
/**
* @type HTMLImageElement[]
*/
const photoImgs = albumPhotosDiv.children
for(const photo of photoImgs) {
photo.onclick = () => {
@ -124,14 +131,18 @@ function loadPhotos() {
}
function gotoCollage() {
/** @type HTMLImageElement[] */
/**
* @type HTMLImageElement[]
*/
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
/** @type String[] */
const photoUrls = [];
/**
* @type String[]
*/
let photoUrls = [];
for (const img of selectedPhotos) {
if (!img.src.endsWith("stock.svg")) {
photoUrls.push((new URL(img.src)).pathname)
photoUrls.push(img.src)
}
}
const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))

View File

@ -32,7 +32,7 @@
.templates {
display: flex;
flex-wrap: wrap;
gap: 1rem;
gap: 1rem;
}
.templates li {
@ -56,61 +56,53 @@
border: 1px solid;
}
.single {
display: grid;
.single div {
width: 100%;
height: 100%;
}
.one-two {
display: grid;
grid-template-areas:
"A B"
"A C";
"one two"
"one three";
}
.one-two .img1{
grid-area: A;
grid-area: one;
}
.half-topbottom {
display: grid;
.half-leftright {
display:flex;
}
.half-leftright .img {
flex: 50%;
}
.half-topbottom .img {
width: 100%;
height: 50%;
}
.two-one-two-leftright {
display: grid;
grid-template-areas:
"A B B C"
"D B B E";
grid-template-areas:
"one two two three"
"four two two five";
}
.two-one-two-leftright .img1 {
grid-area: B;
.two-one-two-leftright .img2 {
grid-area: two;
}
.two-one-two-topbottom {
display: grid;
grid-template-areas:
"A B"
"C C"
"C C"
"D E"
"one two"
"three three"
"three three"
"four five"
}
.two-one-two-topbottom .img1 {
grid-area: C;
}
.two-row {
display: grid;
grid-template-areas:
"A B"
}
.three-row {
display: grid;
grid-template-areas:
"A B C"
}
.four-row {
display: grid;
grid-template-areas:
"A B C D"
.two-one-two-topbottom .img3 {
grid-area: three;
}

View File

@ -12,11 +12,10 @@
<div class="container">
<div class="controls">
<p><a href="choose.html">Select Images</a></p>
<label>
<span>Paper size</span>
<select id="page_size_selector" size=6>
<select id="page_size_selector" size=8>
<option value="letter-portrait" > Letter (Portrait) </option>
<option selected value="letter-landscape" > Letter (Landscape) </option>
<option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
@ -29,31 +28,31 @@
<ul class="templates">
<li>
<div id="default_template" class="template single">
<div id="default_template" class="template single" data-collage-template="single">
<div class="img img1"></div>
</div>
</li>
<li>
<div class="template one-two">
<div class="template one-two" data-collage-template="one-two">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</li>
<li>
<div class="template two-row">
<div class="template half-leftright" data-collage-template="half-leftright">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template half-topbottom">
<div class="template half-topbottom" data-collage-template="half-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template two-one-two-leftright">
<div class="template two-one-two-leftright" data-collage-template="two-one-two-leftright">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
@ -62,56 +61,13 @@
</div>
</li>
<li>
<div class="template two-one-two-topbottom">
<div class="template two-one-two-topbottom" data-collage-template="two-one-two-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
</div>
<li>
<div class="template four-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
</div>
</li>
<li>
<div class="template four-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
</div>
</li>
<li>
<div class="template three-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
</div>
</li>
</ul>
<button id="snapper" class="showbuton">Snap Collage</button>

View File

@ -51,8 +51,16 @@ let collageUrlA
let crops = [];
let pageSize = "letter-landscape";
/** @type {String[]} */
let imageUrls = []
let imageUrls = [
, // images start with index 1
"images/img1.jpg",
"images/img2.jpg",
"images/img3.jpg",
"images/img4.jpg",
"images/img5.jpg",
"images/img6.jpg",
"images/img7.jpg",
]
function main() {
@ -65,13 +73,9 @@ function main() {
pageSizeSelect.onchange = () => pageSizeChange()
for(const tmpl of document.getElementsByClassName("template")) {
// Assumes second class in the template is the collage's template
const [_, collageTemplate] = tmpl.classList
tmpl.dataset.collageTemplate = collageTemplate
tmpl.onclick = () => applyTemplate(tmpl)
}
const queryUrls = loadImageUrlsFromQuery()
// Skipping first entry in array to make the images start with index 1
imageUrls = [,].concat(queryUrls)
applyTemplate(document.getElementById("default_template"))
@ -144,8 +148,12 @@ function snap() {
const fsx = elem.offsetLeft - col
const fsy = elem.offsetTop - cot
const [sx, sy, ex, ey] = cpie.get().points;
const imageFile = (() => {
const u = new URL(elem.dataset.collageImageUrl)
return u.pathname.slice("/photos/".length)
})();
const photo = {
image: elem.dataset.collageImageUrl.slice("/photos/".length),
image: imageFile,
crop: {
start: {
x: parseInt(sx),
@ -171,7 +179,6 @@ function snap() {
}
(async () => {
collageUrlA.text = "Collage is being generated...";
const collagFile = await makeCollage(req)
collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`;
@ -184,7 +191,9 @@ function pageSizeChange() {
initCollage()
}
/** @param {HTMLDivElement} templateDiv */
/**
* @param {HTMLDivElement} templateDiv
*/
function applyTemplate(templateDiv) {
document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
/** @type {HTMLDivElement} */