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
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
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 = () => {
@@ -80,9 +79,7 @@ function closeNotice() {
noticeDialog.close()
}
/**
* @param {string} notice
*/
/** @param {string} notice */
function showNotice(notice) {
noticeP.textContent = notice
noticeDialog.show()
@@ -100,9 +97,7 @@ 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")
@@ -115,9 +110,7 @@ function loadPhotos() {
albumPhotosDiv.appendChild(img)
}
/**
* @type HTMLImageElement[]
*/
/** @type HTMLImageElement[] */
const photoImgs = albumPhotosDiv.children
for(const photo of photoImgs) {
photo.onclick = () => {
@@ -131,14 +124,10 @@ function loadPhotos() {
}
function gotoCollage() {
/**
* @type HTMLImageElement[]
*/
/** @type HTMLImageElement[] */
const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
/**
* @type String[]
*/
let photoUrls = [];
/** @type String[] */
const photoUrls = [];
for (const img of selectedPhotos) {
if (!img.src.endsWith("stock.svg")) {

66
web/index.css
View File

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

57
web/index.html
View File

@@ -16,7 +16,7 @@
<label>
<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 selected value="letter-landscape" > Letter (Landscape) </option>
<option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
@@ -29,31 +29,31 @@
<ul class="templates">
<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>
</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 img2"></div>
<div class="img img3"></div>
</div>
</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 img2"></div>
</div>
</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 img2"></div>
</div>
</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 img2"></div>
<div class="img img3"></div>
@@ -62,13 +62,56 @@
</div>
</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 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
View File

@@ -51,16 +51,8 @@ let collageUrlA
let crops = [];
let pageSize = "letter-landscape";
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",
]
/** @type {String[]} */
let imageUrls = []
function main() {
@@ -73,9 +65,13 @@ 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"))
@@ -148,12 +144,8 @@ 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: imageFile,
image: elem.dataset.collageImageUrl.slice("/photos/".length),
crop: {
start: {
x: parseInt(sx),
@@ -179,6 +171,7 @@ function snap() {
}
(async () => {
collageUrlA.text = "Collage is being generated...";
const collagFile = await makeCollage(req)
collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`;
@@ -191,9 +184,7 @@ function pageSizeChange() {
initCollage()
}
/**
* @param {HTMLDivElement} templateDiv
*/
/** @param {HTMLDivElement} templateDiv */
function applyTemplate(templateDiv) {
document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
/** @type {HTMLDivElement} */