87 lines
2.5 KiB
JavaScript
87 lines
2.5 KiB
JavaScript
|
export class Highlighter {
|
||
|
|
constructor(layout, clockElement, mode) {
|
||
|
|
this._layout = layout;
|
||
|
|
this._clockElement = clockElement;
|
||
|
|
this._mode = mode === 'seconds' ? 'seconds' : 'time';
|
||
|
|
this._time = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
display(time) {
|
||
|
|
if (this._mode === 'seconds') {
|
||
|
|
const second = this._getSecond(time);
|
||
|
|
if (this._getCurrentSecond() !== second) {
|
||
|
|
this._clearAll();
|
||
|
|
this._highlight(`second${second}`);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
const minute = this._getMinute(time);
|
||
|
|
if (this._getCurrentMinute() !== minute) {
|
||
|
|
const dotMinute = this._getDotMinute(time);
|
||
|
|
const hour = this._getHour(time);
|
||
|
|
this._clearAll();
|
||
|
|
this._highlight('on');
|
||
|
|
for (let i = 1; i <= dotMinute; i++) {
|
||
|
|
this._highlight(`dot${i}`);
|
||
|
|
}
|
||
|
|
this._highlight(`minute${minute}`);
|
||
|
|
this._highlight(`hour${hour}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._time = time;
|
||
|
|
}
|
||
|
|
|
||
|
|
_getSecond(time) {
|
||
|
|
if (typeof this._layout.getSeconds === 'function') {
|
||
|
|
return this._layout.getSeconds(time);
|
||
|
|
}
|
||
|
|
return time.getSeconds();
|
||
|
|
}
|
||
|
|
|
||
|
|
_getDotMinute(time) {
|
||
|
|
if (typeof this._layout.getDotMinute === 'function') {
|
||
|
|
return this._layout.getDotMinute(time);
|
||
|
|
}
|
||
|
|
return time.getMinutes() % 5;
|
||
|
|
}
|
||
|
|
|
||
|
|
_getMinute(time) {
|
||
|
|
if (typeof this._layout.getMinutes === 'function') {
|
||
|
|
return this._layout.getMinutes(time);
|
||
|
|
}
|
||
|
|
return time.getMinutes();
|
||
|
|
}
|
||
|
|
|
||
|
|
_getHour(time) {
|
||
|
|
if (typeof this._layout.getHours === 'function') {
|
||
|
|
return this._layout.getHours(time);
|
||
|
|
}
|
||
|
|
const hour = time.getHours();
|
||
|
|
if (time.getMinutes() >= 25) {
|
||
|
|
return (hour + 1) % 24;
|
||
|
|
}
|
||
|
|
return hour;
|
||
|
|
}
|
||
|
|
|
||
|
|
_clearAll() {
|
||
|
|
const items = this._clockElement.getElementsByClassName('item');
|
||
|
|
for (let i = 0; i < items.length; i++) {
|
||
|
|
items.item(i).classList.remove('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_highlight(itemClass) {
|
||
|
|
const items = this._clockElement.getElementsByClassName(`item ${itemClass}`);
|
||
|
|
for (let i = 0; i < items.length; i++) {
|
||
|
|
items.item(i).classList.add('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_getCurrentSecond() {
|
||
|
|
return !!this._time && this._time.getSeconds() || -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
_getCurrentMinute() {
|
||
|
|
return !!this._time && this._time.getMinutes() || -1;
|
||
|
|
}
|
||
|
|
}
|