diff options
| -rw-r--r-- | manifest.json | 2 | ||||
| -rw-r--r-- | style.css | 41 | ||||
| -rw-r--r-- | tempo.html | 10 | ||||
| -rw-r--r-- | tempo.js | 35 |
4 files changed, 36 insertions, 52 deletions
diff --git a/manifest.json b/manifest.json index b752d9a..01426b5 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Tempo", - "version": "0.10", + "version": "0.12", "description": "Replace new tab page with a clock.", "icons": { @@ -2,47 +2,30 @@ body { color: #ddd; background-color: #222; font-family: 'Lato', sans-serif; - padding: 0em; - margin: 0em; - user-select: none; -} -div#container { - width: 50em; - height: 12em; - margin: auto; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + height: 100vh; + margin: 0; + padding: 0; - cursor: default; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } div#time { - line-height: 8em; -} - -div#time p { font-size: 8em; font-weight: 100; - text-align: center; - padding: 0em; - margin: 0em; + line-height: 1em; } div#date { - margin-top: 1em; - line-height: 1.6em; -} - -div#date p { color: #777; font-size: 1.6em; font-weight: 300; - text-align: center; - padding: 0em; - margin: 0em; + line-height: 1em; + + margin-top: 1rem; + margin-bottom: 1.2rem; } @@ -9,13 +9,7 @@ <script src="tempo.js"></script> </head> <body> - <div id="container"> - <div id="time"> - <p id="timeval"> </p> - </div> - <div id="date"> - <p id="dateval"> </p> - </div> - </div> + <div id="time"> </div> + <div id="date"> </div> </body> </html> @@ -1,6 +1,7 @@ let timefmt = null; -const months = ['January', 'February', 'March', 'April', 'May', 'June', - 'July', 'August', 'September', 'October', 'November', 'December']; + +const MONTHS = Array.from({ length: 12 }, (_, i) => + new Date(0, i).toLocaleString(undefined, { month: 'long' })); function padTime(x) { return (x < 10) ? '0' + x : x; @@ -18,14 +19,22 @@ function updateTime() { let dy = date.getFullYear(); if (timefmt == 12) // default to 24 - h = (h + 11) % 12 + 1; - - let str_t = padTime(h) + '\u00A0\u00A0' + padTime(m) + - '\u00A0\u00A0' + padTime(s); - let str_d = dd + ' ' + months[dm] + ' ' + dy; + h = h % 12 || 12; + + document.getElementById('time').textContent = + padTime(h) + '\u00A0\u00A0' + + padTime(m) + '\u00A0\u00A0' + + padTime(s); + document.getElementById('date').textContent = + dd + ' ' + MONTHS[dm] + ' ' + dy; +} - document.getElementById('timeval').textContent = str_t; - document.getElementById('dateval').textContent = str_d; +// recursively calling setTimeout instead of using setInterval allows us to +// correct for any drift caused by imprecise delays. +function updateTimeRecursive() { + updateTime(); + // +1ms to avoid updating too early + setTimeout(updateTimeRecursive, 1001 - new Date().getTime() % 1000); } function startTempo() { @@ -35,15 +44,13 @@ function startTempo() { if ((val = localStorage['fg'])) document.body.style.color = val; if ((val = localStorage['fg_date'])) - document.getElementById('dateval').style.color = val; + document.getElementById('date').style.color = val; if ((val = localStorage['bg'])) document.body.style.backgroundColor = val; - updateTime(); - setTimeout(function() { updateTime(); setInterval(updateTime, 1000) }, - 1000 - (new Date()).getTime() % 1000); + updateTimeRecursive(); } window.onload = startTempo; -document.addEventListener('contextmenu', function(e) { e.preventDefault() }); +document.addEventListener('contextmenu', e => e.preventDefault()); |