balki/collage-maker
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Frontend improvements

Browse Source 
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
This commit is contained in:
Balakrishnan Balasubramanian 2024-08-09 01:51:52 -04:00
parent c009c01a3f
commit 12b4386f14
4 changed files with 106 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/choose.js
View File

@ -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,14 +124,10 @@ 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")) {

66
web/index.css
View File

@ -32,7 +32,7 @@
.templates { .templates {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
} }
.templates li { .templates li {
@ -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"
} }

57
web/index.html
View File

@ -16,7 +16,7 @@
<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>
@ -29,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>
@ -62,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
View File

@ -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} */