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
1d73de28
Commit
1d73de28
authored
Sep 27, 2017
by
Luc Didry
Browse files
Fix
#1
parent
9a7a33f4
Pipeline
#23862
passed with stage
in 20 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
.gitignore
0 → 100644
View file @
1d73de28
service/
*.swp
css/wema_wema.css
View file @
1d73de28
.container
{
text-align
:
center
;
}
#wemake
{
text-align
:
right
;
}
index.html
View file @
1d73de28
...
...
@@ -12,14 +12,53 @@
<body>
<div
class=
"container"
>
<h1>
WemaWema
</h1>
<p>
<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>
<div
class=
"row"
>
<div
class=
"six columns"
>
<label
for=
"wemake"
>
First line
</label>
<input
id=
"wemake"
placeholder=
"WE MAKE"
type=
"text"
value=
"WE MAKE"
class=
"u-full-width"
>
</div>
<div
class=
"six columns"
>
<label
for=
"porn"
>
Second line
</label>
<input
id=
"porn"
placeholder=
"PORN"
type=
"text"
value=
"PORN"
autofocus
class=
"u-full-width"
>
</div>
</div>
<div
class=
"row"
>
<label>
Corner shape
</label>
<input
type=
"radio"
name=
"corners"
value=
"0"
>
Square corners
</input>
<input
type=
"radio"
name=
"corners"
value=
"20"
checked
>
Rounded corners
</input>
</p>
</div>
<div>
<div
class=
"four columns"
>
<label
for=
"wemake-x"
>
First line x position
</label>
<input
id=
"wemake-x"
type=
"number"
min=
"0"
value=
"400"
>
</div>
<div
class=
"four columns"
>
<label
for=
"wemake-y"
>
First line y position
</label>
<input
id=
"wemake-y"
type=
"number"
min=
"0"
value=
"160"
>
</div>
<div
class=
"four columns"
>
<label
for=
"wemake-size"
>
First line text size
</label>
<input
id=
"wemake-size"
type=
"number"
min=
"1"
value=
"150"
>
</div>
</div>
<div>
<div
class=
"four columns"
>
<label
for=
"porn-x"
>
Second line x position
</label>
<input
id=
"porn-x"
type=
"number"
min=
"0"
value=
"400"
>
</div>
<div
class=
"four columns"
>
<label
for=
"porn-y"
>
Second line y position
</label>
<input
id=
"porn-y"
type=
"number"
min=
"0"
value=
"350"
>
</div>
<div
class=
"four columns"
>
<label
for=
"porn-size"
>
Second line text size
</label>
<input
id=
"porn-size"
type=
"number"
min=
"1"
value=
"220"
>
</div>
</div>
<div>
<a
class=
"button"
href=
"#"
id=
"download"
>
Download
</a>
<a
class=
"button"
href=
"#"
id=
"reset"
>
Reset to default
</a>
</div>
<canvas
id=
"canvas"
width=
"800"
height=
"400"
></canvas>
</div>
<script
src=
"js/wema_wema.js"
></script>
...
...
js/wema_wema.js
View file @
1d73de28
...
...
@@ -39,10 +39,18 @@ var domIsReady = (function(domIsReady) {
refreshText
();
});
});
document
.
querySelectorAll
(
'
input[type="number"]
'
).
forEach
(
function
(
e
)
{
e
.
addEventListener
(
'
change
'
,
function
()
{
refreshText
();
});
});
document
.
querySelector
(
'
#download
'
).
addEventListener
(
'
click
'
,
function
()
{
this
.
download
=
'
WeMake.png
'
;
this
.
href
=
document
.
getElementById
(
'
canvas
'
).
toDataURL
().
replace
(
"
image/png
"
,
"
image/octet-stream
"
);
});
document
.
querySelector
(
'
#reset
'
).
addEventListener
(
'
click
'
,
function
()
{
reset
();
});
if
(
window
.
location
.
hash
)
{
document
.
querySelector
(
'
#porn
'
).
value
=
decodeURIComponent
(
window
.
location
.
hash
.
substr
(
1
));
...
...
@@ -52,10 +60,37 @@ var domIsReady = (function(domIsReady) {
});
})(
document
,
window
,
domIsReady
);
function
refreshText
(
useValue
)
{
function
reset
()
{
document
.
getElementById
(
'
wemake-x
'
).
value
=
"
400
"
;
document
.
getElementById
(
'
wemake-y
'
).
value
=
"
160
"
;
document
.
getElementById
(
'
wemake-size
'
).
value
=
"
150
"
;
document
.
getElementById
(
'
porn-x
'
).
value
=
"
400
"
;
document
.
getElementById
(
'
porn-y
'
).
value
=
"
350
"
;
document
.
getElementById
(
'
porn-size
'
).
value
=
"
220
"
;
var
corners
=
document
.
getElementsByName
(
'
corners
'
);
for
(
var
i
=
0
;
i
<
corners
.
length
;
i
++
)
{
if
(
corners
[
i
].
value
===
20
)
{
corners
.
checked
=
true
;
}
else
{
corners
.
checked
=
false
;
}
}
refreshText
();
}
function
refreshText
()
{
var
w
=
document
.
getElementById
(
'
wemake
'
);
var
wx
=
document
.
getElementById
(
'
wemake-x
'
);
var
wy
=
document
.
getElementById
(
'
wemake-y
'
);
var
ws
=
document
.
getElementById
(
'
wemake-size
'
);
var
p
=
document
.
getElementById
(
'
porn
'
);
var
px
=
document
.
getElementById
(
'
porn-x
'
);
var
py
=
document
.
getElementById
(
'
porn-y
'
);
var
ps
=
document
.
getElementById
(
'
porn-size
'
);
var
c
=
document
.
getElementById
(
'
canvas
'
);
var
ctx
=
c
.
getContext
(
'
2d
'
);
ctx
.
clearRect
(
0
,
0
,
c
.
width
,
c
.
height
);
...
...
@@ -80,14 +115,14 @@ function refreshText(useValue) {
ctx
.
textAlign
=
"
center
"
;
// Write WE MAKE
ctx
.
font
=
'
bold
150
px sans-serif
'
;
ctx
.
font
=
'
bold
'
+
parseInt
(
ws
.
value
)
+
'
px sans-serif
'
;
ctx
.
fillStyle
=
'
rgba(0, 0, 0, 1)
'
;
ctx
.
fillText
(
w
.
value
,
400
,
160
,
725
);
ctx
.
fillText
(
w
.
value
,
parseInt
(
wx
.
value
),
parseInt
(
wy
.
value
)
,
725
);
// Write new value
ctx
.
font
=
'
bold
220
px sans-serif
'
;
ctx
.
font
=
'
bold
'
+
parseInt
(
ps
.
value
)
+
'
px sans-serif
'
;
ctx
.
fillStyle
=
'
rgba(0, 0, 0, 1)
'
;
ctx
.
fillText
(
p
.
value
,
400
,
350
,
725
);
ctx
.
fillText
(
p
.
value
,
parseInt
(
px
.
value
),
parseInt
(
py
.
value
)
,
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