klemek/sheet-divider
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working concept

Browse Source
This commit is contained in:
klemek
2019-12-06 20:07:50 +01:00
parent ebf9eb1219
commit 06b7ea17b4
3 changed files with 249 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.js
+154 -40
View File
@@ -1,41 +1,7 @@
/* exported app, utils */
const utils = {
ajax: {
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();
});
},
},
round: (v, n) => Math.round(v * Math.pow(10, n)) / Math.pow(10, n),
cookies: {
/**
* 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 = {
el: '#app',
data: {
title:'Vue-Boilerplate',
content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>'
//inputs
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: {
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');
setTimeout(() => {
document.getElementById('app').setAttribute('style', '');
self.$el.setAttribute('style', '');
});
}
};