diff --git a/index.html b/index.html index 32dbb7a..5a87adc 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,9 @@ + - Change this you moron + Sheet Divider @@ -21,9 +22,61 @@
-

{{title}}

+

Sheet Divider


-

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sheet Size:×cm + +
Boxes:×
Box size:×cmUse ratio
Box ratio:/
Box margin:cmcmSheet padding
Sheet padding:cmcm
(All sizes in centimeters)

@Klemek - Github Repository - 2019
diff --git a/main.js b/main.js index e90e568..5198af1 100644 --- a/main.js +++ b/main.js @@ -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} 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 whatever you\'re going to develop.
Then enjoy!' + //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', ''); }); } }; diff --git a/style.css b/style.css index 85ce010..0937830 100644 --- a/style.css +++ b/style.css @@ -26,17 +26,52 @@ h1 { margin-bottom: .5em; } -table{ +table { border-collapse: collapse; - width:100%; + margin: auto; 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) { main { max-width: 42rem; } - table{ - font-size:inherit; + + table { + font-size: inherit; } }