-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
57 lines (46 loc) · 2.21 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const formEl = document.querySelector('form');
const parentSheet = document.querySelector('#parent-sheet');
let specs = {};
const setParent = () => {
parentSheet.style.setProperty('--parent-width', specs['parent-w'] + 'vw');
parentSheet.style.setProperty('--parent-height', specs['parent-h'] + 'vw');
parentSheet.style.setProperty('--margin-top', specs['margin-t'] + 'vw');
parentSheet.style.setProperty('--margin-bottom', specs['margin-b'] + 'vw');
parentSheet.style.setProperty('--margin-left', specs['margin-l'] + 'vw');
parentSheet.style.setProperty('--margin-right', specs['margin-r'] + 'vw');
parentSheet.style.setProperty('--gutter', specs['gutter'] + 'vw');
};
// figure out imposition layout and render on screen
const renderFlats = () => {
parentSheet.innerHTML = '';
// base size after accounting for margin sizes. Gutters are calculated separately to avoid convoluted calculations.
const baseAreaX = specs['parent-w'] - (specs['margin-l'] + specs['margin-r']);
const baseAreaY = specs['parent-h'] - (specs['margin-t'] + specs['margin-b']);
// allowable space after accounting for gutters. Use these values to calculate the layout.
const finalAreaX = baseAreaX - specs['gutter'] * (Math.floor(baseAreaX / specs['flat-w']) - 1);
const finalAreaY = baseAreaY - specs['gutter'] * (Math.floor(baseAreaY / specs['flat-h']) - 1);
const flatW = specs['flat-w'] + specs['bleeds'] * 2;
const flatH = specs['flat-h'] + specs['bleeds'] * 2;
const numX = Math.floor(finalAreaX / flatW);
const numY = Math.floor(finalAreaY / flatH);
for (let i = 0; i < numX * numY; i++) {
const flat = document.createElement('div');
flat.classList.add('flat-sheet');
flat.style.setProperty('--flat-width', flatW + 'vw');
flat.style.setProperty('--flat-height', flatH + 'vw');
flat.style.setProperty('--bleeds', specs['bleeds'] + 'vw');
parentSheet.appendChild(flat);
}
};
formEl.addEventListener('submit', (e) => {
e.preventDefault();
let data = new FormData(formEl);
for (let [name, value] of data) {
specs = { ...specs, [name]: parseFloat(value) };
}
setParent();
renderFlats();
});
document.querySelector('#reset').addEventListener('click', (e) => {
parentSheet.innerHTML = '';
});