Compare commits
2 Commits
efda3b72b8
...
12b4386f14
Author | SHA1 | Date | |
---|---|---|---|
12b4386f14 | |||
c009c01a3f |
@ -30,21 +30,20 @@ let selectedPhotosDiv
|
|||||||
let selectedPhotoImg
|
let selectedPhotoImg
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
albumSelect = document.getElementById("album_selector")
|
|
||||||
loadAlbumsBtn = document.getElementById("load_albums_button")
|
loadAlbumsBtn = document.getElementById("load_albums_button")
|
||||||
loadPhotosBtn = document.getElementById("load_photos_button")
|
loadPhotosBtn = document.getElementById("load_photos_button")
|
||||||
makeCollageBtn = document.getElementById("make_collage_button")
|
makeCollageBtn = document.getElementById("make_collage_button")
|
||||||
|
albumSelect = document.getElementById("album_selector")
|
||||||
|
noticeP = document.getElementById("notice_p")
|
||||||
noticeDialog = document.getElementById("notice_dialog")
|
noticeDialog = document.getElementById("notice_dialog")
|
||||||
albumPhotosDiv = document.getElementById("album_photos")
|
albumPhotosDiv = document.getElementById("album_photos")
|
||||||
selectedPhotosDiv = document.getElementById("selected_photos")
|
selectedPhotosDiv = document.getElementById("selected_photos")
|
||||||
noticeP = document.getElementById("notice_p")
|
|
||||||
loadAlbumsBtn.onclick = () => loadAlbums()
|
loadAlbumsBtn.onclick = () => loadAlbums()
|
||||||
loadPhotosBtn.onclick = () => loadPhotos()
|
loadPhotosBtn.onclick = () => loadPhotos()
|
||||||
makeCollageBtn.onclick = () => gotoCollage()
|
makeCollageBtn.onclick = () => gotoCollage()
|
||||||
|
|
||||||
/**
|
/** @type HTMLImageElement[] */
|
||||||
* @type HTMLImageElement[]
|
|
||||||
*/
|
|
||||||
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
|
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
|
||||||
for (const img of selectedPhotos) {
|
for (const img of selectedPhotos) {
|
||||||
img.onclick = () => {
|
img.onclick = () => {
|
||||||
@ -80,9 +79,7 @@ function closeNotice() {
|
|||||||
noticeDialog.close()
|
noticeDialog.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/** @param {string} notice */
|
||||||
* @param {string} notice
|
|
||||||
*/
|
|
||||||
function showNotice(notice) {
|
function showNotice(notice) {
|
||||||
noticeP.textContent = notice
|
noticeP.textContent = notice
|
||||||
noticeDialog.show()
|
noticeDialog.show()
|
||||||
@ -100,9 +97,7 @@ function loadPhotos() {
|
|||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const resp = await fetch(`load-photos/${elem.value}`)
|
const resp = await fetch(`load-photos/${elem.value}`)
|
||||||
/**
|
/** @type String[] */
|
||||||
* @type String[]
|
|
||||||
*/
|
|
||||||
const photos = await resp.json()
|
const photos = await resp.json()
|
||||||
if(photos.length == 0) {
|
if(photos.length == 0) {
|
||||||
showNotice("No Photos found")
|
showNotice("No Photos found")
|
||||||
@ -115,9 +110,7 @@ function loadPhotos() {
|
|||||||
albumPhotosDiv.appendChild(img)
|
albumPhotosDiv.appendChild(img)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/** @type HTMLImageElement[] */
|
||||||
* @type HTMLImageElement[]
|
|
||||||
*/
|
|
||||||
const photoImgs = albumPhotosDiv.children
|
const photoImgs = albumPhotosDiv.children
|
||||||
for(const photo of photoImgs) {
|
for(const photo of photoImgs) {
|
||||||
photo.onclick = () => {
|
photo.onclick = () => {
|
||||||
@ -131,18 +124,14 @@ function loadPhotos() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function gotoCollage() {
|
function gotoCollage() {
|
||||||
/**
|
/** @type HTMLImageElement[] */
|
||||||
* @type HTMLImageElement[]
|
|
||||||
*/
|
|
||||||
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
|
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
|
||||||
/**
|
/** @type String[] */
|
||||||
* @type String[]
|
const photoUrls = [];
|
||||||
*/
|
|
||||||
let photoUrls = [];
|
|
||||||
|
|
||||||
for (const img of selectedPhotos) {
|
for (const img of selectedPhotos) {
|
||||||
if (!img.src.endsWith("stock.svg")) {
|
if (!img.src.endsWith("stock.svg")) {
|
||||||
photoUrls.push(img.src)
|
photoUrls.push((new URL(img.src)).pathname)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))
|
const encodedURLS = encodeURIComponent(JSON.stringify(photoUrls))
|
||||||
|
@ -56,53 +56,61 @@
|
|||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single div {
|
.single {
|
||||||
width: 100%;
|
display: grid;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.one-two {
|
.one-two {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"one two"
|
"A B"
|
||||||
"one three";
|
"A C";
|
||||||
}
|
}
|
||||||
.one-two .img1{
|
.one-two .img1{
|
||||||
grid-area: one;
|
grid-area: A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.half-leftright {
|
.half-topbottom {
|
||||||
display:flex;
|
display: grid;
|
||||||
}
|
|
||||||
|
|
||||||
.half-leftright .img {
|
|
||||||
flex: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.half-topbottom .img {
|
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.two-one-two-leftright {
|
.two-one-two-leftright {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"one two two three"
|
"A B B C"
|
||||||
"four two two five";
|
"D B B E";
|
||||||
}
|
}
|
||||||
.two-one-two-leftright .img2 {
|
.two-one-two-leftright .img1 {
|
||||||
grid-area: two;
|
grid-area: B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.two-one-two-topbottom {
|
.two-one-two-topbottom {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"one two"
|
"A B"
|
||||||
"three three"
|
"C C"
|
||||||
"three three"
|
"C C"
|
||||||
"four five"
|
"D E"
|
||||||
}
|
}
|
||||||
|
|
||||||
.two-one-two-topbottom .img3 {
|
.two-one-two-topbottom .img1 {
|
||||||
grid-area: three;
|
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"
|
||||||
}
|
}
|
||||||
|
@ -12,10 +12,11 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
|
|
||||||
|
<p><a href="choose.html">Select Images</a></p>
|
||||||
|
|
||||||
<label>
|
<label>
|
||||||
<span>Paper size</span>
|
<span>Paper size</span>
|
||||||
<select id="page_size_selector" size=8>
|
<select id="page_size_selector" size=6>
|
||||||
<option value="letter-portrait" > Letter (Portrait) </option>
|
<option value="letter-portrait" > Letter (Portrait) </option>
|
||||||
<option selected value="letter-landscape" > Letter (Landscape) </option>
|
<option selected value="letter-landscape" > Letter (Landscape) </option>
|
||||||
<option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
|
<option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
|
||||||
@ -28,31 +29,31 @@
|
|||||||
|
|
||||||
<ul class="templates">
|
<ul class="templates">
|
||||||
<li>
|
<li>
|
||||||
<div id="default_template" class="template single" data-collage-template="single">
|
<div id="default_template" class="template single">
|
||||||
<div class="img img1"></div>
|
<div class="img img1"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="template one-two" data-collage-template="one-two">
|
<div class="template one-two">
|
||||||
<div class="img img1"></div>
|
<div class="img img1"></div>
|
||||||
<div class="img img2"></div>
|
<div class="img img2"></div>
|
||||||
<div class="img img3"></div>
|
<div class="img img3"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="template half-leftright" data-collage-template="half-leftright">
|
<div class="template two-row">
|
||||||
<div class="img img1"></div>
|
<div class="img img1"></div>
|
||||||
<div class="img img2"></div>
|
<div class="img img2"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="template half-topbottom" data-collage-template="half-topbottom">
|
<div class="template half-topbottom">
|
||||||
<div class="img img1"></div>
|
<div class="img img1"></div>
|
||||||
<div class="img img2"></div>
|
<div class="img img2"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="template two-one-two-leftright" data-collage-template="two-one-two-leftright">
|
<div class="template two-one-two-leftright">
|
||||||
<div class="img img1"></div>
|
<div class="img img1"></div>
|
||||||
<div class="img img2"></div>
|
<div class="img img2"></div>
|
||||||
<div class="img img3"></div>
|
<div class="img img3"></div>
|
||||||
@ -61,13 +62,56 @@
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div class="template two-one-two-topbottom" data-collage-template="two-one-two-topbottom">
|
<div class="template two-one-two-topbottom">
|
||||||
<div class="img img1"></div>
|
<div class="img img1"></div>
|
||||||
<div class="img img2"></div>
|
<div class="img img2"></div>
|
||||||
<div class="img img3"></div>
|
<div class="img img3"></div>
|
||||||
<div class="img img4"></div>
|
<div class="img img4"></div>
|
||||||
<div class="img img5"></div>
|
<div class="img img5"></div>
|
||||||
</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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button id="snapper" class="showbuton">Snap Collage</button>
|
<button id="snapper" class="showbuton">Snap Collage</button>
|
||||||
|
27
web/index.js
27
web/index.js
@ -51,16 +51,8 @@ let collageUrlA
|
|||||||
|
|
||||||
let crops = [];
|
let crops = [];
|
||||||
let pageSize = "letter-landscape";
|
let pageSize = "letter-landscape";
|
||||||
let imageUrls = [
|
/** @type {String[]} */
|
||||||
, // images start with index 1
|
let imageUrls = []
|
||||||
"images/img1.jpg",
|
|
||||||
"images/img2.jpg",
|
|
||||||
"images/img3.jpg",
|
|
||||||
"images/img4.jpg",
|
|
||||||
"images/img5.jpg",
|
|
||||||
"images/img6.jpg",
|
|
||||||
"images/img7.jpg",
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
@ -73,9 +65,13 @@ function main() {
|
|||||||
pageSizeSelect.onchange = () => pageSizeChange()
|
pageSizeSelect.onchange = () => pageSizeChange()
|
||||||
|
|
||||||
for(const tmpl of document.getElementsByClassName("template")) {
|
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)
|
tmpl.onclick = () => applyTemplate(tmpl)
|
||||||
}
|
}
|
||||||
const queryUrls = loadImageUrlsFromQuery()
|
const queryUrls = loadImageUrlsFromQuery()
|
||||||
|
// Skipping first entry in array to make the images start with index 1
|
||||||
imageUrls = [,].concat(queryUrls)
|
imageUrls = [,].concat(queryUrls)
|
||||||
|
|
||||||
applyTemplate(document.getElementById("default_template"))
|
applyTemplate(document.getElementById("default_template"))
|
||||||
@ -148,12 +144,8 @@ function snap() {
|
|||||||
const fsx = elem.offsetLeft - col
|
const fsx = elem.offsetLeft - col
|
||||||
const fsy = elem.offsetTop - cot
|
const fsy = elem.offsetTop - cot
|
||||||
const [sx, sy, ex, ey] = cpie.get().points;
|
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 = {
|
const photo = {
|
||||||
image: imageFile,
|
image: elem.dataset.collageImageUrl.slice("/photos/".length),
|
||||||
crop: {
|
crop: {
|
||||||
start: {
|
start: {
|
||||||
x: parseInt(sx),
|
x: parseInt(sx),
|
||||||
@ -179,6 +171,7 @@ function snap() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
collageUrlA.text = "Collage is being generated...";
|
||||||
const collagFile = await makeCollage(req)
|
const collagFile = await makeCollage(req)
|
||||||
collageUrlA.href = `collages/${collagFile}`;
|
collageUrlA.href = `collages/${collagFile}`;
|
||||||
collageUrlA.text = `${collagFile} generated`;
|
collageUrlA.text = `${collagFile} generated`;
|
||||||
@ -191,9 +184,7 @@ function pageSizeChange() {
|
|||||||
initCollage()
|
initCollage()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/** @param {HTMLDivElement} templateDiv */
|
||||||
* @param {HTMLDivElement} templateDiv
|
|
||||||
*/
|
|
||||||
function applyTemplate(templateDiv) {
|
function applyTemplate(templateDiv) {
|
||||||
document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
|
document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
|
||||||
/** @type {HTMLDivElement} */
|
/** @type {HTMLDivElement} */
|
||||||
|
Loading…
Reference in New Issue
Block a user