Implement selecting template for collage #14
@ -7,12 +7,13 @@
|
|||||||
background-color: lightgrey;
|
background-color: lightgrey;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: space-around;
|
||||||
flex: 30%;
|
flex-direction: column;
|
||||||
|
flex: 25%;
|
||||||
}
|
}
|
||||||
.imagebox {
|
.imagebox {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
flex: 70%;
|
flex: 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-surface {
|
.image-surface {
|
||||||
@ -28,32 +29,32 @@
|
|||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// paper sizes
|
.templates {
|
||||||
.letter-portrait {
|
display: flex;
|
||||||
aspect-ratio: 85 / 110;
|
flex-wrap: wrap;
|
||||||
}
|
gap: 1rem;
|
||||||
.letter-landscape {
|
|
||||||
aspect-ratio: 110 / 85;
|
|
||||||
}
|
|
||||||
.fiveseven-portrait {
|
|
||||||
aspect-ratio: 5 / 7;
|
|
||||||
}
|
|
||||||
.fiveseven-landscape {
|
|
||||||
aspect-ratio: 7 / 5;
|
|
||||||
}
|
|
||||||
.foursix-portrait {
|
|
||||||
aspect-ratio: 4 / 6;
|
|
||||||
}
|
|
||||||
.foursix-landscape {
|
|
||||||
aspect-ratio: 6 / 4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.half-landscape {
|
.templates li {
|
||||||
display:flex;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.half-landscape .collage-img {
|
#page_size_selector {
|
||||||
flex: 50%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template div {
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.one-two {
|
.one-two {
|
||||||
@ -66,21 +67,38 @@
|
|||||||
grid-area: one;
|
grid-area: one;
|
||||||
}
|
}
|
||||||
|
|
||||||
.letter-portrait .collage-img {
|
.half-leftright {
|
||||||
|
display:flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.half-leftright .img {
|
||||||
|
flex: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.half-topbottom .img {
|
||||||
|
width: 100%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
.letter-landscape-2 {
|
|
||||||
display:flex;
|
.two-one-two-leftright {
|
||||||
// width: 80vh;
|
display: grid;
|
||||||
height: 100%;
|
grid-template-areas:
|
||||||
// margin: auto;
|
"one two two three"
|
||||||
aspect-ratio: 110 / 85;
|
"four two two five";
|
||||||
// aspect-ratio: 7 / 5;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
.letter-landscape-2 .img1 {
|
.two-one-two-leftright .img2 {
|
||||||
flex: 60%;
|
grid-area: two;
|
||||||
}
|
}
|
||||||
.letter-landscape-2 .img2 {
|
|
||||||
flex: 40%;
|
.two-one-two-topbottom {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
"one two"
|
||||||
|
"three three"
|
||||||
|
"three three"
|
||||||
|
"four five"
|
||||||
|
}
|
||||||
|
|
||||||
|
.two-one-two-topbottom .img3 {
|
||||||
|
grid-area: three;
|
||||||
}
|
}
|
||||||
|
@ -17,33 +17,80 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<label>
|
<label>
|
||||||
Page size
|
<span>Paper size</span>
|
||||||
<select id="page_size_selector" size=8 onChange="pageSizeChange(this)">
|
<select id="page_size_selector" size=8 onChange="pageSizeChange(this)">
|
||||||
balki marked this conversation as resolved
Outdated
|
|||||||
<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 X 7 (Portrait)</option>
|
<option value="fiveseven-portrait">5 X 7 (Portrait)</option>
|
||||||
<option value="fiveseven-landscape">7 X 5 (Landscape)</option>
|
<option value="fiveseven-landscape">7 X 5 (Landscape)</option>
|
||||||
<option value="foursix-portrait">4 X 6 (Portrait)</option>
|
<option value="foursix-portrait">4 X 6 (Portrait)</option>
|
||||||
<option value="foursix-landscape">4 X 6 (Landscape)</option>
|
<option value="foursix-landscape">4 X 6 (Landscape)</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
|
||||||
<button id="snapper" class="showbuton">Snap Collage</button>
|
|
||||||
<p><a href="" target="_blank" id="collage-url"></a></p>
|
<ul class="templates">
|
||||||
</div>
|
<li>
|
||||||
|
<div id="default_template" class="template single" data-collage-template="single">
|
||||||
|
<div class="img img1">
|
||||||
balki marked this conversation as resolved
Outdated
balki
commented
Remove empty line inside div Remove empty line inside div
|
|||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<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 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" 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" data-collage-template="two-one-two-leftright">
|
||||||
|
<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>
|
||||||
|
<li>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
<button id="snapper" class="showbuton">Snap Collage</button>
|
||||||
|
<p><a href="" target="_blank" id="collage-url"></a></p>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="imagebox">
|
<div class="imagebox">
|
||||||
<div id="collage" class="image-surface one-two">
|
<div id="collage" class="image-surface"></div>
|
||||||
<div class="collage-img img1" data-collage-image-url="images/img1.jpg">
|
|
||||||
</div>
|
|
||||||
<div class="collage-img img2" data-collage-image-url="images/img2.jpg">
|
|
||||||
</div>
|
|
||||||
<div class="collage-img img3" data-collage-image-url="images/img3.jpg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
75
web/index.js
75
web/index.js
@ -1,4 +1,6 @@
|
|||||||
var pageSizes = {
|
"use strict";
|
||||||
|
|
||||||
|
const pageSizes = {
|
||||||
"letter-portrait" : {
|
"letter-portrait" : {
|
||||||
"ap": "85 / 110",
|
"ap": "85 / 110",
|
||||||
"width": 3264,
|
"width": 3264,
|
||||||
@ -34,21 +36,32 @@ var pageSizes = {
|
|||||||
// elements
|
// elements
|
||||||
|
|
||||||
/** @type {HTMLButtonElement} */
|
/** @type {HTMLButtonElement} */
|
||||||
var snapButton
|
let snapButton
|
||||||
|
|
||||||
/** @type {HTMLDivElement} */
|
/** @type {HTMLDivElement} */
|
||||||
var collageDiv
|
let collageDiv
|
||||||
|
|
||||||
/** @type {HTMLSelectElement} */
|
/** @type {HTMLSelectElement} */
|
||||||
var pageSizeSelect
|
let pageSizeSelect
|
||||||
|
|
||||||
/** @type {HTMLAnchorElement} */
|
/** @type {HTMLAnchorElement} */
|
||||||
var collageUrlA
|
let collageUrlA
|
||||||
|
|
||||||
// collage state
|
// collage state
|
||||||
|
|
||||||
var crops = [];
|
let crops = [];
|
||||||
var pageSize = "letter-landscape";
|
let pageSize = "letter-landscape";
|
||||||
|
const 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() {
|
function main() {
|
||||||
snapButton = document.getElementById("snapper")
|
snapButton = document.getElementById("snapper")
|
||||||
@ -56,10 +69,14 @@ function main() {
|
|||||||
pageSizeSelect = document.getElementById("page_size_selector")
|
pageSizeSelect = document.getElementById("page_size_selector")
|
||||||
collageUrlA = document.getElementById("collage-url")
|
collageUrlA = document.getElementById("collage-url")
|
||||||
|
|
||||||
initCollage()
|
|
||||||
|
|
||||||
snapButton.onclick = () => snap()
|
snapButton.onclick = () => snap()
|
||||||
pageSizeSelect.onchange = () => pageSizeChange()
|
pageSizeSelect.onchange = () => pageSizeChange()
|
||||||
|
|
||||||
|
for(const tmpl of document.getElementsByClassName("template")) {
|
||||||
|
tmpl.onclick = () => applyTemplate(tmpl)
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTemplate(document.getElementById("default_template"))
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -67,7 +84,7 @@ function main() {
|
|||||||
* @param {string} imgUrl
|
* @param {string} imgUrl
|
||||||
*/
|
*/
|
||||||
function makeCroppieElem(elem, imgUrl) {
|
function makeCroppieElem(elem, imgUrl) {
|
||||||
cpie = new Croppie(elem, {
|
const cpie = new Croppie(elem, {
|
||||||
viewport: {
|
viewport: {
|
||||||
width: elem.clientWidth,
|
width: elem.clientWidth,
|
||||||
height: elem.clientHeight,
|
height: elem.clientHeight,
|
||||||
@ -85,11 +102,12 @@ function makeCroppieElem(elem, imgUrl) {
|
|||||||
|
|
||||||
|
|
||||||
function initCollage() {
|
function initCollage() {
|
||||||
for(cpie of crops) {
|
for(const cpie of crops) {
|
||||||
cpie.destroy()
|
cpie.destroy()
|
||||||
}
|
}
|
||||||
crops = []
|
crops = []
|
||||||
for(elem of collageDiv.getElementsByClassName("collage-img")) {
|
|
||||||
|
for(const elem of collageDiv.getElementsByClassName("img")) {
|
||||||
const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
|
const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
|
||||||
const lastLen = crops.push(cpie)
|
const lastLen = crops.push(cpie)
|
||||||
elem.dataset.collageCropieIndex = lastLen - 1
|
elem.dataset.collageCropieIndex = lastLen - 1
|
||||||
@ -116,10 +134,10 @@ async function makeCollage(req) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function snap() {
|
function snap() {
|
||||||
col = collageDiv.offsetLeft;
|
const col = collageDiv.offsetLeft;
|
||||||
cot = collageDiv.offsetTop;
|
const cot = collageDiv.offsetTop;
|
||||||
console.log("----------------------")
|
console.log("----------------------")
|
||||||
req = {
|
const req = {
|
||||||
background_image: "",
|
background_image: "",
|
||||||
aspect: {
|
aspect: {
|
||||||
width: pageSizes[pageSize]["width"],
|
width: pageSizes[pageSize]["width"],
|
||||||
@ -132,7 +150,7 @@ function snap() {
|
|||||||
photos: [],
|
photos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
for(elem of collageDiv.getElementsByClassName("collage-img")) {
|
for(const elem of collageDiv.getElementsByClassName("img")) {
|
||||||
const cpie = crops[elem.dataset.collageCropieIndex]
|
const cpie = crops[elem.dataset.collageCropieIndex]
|
||||||
// console.log(cpie.get().points)
|
// console.log(cpie.get().points)
|
||||||
// console.log(elem.offsetLeft - col)
|
// console.log(elem.offsetLeft - col)
|
||||||
@ -170,7 +188,7 @@ function snap() {
|
|||||||
|
|
||||||
console.log(JSON.stringify(req));
|
console.log(JSON.stringify(req));
|
||||||
(async () => {
|
(async () => {
|
||||||
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`;
|
||||||
})();
|
})();
|
||||||
@ -182,4 +200,27 @@ function pageSizeChange() {
|
|||||||
initCollage()
|
initCollage()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLDivElement} templateDiv
|
||||||
|
*/
|
||||||
|
function applyTemplate(templateDiv) {
|
||||||
|
/** @type {HTMLDivElement} */
|
||||||
|
const templateClone = templateDiv.cloneNode(true)
|
||||||
|
for (const index in imageUrls) {
|
||||||
|
const url = imageUrls[index]
|
||||||
|
const imgClass = `img${index}`
|
||||||
|
|
||||||
|
const [imgDiv] = templateClone.getElementsByClassName(imgClass)
|
||||||
|
if(imgDiv === undefined) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
imgDiv.dataset.collageImageUrl = url;
|
||||||
|
}
|
||||||
|
collageDiv.replaceChildren(...templateClone.children)
|
||||||
|
collageDiv.classList.remove(collageDiv.dataset.collageTemplate)
|
||||||
|
collageDiv.classList.add(templateDiv.dataset.collageTemplate)
|
||||||
|
collageDiv.dataset.collageTemplate = templateDiv.dataset.collageTemplate
|
||||||
|
initCollage()
|
||||||
|
}
|
||||||
|
|
||||||
main()
|
main()
|
||||||
|
Loading…
Reference in New Issue
Block a user
remove onChange