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

Add a button to switch the texts' colors

parent ac485728
Pipeline #24628 passed with stage
in 26 seconds
image: hatsoftwares/vnu:latest
stages:
- test
- deploy
validity-check:
stage: test
script:
- java -jar /opt/dist/vnu.jar index.html
pages:
stage: deploy
script:
......
......@@ -30,22 +30,31 @@
<div id="settings-block" class="hidden">
<hr>
<div class="row">
<div class="three columns">
<div class="four columns">
<label for="corners">Corner shape</label>
<select id="corners">
<option value="20" selected>Rounded corners</option>
<option value="0">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="three columns">
<label for="porn-color">Second line color</label>
<input id="porn-color" type="color" value="#000000">
<div class="four columns">
<div class="row">
<div class="six columns">
<label for="wemake-color">First line color</label>
<input id="wemake-color" type="color" value="#000000">
</div>
<div class="six columns">
<label for="porn-color">Second line color</label>
<input id="porn-color" type="color" value="#000000">
</div>
</div>
<div class="row">
<p>
<a href="#" id="switch-colors" class="button">Switch texts' colors</a>
</p>
</div>
</div>
<div class="three columns">
<div class="four columns">
<label for="rect-color">Rectangle color</label>
<input id="rect-color" type="color" value="#000000">
</div>
......@@ -80,7 +89,7 @@
<label for="egr-color">End gradient color</label>
<input id="egr-color" type="color" value="#FFFFFF">
</div>
<div class"four columns">
<div class="four columns">
<label for="gr-orientation">Gradient orientation</label>
<select id="gr-orientation">
<option value="lr" selected>Left to right</option>
......
......@@ -54,7 +54,7 @@ var hideSettings = 'Hide advanced settings';
document.querySelector('option[value="'+e+'"]').innerText = locale[e];
}
});
['toggle-svg', 'download', 'reset'].forEach(function(e) {
['toggle-svg', 'download', 'reset', 'switch-colors'].forEach(function(e) {
if (locale[e] !== undefined) {
document.querySelector('#'+e).innerText = locale[e];
if (e === 'download') {
......@@ -154,6 +154,13 @@ var hideSettings = 'Hide advanced settings';
}
});
// Switch text colors
document.querySelector('#switch-colors').addEventListener('click', function(e) {
e.preventDefault();
switchTextColors();
refreshText();
});
// Get parameters
if (window.location.hash) {
document.querySelector('#porn').value = decodeURIComponent(window.location.hash.substr(1));
......@@ -226,6 +233,17 @@ var hideSettings = 'Hide advanced settings';
});
})(document, window, domIsReady);
function switchTextColors() {
var w = document.getElementById('wemake-color');
var p = document.getElementById('porn-color');
var c1 = w.value;
var c2 = p.value;
w.value = c2;
p.value = c1;
}
function toggleBgSettings() {
switch(document.getElementById('bg-type').value) {
case 'plain':
......
......@@ -7,6 +7,7 @@
"corners-square": "Coins droits",
"wemake-color": "Couleur de la première ligne",
"porn-color": "Couleur de la seconde ligne",
"switch-colors": "Échanger les couleurs des textes",
"rect-color": "Couleur du rectangle",
"add-glitter": "Ajouter des paillettes",
"bg-type": "Type de fond",
......
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