working concept
This commit is contained in:
klemek
+56
-3
@@ -1,8 +1,9 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
<!--suppress XmlUnboundNsPrefix -->
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Change this you moron</title>
|
<title>Sheet Divider</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<script type="text/javascript" src="lib/vue.min.js"></script>
|
<script type="text/javascript" src="lib/vue.min.js"></script>
|
||||||
<script type="text/javascript" src="main.js"></script>
|
<script type="text/javascript" src="main.js"></script>
|
||||||
@@ -21,9 +22,61 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="app" style="display:none">
|
<main id="app" style="display:none">
|
||||||
<h1>{{title}}</h1>
|
<h1>Sheet Divider</h1>
|
||||||
<br>
|
<br>
|
||||||
<p v-html="content"></p>
|
<table id="inputs">
|
||||||
|
<tr>
|
||||||
|
<td>Sheet Size:</td>
|
||||||
|
<td><input v-model="sw" v-bind:disabled="sheet>0" type="number" min="1"></td>
|
||||||
|
<td>×</td>
|
||||||
|
<td><input v-model="sh" v-bind:disabled="sheet>0" type="number" min="1"></td>
|
||||||
|
<td><small>cm</small></td>
|
||||||
|
<td>
|
||||||
|
<select v-model="sheet">
|
||||||
|
<option v-bind:value="i" v-for="s,i in sheets">{{s.title}}</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Boxes:</td>
|
||||||
|
<td><input v-model="m" type="number" min="1"></td>
|
||||||
|
<td>×</td>
|
||||||
|
<td><input v-model="n" type="number" min="1"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Box size:</td>
|
||||||
|
<td><input id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw" type="number" min="0.1"></td>
|
||||||
|
<td>×</td>
|
||||||
|
<td><input id="bh" v-model="bh" v-bind:disabled="(finishedV && !bh) || fbh" type="number" min="0.1"></td>
|
||||||
|
<td><small>cm</small></td>
|
||||||
|
<td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="ratio">
|
||||||
|
<td>Box ratio:</td>
|
||||||
|
<td><input v-model="rw" type="number" min="0.1" step="0.1"></td>
|
||||||
|
<td>/</td>
|
||||||
|
<td><input v-model="rh" type="number" min="0.1" step="0.1"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Box margin:</td>
|
||||||
|
<td><input id="mh" v-model="mh" v-bind:disabled="finishedH && !mh" type="number" min="0.1" step="0.1"></td>
|
||||||
|
<td><small>cm</small></td>
|
||||||
|
<td><input id="mv" v-model="mv" v-bind:disabled="finishedV && !mv" type="number" min="0.1" step="0.1"></td>
|
||||||
|
<td><small>cm</small></td>
|
||||||
|
<td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="padding">
|
||||||
|
<td>Sheet padding:</td>
|
||||||
|
<td><input id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number" min="0.1"></td>
|
||||||
|
<td><small>cm</small></td>
|
||||||
|
<td><input id="pv" v-model="pv" v-bind:disabled="finishedV && !pv" type="number" min="0.1"></td>
|
||||||
|
<td><small>cm</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5" style="text-align: center"><small>(All sizes in centimeters)</small></td>
|
||||||
|
<td><button v-on:click="reset">Reset</button></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
<br>
|
<br>
|
||||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
|
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -1,41 +1,7 @@
|
|||||||
/* exported app, utils */
|
/* exported app, utils */
|
||||||
|
|
||||||
const utils = {
|
const utils = {
|
||||||
ajax: {
|
round: (v, n) => Math.round(v * Math.pow(10, n)) / Math.pow(10, n),
|
||||||
proxy: 'cors-anywhere.herokuapp.com',
|
|
||||||
/**
|
|
||||||
* Define a get HTTP request to be executed with .then/.catch
|
|
||||||
* @param {string} url
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {boolean} proxy - use cors proxy
|
|
||||||
* @returns {Promise<Object|string>} return JSON parsed data or string
|
|
||||||
*/
|
|
||||||
get: (url, data, proxy = false) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (data && Object.keys(data).length) {
|
|
||||||
url += '?' + Object.keys(data)
|
|
||||||
.map(k => k + '=' + encodeURIComponent(data[k]))
|
|
||||||
.join('&')
|
|
||||||
.replace(/%20/g, '+');
|
|
||||||
}
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
if (proxy) {
|
|
||||||
const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
|
|
||||||
url = `${http}//${utils.ajax.proxy}/${url}`;
|
|
||||||
}
|
|
||||||
xhr.open('GET', url);
|
|
||||||
xhr.onload = () => {
|
|
||||||
try {
|
|
||||||
resolve(JSON.parse(xhr.responseText));
|
|
||||||
} catch (ignored) {
|
|
||||||
resolve(xhr.responseText);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.onerror = () => reject(xhr);
|
|
||||||
xhr.send();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
cookies: {
|
cookies: {
|
||||||
/**
|
/**
|
||||||
* Save a value in a cookie
|
* Save a value in a cookie
|
||||||
@@ -80,19 +46,167 @@ const utils = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
papers: [
|
||||||
|
{title: 'A0', w: 84.1, h: 118.9},
|
||||||
|
{title: 'A1', w: 59.4, h: 84.1},
|
||||||
|
{title: 'A2', w: 42, h: 59.4},
|
||||||
|
{title: 'A3', w: 29.7, h: 42},
|
||||||
|
{title: 'A4', w: 21, h: 29.7},
|
||||||
|
{title: 'A5', w: 14.8, h: 21},
|
||||||
|
{title: 'A6', w: 10.5, h: 14.8},
|
||||||
|
{title: 'Double-Raisin', w: 65, h: 100},
|
||||||
|
{title: 'Raisin', w: 50, h: 65},
|
||||||
|
{title: 'Demi-Raisin', w: 32.5, h: 50},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
let app = {
|
let app = {
|
||||||
el: '#app',
|
el: '#app',
|
||||||
data: {
|
data: {
|
||||||
title:'Vue-Boilerplate',
|
//inputs
|
||||||
content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>'
|
sw: 21, sh: 29.7, //sheet size
|
||||||
|
m: 2, n: 3, //boxes
|
||||||
|
bw: undefined, bh: undefined, //box size
|
||||||
|
rw: undefined, rh: undefined, //box ratio
|
||||||
|
mh: undefined, mv: undefined, //margin
|
||||||
|
ph: undefined, pv: undefined, //padding
|
||||||
|
sheet: 5,
|
||||||
|
ratio: false,
|
||||||
|
padding: false,
|
||||||
|
finishedH: false, finishedV: false, //finished h
|
||||||
|
fbw: false, fbh: false, //forced width or height
|
||||||
|
sheets: [
|
||||||
|
{title: 'Custom'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
sheet: function (v) {
|
||||||
|
if (v > 0) {
|
||||||
|
this.sw = this.sheets[v].w;
|
||||||
|
this.sh = this.sheets[v].h;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
padding: function (v) {
|
||||||
|
if (!v && this.bw && this.mh)
|
||||||
|
this.mh = undefined;
|
||||||
|
if (!v && this.bh && this.mv)
|
||||||
|
this.mv = undefined;
|
||||||
|
this.checkFinished();
|
||||||
|
},
|
||||||
|
ratio: 'checkFinished',
|
||||||
|
bw: 'checkFinished',
|
||||||
|
bh: 'checkFinished',
|
||||||
|
rw: 'checkFinished',
|
||||||
|
rh: 'checkFinished',
|
||||||
|
mh: 'checkFinished',
|
||||||
|
mv: 'checkFinished',
|
||||||
|
ph: 'checkFinished',
|
||||||
|
pv: 'checkFinished',
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
checkFinished: function () {
|
||||||
|
const self = this;
|
||||||
|
this.finishedH = false;
|
||||||
|
this.finishedV = false;
|
||||||
|
this.fbw = false;
|
||||||
|
this.fbh = false;
|
||||||
|
if (!this.sw || !this.sh || !this.m || !this.n) return;
|
||||||
|
if (this.ratio && this.rw && this.rh) {
|
||||||
|
if (this.bh && !this.fbw) {
|
||||||
|
this.fbw = true;
|
||||||
|
this.bw = utils.round(this.bh * this.rw / this.rh, 2);
|
||||||
|
}
|
||||||
|
if (this.bw && !this.fbh) {
|
||||||
|
this.fbh = true;
|
||||||
|
this.bh = utils.round(this.bw * this.rh / this.rw, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.padding) {
|
||||||
|
const uh = !this.bw + !this.mh + !this.ph;
|
||||||
|
if (uh <= 1) {
|
||||||
|
this.finishedH = true;
|
||||||
|
if (!this.bw) setTimeout(() => {
|
||||||
|
self.finalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m);
|
||||||
|
});
|
||||||
|
else if (!this.mh) setTimeout(() => {
|
||||||
|
self.finalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1));
|
||||||
|
});
|
||||||
|
else if (!this.ph) setTimeout(() => {
|
||||||
|
self.finalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const uv = !this.bh + !this.mv + !this.pv;
|
||||||
|
if (uv <= 1) {
|
||||||
|
this.finishedV = true;
|
||||||
|
if (!this.bh) setTimeout(() => {
|
||||||
|
self.finalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n);
|
||||||
|
});
|
||||||
|
else if (!this.mv) setTimeout(() => {
|
||||||
|
self.finalValue('mv', (this.sw - this.pv * 2 - this.bh * this.n) / (this.n - 1));
|
||||||
|
});
|
||||||
|
else if (!this.pv) setTimeout(() => {
|
||||||
|
self.finalValue('pv', (this.sw - this.mv * (this.m - 1) - this.bh * this.n) / 2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const uh = !this.bw + !this.mh;
|
||||||
|
if (uh <= 1) {
|
||||||
|
this.finishedH = true;
|
||||||
|
if (!this.bw) setTimeout(() => {
|
||||||
|
self.finalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m);
|
||||||
|
});
|
||||||
|
else if (!this.mh) setTimeout(() => {
|
||||||
|
self.finalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const uv = !this.bh + !this.mv;
|
||||||
|
if (uv <= 1) {
|
||||||
|
this.finishedV = true;
|
||||||
|
if (!this.bh) setTimeout(() => {
|
||||||
|
self.finalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n);
|
||||||
|
});
|
||||||
|
else if (!this.mv) setTimeout(() => {
|
||||||
|
self.finalValue('mv', (this.sw - this.bh * this.n) / (this.n + 1));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(this.finishedH && this.finishedV){
|
||||||
|
//TODO draw
|
||||||
|
}
|
||||||
|
},
|
||||||
|
finalValue: function (n, v) {
|
||||||
|
v = utils.round(v, 2);
|
||||||
|
console.log(n, v);
|
||||||
|
document.getElementById(n).value = v;
|
||||||
|
},
|
||||||
|
'reset': function () {
|
||||||
|
const self = this;
|
||||||
|
['bw', 'bh', 'rw', 'rh', 'mh', 'mv', 'ph', 'pv'].forEach(name => {
|
||||||
|
Vue.set(self, name, undefined);
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
'mounted': () => {
|
'mounted': function () {
|
||||||
|
const self = this;
|
||||||
|
data.papers.forEach(s => {
|
||||||
|
self.sheets.push({
|
||||||
|
title: `${s.title} (${s.w}×${s.h}cm)`,
|
||||||
|
w: s.w,
|
||||||
|
h: s.h
|
||||||
|
});
|
||||||
|
});
|
||||||
|
data.papers.forEach(s => {
|
||||||
|
self.sheets.push({
|
||||||
|
title: `${s.title} landscape (${s.h}×${s.w}cm)`,
|
||||||
|
w: s.h,
|
||||||
|
h: s.w
|
||||||
|
});
|
||||||
|
});
|
||||||
console.log('app mounted');
|
console.log('app mounted');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementById('app').setAttribute('style', '');
|
self.$el.setAttribute('style', '');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -26,17 +26,52 @@ h1 {
|
|||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
table{
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width:100%;
|
margin: auto;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
border: 1em solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.1rem 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
td > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child {
|
||||||
|
text-align: right;
|
||||||
|
width: 9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:nth-child(2), td:nth-child(4) {
|
||||||
|
width: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:nth-child(3), td:nth-child(5) {
|
||||||
|
width: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:nth-child(6), td[colspan="5"]+td {
|
||||||
|
padding-left: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
width: 11rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
td[colspan="5"]{
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
main {
|
main {
|
||||||
max-width: 42rem;
|
max-width: 42rem;
|
||||||
}
|
}
|
||||||
table{
|
|
||||||
font-size:inherit;
|
table {
|
||||||
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user