From 40981440f03333ac0289444bc68d5fadecddfdf5 Mon Sep 17 00:00:00 2001
From: Cade Scroggins <git@cade.me>
Date: Fri, 18 Feb 2022 21:49:10 -0800
Subject: [PATCH] utilize toLocaleString to simplify clock

---
 index.html | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 2bb9411..4a2cc2d 100644
--- a/index.html
+++ b/index.html
@@ -12,17 +12,20 @@
     clockOnClickAction: 'Menu',
 
     // The delimiter between the hours and minutes on the clock.
-    clockDelimiter: ' - ',
-
-    // Show AM/PM indication when CONFIG.clockTwentyFourHours is false.
-    clockShowAmPm: true,
+    clockDelimiter: ' – ',
 
     // Show seconds on the clock. A monospaced font is recommended for this.
     clockShowSeconds: false,
 
+    // Show AM/PM indication when CONFIG.clockTwentyFourHours is false.
+    clockShowAmPm: true,
+
     // Show a twenty-four-hour clock instead of a twelve-hour clock.
     clockTwentyFourHour: true,
 
+    // Force an IANA timezone. Useful when avoiding browser fingerprinting.
+    clockTimeZone: 'America/Los_Angeles',
+
     // The "category", "name", "key", "url", "search" path and "color"/"hues"
     // for your commands. If none of the specified keys are matched, the * key
     // is used. Commands without a category don't show up in the help menu.
@@ -729,6 +732,7 @@
       this._amPm = options.amPm;
       this._delimiter = options.delimiter;
       this._showSeconds = options.showSeconds;
+      this._timeZone = options.timeZone;
       this._twentyFourHour = options.twentyFourHour;
       this._setTime = this._setTime.bind(this);
       this._el.addEventListener('click', options.onClick);
@@ -737,22 +741,19 @@
 
     _setTime() {
       const date = new Date();
-      let hours = $.pad(date.getHours());
-      let amPm = '';
 
-      if (!this._twentyFourHour) {
-        hours = date.getHours();
-        if (hours > 12) hours -= 12;
-        else if (hours === 0) hours = 12;
-        if (this._amPm) amPm = date.getHours() >= 12 ? ' PM' : ' AM';
-      }
+      this._el.innerHTML = date
+        .toLocaleString('en-US', {
+          hour12: !this._twentyFourHour,
+          hour: 'numeric',
+          minute: 'numeric',
+          second: this._showSeconds ? 'numeric' : undefined,
+          timeZone: this._timeZone,
+        })
+        .replace(this._amPm ? '' : / (AM|PM)/, '')
+        .replace(/:/g, this._delimiter)
+        .replace(/^0/, '');
 
-      const minutes = this._delimiter + $.pad(date.getMinutes());
-      const seconds = this._showSeconds
-        ? this._delimiter + $.pad(date.getSeconds())
-        : '';
-
-      this._el.innerHTML = hours + minutes + seconds + amPm;
       this._el.setAttribute('datetime', date.toTimeString());
     }
 
@@ -1483,6 +1484,7 @@
     delimiter: CONFIG.clockDelimiter,
     onClick: CONFIG.clockOnClickAction === 'Search' ? form.show : help.toggle,
     showSeconds: CONFIG.clockShowSeconds,
+    timeZone: CONFIG.clockTimeZone,
     twentyFourHour: CONFIG.clockTwentyFourHour,
   });
 </script>