Benjamin/time
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change color input from text to color

Browse source
This commit is contained in:
Benjamin 2020-12-22 18:08:53 +01:00
parent acf8a766ea
commit 7a44e6414f
No known key found for this signature in database
GPG key ID: 99C8C88768F0F905
1 changed files with 12 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
time.html
View file

@ -6,7 +6,7 @@
<script> <script>
const fontSizeFallbackPx = 300; const fontSizeFallbackPx = 300;
const intervalMillisec = 100; const intervalMillisec = 200;
const fontSizeFactor = 1.2; const fontSizeFactor = 1.2;
const rgbSedecimalRe = /[\da-fA-F]{6}/ const rgbSedecimalRe = /[\da-fA-F]{6}/
@ -42,9 +42,10 @@ function load() {
document.addEventListener("keydown", handleHotKey); document.addEventListener("keydown", handleHotKey);
let inputs = document.getElementsByTagName("input") let inputs = document.getElementsByTagName("input")
for (let input of inputs) { for (let input of inputs) {
input.addEventListener("keydown", e => e.stopPropagation()); if (input.type == "color") {
input.addEventListener("keyup", e => checkConvertion(e)); input.addEventListener("input", e => writeColor(e));
input.addEventListener("paste", e => checkConvertion(e)); input.addEventListener("change", e => writeColor(e));
}
} }
setTime(); setTime();
@ -76,6 +77,7 @@ function handleHotKey(event) {
switch (event.key) { switch (event.key) {
case " ": case " ":
getStrInd = ((getStrInd + 1) % getStrings.length); getStrInd = ((getStrInd + 1) % getStrings.length);
setTime();
break; break;
case "c": case "c":
schemes.index = ((schemes.index + 1) % schemes.colors.length + schemes.colors.length) % schemes.colors.length; schemes.index = ((schemes.index + 1) % schemes.colors.length + schemes.colors.length) % schemes.colors.length;
@ -125,21 +127,12 @@ function toggleSettings() {
} }
function setColorsToInput() { function setColorsToInput() {
document.getElementById("text-color").value = color.text.match(rgbSedecimalRe)[0].toUpperCase(); document.getElementById("text-color").value = color.text;
document.getElementById("background-color").value = color.background.match(rgbSedecimalRe)[0].toUpperCase(); document.getElementById("background-color").value = color.background;
} }
function checkConvertion(event) { function writeColor(event) {
if (rgbSedecimalRe.test(event.target.value)) convertToRgbSedecimal(event.target); color[event.target.id.split("-")[0]] = event.target.value;
}
function convertToRgbSedecimal(element) {
element.value = element.value.match(rgbSedecimalRe)[0].toUpperCase();
writeColor(element);
}
function writeColor(element) {
color[element.id.split("-")[0]] = "#" + element.value.match(rgbSedecimalRe)[0].toLowerCase();
setColors(); setColors();
} }
@ -175,8 +168,8 @@ function saveColorsToSchemes() {
<span class="help" style="display:none"><a href="https://github.com/benstadlbauer/time">Repository on GitHub</a></span> <span class="help" style="display:none"><a href="https://github.com/benstadlbauer/time">Repository on GitHub</a></span>
</div> </div>
<div class="container" id="settings-container" style="display: none;"> <div class="container" id="settings-container" style="display: none;">
<label for="text-color">Text color</label> <input type="text" id="text-color"> <label for="text-color">Text color</label> <input type="color" id="text-color">
<label for="background-color" style="margin-top: 3px">Background color</label> <input type="text" id="background-color" style="margin-top: 3px"> <label for="background-color" style="margin-top: 3px">Background color</label> <input type="color" id="background-color" style="margin-top: 3px">
<button onclick="saveColorsToSchemes();" style="margin-top: 3px" disabled>Save to schemes</button> <button onclick="saveColorsToSchemes();" style="margin-top: 3px" disabled>Save to schemes</button>
<p> <p>
<span id="time-preview"></span> <span id="time-preview"></span>