Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Luc Didry
wemawema
Commits
9a7a33f4
Commit
9a7a33f4
authored
Sep 27, 2017
by
Luc Didry
Browse files
Add ability to change first phrase too. + rounded/square corners
/spend 20m
parent
74996b67
Pipeline
#23817
passed with stage
in 18 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
9a7a33f4
...
...
@@ -13,8 +13,12 @@
<div
class=
"container"
>
<h1>
WemaWema
</h1>
<p>
<label
for=
"wemake"
>
WE MAKE
</label>
<input
id=
"wemake"
placeholder=
"PORN"
type=
"text"
value=
"PORN"
autofocus
>
<a
class=
"button"
href=
"#"
id=
"download"
>
Download
</a>
<input
id=
"wemake"
placeholder=
"WE MAKE"
type=
"text"
value=
"WE MAKE"
>
<input
id=
"porn"
placeholder=
"PORN"
type=
"text"
value=
"PORN"
autofocus
>
<a
class=
"button"
href=
"#"
id=
"download"
>
Download
</a>
</p>
<p>
<input
type=
"radio"
name=
"corners"
value=
"0"
>
Square corners
</input>
<input
type=
"radio"
name=
"corners"
value=
"20"
checked
>
Rounded corners
</input>
</p>
<canvas
id=
"canvas"
width=
"800"
height=
"400"
></canvas>
</div>
...
...
js/wema_wema.js
View file @
9a7a33f4
...
...
@@ -26,16 +26,27 @@ var domIsReady = (function(domIsReady) {
(
function
(
document
,
window
,
domIsReady
,
undefined
)
{
domIsReady
(
function
()
{
document
.
querySelector
(
'
#wemake
'
).
addEventListener
(
'
keyup
'
,
function
()
{
refreshText
();
document
.
querySelectorAll
(
'
input[type="text"]
'
).
forEach
(
function
(
e
)
{
e
.
addEventListener
(
'
keyup
'
,
function
()
{
refreshText
();
});
e
.
addEventListener
(
'
paste
'
,
function
()
{
refreshText
();
});
});
document
.
querySelectorAll
(
'
input[type="radio"]
'
).
forEach
(
function
(
e
)
{
e
.
addEventListener
(
'
click
'
,
function
()
{
refreshText
();
});
});
document
.
querySelector
(
'
#download
'
).
addEventListener
(
'
click
'
,
function
()
{
this
.
download
=
'
WeMake.png
'
;
this
.
href
=
document
.
getElementById
(
'
canvas
'
).
toDataURL
().
replace
(
"
image/png
"
,
"
image/octet-stream
"
);
});
if
(
window
.
location
.
hash
)
document
.
querySelector
(
'
#wemake
'
).
value
=
decodeURIComponent
(
window
.
location
.
hash
.
substr
(
1
));
if
(
window
.
location
.
hash
)
{
document
.
querySelector
(
'
#porn
'
).
value
=
decodeURIComponent
(
window
.
location
.
hash
.
substr
(
1
));
}
refreshText
();
});
...
...
@@ -43,15 +54,24 @@ var domIsReady = (function(domIsReady) {
function
refreshText
(
useValue
)
{
var
w
=
document
.
getElementById
(
'
wemake
'
);
var
p
=
document
.
getElementById
(
'
porn
'
);
var
c
=
document
.
getElementById
(
'
canvas
'
);
var
ctx
=
c
.
getContext
(
'
2d
'
);
ctx
.
clearRect
(
0
,
0
,
c
.
width
,
c
.
height
);
// update URL fragment
window
.
location
.
hash
=
"
#
"
+
w
.
value
;
window
.
location
.
hash
=
"
#
"
+
p
.
value
;
// background color
var
radius
=
20
;
var
corners
=
document
.
getElementsByName
(
'
corners
'
);
for
(
var
i
=
0
;
i
<
corners
.
length
;
i
++
)
{
if
(
corners
[
i
].
checked
)
{
radius
=
parseInt
(
corners
[
i
].
value
);
}
}
ctx
.
fillStyle
=
'
rgba(252, 210, 5, 1)
'
;
roundRect
(
ctx
,
0
,
0
,
c
.
width
,
c
.
height
,
20
,
true
,
false
);
roundRect
(
ctx
,
0
,
0
,
c
.
width
,
c
.
height
,
radius
,
true
,
false
);
// rounded rectangle
ctx
.
lineWidth
=
20
;
...
...
@@ -62,12 +82,12 @@ function refreshText(useValue) {
// Write WE MAKE
ctx
.
font
=
'
bold 150px sans-serif
'
;
ctx
.
fillStyle
=
'
rgba(0, 0, 0, 1)
'
;
ctx
.
fillText
(
'
WE MAKE
'
,
400
,
160
,
725
);
ctx
.
fillText
(
w
.
value
,
400
,
160
,
725
);
// Write new value
ctx
.
font
=
'
bold 220px sans-serif
'
;
ctx
.
fillStyle
=
'
rgba(0, 0, 0, 1)
'
;
ctx
.
fillText
(
w
.
value
,
400
,
350
,
725
);
ctx
.
fillText
(
p
.
value
,
400
,
350
,
725
);
}
function
roundRect
(
ctx
,
x
,
y
,
width
,
height
,
radius
,
fill
,
stroke
)
{
...
...
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