mirror of
https://github.com/xvvvyz/tilde.git
synced 2026-03-11 14:44:24 +00:00
add clockAction config and searchBackground color var
This commit is contained in:
parent
085a1aeaf0
commit
71ddf2d40e
1 changed files with 15 additions and 6 deletions
21
index.html
21
index.html
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue