add clockAction config and searchBackground color var

This commit is contained in:
Cade Scroggins 2019-04-15 21:16:41 -07:00
parent 085a1aeaf0
commit 71ddf2d40e
No known key found for this signature in database
GPG key ID: 519697F4ACAF4893

View file

@ -227,6 +227,14 @@
* Show a twenty-four-hour clock instead of a twelve-hour clock with AM/PM. * Show a twenty-four-hour clock instead of a twelve-hour clock with AM/PM.
*/ */
twentyFourHourClock: true, twentyFourHourClock: true,
/**
* Action to take when the clock is clicked. Options include:
*
* - "Menu" to show the help menu
* - "Search" to show the search input
*/
clockAction: 'Menu',
}; };
</script> </script>
@ -235,6 +243,7 @@
/* colors */ /* colors */
--background: #fff; --background: #fff;
--foreground: #232931; --foreground: #232931;
--searchBackground: #000;
--searchForeground: #fff; --searchForeground: #fff;
/* fonts */ /* fonts */
@ -361,7 +370,7 @@
} }
.search-form { .search-form {
background: var(--background); background: var(--searchBackground);
color: var(--searchForeground); color: var(--searchForeground);
z-index: 2; z-index: 2;
} }
@ -641,9 +650,9 @@
constructor(options) { constructor(options) {
this._el = $.el('#clock'); this._el = $.el('#clock');
this._delimiter = options.delimiter; this._delimiter = options.delimiter;
this._twentyFourHourClock = options.twentyFourHourClock; this._twentyFourHour = options.twentyFourHour;
this._setTime = this._setTime.bind(this); this._setTime = this._setTime.bind(this);
this._el.addEventListener('click', options.showForm); this._el.addEventListener('click', options.onClick);
this._start(); this._start();
} }
@ -652,7 +661,7 @@
let hours = $.pad(date.getHours()); let hours = $.pad(date.getHours());
let amPm = ''; let amPm = '';
if (!this._twentyFourHourClock) { if (!this._twentyFourHour) {
hours = date.getHours(); hours = date.getHours();
if (hours > 12) hours -= 12; if (hours > 12) hours -= 12;
else if (hours === 0) hours = 12; else if (hours === 0) hours = 12;
@ -1296,7 +1305,7 @@
new Clock({ new Clock({
delimiter: CONFIG.clockDelimiter, delimiter: CONFIG.clockDelimiter,
showForm: form.show, onClick: CONFIG.clockAction === 'Search' ? form.show : help.toggle,
twentyFourHourClock: CONFIG.twentyFourHourClock, twentyFourHour: CONFIG.twentyFourHourClock,
}); });
</script> </script>