Commit a71ff674 authored by Thibaut Broggi's avatar Thibaut Broggi

Make the preview functional without any javascript

     It just require a click on the "generate" button
parent ff0ec874
Pipeline #1476 passed with stage
in 41 seconds
......@@ -10,7 +10,6 @@
"Choisissez votre police": "Choose your font",
"Choisissez votre icône": "Choose your icon",
"Signez votre création ! (optionnel)": "Sign your creation! (optional)",
"Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.": "No javascript? No problem! <br /> This generator is working perfectly without javscript. The only missing feature is the preview of the rendered image.",
"Tweet": "Tweet",
"Partager": "Share",
"Enregistrer": "Save",
......
......@@ -20,6 +20,18 @@ app.use(function(req, res, next) {
next();
});
app.use(function(req, res, next) {
req.args = {
bgColor: req.query.bgColor || '#f54358',
fgColor: req.query.fgColor || '#ffd201',
text: req.query.text ? req.query.text.trim() : 'démocratie',
font: req.query.font || 'lineal',
icon: req.query.icon || 1,
signature: req.query.signature ? req.query.signature.trim() : ''
};
next();
});
// {name: filepath}
let fonts = {
'FiraSans': 'FiraSans-Regular.otf',
......@@ -60,14 +72,14 @@ function randomize(req, _) {
_fonts.push(i);
}
req.query['bg-color'] = bgColors[Math.floor(Math.random() * bgColors.length)];
req.args.bgColor = bgColors[Math.floor(Math.random() * bgColors.length)];
do {
req.query['fg-color'] = bgColors[Math.floor(Math.random() * fgColors.length)];
} while (req.query['fg-color'] === req.query['bg-color']);
req.query['text'] = _(sampleTexts[Math.floor(Math.random() * sampleTexts.length)]);
req.query['font'] = _fonts[Math.floor(Math.random() * _fonts.length)];
req.query['icon'] = Math.floor(Math.random() * 36);
req.query['signature'] = _(sampleSignatures[Math.floor(Math.random() * sampleSignatures.length)]);
req.args.fgColor = bgColors[Math.floor(Math.random() * fgColors.length)];
} while (req.args.fgColor === req.args.bgColor);
req.args.text = _(sampleTexts[Math.floor(Math.random() * sampleTexts.length)]);
req.args.font = _fonts[Math.floor(Math.random() * _fonts.length)];
req.args.icon = Math.floor(Math.random() * 36);
req.args.signature = _(sampleSignatures[Math.floor(Math.random() * sampleSignatures.length)]);
return req;
}
......@@ -86,12 +98,6 @@ app.get('/generate.png', function (req, res) {
else if (req.query.target === 'download') {
res.set("Content-Disposition", "attachment;filename=lqdn_slogan.png");
}
let bgColor = req.query['bg-color'] || '#f54358';
let fgColor = req.query['fg-color'] || '#ffd201';
let fillText = req.query.text ? req.query.text.trim() : 'démocratie';
let icon = req.query.icon || 1;
let font = req.query.font || 'bluu-next';
let signature = req.query.signature ? req.query.signature.trim() : '';
let width = 600;
let height = 413;
let fontSize = 44;
......@@ -102,7 +108,7 @@ app.get('/generate.png', function (req, res) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
ctx.fillStyle = bgColor;
ctx.fillStyle = req.args.bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
......@@ -112,9 +118,9 @@ app.get('/generate.png', function (req, res) {
ctx.textBaseline = 'top';
ctx.fillText(_('Internet,'), width * 0.08, height * 0.2);
ctx.fillText(_('et libertés.'), width * 0.08, height * 0.2 + fontSize * 2.8);
ctx.font = fontSize + 'pt ' + font;
ctx.fillStyle = fgColor;
ctx.fillText(fillText, width * 0.08, height * 0.2 + fontSize * 1.4);
ctx.font = fontSize + 'pt ' + req.args.font;
ctx.fillStyle = req.args.fgColor;
ctx.fillText(req.args.text, width * 0.08, height * 0.2 + fontSize * 1.4);
// Add footer
ctx.fillStyle = 'white';
......@@ -123,12 +129,12 @@ app.get('/generate.png', function (req, res) {
ctx.font = '12pt FiraSans';
ctx.fillStyle = '#497ed5';
let offset = height * 0.05;
if (signature) {
if (req.args.signature) {
ctx.fillText(_('Faites comme '), offset, height * 0.9);
offset += ctx.measureText(_('Faites comme ')).width;
ctx.font = 'bold 12pt FiraSans';
ctx.fillText(signature, offset, height * 0.9);
offset += ctx.measureText(signature).width;
ctx.fillText(req.args.signature, offset, height * 0.9);
offset += ctx.measureText(req.args.signature).width;
ctx.font = '12pt FiraSans';
ctx.fillText(', s', offset, height * 0.9);
offset += ctx.measureText(', s').width;
......@@ -143,8 +149,8 @@ app.get('/generate.png', function (req, res) {
// Draw picto
let img = new Image();
let imgXml = fs.readFileSync('./static/imgs/' + icon + '.svg');
imgXml = imgXml.toString('ascii').replace(/#FFD201/gi, fgColor);
let imgXml = fs.readFileSync('./static/imgs/' + req.args.icon + '.svg');
imgXml = imgXml.toString('ascii').replace(/#FFD201/gi, req.args.fgColor);
img.src = 'data:image/svg+xml;base64,' + new Buffer(imgXml).toString('base64');
ctx.drawImage(img, 0, 0);
......@@ -162,7 +168,8 @@ app.get('/generate.png', function (req, res) {
app.get('/', function(req, res) {
res.render('index', {protocol: req.protocol,
host: req.headers.host,
imageParams: req._parsedUrl.query,
imageParams: querystring.stringify(req.args),
params: req.args,
subdir: config.subdir,
locale: req.i18n.getLocale(),
_: req.i18n._});
......
......@@ -48,8 +48,8 @@ let _ = function(str) {
}
let draw = function() {
let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value;
let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value;
let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bgColor"]:checked').value;
let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fgColor"]:checked').value;
let fillText = document.getElementById('step2value').value.trim();
let font = document.querySelector('#step3 input[type="radio"]:checked').value;
let icon = document.querySelector('#step4 input[type="radio"]:checked').value;
......@@ -108,8 +108,8 @@ let draw = function() {
// Edit URL
history.replaceState('', '', window.location.pathname + '?'
+ 'bg-color=' + encodeURIComponent(bgColor)
+ '&fg-color=' + encodeURIComponent(fgColor)
+ 'bgColor=' + encodeURIComponent(bgColor)
+ '&fgColor=' + encodeURIComponent(fgColor)
+ '&text=' + encodeURIComponent(fillText)
+ '&font=' + encodeURIComponent(font)
+ '&icon=' + encodeURIComponent(icon)
......@@ -149,10 +149,10 @@ window.addEventListener('load', function() {
for (let i in splitParams) {
params[splitParams[i].split('=')[0]] = decodeURIComponent(splitParams[i].split('=')[1]);
}
if (params['bg-color'])
document.querySelector('.colorpicker input[name="bg-color"][value="' + params['bg-color'] + '"]').checked = true;
if (params['fg-color'])
document.querySelector('.colorpicker input[name="fg-color"][value="' + params['fg-color'] + '"]').checked = true;
if (params['bgColor'])
document.querySelector('.colorpicker input[name="bgColor"][value="' + params['bgColor'] + '"]').checked = true;
if (params['fgColor'])
document.querySelector('.colorpicker input[name="fgColor"][value="' + params['fgColor'] + '"]').checked = true;
if (params['text'])
document.getElementById('step2value').value = document.getElementById('step2value').innerText = params['text'];
if (params['font'])
......@@ -191,11 +191,11 @@ let randomElement = function(selector) {
let randomButtons = document.querySelectorAll('.randomize');
for (let i = 0; i < randomButtons.length; ++i) {
randomButtons[i].onclick = function(e) {
randomElement('input[name="bg-color"]').checked = true;
randomElement('input[name="bgColor"]').checked = true;
do {
randomElement('input[name="fg-color"]').checked = true;
} while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
== document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
randomElement('input[name="fgColor"]').checked = true;
} while (document.querySelector('.colorpicker input[type="radio"][name="bgColor"]:checked').value
== document.querySelector('.colorpicker input[type="radio"][name="fgColor"]:checked').value);
randomElement('input[name="font"]').checked = true;
randomElement('input[name="icon"]').checked = true;
document.getElementById('step2value').value = document.getElementById('step2value').innerText = _(sampleTexts[Math.trunc(Math.random() * sampleTexts.length)]);
......
......@@ -293,7 +293,7 @@ body, form {
height: 200px;
}
main > div > #output {
main > div > #output, noscript > img {
margin-top: 7vw;
}
......@@ -308,7 +308,7 @@ main > div:nth-child(1) {
max-width: 100%;
}
main #output {
main #output, noscript > img {
max-width: 100%;
}
......@@ -316,13 +316,6 @@ main > #credits {
margin-top: 50px;
}
noscript {
display: block;
text-align: left;
text-justify: inter-word;
padding: .5em;
}
@media (min-width: 992px) {
a#save-image {
margin-top: 2em;
......
......@@ -37,14 +37,14 @@ html(lang=locale)
=_('Choisissez la couleur de fond')
.colorpicker
each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
input(type="radio" name="bg-color" value=color id="bg-" + i checked=(i === 0))
input(type="radio" name="bgColor" value=color id="bg-" + i checked=(params.bgColor === color))
label(for="bg-" + i)
span(style="background-color: " + color)
h2.title-big
=_('Choisissez la couleur du texte')
.colorpicker
each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
input(type="radio" name="fg-color" value=color id="fg-" + i checked=(i === 3))
input(type="radio" name="fgColor" value=color id="fg-" + i checked=(params.fgColor === color))
label(for="fg-" + i)
span(style="background-color: " + color)
.navButtons
......@@ -59,6 +59,7 @@ html(lang=locale)
h2
=_('Remplissez le texte à trou')
textarea(placeholder=_('(90 caractères maximum)') rows="8" name="text" maxlength="90")#step2value
=params.text
.navButtons
a(href="#step1").white-button
| &lsaquo;
......@@ -118,7 +119,7 @@ html(lang=locale)
=_('Choisissez votre icône')
.iconpicker
each offset, i in [0, 0, 0, 0, 12.5, 12.5, 12.5, 12.5, 24, 24, 24, 24, 37.5, 37.5, 37.5, 37.5, 50, 50, 50, 50, 61, 61, 61, 61, 73, 73, 73, 73, 87.5, 87.5, 87.5, 87.5, 100, 100, 100, 100]
input(type="radio" id="radio-icon-" + (i + 1) name="icon" value=(i + 1) checked=(i === 0))
input(type="radio" id="radio-icon-" + (i + 1) name="icon" value=(i + 1) checked=(params.icon == i + 1))
label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
.navButtons
a(href="#step3").white-button
......@@ -133,16 +134,16 @@ html(lang=locale)
span.fa.fa-random
h2
=_('Signez votre création ! (optionnel)')
input(type="text" name="signature")#signature
input(type="text" name="signature" value=params.signature)#signature
.navButtons
a(href="#step4").white-button
| &lsaquo;
button(type="submit" name="target" value="download" formtarget="_self").blue-button
button(type="submit" formtarget="_self" formaction="").blue-button
=_('GÉNÉRER')
main
div
noscript
=_('Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seule la prévisualisation du rendu dans le navigateur est désactivée.')
img(src=protocol + "://" + host + "/generate.png" + subdir + "?" + imageParams alt="preview" width="600" height="413")
canvas(width="600" height="413")#output
button(type="submit" name="target" value="randomize").randomize.white-button
span.fa.fa-random
......
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