Make "random" button return a random image without js

srv.js

@@ -35,19 +35,44 @@ Canvas.registerFont('./static/fonts/FiraSans-Bold.otf', {family: 'FiraSans', wei
 
 function buildUrl(req) {
   delete req.query.target;
-  return encodeURIComponent(req.protocol + '://'
-			    + req.headers.host + '/'
-			    + (config.subdir || '')
-			    + '?'
-			    + querystring.stringify(req.query));
+  return req.protocol + '://'
+    + req.headers.host + '/'
+    + (config.subdir || '')
+    + '?'
+    + querystring.stringify(req.query);
+}
+
+function randomize(req) {
+  let bgColors = ['#f54358', '#ee0088', '#ff9146', '#ffd201', '#39d0b7', '#2f5189', '#000'];
+  let fgColors = ['#f54358', '#ee0088', '#ff9146', '#ffd201', '#39d0b7', '#2f5189', '#000', '#fff'];
+  let sampleTexts = ["arachnides", "bicyclette", "bidule", "bilboquet", "biscuit", "bitcoins", "bitte", "bollard", "cantine", "casserole", "chausse-pied", "chaloupe", "chalutier", "champignons", "chignon", "chouchen", "couleurs moches", "coton-tige", "cucurbitacée", "culotte", "démocratie", "élastique", "enzyme", "fonte", "frigogidaire", "germanium", "gousse", "gousset", "hurluberlu", "hypocondrie", "loquet", "mammouth", "marmite", "Michel Sardou", "musaraigne", "narcotype", "ornythorinque", "palette", "parc de stationnement", "pelle à tarte", "perpendicularité", "plat à tarte", "poêle", "pogne", "poireau", "polochon", "pop-corn", "poulpe", "poutrelle", "prolétariat", "protozoaire", "rateau", "sabot", "sabre laser", "semi-remorque", "soulier", "taquet", "tartenpion", "tartignol", "téléportation", "tentacules", "tractopelle", "trou noir", "vérité", "zeste"];
+  let sampleSignatures = ["\t", "moi\t", "les gens sympas\t", "les gens biens\t"];
+  let _fonts = [];
+
+  for (let i in fonts) {
+    _fonts.push(i);
+  }
+
+  req.query['bg-color'] = 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)];
+  return req;
 }
 
 app.get('/generate.png', function (req, res) {
   if (req.query.target === 'facebook') {
-    return res.redirect('https://www.facebook.com/sharer/sharer.php?u=' + buildUrl(req));
+    return res.redirect('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(buildUrl(req)));
   }
   else if (req.query.target === 'twitter') {
-    return res.redirect('https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net ! ' + buildUrl(req));
+    return res.redirect('https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net ! ' + encodeURIComponent(buildUrl(req)));
+  }
+  else if (req.query.target === 'randomize') {
+    req = randomize(req);
   }
   let bgColor = req.query['bg-color'] || '#f54358';
   let fgColor = req.query['fg-color'] || '#ffd201';

static/canvas.js

@@ -103,10 +103,10 @@ let draw = function() {
 			   + window.location.hash);
 
       // Update tweet button
-      document.getElementById('tweet-button').href = 'https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net ! ' + encodeURIComponent(window.location.href.split('#')[0]);
+      document.querySelector('#tweet-button a').href = 'https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net ! ' + encodeURIComponent(window.location.href.split('#')[0]);
 
       // Update facebook button
-      document.getElementById('fb-button').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href.split('#')[0]);
+      document.querySelector('#fb-button a').href = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href.split('#')[0]);
     }, false);
   });
 }
@@ -163,6 +163,12 @@ window.addEventListener('load', function() {
   document.getElementById('step2value').oninput = draw;
   document.getElementById('signature').oninput = draw;
 
+  // Remove server calls for random/fb./twtr buttons
+  let buttons = document.querySelectorAll('button.randomize, button.tweet-button, button.fb-button');
+  for (let i = 0; i < buttons.length; ++i) {
+    buttons[i].type = "button";
+  }
+
   // Update canvas
   document.fonts.ready.then(function() {
     draw();

views/index.ejs

@@ -28,7 +28,7 @@
       <aside id="inputs">
 	<div id="step1">
 	  <div class="randomize-button-container">
-	    <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	    <button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
 	  </div>
 	  <h2 class="title-small">Choisissez 2 couleurs</h2>
 	  <h2 class="title-big">Choisissez la couleur de fond</h2>
@@ -103,7 +103,7 @@
 	</div>
 	<div id="step2">
 	  <div class="randomize-button-container">
-	    <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	    <button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
 	  </div>
 	  <h2>Remplissez le texte à trou</h2>
 	  <textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" name="text" maxlength="90"></textarea>
@@ -114,7 +114,7 @@
 	</div>
 	<div id="step3">
 	  <div class="randomize-button-container">
-	    <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	    <button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
 	  </div>
 	  <h2>Choisissez votre police</h2>
 	  <div class="fontpicker">
@@ -137,7 +137,7 @@
 	</div>
 	<div id="step4">
 	  <div class="randomize-button-container">
-	    <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	    <button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
 	  </div>
 	  <h2>Choisissez votre icône</h2>
 	  <div class="iconpicker">
@@ -221,7 +221,7 @@
 	</div>
 	<div id="step5">
 	  <div class="randomize-button-container">
-	    <a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
+	    <button type="submit" name="target" value="randomize" class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
 	  </div>
 	  <h2>Signez votre création ! (optionnel)</h2>
 	  <input type="text" id="signature" name="signature" />
@@ -235,9 +235,9 @@
       <div>
 	<noscript>Pas de javascript ? Pas de problème !<br />Ce générateur fonctionne parfaitement sans javascript, seuls la prévisualisation du rendu dans le navigateur et le bouton "aléatoire" sont désactivés.</noscript>
 	<canvas id="output" width="600" height="413"></canvas>
-	<a class="randomize white-button"><span class="fa fa-random"></span></a>
-	<button type="submit" id="tweet-button" name="target" value="twitter" class="blue-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !"><span class="text">Tweet </span><span class="fa fa-twitter"></span></button>
-	<button type="submit" id="fb-button" name="target" value="facebook" class="blue-button" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><span class="text">Partager </span><span class="fa fa-facebook-square"></span></button>
+	<button type="submit" name="target" value="randomize" class="randomize white-button"><a>CHOISIR AU HASARD <span class="fa fa-random"></span></a></button>
+	<button type="submit" id="tweet-button" name="target" value="twitter" class="blue-button" target="_blank"><a><span class="text">Tweet </span><span class="fa fa-twitter"></span></a></button>
+	<button type="submit" id="fb-button" name="target" value="facebook" class="blue-button" target="_blank"><a><span class="text">Partager </span><span class="fa fa-facebook-square"></span></a></button>
 	<button type="submit" id="save-image" class="white-button" download="lqdn-slogan.png"><span class="text">Enregistrer </span><span class="fa fa-save"></span></a>
       </div>
       <div id="credits">