Commit 1d73de28 authored by Luc Didry's avatar Luc Didry
Browse files

Fix #1

parent 9a7a33f4
Pipeline #23862 passed with stage
in 20 seconds
service/
*.swp
.container {
text-align:center;
}
#wemake {
text-align:right;
}
......@@ -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>
......
......@@ -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 150px 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 220px 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) {
......
Supports Markdown
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