foo/tilde
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

utilize toLocaleString to simplify clock

Browse Source
This commit is contained in:
Cade Scroggins
2022-02-18 21:49:10 -08:00
parent 27a03c376b
commit 40981440f0
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+20 -18
View File
@@ -12,17 +12,20 @@
clockOnClickAction: 'Menu', clockOnClickAction: 'Menu',
// The delimiter between the hours and minutes on the clock. // The delimiter between the hours and minutes on the clock.
clockDelimiter: ' - ', clockDelimiter: ' – ',
// Show AM/PM indication when CONFIG.clockTwentyFourHours is false.
clockShowAmPm: true,
// Show seconds on the clock. A monospaced font is recommended for this. // Show seconds on the clock. A monospaced font is recommended for this.
clockShowSeconds: false, 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. // Show a twenty-four-hour clock instead of a twelve-hour clock.
clockTwentyFourHour: true, 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" // The "category", "name", "key", "url", "search" path and "color"/"hues"
// for your commands. If none of the specified keys are matched, the * key // 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. // is used. Commands without a category don't show up in the help menu.
@@ -729,6 +732,7 @@
this._amPm = options.amPm; this._amPm = options.amPm;
this._delimiter = options.delimiter; this._delimiter = options.delimiter;
this._showSeconds = options.showSeconds; this._showSeconds = options.showSeconds;
this._timeZone = options.timeZone;
this._twentyFourHour = options.twentyFourHour; this._twentyFourHour = options.twentyFourHour;
this._setTime = this._setTime.bind(this); this._setTime = this._setTime.bind(this);
this._el.addEventListener('click', options.onClick); this._el.addEventListener('click', options.onClick);
@@ -737,22 +741,19 @@
_setTime() { _setTime() {
const date = new Date(); const date = new Date();
let hours = $.pad(date.getHours());
let amPm = '';
if (!this._twentyFourHour) { this._el.innerHTML = date
hours = date.getHours(); .toLocaleString('en-US', {
if (hours > 12) hours -= 12; hour12: !this._twentyFourHour,
else if (hours === 0) hours = 12; hour: 'numeric',
if (this._amPm) amPm = date.getHours() >= 12 ? ' PM' : ' AM'; 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()); this._el.setAttribute('datetime', date.toTimeString());
} }
@@ -1483,6 +1484,7 @@
delimiter: CONFIG.clockDelimiter, delimiter: CONFIG.clockDelimiter,
onClick: CONFIG.clockOnClickAction === 'Search' ? form.show : help.toggle, onClick: CONFIG.clockOnClickAction === 'Search' ? form.show : help.toggle,
showSeconds: CONFIG.clockShowSeconds, showSeconds: CONFIG.clockShowSeconds,
timeZone: CONFIG.clockTimeZone,
twentyFourHour: CONFIG.clockTwentyFourHour, twentyFourHour: CONFIG.clockTwentyFourHour,
}); });
</script> </script>