Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
LQDN Adminsys
generateur-slogans
Commits
e2ae05a4
Verified
Commit
e2ae05a4
authored
Sep 27, 2017
by
Thibaut Broggi
Browse files
Add icon picker
parent
0508c054
Changes
3
Hide whitespace changes
Inline
Side-by-side
canvas.js
View file @
e2ae05a4
...
...
@@ -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
;
}
...
...
index.html
View file @
e2ae05a4
...
...
@@ -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"
>
‹
</a>
<a
href=
"#step5"
class=
"nextButton"
>
ÉTAPE SUIVANTE
›
</a>
...
...
style.css
View file @
e2ae05a4
...
...
@@ -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
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment