From 7a44e6414f752561b66fa59793f6665277e526b4 Mon Sep 17 00:00:00 2001
From: Benjamin <bstadlbauer@posteo.de>
Date: Tue, 22 Dec 2020 18:08:53 +0100
Subject: [PATCH] Change color input from text to color

---
 time.html | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/time.html b/time.html
index 3361f5c..ea84cbb 100644
--- a/time.html
+++ b/time.html
@@ -6,7 +6,7 @@
 <script>
 
 const fontSizeFallbackPx = 300;
-const intervalMillisec = 100;
+const intervalMillisec = 200;
 const fontSizeFactor = 1.2;
 const rgbSedecimalRe = /[\da-fA-F]{6}/
 
@@ -42,9 +42,10 @@ function load() {
 	document.addEventListener("keydown", handleHotKey);
 	let inputs = document.getElementsByTagName("input")
 	for (let input of inputs) {
-		input.addEventListener("keydown", e => e.stopPropagation());
-		input.addEventListener("keyup", e => checkConvertion(e));
-		input.addEventListener("paste", e => checkConvertion(e));
+		if (input.type == "color") {
+			input.addEventListener("input", e => writeColor(e));
+			input.addEventListener("change", e => writeColor(e));
+		}
 	}
 
 	setTime();
@@ -76,6 +77,7 @@ function handleHotKey(event) {
 	switch (event.key) {
 		case " ":
 			getStrInd = ((getStrInd + 1) % getStrings.length);
+			setTime();
 			break;
 		case "c":
 			schemes.index = ((schemes.index + 1) % schemes.colors.length + schemes.colors.length) % schemes.colors.length;
@@ -125,21 +127,12 @@ function toggleSettings() {
 }
 
 function setColorsToInput() {
-	document.getElementById("text-color").value = color.text.match(rgbSedecimalRe)[0].toUpperCase();
-	document.getElementById("background-color").value = color.background.match(rgbSedecimalRe)[0].toUpperCase();
+	document.getElementById("text-color").value = color.text;
+	document.getElementById("background-color").value = color.background;
 }
 
-function checkConvertion(event) {
-	if (rgbSedecimalRe.test(event.target.value)) convertToRgbSedecimal(event.target);
-}
-
-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();
+function writeColor(event) {
+	color[event.target.id.split("-")[0]] = event.target.value;
 	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>
 </div>
 <div class="container" id="settings-container" style="display: none;">
-	<label for="text-color">Text color</label> <input type="text" 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="text-color">Text color</label> <input type="color" id="text-color">
+	<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>
 	<p>
 	<span id="time-preview"></span>