Make the preview functional without any javascript

     It just require a click on the "generate" button

locale/en.json

@@ -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",

srv.js

@@ -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._});

static/canvas.js

@@ -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)]);

static/style.css

@@ -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;

views/index.pug

@@ -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
               | ‹
@@ -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
               | ‹
-            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