Make "random" button return a random image without js

parent 54f790f6
......@@ -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';
......
......@@ -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();
......
......@@ -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">
......
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