Commit 34f26afe authored by Luc Didry's avatar Luc Didry
Browse files

Fix #5

/spend 15m
parent 856711d6
Pipeline #23915 passed with stage
in 16 seconds
......@@ -4,3 +4,6 @@
#wemake {
text-align:right;
}
.hidden {
display:none;
}
......@@ -22,42 +22,48 @@
<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>
</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 id="settings-block" class="hidden">
<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>
<label for="color">Background color</label>
<input id="color" type="color" value="#fcd205">
</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="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 class="four columns">
<label for="porn-size">Second line text size</label>
<input id="porn-size" type="number" min="1" value="220">
<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>
<div>
<a class="button" href="#" id="download">Download</a>
<a class="button" href="#" id="reset">Reset to default</a>
<a class="button" href="#" id="settings">Show advanced settings</a>
</div>
<canvas id="canvas" width="800" height="400"></canvas>
</div>
......
......@@ -39,7 +39,7 @@ var domIsReady = (function(domIsReady) {
refreshText();
});
});
document.querySelectorAll('input[type="number"]').forEach(function(e) {
document.querySelectorAll('input[type="number"],input[type="color"]').forEach(function(e) {
e.addEventListener('change', function() {
refreshText();
});
......@@ -51,6 +51,16 @@ var domIsReady = (function(domIsReady) {
document.querySelector('#reset').addEventListener('click', function() {
reset();
});
document.querySelector('#settings').addEventListener('click', function() {
var b = document.getElementById('settings-block');
if (b.classList.contains('hidden')) {
b.classList.remove('hidden');
this.text = 'Hide advanced settings';
} else {
b.classList.add('hidden');
this.text = 'Show advanced settings';
}
});
if (window.location.hash) {
document.querySelector('#porn').value = decodeURIComponent(window.location.hash.substr(1));
......@@ -80,6 +90,9 @@ var domIsReady = (function(domIsReady) {
if (url.searchParams.get('ps') !== null) {
document.getElementById('porn-size').value = url.searchParams.get('ps');
}
if (url.searchParams.get('co') !== null) {
document.getElementById('color').value = url.searchParams.get('co');
}
refreshText();
});
......@@ -92,6 +105,7 @@ function reset() {
document.getElementById('porn-x').value = "400";
document.getElementById('porn-y').value = "350";
document.getElementById('porn-size').value = "220";
document.getElementById('color').value = "#fcd205";
var corners = document.getElementsByName('corners');
for (var i = 0; i < corners.length; i++) {
......@@ -114,6 +128,7 @@ function refreshText() {
var px = document.getElementById('porn-x');
var py = document.getElementById('porn-y');
var ps = document.getElementById('porn-size');
var co = document.getElementById('color');
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
......@@ -129,6 +144,7 @@ function refreshText() {
url.searchParams.set('px', px.value);
url.searchParams.set('py', py.value);
url.searchParams.set('ps', ps.value);
url.searchParams.set('co', co.value);
window.history.pushState("change", "WemaWema", url);
// background color
......@@ -139,7 +155,7 @@ function refreshText() {
radius = parseInt(corners[i].value);
}
}
ctx.fillStyle = 'rgba(252, 210, 5, 1)';
ctx.fillStyle = co.value;
roundRect(ctx, 0, 0, c.width, c.height, radius, true, false);
// rounded rectangle
......
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