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