input-duration 2.2.27 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/manualTriggersEcho0.yml +1 -1
- package/README.md +37 -68
- package/docs/index.html +21 -2
- package/docs/index.js.html +1 -1
- package/index.js +76 -80
- package/package.json +16 -6
- package/.github/workflows/commitToBSEndToEnd.yml +0 -51
- package/.github/workflows/devVersionAndRelease.yml +0 -66
- package/.github/workflows/npm-bump.yml +0 -47
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
*** Thanks for checking out the Best-README-Template. If you have a suggestion
|
|
5
5
|
*** that would make this better, please fork the repo and create a pull request
|
|
6
6
|
*** or simply open an issue with the tag "enhancement".
|
|
7
|
+
*** Don't forget to give the project a star!
|
|
8
|
+
*** Thanks again! Now go create something AMAZING! :D
|
|
7
9
|
-->
|
|
8
10
|
|
|
9
11
|
|
|
@@ -17,16 +19,6 @@
|
|
|
17
19
|
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
|
|
18
20
|
-->
|
|
19
21
|
|
|
20
|
-
Live BrowserStack Test Results:
|
|
21
|
-
|
|
22
|
-

|
|
23
|
-
|
|
24
|
-

|
|
25
|
-
|
|
26
|
-
- this can be updated with https://shields.io/
|
|
27
|
-
|
|
28
|
-
Remove these:
|
|
29
|
-
|
|
30
22
|
[![npm bundle size][npm-bundle-size]][npm-bundle-size]
|
|
31
23
|
[![Contributors][contributors-shield]][contributors-url]
|
|
32
24
|
[![Forks][forks-shield]][forks-url]
|
|
@@ -47,15 +39,18 @@ Remove these:
|
|
|
47
39
|
|
|
48
40
|
|
|
49
41
|
<a href="https://github.com/StephanLuis/input-duration">
|
|
50
|
-
<h3 align="center">Input-Duration --
|
|
42
|
+
<h3 align="center">Input-Duration -- JavaScript duration input</h3> <img src="readme/logo.svg" alt="Logo" width="90" height="90">
|
|
51
43
|
</a>
|
|
52
44
|
|
|
53
45
|
|
|
54
46
|
|
|
55
|
-
<p align="center">A
|
|
47
|
+
<p align="center">A compact duration input with a fixed, locale-independent display for hours, minutes, seconds, and milliseconds.</p>
|
|
56
48
|
</div>
|
|
57
49
|
|
|
58
|
-
|
|
50
|
+
Use `input-duration` when users need to enter a duration rather than a time of day: for example, a countdown, elapsed-time limit, or media offset. Its displayed value uses `HH:mm:ss.SSS` on every locale, without a locale-specific AM/PM presentation, and supports durations greater than 24 hours (currently up to 99 hours) with millisecond values, such as `30:00:00.125`.
|
|
51
|
+
|
|
52
|
+
The component supplies its own segmented layout instead of the browser's native time-picker UI, so the displayed format does not change with browser or locale. It is built from native number inputs, however, so details such as the on-screen keyboard and interaction can still vary by device and browser; this is consistency of the value's presentation, not a guarantee of pixel-identical rendering. Milliseconds can be entered as three digits; the input's step controls increment in 10 ms intervals.
|
|
53
|
+
<br>
|
|
59
54
|
<p>
|
|
60
55
|
<div>
|
|
61
56
|
</div>
|
|
@@ -65,6 +60,8 @@ Remove these:
|
|
|
65
60
|
</a> ·
|
|
66
61
|
<a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
|
|
67
62
|
·
|
|
63
|
+
<a href="https://stephanluis.github.io/input-duration/" target="_blank">Live demo</a>
|
|
64
|
+
·
|
|
68
65
|
<a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
|
|
69
66
|
·
|
|
70
67
|
<a href="https://github.com/StephanLuis/input-duration/issues">Bugs</a>
|
|
@@ -72,17 +69,28 @@ Remove these:
|
|
|
72
69
|
<a href="https://github.com/StephanLuis/input-duration/issues">Request Feature</a>
|
|
73
70
|
</p>
|
|
74
71
|
</div>
|
|
75
|
-
Ok, what about mobile?? Yep, input-duration works on all popular operating system / browser combinations.
|
|
76
|
-
<br/>
|
|
77
72
|
</div>
|
|
78
73
|
<br/>
|
|
79
74
|
|
|
80
|
-
<h2>
|
|
75
|
+
<h2>Fixed-format duration input</h2>
|
|
76
|
+
|
|
77
|
+
`input-duration` is intended for touch and keyboard use. The HTML structure and displayed field order are controlled by the component; device-specific input and keyboard behavior remains native to the browser.
|
|
78
|
+
|
|
79
|
+
<h2>Bob is rescued by INPUT-DURATION!</h2>
|
|
80
|
+
|
|
81
|
+
The goal is a small JavaScript duration input that gives countdowns and elapsed-time entry a predictable displayed format across browser and locale settings, while retaining native numeric inputs for editing.
|
|
81
82
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
<i>Does this lose any functionality?</i> No! `document.querySelector('#bob').value` has a getter and setter, so values can be set and retrieved from JavaScript or the HTML attribute.
|
|
84
|
+
|
|
85
|
+
<img src="readme/safariBad.png" alt="Example comparing a native time input with input-duration" width="80%"/>
|
|
86
|
+
|
|
87
|
+
Native time inputs are useful when the user is choosing a time on a clock. A duration is different: `30:00:00.125` means thirty hours, not 6 AM the next day. Keeping those concepts separate avoids date, timezone, and 12/24-hour display concerns when collecting a duration.
|
|
88
|
+
|
|
89
|
+
Here's why:
|
|
90
|
+
* Enter durations independently of a calendar date or time of day.
|
|
91
|
+
* Keep a fixed `HH:mm:ss.SSS` display regardless of locale-specific clock conventions.
|
|
92
|
+
* Represent durations beyond 24 hours (up to 99 hours in the current implementation).
|
|
93
|
+
* Read and set the value from JavaScript using the component's `.value` property.
|
|
86
94
|
|
|
87
95
|
<!-- TABLE OF CONTENTS -->
|
|
88
96
|
<details>
|
|
@@ -103,7 +111,7 @@ Remove these:
|
|
|
103
111
|
</li>
|
|
104
112
|
<li><a href="#usage">Usage</a></li>
|
|
105
113
|
<li><a href="#roadmap">Roadmap</a></li>
|
|
106
|
-
<li><a href="#
|
|
114
|
+
<li><a href="#cross-browser-testing">Cross-browser testing</a></li>
|
|
107
115
|
<li><a href="#contributing">Contributing</a></li>
|
|
108
116
|
<li><a href="#license">License</a></li>
|
|
109
117
|
<li><a href="#contact">Contact</a></li>
|
|
@@ -115,50 +123,16 @@ Remove these:
|
|
|
115
123
|
|
|
116
124
|
<!-- ABOUT THE PROJECT -->
|
|
117
125
|
## About The Project
|
|
118
|
-
|
|
126
|
+
|
|
127
|
+
HTML's `<input type="time">` represents a time of day. Browsers may localize its visible control (for example, showing a 12-hour clock with AM/PM), even though its value is standardized. It also cannot represent a duration longer than a day.
|
|
128
|
+
|
|
129
|
+
`input-duration` is for duration values, not appointments or clock times. Its separate numeric fields present hours, minutes, seconds, and milliseconds in a fixed `HH:mm:ss.SSS` format. This avoids locale-dependent time-of-day presentation while allowing durations beyond 24 hours and millisecond values in a compact control.
|
|
119
130
|
|
|
120
131
|
<!-- [![Product Name Screen Shot][product-screenshot]](https://example.com) -->
|
|
121
132
|
|
|
122
133
|
<img src="readme/codeDrawing.png" alt="drawing" width="60%"/>
|
|
123
134
|
|
|
124
135
|
<!-- [![HTML Screen Shot][html-screenshot]](https://example.com) -->
|
|
125
|
-
*note input-duration needs closing tag!
|
|
126
|
-
|
|
127
|
-
<h3> Bob is rescued by INPUT-DURATION! </h3>
|
|
128
|
-
|
|
129
|
-
The objective is a minimised javascript plugin that reproduces the behaviour of the input type=time on Chrome. This way at least two of the major browsers are supported, Safari and Chrome, on desktop and mobile operating systems.
|
|
130
|
-
|
|
131
|
-
<i>Does this loose any functionality?</i> No! document.querySelector('#bob').value has a getter and setter! So values can be set and retrieved by ID or attribute in HTML.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<img src="readme/safariBad.png" alt="drawing" width="80%"/>
|
|
136
|
-
<!-- [![Safari Screen Shot][safari-screenshot]](https://example.com) -->
|
|
137
|
-
|
|
138
|
-
Yes! It seems CRAZY in 2022 that there is not a native 'time only' input for HTML. What I mean is there is no user input control for time rendered independantly of date or time of day. Yea, crazy, but now input-duration is a javascript plugin that creates a UX input control for a value of time simply as hours, minutes, seconds --<b>only</b>! <br> Ever thought, why is it difficult to 'code' a countdown timer? Why can't it be done with one control? Just look at google's timer and other coundown timers! All use multiple inputs, usually designed for integers.
|
|
139
|
-
|
|
140
|
-
The very worst is Safari on desktop and mobile, which undermine any input type=time coding efforts and update the input based on OS settings! Shouldn't a user be able to 'scientifically' specify a period of time with one control? <br> Maybe it's just me, but the chrome / google timer is 14 separate elements ... those guys must be paid by the hour. The closest HTML5 input type- time when configured with UX for hours to millisecs is very finicky and is rendered differently on Chrome than Safari. <b>Mobile</b> is different from laptop<br> ... so I've simplified that!
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
There were a few plugins that remediated the lack of continuity, but even those controls treated time as a date (ex 24hr max). So it seems the current state is the most relable UX is multi input type number. The worst example is the Google countdown timer. That way is wrong because time is a basic unit that should be separate from calendar complexities. That got me thinking, why isn't there an input control for it implemented across browsers?? I needed one, so coded input-duration.
|
|
149
|
-
|
|
150
|
-
Here's why:
|
|
151
|
-
* Time is hours minutes and seconds (and millisecs) and needn't be associated with part of a day or a date
|
|
152
|
-
* The date association breaks UX and is varied with browser implementation
|
|
153
|
-
* I found no other crossbrowser solution
|
|
154
|
-
* I thought this would be a great open source project
|
|
155
|
-
* End use of number inputs (standard hack) for use with time
|
|
156
|
-
|
|
157
|
-
Of course, this is functional but in it's infancy. Maybe, with some contribution this is a project that can inspire change to the HTML spec.
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
Feel free to vote for WhatWG inclusion of a into the HTML spec! (link comming soon)
|
|
161
|
-
|
|
162
136
|
<p align="right">(<a href="#top">back to top</a>)</p>
|
|
163
137
|
|
|
164
138
|
|
|
@@ -279,14 +253,9 @@ See the [open issues](https://github.com/StephanLuis/input-duration/issues) for
|
|
|
279
253
|
<p align="right">(<a href="#top">back to top</a>)</p>
|
|
280
254
|
|
|
281
255
|
<!-- TESTSTATUS -->
|
|
282
|
-
##
|
|
256
|
+
## Cross-browser testing
|
|
283
257
|
|
|
284
|
-
|
|
285
|
-

|
|
286
|
-

|
|
287
|
-

|
|
288
|
-

|
|
289
|
-

|
|
258
|
+
The browser and device results linked below are historical and should not be treated as verification against current browser versions. The local regression suite checks component behavior, but current cross-browser rendering and interaction still need to be tested.
|
|
290
259
|
|
|
291
260
|
[Tests & Live Status](https://github.com/StephanLuis/BrowserStackSelenium/blob/main/input-duration/README.md)
|
|
292
261
|
|
|
@@ -296,6 +265,8 @@ See the [open issues](https://github.com/StephanLuis/input-duration/issues) for
|
|
|
296
265
|
|
|
297
266
|
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
|
|
298
267
|
|
|
268
|
+
Run the local regression tests with `npm test`.
|
|
269
|
+
|
|
299
270
|
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
|
|
300
271
|
Don't forget to give the project a star! Thanks again!
|
|
301
272
|
|
|
@@ -350,8 +321,6 @@ Resources I've found helpful and would like to give credit to:
|
|
|
350
321
|
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
|
|
351
322
|
|
|
352
323
|
|
|
353
|
-
|
|
354
|
-
|
|
355
324
|
[contributors-shield]: https://img.shields.io/github/contributors/StephanLuis/input-duration?style=for-the-badge
|
|
356
325
|
[contributors-url]: https://github.com/StephanLuis/input-duration/graphs/contributors
|
|
357
326
|
[forks-shield]: https://img.shields.io/github/forks/StephanLuis/input-duration?style=for-the-badge
|
package/docs/index.html
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<title>JSDoc: Home</title>
|
|
6
|
+
<h1> See the input-duration in action</h1>
|
|
7
|
+
|
|
8
|
+
<h2>Best HTML5 Option</h2>
|
|
9
|
+
<input type="time" id="problemTime" step="0.01" value="00:00:00.000">
|
|
10
|
+
|
|
11
|
+
<h2>Better Option</h2>
|
|
12
|
+
<input-duration id="bob"></input-duration>
|
|
13
|
+
|
|
14
|
+
<h1>More uses of input-duration</h1>
|
|
15
|
+
<input-duration id="bobPrepop" value="99:09:09.999"></input-duration><br>
|
|
16
|
+
<input-duration id="Jane"></input-duration><br>
|
|
17
|
+
<input type="date" id="BobsDate"><br>
|
|
18
|
+
|
|
19
|
+
<h2>Test the prototype</h2>
|
|
20
|
+
<p id="what">This is for testing HTMLelement prototype update</p>
|
|
21
|
+
|
|
22
|
+
<script type="module">
|
|
23
|
+
import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm';
|
|
24
|
+
</script>
|
|
6
25
|
|
|
7
26
|
<script src="scripts/prettify/prettify.js"> </script>
|
|
8
27
|
<script src="scripts/prettify/lang-css.js"> </script>
|
|
@@ -17,7 +36,7 @@
|
|
|
17
36
|
|
|
18
37
|
<div id="main">
|
|
19
38
|
|
|
20
|
-
<h1 class="page-title">
|
|
39
|
+
<h1 class="page-title">Plugin Doccumentation</h1>
|
|
21
40
|
|
|
22
41
|
|
|
23
42
|
|
|
@@ -174,4 +193,4 @@
|
|
|
174
193
|
<script> prettyPrint(); </script>
|
|
175
194
|
<script src="scripts/linenumber.js"> </script>
|
|
176
195
|
</body>
|
|
177
|
-
</html>
|
|
196
|
+
</html>
|
package/docs/index.js.html
CHANGED
package/index.js
CHANGED
|
@@ -6,12 +6,11 @@
|
|
|
6
6
|
*
|
|
7
7
|
* @fileoverview INPUT-DURATION
|
|
8
8
|
* @file INPUT-DURATION
|
|
9
|
-
* @author Stephan Luis
|
|
9
|
+
* @author Stephan Luis
|
|
10
10
|
* @see <a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a>
|
|
11
11
|
* @see <a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a>
|
|
12
|
-
* @copyright MIT License, Copyright (c)
|
|
13
|
-
* @version 2.2.
|
|
14
|
-
* fake update to check CI , 16 Dec, 6x
|
|
12
|
+
* @copyright MIT License, Copyright (c) 2022
|
|
13
|
+
* @version 2.2.8 (release)
|
|
15
14
|
*/
|
|
16
15
|
|
|
17
16
|
|
|
@@ -23,21 +22,35 @@
|
|
|
23
22
|
*/
|
|
24
23
|
|
|
25
24
|
class InputDuration extends HTMLElement {
|
|
25
|
+
static get observedAttributes() {
|
|
26
|
+
return ['value'];
|
|
27
|
+
}
|
|
28
|
+
|
|
26
29
|
constructor() {
|
|
27
30
|
|
|
28
31
|
super();
|
|
29
32
|
|
|
30
33
|
this.myElement = this.attachShadow({ mode: 'open' });
|
|
31
34
|
|
|
32
|
-
// needed for setting inputs when value attribute is added to chronlyHMS
|
|
33
|
-
// <chronly-hms id="bobPrepop" value="99:09:09.999"></chronly-hms>
|
|
34
|
-
|
|
35
|
-
this.value = this.getAttribute('value');
|
|
36
|
-
|
|
37
35
|
this.boot();
|
|
38
36
|
|
|
39
37
|
} // end constructor
|
|
40
38
|
|
|
39
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
40
|
+
|
|
41
|
+
if (name !== 'value' || oldValue === newValue) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (newValue === null) {
|
|
46
|
+
this.resetInputs();
|
|
47
|
+
} else if (this.isValidValue(newValue)) {
|
|
48
|
+
this.setInputValues(newValue);
|
|
49
|
+
} else {
|
|
50
|
+
this.warnInvalidValue(newValue);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
41
54
|
|
|
42
55
|
/**
|
|
43
56
|
* get the input-duration value, pulls values from each input
|
|
@@ -75,60 +88,52 @@ class InputDuration extends HTMLElement {
|
|
|
75
88
|
set value(val) {
|
|
76
89
|
|
|
77
90
|
// for setting the value in js (like document.querySelector("#bobPrepop").value = "05:05:05.005")
|
|
78
|
-
if (val) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(val)) {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
// split val
|
|
88
|
-
|
|
89
|
-
var timeArray = val.split(/[.:]+/);
|
|
90
|
-
|
|
91
|
-
console.log('time array is ' + timeArray[0] + ':' + timeArray[1] + ':' + timeArray[2] + ':' + timeArray[3]);
|
|
92
|
-
|
|
93
|
-
console.log('this.id = ' + this.id);
|
|
94
|
-
|
|
95
|
-
setTimeout(() => {
|
|
96
|
-
|
|
97
|
-
this.myElement.querySelector('input[name="startHours"]').value = timeArray[0];
|
|
98
|
-
this.myElement.querySelector('input[name="startMinutes"]').value = timeArray[1];
|
|
99
|
-
this.myElement.querySelector('input[name="startSeconds"]').value = timeArray[2];
|
|
100
|
-
this.myElement.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
|
|
101
|
-
|
|
102
|
-
}, 0);
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
this.setAttribute('value', val);
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
else {
|
|
91
|
+
if (!val) {
|
|
92
|
+
this.resetInputs();
|
|
93
|
+
this.removeAttribute('value');
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
110
96
|
|
|
111
|
-
|
|
97
|
+
if (typeof val !== 'string' || !this.isValidValue(val)) {
|
|
98
|
+
this.warnInvalidValue(val);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
112
101
|
|
|
113
|
-
|
|
102
|
+
this.setInputValues(val);
|
|
114
103
|
|
|
115
|
-
|
|
116
|
-
|
|
104
|
+
if (this.getAttribute('value') !== val) {
|
|
105
|
+
this.setAttribute('value', val);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
117
108
|
|
|
118
|
-
|
|
109
|
+
isValidValue(val) {
|
|
110
|
+
return typeof val === 'string' &&
|
|
111
|
+
/^[0-9]{2}:[0-5][0-9]:[0-5][0-9]\.[0-9]{3}$/.test(val);
|
|
112
|
+
}
|
|
119
113
|
|
|
120
|
-
|
|
114
|
+
setInputValues(val) {
|
|
115
|
+
const timeArray = val.split(/[.:]+/);
|
|
116
|
+
const inputNames = ['startHours', 'startMinutes', 'startSeconds', 'startMilliSecs'];
|
|
121
117
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
118
|
+
inputNames.forEach((name, index) => {
|
|
119
|
+
const input = this.myElement.querySelector(`input[name="${name}"]`);
|
|
120
|
+
input.value = timeArray[index];
|
|
121
|
+
input.oldValue = input.value;
|
|
122
|
+
});
|
|
123
|
+
}
|
|
126
124
|
|
|
127
|
-
|
|
125
|
+
resetInputs() {
|
|
126
|
+
const defaults = ['00', '00', '00', '000'];
|
|
127
|
+
const inputs = this.myElement.querySelectorAll('.timeCase input');
|
|
128
128
|
|
|
129
|
-
|
|
129
|
+
inputs.forEach((input, index) => {
|
|
130
|
+
input.value = defaults[index];
|
|
131
|
+
input.oldValue = input.value;
|
|
132
|
+
});
|
|
133
|
+
}
|
|
130
134
|
|
|
131
|
-
|
|
135
|
+
warnInvalidValue(val) {
|
|
136
|
+
console.warn(`The specified value ${val} does not conform to the required format. The format is "HH:mm:ss.SSS" where HH is 00-99, mm is 00-59, ss is 00-59, and SSS is 000-999.`);
|
|
132
137
|
}
|
|
133
138
|
|
|
134
139
|
|
|
@@ -162,10 +167,6 @@ class InputDuration extends HTMLElement {
|
|
|
162
167
|
|
|
163
168
|
addArrowKeyInput() {
|
|
164
169
|
|
|
165
|
-
console.log('1 this: ' + this);
|
|
166
|
-
console.log('1 this.myElement: ' + this.myElement);
|
|
167
|
-
console.log('1 this.myElement active: ' + this.myElement);
|
|
168
|
-
|
|
169
170
|
var mE = this.myElement;
|
|
170
171
|
|
|
171
172
|
// Left and Right arrow key toggle between HMSmS
|
|
@@ -422,26 +423,19 @@ class InputDuration extends HTMLElement {
|
|
|
422
423
|
// Digit input 0-9 (typed in by user)
|
|
423
424
|
|
|
424
425
|
function setInputFilter(inputElement, inputFilter) {
|
|
425
|
-
|
|
426
|
+
inputElement.oldValue = inputElement.value;
|
|
426
427
|
|
|
427
|
-
|
|
428
|
-
|
|
428
|
+
inputElement.addEventListener('input', function () {
|
|
429
|
+
if (inputFilter(this.value)) {
|
|
430
|
+
this.oldValue = this.value;
|
|
431
|
+
} else {
|
|
432
|
+
this.value = this.oldValue;
|
|
433
|
+
}
|
|
434
|
+
});
|
|
429
435
|
|
|
430
436
|
inputElement.addEventListener('keyup', function (event) {
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
if (/^([0-9]?)$/.test(event.key)) {
|
|
435
|
-
if (inputFilter(this.value)) {
|
|
436
|
-
this.oldValue = this.value;
|
|
437
|
-
this.oldSelectionStart = this.selectionStart;
|
|
438
|
-
this.oldSelectionEnd = this.selectionEnd;
|
|
439
|
-
} else if (this.hasOwnProperty("oldValue")) {
|
|
440
|
-
this.value = this.oldValue;
|
|
441
|
-
// this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
|
|
442
|
-
} else {
|
|
443
|
-
this.value = "";
|
|
444
|
-
}
|
|
437
|
+
if (/^[0-9]$/.test(event.key)) {
|
|
438
|
+
inputFilter(this.value);
|
|
445
439
|
}
|
|
446
440
|
});
|
|
447
441
|
}
|
|
@@ -455,7 +449,7 @@ class InputDuration extends HTMLElement {
|
|
|
455
449
|
var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
|
|
456
450
|
|
|
457
451
|
|
|
458
|
-
if (value.length === 2) {
|
|
452
|
+
if (newV && value.length === 2) {
|
|
459
453
|
|
|
460
454
|
mE.querySelector('input.sM').focus();
|
|
461
455
|
mE.querySelector('input.sM').select();
|
|
@@ -472,7 +466,7 @@ class InputDuration extends HTMLElement {
|
|
|
472
466
|
|
|
473
467
|
var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
|
|
474
468
|
|
|
475
|
-
if (value > 5 || value.length === 2) {
|
|
469
|
+
if (newV && (value > 5 || value.length === 2)) {
|
|
476
470
|
|
|
477
471
|
mE.querySelector('input.sS').focus();
|
|
478
472
|
mE.querySelector('input.sS').select();
|
|
@@ -488,7 +482,7 @@ class InputDuration extends HTMLElement {
|
|
|
488
482
|
|
|
489
483
|
var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
|
|
490
484
|
|
|
491
|
-
if (value > 5 || value.length === 2) {
|
|
485
|
+
if (newV && (value > 5 || value.length === 2)) {
|
|
492
486
|
|
|
493
487
|
mE.querySelector('input.sMS').focus();
|
|
494
488
|
mE.querySelector('input.sMS').select();
|
|
@@ -506,7 +500,7 @@ class InputDuration extends HTMLElement {
|
|
|
506
500
|
var newV = /^([0-9]?|[0-9][0-9]?|[0-9][0-9][0-9]?)$/.test(value);
|
|
507
501
|
|
|
508
502
|
|
|
509
|
-
if (value.length === 3) {
|
|
503
|
+
if (newV && value.length === 3) {
|
|
510
504
|
|
|
511
505
|
mE.querySelector('input.sMS').blur();
|
|
512
506
|
|
|
@@ -643,6 +637,8 @@ class InputDuration extends HTMLElement {
|
|
|
643
637
|
// end class
|
|
644
638
|
|
|
645
639
|
|
|
646
|
-
|
|
640
|
+
customElements.define('input-duration', InputDuration);
|
|
641
|
+
|
|
642
|
+
export default InputDuration;
|
|
647
643
|
|
|
648
644
|
// an option is to make all above an IIFE
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "input-duration",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"author": "Stephan Luis <stephan@learnsense.org>",
|
|
5
|
-
"description": "
|
|
6
|
-
"browser": "
|
|
5
|
+
"description": "A JavaScript web component for entering durations up to 99 hours in a fixed HH:mm:ss.SSS format, with millisecond precision for countdown timers and elapsed time.",
|
|
6
|
+
"browser": "./index.js",
|
|
7
7
|
"module": "index.js",
|
|
8
8
|
"main": "index.js",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"scripts": {
|
|
11
|
-
"test": "
|
|
11
|
+
"test": "node --test Tests/inputDuration.test.js",
|
|
12
12
|
"build": "webpack && date '+%T'",
|
|
13
13
|
"devbuild": "webpack --mode=development && date '+%T'",
|
|
14
14
|
"start": "python3 -m http.server"
|
|
@@ -18,19 +18,29 @@
|
|
|
18
18
|
"url": "git+https://github.com/StephanLuis/input-duration.git"
|
|
19
19
|
},
|
|
20
20
|
"license": "ISC",
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"jsdom": "^26.1.0"
|
|
23
|
+
},
|
|
21
24
|
"bugs": {
|
|
22
25
|
"url": "https://github.com/StephanLuis/input-duration/issues"
|
|
23
26
|
},
|
|
24
27
|
"homepage": "https://github.com/StephanLuis/input-duration#readme",
|
|
25
28
|
"keywords": [
|
|
29
|
+
"javascript",
|
|
30
|
+
"duration input",
|
|
31
|
+
"time duration",
|
|
32
|
+
"countdown timer",
|
|
33
|
+
"elapsed time",
|
|
34
|
+
"millisecond",
|
|
35
|
+
"time input",
|
|
36
|
+
"web component",
|
|
26
37
|
"vanilla js",
|
|
27
38
|
"input",
|
|
28
39
|
"time",
|
|
29
40
|
"duration",
|
|
30
|
-
"webcomponent",
|
|
31
41
|
"hour",
|
|
32
42
|
"minute",
|
|
33
43
|
"second",
|
|
34
|
-
"
|
|
44
|
+
"milliseconds"
|
|
35
45
|
]
|
|
36
46
|
}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
# triggered on commit to rep
|
|
2
|
-
# triggers specific workflow in curl enpoint (that workflow needs workflow_disptach)
|
|
3
|
-
|
|
4
|
-
name: CommitToBSEndToEnd
|
|
5
|
-
|
|
6
|
-
# Controls when the action will run. Workflow runs when manually triggered using the UI
|
|
7
|
-
# or API.
|
|
8
|
-
on: push
|
|
9
|
-
|
|
10
|
-
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
|
|
11
|
-
jobs:
|
|
12
|
-
bump-pub:
|
|
13
|
-
runs-on: ubuntu-latest
|
|
14
|
-
steps:
|
|
15
|
-
- uses: actions/checkout@v3
|
|
16
|
-
- uses: actions/setup-node@v3
|
|
17
|
-
with:
|
|
18
|
-
node-version: 16
|
|
19
|
-
registry-url: https://registry.npmjs.org/
|
|
20
|
-
- run: npm ci
|
|
21
|
-
|
|
22
|
-
# bumps minor version
|
|
23
|
-
- run: echo "Token ${{ secrets.GITHUB_TOKEN }}"
|
|
24
|
-
- run: echo "Repo ${{ github.repository }}"
|
|
25
|
-
- run: echo "Head ${{ github.head_ref }}"
|
|
26
|
-
- run: npm version patch
|
|
27
|
-
- run: git push "https://${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}"
|
|
28
|
-
|
|
29
|
-
# publishes with credentials
|
|
30
|
-
- run: npm publish
|
|
31
|
-
env:
|
|
32
|
-
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
trigger-BStest:
|
|
38
|
-
runs-on: ubuntu-latest
|
|
39
|
-
steps:
|
|
40
|
-
|
|
41
|
-
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
|
|
42
|
-
- name: Trigger Tests
|
|
43
|
-
|
|
44
|
-
run: |
|
|
45
|
-
curl -L \
|
|
46
|
-
-X POST \
|
|
47
|
-
-H "Accept: application/vnd.github+json" \
|
|
48
|
-
-u "StephanLuis:${{secrets.PAT_KEY}}" \
|
|
49
|
-
-H "X-GitHub-Api-Version: 2022-11-28" \
|
|
50
|
-
https://api.github.com/repos/StephanLuis/BrowserStackSelenium/actions/workflows/78546395/dispatches \
|
|
51
|
-
-d '{"ref":"main"}'
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
name: Dev Version and Release
|
|
2
|
-
|
|
3
|
-
on:
|
|
4
|
-
push:
|
|
5
|
-
|
|
6
|
-
# exclude push for these files / dir
|
|
7
|
-
paths:
|
|
8
|
-
- '**.js'
|
|
9
|
-
- '!**.config.js'
|
|
10
|
-
- '!.github/**'
|
|
11
|
-
- '!Competitors/**'
|
|
12
|
-
- '!docs/**'
|
|
13
|
-
- '!readme/**'
|
|
14
|
-
|
|
15
|
-
env:
|
|
16
|
-
node_version: lts/*
|
|
17
|
-
new_version: patch
|
|
18
|
-
|
|
19
|
-
concurrency: # prevent concurrent releases
|
|
20
|
-
group: npm-bump
|
|
21
|
-
cancel-in-progress: true
|
|
22
|
-
|
|
23
|
-
jobs:
|
|
24
|
-
version_and_release:
|
|
25
|
-
runs-on: ubuntu-latest
|
|
26
|
-
outputs:
|
|
27
|
-
tagName: ${{ steps.npm-bump.outputs.release_tag }}
|
|
28
|
-
steps:
|
|
29
|
-
- uses: actions/checkout@v3
|
|
30
|
-
with:
|
|
31
|
-
# fetch full history so things like auto-changelog work properly
|
|
32
|
-
fetch-depth: 0
|
|
33
|
-
- name: Use Node.js ${{ env.node_version }}
|
|
34
|
-
uses: actions/setup-node@v3
|
|
35
|
-
with:
|
|
36
|
-
node-version: ${{ env.node_version }}
|
|
37
|
-
# setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token. REQUIRED
|
|
38
|
-
registry-url: 'https://registry.npmjs.org'
|
|
39
|
-
- run: npm i
|
|
40
|
-
- run: npm test
|
|
41
|
-
|
|
42
|
-
# https://github.com/marketplace/actions/npm-bump
|
|
43
|
-
- name: Version and publish to npm
|
|
44
|
-
id: npm-bump
|
|
45
|
-
uses: bcomnes/npm-bump@v2
|
|
46
|
-
with:
|
|
47
|
-
git_email: stephan@learnsense.org
|
|
48
|
-
git_username: ${{ github.actor }}
|
|
49
|
-
newversion: ${{ env.new_version }}
|
|
50
|
-
publish_cmd: npm publish --tag dev
|
|
51
|
-
push_version_commit: true # if your prePublishOnly step pushes git commits, you can omit this input or set it to false.
|
|
52
|
-
github_token: ${{ secrets.GITHUB_TOKEN }} # built in actions token. Passed tp gh-release if in use.
|
|
53
|
-
npm_token: ${{ secrets.NPM_TOKEN }} # user set secret token generated at npm
|
|
54
|
-
- run: echo ${{ steps.npm-bump.outputs.release_tag }}
|
|
55
|
-
|
|
56
|
-
# Trigger tests on BrowserStackSelenium repo
|
|
57
|
-
- name: Test
|
|
58
|
-
|
|
59
|
-
run: |
|
|
60
|
-
curl -L \
|
|
61
|
-
-X POST \
|
|
62
|
-
-H "Accept: application/vnd.github+json" \
|
|
63
|
-
-u "StephanLuis:${{secrets.PAT_KEY}}" \
|
|
64
|
-
-H "X-GitHub-Api-Version: 2022-11-28" \
|
|
65
|
-
https://api.github.com/repos/StephanLuis/BrowserStackSelenium/actions/workflows/79764882/dispatches \
|
|
66
|
-
-d '{"ref":"main"}'
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
# second commit
|
|
2
|
-
# from https://github.com/marketplace/actions/npm-bump
|
|
3
|
-
name: NPM Version and Release (npm-bump.yml)
|
|
4
|
-
|
|
5
|
-
on:
|
|
6
|
-
workflow_dispatch:
|
|
7
|
-
inputs:
|
|
8
|
-
newversion:
|
|
9
|
-
description: 'Semantic Version Bump Type (major minor patch)'
|
|
10
|
-
required: true
|
|
11
|
-
|
|
12
|
-
env:
|
|
13
|
-
node_version: lts/*
|
|
14
|
-
|
|
15
|
-
concurrency: # prevent concurrent releases
|
|
16
|
-
group: npm-bump
|
|
17
|
-
cancel-in-progress: true
|
|
18
|
-
|
|
19
|
-
jobs:
|
|
20
|
-
version_and_release:
|
|
21
|
-
runs-on: ubuntu-latest
|
|
22
|
-
outputs:
|
|
23
|
-
tagName: ${{ steps.npm-bump.outputs.release_tag }}
|
|
24
|
-
steps:
|
|
25
|
-
- uses: actions/checkout@v3
|
|
26
|
-
with:
|
|
27
|
-
# fetch full history so things like auto-changelog work properly
|
|
28
|
-
fetch-depth: 0
|
|
29
|
-
- name: Use Node.js ${{ env.node_version }}
|
|
30
|
-
uses: actions/setup-node@v3
|
|
31
|
-
with:
|
|
32
|
-
node-version: ${{ env.node_version }}
|
|
33
|
-
# setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token. REQUIRED
|
|
34
|
-
registry-url: 'https://registry.npmjs.org'
|
|
35
|
-
- run: npm i
|
|
36
|
-
- run: npm test
|
|
37
|
-
- name: Version and publish to npm
|
|
38
|
-
id: npm-bump
|
|
39
|
-
uses: bcomnes/npm-bump@v2
|
|
40
|
-
with:
|
|
41
|
-
git_email: bcomnes@gmail.com
|
|
42
|
-
git_username: ${{ github.actor }}
|
|
43
|
-
newversion: ${{ github.event.inputs.newversion }}
|
|
44
|
-
push_version_commit: true # if your prePublishOnly step pushes git commits, you can omit this input or set it to false.
|
|
45
|
-
github_token: ${{ secrets.GITHUB_TOKEN }} # built in actions token. Passed tp gh-release if in use.
|
|
46
|
-
npm_token: ${{ secrets.NPM_TOKEN }} # user set secret token generated at npm
|
|
47
|
-
- run: echo ${{ steps.npm-bump.outputs.release_tag }}
|