From 2b33fd18f55c76736166314462a582444ecb1c50 Mon Sep 17 00:00:00 2001 From: William Brawner Date: Sun, 18 Apr 2021 21:22:58 -0700 Subject: [PATCH] Implement custom input handling for duration entry --- src/index.html | 244 ++++++++++++++++++++++++++----------------------- src/js/app.js | 30 ++++++ 2 files changed, 160 insertions(+), 114 deletions(-) diff --git a/src/index.html b/src/index.html index 980b861..15e623e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,123 +1,139 @@ - - - - - - Interval Timer - - - - - - - - - - - - - - - - - - - - - - -
-

Interval Timer

-
-
- -
+ + + + + + + Interval Timer + + + + + + + + + + + + + + + + + + + + + + + +
+

Interval Timer

+
+
+ +
+
+
+

It looks like you haven't configured any timers yet. Click on the orange "+" icon + below to get started!

+
+
+
+ +

Timer Name

+

Timer description

+
-
-

It looks like you haven't configured any timers yet. Click on the orange "+" icon below to get started!

-
-
-
- -

Timer Name

-

Timer description

- +
+
+
+
+ ✕ +

Timer Name

+
-
-
-
-
- ✕ -

Timer Name

- -
-
-
-

Round: round/timer.rounds - Cycle: cycle/timer.cycles

-

{{ time * 1000 | date : "mm:ss" }}

-
-
-
- - - - +
+
+

Round: round/timer.rounds - Cycle: cycle/timer.cycles

+

{{ time * 1000 | date : "mm:ss" }}

-
-
-
-
- - - - + + + + \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index 302016c..4e7a153 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -54,6 +54,14 @@ let _state = { let db = null; let timerStore = null; +function initApp() { + Array.from(document.getElementsByClassName('duration')).forEach(input => { + console.log(input) + // input.addEventListener('beforeinput', maskDuration); + }); + loadTimers(); +} + function loadTimers() { let state = copyState(); const dbRequest = window.indexedDB.open('interval-timer', 1); @@ -122,6 +130,28 @@ function cancelEdit() { }) } +function maskDuration(event) { + const input = event.target; + let formatted = input.value.replace(/[^\d]/g, ''); + if (event.inputType === "deleteContentBackward") { + formatted = formatted.slice(0, formatted.length - 1) + formatted = ("000000" + formatted).slice(-6) + } else if (event.inputType === 'insertText' && event.data.match(/\d/)) { + formatted = ("000000" + formatted).slice(-6) + } + input.value = `${formatted.slice(0, 2)}h ${formatted.slice(2, 4)}m ${formatted.slice(4, 6)}s`; +} + +function isBeforeInputEventAvailable() { + return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function"; +} + +function handleDurationCaret(event) { + const input = event.target; + const position = Math.min(11, input.value.length); + input.setSelectionRange(position, position); +} + function toggleTimer() { let state = copyState(); if (state.timerJob != null) {