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() {
let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]: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;
let signature = document.getElementById('signature').value.trim();
// Clear canvas
......@@ -66,8 +67,8 @@ let draw = function() {
ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
//Draw picto
get('./imgs/1.svg', function(res) {
let img = new Image;
get('./imgs/' + icon + '.svg', function(res) {
let img = new Image();
let imgXml = res.replace(/#FFD201/g, fgColor);
img.src = 'data:image/svg+xml;base64,' + btoa(imgXml);
img.addEventListener('load', 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) {
bgColorElems[i].onchange = draw;
}
......
......@@ -162,6 +162,34 @@
</div>
<div id="step4">
<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">
<a href="#step3" class="prevButton">&lsaquo;</a>
<a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
......
......@@ -170,13 +170,15 @@ div#step2 > textarea {
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%;
width: 80%;
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;
}
......@@ -188,10 +190,15 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
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;
background-color: #497ed5;
}
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