-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
96 lines (84 loc) · 4.11 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import './src/scss/style.scss';
import { Timer } from './timer';
import { ConfigManager } from './configManager';
// import { QRHandler } from './qrHandler';
// Wrap everything inside DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
// Initializations
const configManager = new ConfigManager();
configManager.loadFromURL();
const timer = new Timer(configManager);
// const qrHandler = new QRHandler(timer);
// Re-enable wakelock if the browser was minimised and a wake lock already existed
document.addEventListener('visibilitychange', async () => {
if (timer.wakeLock !== null && document.visibilityState === 'visible') {
await timer.requestWakeLock();
}
});
// Event listeners for ConfigManager
document.getElementById('addInterval').addEventListener('click', configManager.addInterval.bind(configManager));
document.getElementById('createURL').addEventListener('click', configManager.saveToURL.bind(configManager));
// Event listeners for Timer
document.getElementById('startTimer').addEventListener('click', timer.startTimer.bind(timer));
document.getElementById('stopTimer').addEventListener('click', timer.stopTimer.bind(timer));
const muteBtnCopy = `
<svg viewBox="0 -3 30 30" xmlns="http://www.w3.org/2000/svg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icon-Set-Filled" transform="translate(-311 -573)" fill="#000">
<path d="m336.444 585 4.173-4.173c.45-.45.492-1.139.094-1.538-.399-.398-1.088-.356-1.538.094L335 583.556l-4.173-4.173c-.45-.45-1.139-.492-1.538-.094-.398.399-.356 1.088.094 1.538l4.173 4.173-4.173 4.173c-.45.45-.492 1.139-.094 1.538.399.398 1.088.356 1.538-.094l4.173-4.173 4.173 4.173c.45.45 1.139.492 1.538.094.398-.399.356-1.088-.094-1.538L336.444 585ZM325 573l-7 4.667v14.666l7 4.667a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2Zm-14 8v8a2 2 0 0 0 2 2h3v-12h-3a2 2 0 0 0-2 2Z" id="volume-muted"/>
</g>
</g>
</svg>
Mute timer`;
const unMuteBtnCopy = `
<svg viewBox="0 -0.5 25 25" xmlns="http://www.w3.org/2000/svg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icon-Set-Filled" transform="translate(-209 -573)" fill="#000">
<path d="M228 578.101v2a5 5 0 0 1 0 9.798v2c3.388-.489 6-3.376 6-6.899s-2.612-6.41-6-6.899ZM209 581v8a2 2 0 0 0 2 2h3v-12h-3a2 2 0 0 0-2 2Zm14-8-7 4.667v14.666l7 4.667a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2Z" id="volume"/>
</g>
</g>
</svg>
Unmute timer`;
const muteBtn = document.getElementById('muteTimer');
muteBtn.addEventListener('click', (e) => {
timer.toggleMuteTimer();
if (muteBtn.dataset.muted) {
muteBtn.innerHTML = unMuteBtnCopy;
delete muteBtn.dataset.muted
} else {
muteBtn.innerHTML = muteBtnCopy;
muteBtn.dataset.muted = true;
}
});
// Event listeners for QRHandler
// document.getElementById('saveToQR').addEventListener('click', qrHandler.saveToQR.bind(qrHandler));
// document.getElementById('scanQR').addEventListener('click', qrHandler.scanQR.bind(qrHandler));
// qrHandler.handleQRUpload();
document.querySelectorAll('details').forEach(details => {
let clicked = false;
details.addEventListener('click', () => {
clicked = true;
});
details.addEventListener('toggle', function () {
if (clicked) {
this.scrollIntoView({ behavior: 'smooth', block: 'start' });
clicked = false; // Reset the flag
}
});
});
// const themeToggle = document.getElementById('themeToggle');
// const logo = document.getElementById('logo');
// themeToggle.addEventListener('click', () => {
// if (document.documentElement.getAttribute('data-theme') === 'dark') {
// document.documentElement.removeAttribute('data-theme');
// themeToggle.innerHTML = '<span>☾</span>';
// logo.src = "./logo-light.png";
// } else {
// document.documentElement.setAttribute('data-theme', 'dark');
// themeToggle.innerHTML = '<span>☀</span>';
// logo.src = "./logo-dark.png";
// }
// const themeChangeEvent = new Event('themeChange');
// document.documentElement.dispatchEvent(themeChangeEvent);
// });
});