Compare commits
No commits in common. "12b4386f14b7ceffd21ec2d92010ed90af477f3d" and "efda3b72b8f433ff80b8b3d93f36d66d67d43a98" have entirely different histories.
12b4386f14
...
efda3b72b8
@ -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))
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
27
web/index.js
27
web/index.js
@ -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} */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user