Commit 7cbcbf35 authored by Luc Didry's avatar Luc Didry
Browse files

Allow to choose the width of the texts

parent 3ca0f064
......@@ -26,7 +26,7 @@
<a class="dropdown-item" href="#" data-setting="set-colors">Colors</a>
<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-positions">Texts positions and sizes</a>
<a class="dropdown-item" href="#" data-setting="set-img-size">Image size</a>
<a class="dropdown-item" href="#" data-setting="set-rick">Rick</a>
<a class="dropdown-item" href="#" data-setting="gallery">Gallery</a>
......@@ -82,7 +82,7 @@
<a class="nav-link" href="#" data-setting="set-fonts">Fonts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-positions">Positions</a>
<a class="nav-link" href="#" data-setting="set-positions">Texts positions and sizes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-setting="set-img-size">Image size</a>
......@@ -258,14 +258,6 @@
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="wemake-size" class="col-sm-12 col-md-6 text-size">Text size</label>
<div class="col-sm-12 col-md-6">
<input id="wemake-size" type="number" min="1" value="150" class="form-control">
</div>
</div>
</div>
</div>
<div class="row porn text-center">
Second line
......@@ -299,14 +291,6 @@
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<label for="porn-size" class="col-sm-12 col-md-6 text-size">Text size</label>
<div class="col-sm-12 col-md-6">
<input id="porn-size" type="number" min="1" value="220" class="form-control">
</div>
</div>
</div>
</div>
<div class="row border-txt text-center">
Border
......@@ -447,6 +431,18 @@
<input id="wemake-y" type="number" min="0" value="160" class="form-control">
</div>
</div>
<div class="row">
<label for="wemake-size" class="col-sm-12 col-md-8 text-size">Text size</label>
<div class="col-sm-12 col-md-4">
<input id="wemake-size" type="number" min="1" value="150" class="form-control">
</div>
</div>
<div class="row">
<label for="wemake-width" class="col-sm-12 col-md-8 text-width">Text width</label>
<div class="col-sm-12 col-md-4">
<input id="wemake-width" type="number" min="1" value="725" class="form-control">
</div>
</div>
<div class="row porn text-center">
Second line
</div>
......@@ -462,6 +458,18 @@
<input id="porn-y" type="number" min="0" value="350" class="form-control">
</div>
</div>
<div class="row">
<label for="porn-size" class="col-sm-12 col-md-8 text-size">Text size</label>
<div class="col-sm-12 col-md-4">
<input id="porn-size" type="number" min="1" value="220" class="form-control">
</div>
</div>
<div class="row">
<label for="porn-width" class="col-sm-12 col-md-8 text-width">Text width</label>
<div class="col-sm-12 col-md-4">
<input id="porn-width" type="number" min="1" value="725" class="form-control">
</div>
</div>
</div>
</div>
<div class="row d-none" id="set-img-size">
......
......@@ -101,7 +101,7 @@ function translate(userLang, languages) {
refreshText();
}
['get-source', 'donate-dpdn', 'license', 'author', 'wemake', 'porn', 'border-txt',
'color', 'transparency', 'x-position', 'y-position', 'font', 'style', 'text-size'
'color', 'transparency', 'x-position', 'y-position', 'font', 'style', 'text-size', 'text-width'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('.'+e).text(locale[e]);
......@@ -211,6 +211,9 @@ function getParameters() {
if (url.searchParams.get('wfs') !== null) {
$('#wemake-font-style').val(url.searchParams.get('wfs'));
}
if (url.searchParams.get('ww') !== null) {
$('#wemake-width').val(url.searchParams.get('ww'));
}
if (url.searchParams.get('p') !== null) {
$('#porn').val(url.searchParams.get('p'));
}
......@@ -235,6 +238,9 @@ function getParameters() {
if (url.searchParams.get('pfs') !== null) {
$('#porn-font-style').val(url.searchParams.get('pfs'));
}
if (url.searchParams.get('pw') !== null) {
$('#porn-width').val(url.searchParams.get('pw'));
}
if (url.searchParams.get('co') !== null) {
$('#bgu-color').val(url.searchParams.get('co'));
}
......@@ -642,6 +648,7 @@ function reset() {
$('#wemake-alpha').val('0');
$('#wemake-font').val('Open Sans');
$('#wemake-font-style').val('bold');
$('#wemake-width').val('725');
$('#porn-x').val('400');
$('#porn-y').val('350');
$('#porn-size').val('220');
......@@ -649,6 +656,7 @@ function reset() {
$('#porn-alpha').val('0');
$('#porn-font').val('Open Sans');
$('#porn-font-style').val('bold');
$('#porn-width').val('725');
$('#bgu-color').val('#fcd205');
$('#rect-color').val('#000000');
$('#rect-alpha').val('0');
......@@ -688,6 +696,7 @@ function refreshText() {
var wa = $('#wemake-alpha').val();
var wf = $('#wemake-font').val();
var wfs = $('#wemake-font-style').val();
var ww = $('#wemake-width').val();
var p = $('#porn').val();
var px = $('#porn-x').val();
var py = $('#porn-y').val();
......@@ -696,6 +705,7 @@ function refreshText() {
var pa = $('#porn-alpha').val();
var pf = $('#porn-font').val();
var pfs = $('#porn-font-style').val();
var pw = $('#porn-width').val();
var co = $('#bgu-color').val();
var gli = $('#add-glitter').prop('checked');
var bgt = $('#bg-type').val();
......@@ -739,15 +749,15 @@ function refreshText() {
// update URL
var url = new URL(window.location);
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
w, wx, wy, ws, wc, wa, wf, wfs, ww,
p, px, py, ps, pc, pa, pf, pfs, pw,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
);
drawCtx(false, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu, r, rx, ry, rs, rr);
drawCtx(false, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu, r, rx, ry, rs, rr, ww, pw);
}
function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu, r, rx, ry, rs, rr) {
function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, bgt, co, cor, bgi, s, bgr, egr, or, x, y, bgu, r, rx, ry, rs, rr, ww, pw) {
// cleanup
ctx.clearRect(0, 0, width, height);
......@@ -795,13 +805,13 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
if (inGallery !== true) {
var url = new URL(window.location);
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
w, wx, wy, ws, wc, wa, wf, wfs, ww,
p, px, py, ps, pc, pa, pf, pfs, pw,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
);
}
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, width, height, bth, r, rx, ry, rs, rr);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr, ww, pw);
} else {
if (bgi === '' || (bgi === 'custom' && (bgu === undefined || bgu === null || bgu === ''))) {
bgi = 'beer';
......@@ -835,13 +845,13 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
if (inGallery !== true) {
var url = new URL(window.location);
window.history.pushState("change", "WemaWema", createUrl(url,
w, wx, wy, ws, wc, wa, wf, wfs,
p, px, py, ps, pc, pa, pf, pfs,
w, wx, wy, ws, wc, wa, wf, wfs, ww,
p, px, py, ps, pc, pa, pf, pfs, pw,
co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr)
);
}
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, r, rx, ry, rs, rr);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr, ww, pw);
}
}
return;
......@@ -867,13 +877,13 @@ function drawCtx(inGallery, ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc,
}
roundRect(ctx, 0, 0, width, height, parseInt(cor), true, false);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr);
drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, pfs, p, px, py, gli, width, height, bth, r, rx, ry, rs, rr, ww, pw);
}
/*
* Drawing functions
*/
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, r, rx, ry, rs, rr) {
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, r, rx, ry, rs, rr, ww, pw) {
// Inside rounded rectangle
if (bth > 0) {
ctx.lineWidth = bth;
......@@ -886,13 +896,13 @@ function drawOver(ctx, rc, ra, ws, wc, wa, wf, wfs, w, wx, wy, ps, pc, pa, pf, p
var style = (wfs === 'regular') ? '' : wfs+' ';
ctx.font = style+parseInt(ws)+'px \''+wf+'\'';
ctx.fillStyle = colorToRGBA(wc, wa);
ctx.fillText(w, parseInt(wx), parseInt(wy), (width * 29 / 32));
ctx.fillText(w, parseInt(wx), parseInt(wy), ww);
// Write PORN
style = (pfs === 'regular') ? '' : pfs+' ';
ctx.font = style+parseInt(ps)+'px \''+pf;+'\'';
ctx.fillStyle = colorToRGBA(pc, pa);
ctx.fillText(p, parseInt(px), parseInt(py), (width * 29 / 32));
ctx.fillText(p, parseInt(px), parseInt(py), pw);
if (r) {
var rick = new Image();
......@@ -992,6 +1002,7 @@ function addItem() {
wa : $('#wemake-alpha').val(),
wf : $('#wemake-font').val(),
wfs : $('#wemake-font-style').val(),
ww : $('#wemake-width').val(),
p : $('#porn').val(),
px : $('#porn-x').val(),
py : $('#porn-y').val(),
......@@ -1000,6 +1011,7 @@ function addItem() {
pa : $('#porn-alpha').val(),
pf : $('#porn-font').val(),
pfs : $('#porn-font-style').val(),
pw : $('#porn-width').val(),
co : $('#bgu-color').val(),
gli : $('#add-glitter').prop('checked'),
bgt : $('#bg-type').val(),
......@@ -1069,7 +1081,8 @@ function fillGallery() {
v.rc, v.ra, v.ws, v.wc, v.wa, v.wf, v.wfs, v.w, v.wx, v.wy,
v.ps, v.pc, v.pa, v.pf, v.pfs, v.p, v.px, v.py, v.gli,
v.width, v.height, v.bth, v.bgt, v.co, v.cor, v.bgi, v.s,
v.bgr, v.egr, v.org, v.x, v.y, v.bgu, v.r, v.rx, v.ry, v.rs, v.rr
v.bgr, v.egr, v.org, v.x, v.y, v.bgu, v.r, v.rx, v.ry, v.rs,
v.rr, v.ww, v.pw
);
d.html(c);
......@@ -1080,8 +1093,8 @@ function fillGallery() {
var a1 = $('<a>');
a1.addClass('btn btn-info btn-block');
var url = createUrl(new URL(window.location),
v.w, v.wx, v.wy, v.ws, v.wc, v.wa, v.wf, v.wfs,
v.p, v.px, v.py, v.ps, v.pc, v.pa, v.pf, v.pfs,
v.w, v.wx, v.wy, v.ws, v.wc, v.wa, v.wf, v.wfs, v.ww,
v.p, v.px, v.py, v.ps, v.pc, v.pa, v.pf, v.pfs, v.pw,
v.co, v.ra, v.gli, v.bgt, v.rc, v.bgr, v.egr,
v.or, v.bgi, v.cor, v.bth, v.width, v.height,
v.x, v.y, v.s, v.bgu, v.r, v.rx, v.ry, v.rs, v.rr
......@@ -1206,7 +1219,7 @@ function centerText(e) {
}
// create the URL with all the parameters
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, p, px, py, ps, pc, pa, pf, pfs, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr) {
function createUrl(url, w, wx, wy, ws, wc, wa, wf, wfs, ww, p, px, py, ps, pc, pa, pf, pfs, pw, co, ra, gli, bgt, rc, bgr, egr, or, bgi, cor, bth, width, height, x, y, s, bgu, r, rx, ry, rs, rr) {
url.searchParams.set('w', w);
url.searchParams.set('wx', wx);
url.searchParams.set('wy', wy);
......
This diff is collapsed.
......@@ -9,7 +9,7 @@
"set-colors": "Colors",
"set-fonts": "Fonts",
"set-bg": "Background",
"set-positions": "Positions",
"set-positions": "Texts positions and sizes",
"wemake": "First line",
"porn": "Second line",
"filename": "Filename",
......@@ -80,5 +80,6 @@
"rick-x": "Rick face x position",
"rick-y": "Rick face y position",
"rick-rad": "Rick face rotation",
"whale": "Whale"
"whale": "Whale",
"text-width": "Text width"
}
......@@ -9,7 +9,7 @@
"set-colors": "Couleurs",
"set-fonts": "Polices",
"set-bg": "Fond de l’image",
"set-positions": "Positions",
"set-positions": "Positions et tailles des textes",
"wemake": "Première ligne",
"porn": "Seconde ligne",
"filename": "Nom du fichier",
......@@ -80,5 +80,6 @@
"rick-x": "Abcisse de la tête de Rick",
"rick-y": "Ordonnées de la tête de Rick",
"rick-rad": "Rotation de la tête de Rick",
"whale": "Baleine"
"whale": "Baleine",
"text-width": "Largeur du texte"
}
......@@ -80,5 +80,6 @@
"rick-x": "I am Groot",
"rick-y": "I am Groot",
"rick-rad": "I am Groot",
"whale": "I am Groot"
"whale": "I am Groot",
"text-width": "I am Groot"
}
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