Frontend improvements
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:
parent
c009c01a3f
commit
12b4386f14
@ -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")) {
|
||||
|
||||
@ -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";
|
||||
"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"
|
||||
}
|
||||
|
||||
@ -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
27
web/index.js
@ -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} */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user