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

Add hotkeys-help

Browse source
This commit is contained in:
Benjamin 2020-12-13 20:00:19 +01:00
parent 3b838722ff
commit 801acd101a
No known key found for this signature in database
GPG key ID: 99C8C88768F0F905
1 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
time.html
View file

@ -9,8 +9,11 @@ const darkColor = "#000000";
const lightColor = "#ffffff"; const lightColor = "#ffffff";
const fontSizeFallbackPx = 300; const fontSizeFallbackPx = 300;
const intervalMillisec = 200; const intervalMillisec = 200;
const bigFontSizeFactor = 1.2;
const smallFontSizeFactor = 1.05;
let light = false; let light = false;
let help = false;
let fontSizePx = fontSizeFallbackPx; let fontSizePx = fontSizeFallbackPx;
let getStrings = [ let getStrings = [
function(){return (new Date()).toTimeString().split(" ")[0];}, function(){return (new Date()).toTimeString().split(" ")[0];},
@ -39,8 +42,11 @@ function setSize() {
} }
function setColors() { function setColors() {
document.body.style.background = light ? lightColor : darkColor; const txt = light ? darkColor : lightColor;
document.getElementById("time").style.color = light ? darkColor : lightColor; const back = light ? lightColor : darkColor;
document.body.style.background = back;
document.body.style.color = txt;
document.getElementById("time").style.color = txt;
} }
document.addEventListener("keypress", keyPress); document.addEventListener("keypress", keyPress);
@ -55,11 +61,11 @@ function keyPress(event) {
setColors(); setColors();
break; break;
case "+": case "+":
fontSizePx *= 1.2; fontSizePx *= bigFontSizeFactor;
setSize(); setSize();
break; break;
case "-": case "-":
fontSizePx /= 1.2; fontSizePx /= bigFontSizeFactor;
setSize(); setSize();
break; break;
case "0": case "0":
@ -67,19 +73,30 @@ function keyPress(event) {
setSize(); setSize();
break; break;
case "*": case "*":
fontSizePx *= 1.05; fontSizePx *= smallFontSizeFactor;
setSize(); setSize();
break; break;
case "_": case "_":
fontSizePx /= 1.05; fontSizePx /= smallFontSizeFactor;
setSize(); setSize();
break; break;
case "h":
toggleHelp();
break;
}
}
function toggleHelp() {
help = !help;
let elements = document.getElementsByClassName("help");
for (let element of elements) {
element.style.display = help ? "block" : "none";
} }
} }
</script> </script>
<style> <style>
#time { body {
font-family: monospace; font-family: monospace;
} }
.container { .container {
@ -94,7 +111,9 @@ function keyPress(event) {
</head> </head>
<body onload="load();"> <body onload="load();">
<div class="container"> <div class="container">
<span class="help" style="display:none"><b>Space</b> sweeps through clock-displays | <b>c</b> toggles the colors | <b>+</b> increases size | <b>-</b> decreases size | <b>0</b> resets font size</span>
<span id="time"></span> <span id="time"></span>
<span class="help" style="display:none"><a href="https://github.com/benstadlbauer/time">Repository on GitHub</a></span>
</div> </div>
</body> </body>
</html> </html>