Commit 9c6f279b authored by Luc Didry's avatar Luc Didry
Browse files

Allow to change sticker size

parent f213af0d
Pipeline #26291 passed with stage
in 26 seconds
......@@ -27,6 +27,7 @@
<a class="dropdown-item" href="#" data-setting="set-bg">Background</a>
<a class="dropdown-item" href="#" data-setting="set-fonts">Fonts</a>
<a class="dropdown-item" href="#" data-setting="set-positions">Positions</a>
<a class="dropdown-item" href="#" data-setting="set-img-size">Image size</a>
</div>
</li>
<li class="nav-item">
......@@ -80,6 +81,9 @@
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-positions">Positions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-img-size">Image size</a>
</li>
</ul>
</nav>
</div>
......@@ -171,8 +175,8 @@
</div>
</div>
</div>
<div class="row rectangle text-center">
Rectangle
<div class="row border-txt text-center">
Border
</div>
<div class="row">
<div class="col-sm-12">
......@@ -254,10 +258,11 @@
<label for="porn-font" class="col-sm-12 col-md-6 font">Font</label>
<div class="col-sm-12 col-md-6">
<select id="porn-font" class="form-control">
<option value="sans-serif" selected>Sans serif</option>
<option value="sans-serif">Sans serif</option>
<option value="Comic Spice">Comic Spice</option>
<option value="Comic Neue">Comic Neue</option>
<option value="Hack">Hack</option>
<option value="Open Sans" selected>Open Sans</option>
<option value="Nosifer">Nosifer</option>
</select>
</div>
......@@ -285,6 +290,19 @@
</div>
</div>
</div>
<div class="row border-txt text-center">
Border
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<label for="border-thickness" class="col-sm-12 col-md-6 text-size">Thickness</label>
<div class="col-sm-12 col-md-6">
<input id="border-thickness" type="number" min="0" value="20" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-none" id="set-bg">
......@@ -417,6 +435,27 @@
</div>
</div>
</div>
<div class="row d-none" id="set-img-size">
<div class="col">
<div class="row">
<label for="img-width" class="col-sm-12 col-md-8 img-width">Image width</label>
<div class="col-sm-12 col-md-4">
<input id="img-width" type="number" min="1" value="800" class="form-control">
</div>
</div>
<div class="row">
<label for="img-height" class="col-sm-12 col-md-8 img-width">Image height</label>
<div class="col-sm-12 col-md-4">
<input id="img-height" type="number" min="1" value="400" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a id="make-text-center" href="#" class="btn btn-info">Center text</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
......
// vim:set sw=4 ts=4 sts=4 ft=javascript expandtab:
var svg = new C2S(800,400);
var svg;
var workCanvas = 'Work with canvas';
var workSvg = 'Work with SVG';
var customImgText = 'Custom image';
......@@ -83,17 +83,24 @@ function translate(userLang, languages) {
},
success: function(locale) {
toggleI18n(userLang);
['get-source', 'donate-dpdn', 'license', 'author', 'wemake', 'porn', 'rectangle', 'color', 'transparency', 'x-position', 'y-position', 'font', 'style', 'text-size'].forEach(function(e) {
['get-source', 'donate-dpdn', 'license', 'author', 'wemake', 'porn', 'border-txt',
'color', 'transparency', 'x-position', 'y-position', 'font', 'style', 'text-size'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('.'+e).text(locale[e]);
}
});
['hide-settings', 'set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions'].forEach(function(e) {
['hide-settings', 'set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions',
'set-img-size'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('[data-setting="'+e+'"]').text(locale[e]);
}
});
['wemake', 'porn', 'filename', 'corners', 'bg-type', 'bgu-color', 'bgr-color', 'egr-color', 'gr-orientation', 'bg-img', 'custom-img', 'custom-x', 'custom-y', 'custom-size'].forEach(function(e) {
['wemake', 'porn', 'filename', 'corners', 'bg-type', 'bgu-color', 'bgr-color', 'egr-color',
'gr-orientation', 'bg-img', 'custom-img', 'custom-x', 'custom-y', 'custom-size', 'border-thickness',
'img-width', 'img-height'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('label[for="'+e+'"]').text(locale[e]);
}
......@@ -107,12 +114,16 @@ function translate(userLang, languages) {
if (locale['add-glitter'] !== undefined) {
$('.form-check-label span').text(locale['add-glitter']);
}
['plain', 'gradient', 'rainbow', 'img', 'lr', 'rl', 'tb', 'bt', 'r', 'beer', 'glitter', 'rainbow-flag', 'sky', 'field', 'bridge', 'regular', 'bold', 'italic', 'italic bold'].forEach(function(e) {
['plain', 'gradient', 'rainbow', 'img', 'lr', 'rl', 'tb', 'bt', 'r', 'beer', 'glitter',
'rainbow-flag', 'sky', 'field', 'bridge', 'regular', 'bold', 'italic', 'italic bold'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('option[value="'+e+'"]').text(locale[e]);
}
});
['donate-dpdn', 'i18n-dpdn', 'settings-dpdn', 'toggle-svg', 'download', 'reset', 'switch-colors'].forEach(function(e) {
['donate-dpdn', 'i18n-dpdn', 'settings-dpdn', 'toggle-svg', 'download', 'reset', 'switch-colors',
'make-text-center'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('#'+e).text(locale[e]);
}
......@@ -123,9 +134,6 @@ function translate(userLang, languages) {
if (locale['toggle-svg'] !== undefined) {
workSvg = locale['toggle-svg'];
}
if (locale['custom-img-text'] !== undefined) {
customImgText = locale['custom-img-text'];
}
}
});
}
......@@ -223,6 +231,15 @@ function getParameters() {
if (url.searchParams.get('f') !== null) {
$('#filename').val(url.searchParams.get('f'));
}
if (url.searchParams.get('width') !== null) {
$('#img-width').val(url.searchParams.get('width'));
}
if (url.searchParams.get('height') !== null) {
$('#img-height').val(url.searchParams.get('height'));
}
if (url.searchParams.get('bth') !== null) {
$('#border-thickness').val(url.searchParams.get('bth'));
}
}
function bindEvents() {
......@@ -291,11 +308,11 @@ function bindEvents() {
$('[data-setting]').removeClass('active');
t.addClass('active');
if (t.data('setting') === 'hide-settings') {
['settings', 'set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions'].forEach(function(e) {
['settings', 'set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions', 'set-img-size'].forEach(function(e) {
hide(e);
});
} else {
['set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions'].forEach(function(e) {
['set-corner-shape', 'set-colors', 'set-fonts', 'set-bg', 'set-positions', 'set-img-size'].forEach(function(e) {
if (e !== t.data('setting')) {
hide(e);
} else {
......@@ -319,6 +336,9 @@ function bindEvents() {
refreshText();
});
// Center text
$('#make-text-center').click(centerText);
// Upload custom image
$('#custom-img').change(handleImage);
if (customImg === undefined || customImg === null) {
......@@ -443,7 +463,6 @@ function handleImage(e) {
refreshText();
}
img.src = event.target.result;
show('bg-custom-img-settings');
}
reader.readAsDataURL(e.target.files[0]);
}
......@@ -486,6 +505,9 @@ function reset() {
$('#custom-x').val(0);
$('#custom-y').val(0);
$('#custom-size').val(0);
$('#img-width').val(800);
$('#img-height').val(400);
$('#border-thickness').val(20);
show('bg-color');
hide('gradient-settings');
......@@ -522,18 +544,25 @@ function refreshText() {
var or = $('#gr-orientation');
var bgi = $('#bg-img');
var cor = $('#corners');
var bth = $('#border-thickness').val();
var width = $('#img-width').val();
var height = $('#img-height').val();
var c = document.getElementById('canvas');
c.width = width;
c.height = height;
var ctx = c.getContext('2d');
// do we work on the SVG?
var s = $('#svg');
svg = new C2S(width,height);
if (s.hasClass('d-none') === false) {
ctx = svg;
}
// cleanup
ctx.clearRect(0, 0, c.width, c.height);
ctx.clearRect(0, 0, width, height);
// update URL
var url = new URL(window.location);
......@@ -563,6 +592,9 @@ function refreshText() {
url.searchParams.set('or', or.val());
url.searchParams.set('bgi', bgi.val());
url.searchParams.set('cor', cor.val());
url.searchParams.set('bth', bth);
url.searchParams.set('width', width);
url.searchParams.set('height', height);
window.history.pushState("change", "WemaWema", url);
// background color
......@@ -574,19 +606,19 @@ function refreshText() {
var grd;
switch(or.val()) {
case 'lr':
grd = ctx.createLinearGradient(0, 200, c.width, 200);
grd = ctx.createLinearGradient(0, height/2, width, height/2);
break;
case 'rl':
grd = ctx.createLinearGradient(c.width, 200, 0, 200);
grd = ctx.createLinearGradient(width, height/2, 0, height/2);
break;
case 'tb':
grd = ctx.createLinearGradient(400, 0, 400, c.height);
grd = ctx.createLinearGradient(width/2, 0, width/2, height);
break;
case 'bt':
grd = ctx.createLinearGradient(400, c.height, 400, 0);
grd = ctx.createLinearGradient(width/2, height, width/2, 0);
break;
case 'r':
grd = ctx.createRadialGradient(400, 200, 25, 400, 200, 400);
grd = ctx.createRadialGradient(width/2, height/2, 25, width/2, height/2, width/2);
break;
}
grd.addColorStop(0, bgr.val());
......@@ -594,20 +626,21 @@ function refreshText() {
ctx.fillStyle = grd;
break;
case 'img':
show('bg-custom-img-settings');
var x = $('#custom-x').val();
var y = $('#custom-y').val();
var s = $('#custom-size');
if (bgi.val() === 'custom' && customImg !== undefined && customImg !== null) {
var iw = customImg.width;
var ih = customImg.height;
var x = $('#custom-x').val();
var y = $('#custom-y').val();
var s = $('#custom-size');
var sizer = scalePreserveAspectRatio(iw, ih, 800, 400);
var sizer = scalePreserveAspectRatio(iw, ih, width, height);
if (parseFloat(s.val()) === 0.0) {
s.val(Math.round(sizer * 1000)/1000);
} else {
sizer = s.val();
}
ctx.drawImage(customImg, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
} else {
if (bgi.val() === '') {
bgi.val('beer');
......@@ -619,15 +652,23 @@ function refreshText() {
}
background.src = img+'.png';
background.onload = function() {
ctx.drawImage(background, 0, 0);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli);
var iw = background.width;
var ih = background.height;
var sizer = scalePreserveAspectRatio(iw, ih, width, height);
if (parseFloat(s.val()) === 1.0) {
s.val(Math.round(sizer * 1000)/1000);
} else {
sizer = s.val();
}
ctx.drawImage(background, 0, 0, iw, ih, x, y, iw*sizer, ih*sizer);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
}
}
return;
break;
case 'rainbow':
var grd = ctx.createLinearGradient(400, 0, 400, c.height);
var grd2 = svg.createLinearGradient(400, 0, 400, c.height);
var grd = ctx.createLinearGradient(width/2, 0, width/2, height);
var grd2 = svg.createLinearGradient(width/2, 0, width/2, height);
grd.addColorStop(0, '#e50000');
grd.addColorStop(1 / 5, '#ff8d00');
grd.addColorStop(2 / 5, '#ffee00');
......@@ -644,32 +685,34 @@ function refreshText() {
svg.fillStyle = grd2;
break;
}
roundRect(ctx, 0, 0, c.width, c.height, parseInt(cor.val()), true, false);
roundRect(ctx, 0, 0, width, height, parseInt(cor.val()), true, false);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth);
}
/*
* Drawing functions
*/
function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli) {
function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth) {
// Inside rounded rectangle
ctx.lineWidth = 20;
ctx.strokeStyle = colorToRGBA(rc.val(), ra.val());
roundRect(ctx, 25, 25, 750, 350, 20, false);
if (bth > 0) {
ctx.lineWidth = bth;
ctx.strokeStyle = colorToRGBA(rc.val(), ra.val());
roundRect(ctx, (width * 1/32), (height * 1/16), (width * 15 / 16), (height * 7 / 8), 20, false);
}
ctx.textAlign="center";
// Write WE MAKE
var style = (wfs.val() === 'regular') ? '' : wfs.val()+' ';
var style = (wfs.val() === 'regular') ? '' : wfs.val()+' ';
ctx.font = style+parseInt(ws.val())+'px \''+wf.val()+'\'';
ctx.fillStyle = colorToRGBA(wc.val(), wa.val());
ctx.fillText(w.val(), parseInt(wx.val()), parseInt(wy.val()), 725);
ctx.fillText(w.val(), parseInt(wx.val()), parseInt(wy.val()), (width * 29 / 32));
// Write PORN
style = (pfs.val() === 'regular') ? '' : pfs.val()+' ';
ctx.font = style+parseInt(ps.val())+'px \''+pf.val();+'\'';
ctx.fillStyle = colorToRGBA(pc.val(), pa.val());
ctx.fillText(p.val(), parseInt(px.val()), parseInt(py.val()), 725);
ctx.fillText(p.val(), parseInt(px.val()), parseInt(py.val()), (width * 29 / 32));
if (gli.prop('checked')) {
var glitter = new Image();
......@@ -774,3 +817,21 @@ function readCookie(name) {
}
return null;
}
function centerText(e) {
e.preventDefault();
var wx = $('#wemake-x');
var wy = $('#wemake-y');
var px = $('#porn-x');
var py = $('#porn-y');
var width = $('#img-width').val();
var height = $('#img-height').val();
wx.val(width / 2);
wy.val(height / 4 + height * 3 / 20);
px.val(width / 2);
py.val(height * 3 / 4 + height / 8);
refreshText();
}
This diff is collapsed.
......@@ -46,9 +46,8 @@
"y-position": "y position",
"text-size": "Text size",
"custom-img": "Upload a background image",
"custom-img-text": "",
"custom-x": "Custom image x position",
"custom-y": "Custom image y position",
"custom-x": "Image x position",
"custom-y": "Image y position",
"custom-size": "Custom image size",
"toggle-svg": "Work with SVG",
"toggle-canvas": "Work with Canvas",
......@@ -58,5 +57,11 @@
"bold": "Bold",
"italic": "Italic",
"italic bold": "Italic bold",
"i18n-dpdn": "Language"
"i18n-dpdn": "Language",
"set-img-size": "Image size",
"img-width": "Image width",
"img-height": "Image height",
"border-txt": "Border",
"border-thickness": "Thickness",
"make-text-center": "Center text"
}
......@@ -46,10 +46,9 @@
"y-position": "Ordonnée",
"text-size": "Taille du texte",
"custom-img": "Utiliser une image personnalisée",
"custom-img-text": "Image personnalisée",
"custom-x": "Abscisse de l’image personnalisée",
"custom-y": "Ordonnée de l’image personnalisée",
"custom-size": "Taille de l’image personnalisée",
"custom-x": "Abscisse de l’image",
"custom-y": "Ordonnée de l’image",
"custom-size": "Taille de l’image",
"toggle-svg": "Travailler en SVG",
"toggle-canvas": "Travailler en Canvas",
"download": "Télécharger",
......@@ -58,5 +57,11 @@
"bold": "Gras",
"italic": "Italique",
"italic bold": "Italique gras",
"i18n-dpdn": "Langage"
"i18n-dpdn": "Langage",
"set-img-size": "Taille de l’image",
"img-width": "Largeur de l’image",
"img-height": "Hauteur de l’image",
"border-txt": "Bordure",
"border-thickness": "Épaisseur",
"make-text-center": "Centrer le texte"
}
......@@ -46,10 +46,9 @@
"y-position": "Ordenada",
"text-size": "Talha del tèxte",
"custom-img": "Utilizar un imatge personalizat",
"custom-img-text": "Imatge personalizat",
"custom-x": "Abscissa de l’imatge personalizat",
"custom-y": "Ordonenada de l’imatge personalizat",
"custom-size": "Talha de l’imatge personalizat",
"custom-x": "Abscissa de l’imatge",
"custom-y": "Ordonenada de l’imatge",
"custom-size": "Talha de l’imatge",
"toggle-svg": "Trabalhar en SVG",
"toggle-canvas": "Trabalhar en Canvas",
"download": "Telecargar",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment