Verified Commit e2ae05a4 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Add icon picker

parent 0508c054
...@@ -20,6 +20,7 @@ let draw = function() { ...@@ -20,6 +20,7 @@ let draw = function() {
let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value; let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]: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 signature = document.getElementById('signature').value.trim(); let signature = document.getElementById('signature').value.trim();
// Clear canvas // Clear canvas
...@@ -66,8 +67,8 @@ let draw = function() { ...@@ -66,8 +67,8 @@ let draw = function() {
ctx.fillText('La Quadrature du Net !', offset, height * 0.9); ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
//Draw picto //Draw picto
get('./imgs/1.svg', function(res) { get('./imgs/' + icon + '.svg', function(res) {
let img = new Image; let img = new Image();
let imgXml = res.replace(/#FFD201/g, fgColor); let imgXml = res.replace(/#FFD201/g, fgColor);
img.src = 'data:image/svg+xml;base64,' + btoa(imgXml); img.src = 'data:image/svg+xml;base64,' + btoa(imgXml);
img.addEventListener('load', function() { img.addEventListener('load', function() {
...@@ -77,7 +78,7 @@ let draw = function() { ...@@ -77,7 +78,7 @@ let draw = function() {
}); });
} }
let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"]'); let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"], #step4 input[type="radio"]');
for (let i = 0; i < bgColorElems.length; ++i) { for (let i = 0; i < bgColorElems.length; ++i) {
bgColorElems[i].onchange = draw; bgColorElems[i].onchange = draw;
} }
......
...@@ -162,6 +162,34 @@ ...@@ -162,6 +162,34 @@
</div> </div>
<div id="step4"> <div id="step4">
<h2>Choisissez votre icône</h2> <h2>Choisissez votre icône</h2>
<div class="container">
<div class="row">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-1">1</label>
<input type="radio" id="radio-icon-2" name="icon" value="2" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-2">2</label>
<input type="radio" id="radio-icon-3" name="icon" value="3" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-3">3</label>
<input type="radio" id="radio-icon-4" name="icon" value="4" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-4">4</label>
<input type="radio" id="radio-icon-5" name="icon" value="5" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-5">5</label>
<input type="radio" id="radio-icon-6" name="icon" value="6" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-6">6</label>
<input type="radio" id="radio-icon-7" name="icon" value="7" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-7">7</label>
<input type="radio" id="radio-icon-8" name="icon" value="8" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-8">8</label>
<input type="radio" id="radio-icon-9" name="icon" value="9" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-9">9</label>
<input type="radio" id="radio-icon-10" name="icon" value="10" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-10">10</label>
<input type="radio" id="radio-icon-11" name="icon" value="11" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-11">11</label>
<input type="radio" id="radio-icon-12" name="icon" value="12" />
<label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-12">12</label>
</div>
</div>
<div class="navButtons"> <div class="navButtons">
<a href="#step3" class="prevButton">&lsaquo;</a> <a href="#step3" class="prevButton">&lsaquo;</a>
<a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a> <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
......
...@@ -170,13 +170,15 @@ div#step2 > textarea { ...@@ -170,13 +170,15 @@ div#step2 > textarea {
padding: 20px; padding: 20px;
} }
div#step3 > div:nth-of-type(1) { div#step3 > div:nth-of-type(1),
div#step4 > div:nth-of-type(1) {
margin-left: 10%; margin-left: 10%;
width: 80%; width: 80%;
background-color: #ebf3ff; background-color: #ebf3ff;
} }
div#step3 > div:nth-of-type(1) > input[type="radio"] { div#step3 > div:nth-of-type(1) > input[type="radio"],
div#step4 input[type="radio"] {
display: none; display: none;
} }
...@@ -188,10 +190,15 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label { ...@@ -188,10 +190,15 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
padding-right: 20px; padding-right: 20px;
} }
div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label { div#step4 input[type="radio"] + label {
font-size: 2.4em;
text-align: center;
}
div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label,
div#step4 input[type="radio"]:checked + label {
color: #ebf3ff; color: #ebf3ff;
background-color: #497ed5; background-color: #497ed5;
} }
div#step5 > input[type="text"]#signature { div#step5 > input[type="text"]#signature {
......
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