Commit b53ff280 authored by Luc Didry's avatar Luc Didry
Browse files

Fix #6 #7

parent 476cb955
......@@ -8,3 +8,6 @@
.hidden {
display:none;
}
.two.columns input {
max-width: 128px;
}
......@@ -13,74 +13,106 @@
<div class="container">
<h1>WemaWema</h1>
<div class="row">
<div class="six columns">
<div class="four 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">
<div class="four columns">
<label for="porn">Second line</label>
<input id="porn" placeholder="PORN" type="text" value="PORN" autofocus class="u-full-width">
</div>
<div class="four columns">
<label for="filename">Filename</label>
<input id="filename" placeholder="WE_MAKE_PORN.png" type="text" value="WE_MAKE_PORN.png" class="u-full-width">
</div>
</div>
<div id="settings-block" class="hidden">
<hr>
<div class="row">
<div class="six columns">
<div class="three columns">
<label for="corners">Corner shape</label>
<select id="corners">
<option value="20" selected>Rounded corners</option>
<option value="0" selected>Square corners</option>
</select>
</div>
<div class="three columns">
<label for="wemake-color">First line color</label>
<input id="wemake-color" type="color" value="#000000">
</div>
<div class="six columns">
<div class="three columns">
<label for="porn-color">Second line color</label>
<input id="porn-color" type="color" value="#000000">
</div>
<div class="three columns">
<label for="rect-color">Rectangle color</label>
<input id="rect-color" type="color" value="#000000">
</div>
</div>
<hr>
<div class="row">
<div class="six columns">
<label for="bg-type">Background type</label>
<select id="bg-type">
<option value="plain" selected>Plain color</option>
<option value="gradient">Gradient color</option>
<option value="rainbow">Rainbow flag</option>
</select>
</div>
<div class="six columns" id="bg-color">
<label for="color">Background color</label>
<input id="color" type="color" value="#fcd205">
</div>
<div class="six columns">
<label for="rect-color">Rectangle color</label>
<input id="rect-color" type="color" value="#000000">
<div class="row hidden six columns" id="gradient-settings">
<div class="four columns">
<label for="bgr-color">Begin gradient color</label>
<input id="bgr-color" type="color" value="#fcd205">
</div>
<div class="four columns">
<label for="egr-color">End gradient color</label>
<input id="egr-color" type="color" value="#FFFFFF">
</div>
<div class"four columns">
<label for="gr-orientation">Gradient orientation</label>
<select id="gr-orientation">
<option value="lr" selected>Left to right</option>
<option value="rl">Right to left</option>
<option value="tb">Top to bottom</option>
<option value="bt">Bottom to top</option>
<option value="r">Radial</option>
</select>
</div>
</div>
</div>
<div>
<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">
<hr>
<div class="row">
<div class="two 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">
<div class="two 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">
<div class="two 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">
<div class="two 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">
<div class="two 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">
<div class="two columns">
<label for="porn-size">Second line text size</label>
<input id="porn-size" type="number" min="1" value="220">
</div>
</div>
<div>
<label for="filename">First line</label>
<input id="filename" placeholder="WE_MAKE_PORN.png" type="text" value="WE_MAKE_PORN.png" class="u-full-width">
</div>
</div>
<hr>
<div>
<a class="button" href="#" id="download">Download</a>
<a class="button" href="#" id="reset">Reset to default</a>
......
......@@ -26,6 +26,7 @@ var domIsReady = (function(domIsReady) {
(function(document, window, domIsReady, undefined) {
domIsReady(function() {
// Trigger drawing
document.querySelectorAll('input[type="text"]').forEach(function(e) {
e.addEventListener('keyup', function() {
refreshText();
......@@ -36,24 +37,30 @@ var domIsReady = (function(domIsReady) {
refreshFilename();
});
});
document.querySelectorAll('input[type="radio"]').forEach(function(e) {
e.addEventListener('click', function() {
refreshText();
});
});
document.querySelectorAll('input[type="number"],input[type="color"]').forEach(function(e) {
document.querySelectorAll('select,input[type="number"],input[type="color"]').forEach(function(e) {
e.addEventListener('change', function() {
refreshText();
});
});
// Background type changes
document.querySelector('#bg-type').addEventListener('change', function() {
toggleBgSettings();
});
// Download
document.querySelector('#download').addEventListener('click', function() {
var f = document.getElementById('filename');
this.download = f.value;
this.href = document.getElementById('canvas').toDataURL().replace("image/png", "image/octet-stream");
});
// Reset settings
document.querySelector('#reset').addEventListener('click', function() {
reset();
});
// Show settings
document.querySelector('#settings').addEventListener('click', function() {
var b = document.getElementById('settings-block');
if (b.classList.contains('hidden')) {
......@@ -65,76 +72,120 @@ var domIsReady = (function(domIsReady) {
}
});
// Get parameters
if (window.location.hash) {
document.querySelector('#porn').value = decodeURIComponent(window.location.hash.substr(1));
}
var url = new URL(window.location);
if (url.searchParams.get('w') !== null) {
document.getElementById('wemake').value = url.searchParams.get('w');
}
if (url.searchParams.get('wx') !== null) {
document.getElementById('wemake-x').value = url.searchParams.get('wx');
}
if (url.searchParams.get('wy') !== null) {
document.getElementById('wemake-y').value = url.searchParams.get('wy');
}
if (url.searchParams.get('ws') !== null) {
document.getElementById('wemake-size').value = url.searchParams.get('ws');
}
if (url.searchParams.get('wc') !== null) {
document.getElementById('wemake-color').value = url.searchParams.get('wc');
}
if (url.searchParams.get('p') !== null) {
document.getElementById('porn').value = url.searchParams.get('p');
}
if (url.searchParams.get('px') !== null) {
document.getElementById('porn-x').value = url.searchParams.get('px');
}
if (url.searchParams.get('py') !== null) {
document.getElementById('porn-y').value = url.searchParams.get('py');
}
if (url.searchParams.get('ps') !== null) {
document.getElementById('porn-size').value = url.searchParams.get('ps');
}
if (url.searchParams.get('pc') !== null) {
document.getElementById('porn-color').value = url.searchParams.get('pc');
document.getElementById('wemake').value = url.searchParams.get('w');
}
if (url.searchParams.get('wx') !== null) {
document.getElementById('wemake-x').value = url.searchParams.get('wx');
}
if (url.searchParams.get('wy') !== null) {
document.getElementById('wemake-y').value = url.searchParams.get('wy');
}
if (url.searchParams.get('ws') !== null) {
document.getElementById('wemake-size').value = url.searchParams.get('ws');
}
if (url.searchParams.get('wc') !== null) {
document.getElementById('wemake-color').value = url.searchParams.get('wc');
}
if (url.searchParams.get('p') !== null) {
document.getElementById('porn').value = url.searchParams.get('p');
}
if (url.searchParams.get('px') !== null) {
document.getElementById('porn-x').value = url.searchParams.get('px');
}
if (url.searchParams.get('py') !== null) {
document.getElementById('porn-y').value = url.searchParams.get('py');
}
if (url.searchParams.get('ps') !== null) {
document.getElementById('porn-size').value = url.searchParams.get('ps');
}
if (url.searchParams.get('pc') !== null) {
document.getElementById('porn-color').value = url.searchParams.get('pc');
}
if (url.searchParams.get('co') !== null) {
document.getElementById('color').value = url.searchParams.get('co');
}
if (url.searchParams.get('bgt') !== null) {
document.getElementById('bg-type').value = url.searchParams.get('bgt');
}
if (url.searchParams.get('rc') !== null) {
document.getElementById('rect-color').value = url.searchParams.get('rc');
}
if (url.searchParams.get('bgr') !== null) {
document.getElementById('bgr-color').value = url.searchParams.get('bgr');
}
if (url.searchParams.get('egr') !== null) {
document.getElementById('egr-color').value = url.searchParams.get('egr');
}
if (url.searchParams.get('co') !== null) {
document.getElementById('color').value = url.searchParams.get('co');
if (url.searchParams.get('or') !== null) {
document.getElementById('gr-orientation').value = url.searchParams.get('or');
}
if (url.searchParams.get('rc') !== null) {
document.getElementById('rect-color').value = url.searchParams.get('rc');
}
if (url.searchParams.get('f') !== null) {
document.getElementById('filename').value = url.searchParams.get('f');
if (url.searchParams.get('cor') !== null) {
document.getElementById('corners').value = url.searchParams.get('cor');
}
if (url.searchParams.get('f') !== null) {
document.getElementById('filename').value = url.searchParams.get('f');
}
toggleBgSettings();
refreshFilename();
refreshText();
});
})(document, window, domIsReady);
function reset() {
document.getElementById('wemake-x').value = "400";
document.getElementById('wemake-y').value = "160";
document.getElementById('wemake-size').value = "150";
document.getElementById('wemake-color').value = "#000000";
document.getElementById('porn-x').value = "400";
document.getElementById('porn-y').value = "350";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-color').value = "#000000";
document.getElementById('color').value = "#fcd205";
document.getElementById('rect-color').value = "#000000";
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;
}
function toggleBgSettings() {
switch(document.getElementById('bg-type').value) {
case 'plain':
show('bg-color');
hide('gradient-settings');
break;
case 'gradient':
hide('bg-color');
show('gradient-settings');
break;
default:
hide('bg-color');
hide('gradient-settings');
}
}
function show(id) {
var b = document.getElementById(id);
if (b.classList.contains('hidden')) {
b.classList.remove('hidden');
}
}
function hide(id) {
var r = document.getElementById(id);
if (!r.classList.contains('hidden')) {
r.classList.add('hidden');
}
}
function reset() {
document.getElementById('wemake-x').value = "400";
document.getElementById('wemake-y').value = "160";
document.getElementById('wemake-size').value = "150";
document.getElementById('wemake-color').value = "#000000";
document.getElementById('porn-x').value = "400";
document.getElementById('porn-y').value = "350";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-color').value = "#000000";
document.getElementById('color').value = "#fcd205";
document.getElementById('rect-color').value = "#000000";
document.getElementById('bg-type').value = 'plain';
document.getElementById('gr-orientation').value = 'lr';
document.getElementById('corners').value = '20';
show('bg-color');
hide('gradient-settings');
refreshText();
}
......@@ -149,18 +200,24 @@ function refreshFilename() {
}
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 wc = document.getElementById('wemake-color');
var p = document.getElementById('porn');
var px = document.getElementById('porn-x');
var py = document.getElementById('porn-y');
var ps = document.getElementById('porn-size');
var pc = document.getElementById('porn-color');
var co = document.getElementById('color');
var rc = document.getElementById('rect-color');
var w = document.getElementById('wemake');
var wx = document.getElementById('wemake-x');
var wy = document.getElementById('wemake-y');
var ws = document.getElementById('wemake-size');
var wc = document.getElementById('wemake-color');
var p = document.getElementById('porn');
var px = document.getElementById('porn-x');
var py = document.getElementById('porn-y');
var ps = document.getElementById('porn-size');
var pc = document.getElementById('porn-color');
var co = document.getElementById('color');
var bgt = document.getElementById('bg-type');
var rc = document.getElementById('rect-color');
var bgr = document.getElementById('bgr-color');
var egr = document.getElementById('egr-color');
var or = document.getElementById('gr-orientation');
var cor = document.getElementById('corners');
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
......@@ -168,32 +225,67 @@ function refreshText() {
// update URL
var url = new URL(window.location);
url.searchParams.set('w', w.value);
url.searchParams.set('wx', wx.value);
url.searchParams.set('wy', wy.value);
url.searchParams.set('ws', ws.value);
url.searchParams.set('wc', wc.value);
url.searchParams.set('p', p.value);
url.searchParams.set('px', px.value);
url.searchParams.set('py', py.value);
url.searchParams.set('ps', ps.value);
url.searchParams.set('pc', pc.value);
url.searchParams.set('co', co.value);
url.searchParams.set('rc', rc.value);
url.searchParams.set('w', w.value);
url.searchParams.set('wx', wx.value);
url.searchParams.set('wy', wy.value);
url.searchParams.set('ws', ws.value);
url.searchParams.set('wc', wc.value);
url.searchParams.set('p', p.value);
url.searchParams.set('px', px.value);
url.searchParams.set('py', py.value);
url.searchParams.set('ps', ps.value);
url.searchParams.set('pc', pc.value);
url.searchParams.set('co', co.value);
url.searchParams.set('bgt', bgt.value);
url.searchParams.set('rc', rc.value);
url.searchParams.set('bgr', bgr.value);
url.searchParams.set('egr', egr.value);
url.searchParams.set('or', or.value);
url.searchParams.set('cor', cor.value);
window.history.pushState("change", "WemaWema", url);
// 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);
}
switch(bgt.value) {
case 'plain':
ctx.fillStyle = co.value;
break;
case 'gradient':
var grd;
switch(or.value) {
case 'lr':
grd = ctx.createLinearGradient(0, 200, c.width, 200);
break;
case 'rl':
grd = ctx.createLinearGradient(c.width, 200, 0, 200);
break;
case 'tb':
grd = ctx.createLinearGradient(400, 0, 400, c.height);
break;
case 'bt':
grd = ctx.createLinearGradient(400, c.height, 400, 0);
break;
case 'r':
grd = ctx.createRadialGradient(400, 200, 25, 400, 200, 400);
break;
}
grd.addColorStop(0, bgr.value);
grd.addColorStop(1, egr.value);
ctx.fillStyle = grd;
break;
case 'rainbow':
var grd = ctx.createLinearGradient(400, 0, 400, c.height);
grd.addColorStop(0, '#e50000');
grd.addColorStop(1 / 5, '#ff8d00');
grd.addColorStop(2 / 5, '#ffee00');
grd.addColorStop(3 / 5, '#008121');
grd.addColorStop(4 / 5, '#004cff');
grd.addColorStop(1, '#760188');
ctx.fillStyle = grd;
break;
}
ctx.fillStyle = co.value;
roundRect(ctx, 0, 0, c.width, c.height, radius, true, false);
roundRect(ctx, 0, 0, c.width, c.height, parseInt(cor.value), true, false);
// rounded rectangle
// Inside rounded rectangle
ctx.lineWidth = 20;
ctx.strokeStyle = rc.value;
roundRect(ctx, 25, 25, 750, 350, 20, false);
......@@ -204,7 +296,7 @@ function refreshText() {
ctx.fillStyle = wc.value;
ctx.fillText(w.value, parseInt(wx.value), parseInt(wy.value), 725);
// Write new value
// Write PORN
ctx.font = 'bold '+parseInt(ps.value)+'px sans-serif';
ctx.fillStyle = pc.value
ctx.fillText(p.value, parseInt(px.value), parseInt(py.value), 725);
......@@ -242,5 +334,4 @@ function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (stroke) {
ctx.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