Skip to content

Commit 838c85e

Browse files
gabrnunesgabrnunes
authored
Merge pull request #29 from MatGPereira/fix/timer-and-bundle
Fix/timer and bundle
2 parents d37039a + 5466a98 commit 838c85e

File tree

6 files changed

+242
-148
lines changed

6 files changed

+242
-148
lines changed

‎asset/javascript/TimeController.js‎

Lines changed: 66 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,13 @@ function TimerController(reference) {
101101

102102
function bindFullscreenEvents() {
103103
document.addEventListener('fullscreenchange', handleButtonFullscreenChange);
104+
document.addEventListener('visibilitychange', handleVisibilityChange);
105+
}
106+
107+
function handleVisibilityChange() {
108+
if (document.hidden) return;
109+
110+
updatePageTitle();
104111
}
105112

106113
function validateInput(input, maxValue) {
@@ -161,6 +168,8 @@ function TimerController(reference) {
161168

162169
if (!canStart) return;
163170

171+
reference.classList.remove('inverted');
172+
countdownContainerReference.classList.remove('inverted');
164173
startButton.hideElement();
165174
pauseButton.showElement();
166175
stopButton.showElement();
@@ -177,27 +186,28 @@ function TimerController(reference) {
177186
TimerStatus.isCountdown(lastTimerStatus) ||
178187
TimerStatus.isPaused(lastTimerStatus);
179188

180-
if (canStart) {
181-
let seconds = getInputsValueAsSeconds();
182-
seconds--;
183-
if (seconds <= 10) {
184-
lastTimerStatus = TimerStatus.COUNTDOWN;
185-
playCountdownSound();
189+
if (!canStart) {
190+
clearInterval(timerIntervalId);
191+
return;
192+
}
186193

187-
if (!preventOpenCountdown) executeCountdown(seconds);
188-
}
194+
let seconds = getInputsValueAsSeconds();
195+
seconds--;
196+
if (seconds <= 10) {
197+
lastTimerStatus = TimerStatus.COUNTDOWN;
198+
playCountdownSound();
189199

190-
setInputValues(seconds);
200+
if (!preventOpenCountdown) executeCountdown(seconds);
201+
}
191202

192-
if (seconds == 0) {
193-
preventOpenCountdown = false;
194-
lastTimerStatus = TimerStatus.STOPPED;
203+
setInputValues(seconds);
195204

196-
showDefaultButtons();
197-
playStopSound();
198-
clearInterval(timerIntervalId);
199-
}
200-
} else {
205+
if (seconds == 0) {
206+
preventOpenCountdown = false;
207+
lastTimerStatus = TimerStatus.STOPPED;
208+
209+
showDefaultButtons();
210+
playStopSound();
201211
clearInterval(timerIntervalId);
202212
}
203213
}, DEFAULT_INTERVAL);
@@ -220,14 +230,15 @@ function TimerController(reference) {
220230
const fade = setInterval(() => {
221231
if (stopSound.volume > 0.05) {
222232
stopSound.volume -= 0.05;
223-
} else {
224-
stopSound.volume = 0;
225-
stopSound.pause();
226-
stopSound.currentTime = 0;
227-
clearInterval(fade);
228-
setInputValues(DEFAULT_SECONDS);
229-
preventOpenCountdown = false;
233+
return;
230234
}
235+
236+
stopSound.volume = 0;
237+
stopSound.pause();
238+
stopSound.currentTime = 0;
239+
clearInterval(fade);
240+
setInputValues(DEFAULT_SECONDS);
241+
preventOpenCountdown = false;
231242
}, 200);
232243
}, 3000);
233244
}
@@ -236,39 +247,48 @@ function TimerController(reference) {
236247
countdownContainerReference.showElement();
237248
countdownNumber.textContent = seconds;
238249

250+
countdownContainerReference.classList.toggle('even');
251+
countdownContainerReference.classList.toggle('odd');
252+
239253
if (seconds % 2 === 0) {
240-
countdownContainerReference.classList.add('even');
241-
countdownContainerReference.classList.remove('odd');
254+
reference.classList.add('inverted');
255+
countdownContainerReference.classList.add('inverted');
256+
242257
return;
243258
}
244259

245-
countdownContainerReference.classList.add('odd');
246-
countdownContainerReference.classList.remove('even');
260+
reference.classList.remove('inverted');
261+
countdownContainerReference.classList.remove('inverted');
247262
}
248263

249264
function stop() {
250265
if (TimerStatus.isStopped(lastTimerStatus)) return;
251266

252267
preventOpenCountdown = false;
253268
lastTimerStatus = TimerStatus.STOPPED;
269+
reference.classList.remove('inverted');
270+
countdownContainerReference.classList.remove('inverted');
254271
showDefaultButtons();
255272
setInputValues(DEFAULT_SECONDS);
256273
clearInterval(timerIntervalId);
257274
}
258275

259276
function pause() {
260-
if (lastTimerStatus === TimerStatus.RUNNING || lastTimerStatus === TimerStatus.COUNTDOWN) {
261-
lastTimerStatus = TimerStatus.PAUSED;
262-
startButton.showElement();
263-
pauseButton.hideElement();
264-
clearInterval(timerIntervalId);
265-
}
277+
const shouldNotPause = lastTimerStatus !== TimerStatus.RUNNING && lastTimerStatus !== TimerStatus.COUNTDOWN;
278+
if (shouldNotPause) return;
279+
280+
lastTimerStatus = TimerStatus.PAUSED;
281+
282+
startButton.showElement();
283+
pauseButton.hideElement();
284+
285+
clearInterval(timerIntervalId);
266286
}
267287

268288
function isInFullscreen() {
269-
return !!document.fullscreenElement
289+
return !!document.fullscreenElement;
270290
}
271-
291+
272292
function handleButtonFullscreenChange() {
273293
if (isInFullscreen()) {
274294
exitFullscreenButton.showElement();
@@ -291,6 +311,8 @@ function TimerController(reference) {
291311

292312
function closeCountdownContainer() {
293313
preventOpenCountdown = true;
314+
reference.classList.remove('inverted');
315+
countdownContainerReference.classList.remove('inverted');
294316
countdownContainerReference.hideElement();
295317
countdownContainerReference.classList.remove('even', 'odd');
296318
countdownNumber.textContent = '';
@@ -347,6 +369,13 @@ function TimerController(reference) {
347369
hourInput.value = formatTimeUnit(hours);
348370
minuteInput.value = formatTimeUnit(minutes);
349371
secondInput.value = formatTimeUnit(seconds);
372+
373+
updatePageTitle();
374+
}
375+
376+
function updatePageTitle() {
377+
const { seconds, minutes, hours } = getInputValues();
378+
document.title = `${formatTimeUnit(hours)}:${formatTimeUnit(minutes)}:${formatTimeUnit(seconds)} - Timer <Codecon>`;
350379
}
351380

352381
init();
@@ -358,4 +387,4 @@ document.addEventListener('DOMContentLoaded', function () {
358387
window.timerController = timerController;
359388
});
360389

361-
export default TimerController;
390+
export default TimerController;

‎asset/javascript/__tests__/TimerIntegration.test.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ describe('TimerController Integration', () => {
88

99
beforeEach(() => {
1010
mockReference = {
11+
classList: {
12+
add: jest.fn(),
13+
remove: jest.fn(),
14+
contains: jest.fn(),
15+
toggle: jest.fn(),
16+
},
1117
querySelector: jest.fn(selector => {
1218
if (selector === '.js-stopwatch-action-buttons') {
1319
return mockElement();
@@ -25,21 +31,25 @@ describe('TimerController Integration', () => {
2531

2632
it('deve iniciar, pausar e parar o timer corretamente', () => {
2733
const timerController = new TimerController(mockReference);
28-
29-
const startButton = mockReference.querySelector('.js-stopwatch-action-buttons').querySelector('.js-start-button');
34+
35+
const startButton = mockReference
36+
.querySelector('.js-stopwatch-action-buttons')
37+
.querySelector('.js-start-button');
3038
expect(startButton.addEventListener).toHaveBeenCalledWith('click', expect.any(Function));
31-
39+
3240
const startHandler = startButton.addEventListener.mock.calls[0][1];
3341
startHandler();
34-
42+
3543
expect(startButton.hideElement).toHaveBeenCalled();
36-
37-
const pauseButton = mockReference.querySelector('.js-stopwatch-action-buttons').querySelector('.js-pause-button');
44+
45+
const pauseButton = mockReference
46+
.querySelector('.js-stopwatch-action-buttons')
47+
.querySelector('.js-pause-button');
3848
expect(pauseButton.addEventListener).toHaveBeenCalledWith('click', expect.any(Function));
39-
49+
4050
const pauseHandler = pauseButton.addEventListener.mock.calls[0][1];
4151
pauseHandler();
42-
52+
4353
expect(pauseButton.hideElement).toHaveBeenCalled();
4454
});
45-
});
55+
});

0 commit comments

Comments
 (0)