input-duration 2.0.11 → 2.1.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.
Files changed (6) hide show
  1. package/README.md +8 -8
  2. package/docs/InputDuration.html +1249 -0
  3. package/docs/index.html +3 -4
  4. package/docs/index.js.html +660 -0
  5. package/index.js +397 -497
  6. package/package.json +14 -3
package/index.js CHANGED
@@ -1,186 +1,226 @@
1
- class ChronlyHMS extends HTMLElement {
2
- constructor() {
3
-
4
- super();
1
+ /**
2
+ * Class for the Input-Duration webcomponent
3
+ * @class InputDuration
4
+ * @extends HTMLElement
5
+ */
5
6
 
6
- this.myElement = this.attachShadow({ mode: 'open' });
7
+ class InputDuration extends HTMLElement {
8
+ constructor() {
7
9
 
10
+ super();
8
11
 
9
- // needed for setting inputs when value attribute is added to chronlyHMS
10
- // <chronly-hms id="bobPrepop" value="99:09:09.999"></chronly-hms>
12
+ this.myElement = this.attachShadow({ mode: 'open' });
11
13
 
12
- this.value = this.getAttribute('value');
14
+ // needed for setting inputs when value attribute is added to chronlyHMS
15
+ // <chronly-hms id="bobPrepop" value="99:09:09.999"></chronly-hms>
13
16
 
17
+ this.value = this.getAttribute('value');
14
18
 
15
- this.boot();
19
+ this.boot();
16
20
 
21
+ } // end constructor
17
22
 
18
- } // end constructor
19
23
 
20
- get value() {
24
+ /**
25
+ * get the input-duration value, pulls values from each input
26
+ * so in js use var x = document.querySelector("#bobPrepop").value;
27
+ * @return {duration}
28
+ */
21
29
 
22
- // return this.getAttribute('value');
30
+ get value() {
23
31
 
24
- if (this.myElement.querySelector('input[name="startHours"]') !== null) {
32
+ // return this.getAttribute('value');
25
33
 
26
- return this.myElement.querySelector('input[name="startHours"]').value +
27
- ':' + this.myElement.querySelector('input[name="startMinutes"]').value +
28
- ':' + this.myElement.querySelector('input[name="startSeconds"]').value +
29
- '.' + this.myElement.querySelector('input[name="startMilliSecs"]').value;
34
+ if (this.myElement.querySelector('input[name="startHours"]') !== null) {
30
35
 
31
- }
32
- else {
36
+ return this.myElement.querySelector('input[name="startHours"]').value +
37
+ ':' + this.myElement.querySelector('input[name="startMinutes"]').value +
38
+ ':' + this.myElement.querySelector('input[name="startSeconds"]').value +
39
+ '.' + this.myElement.querySelector('input[name="startMilliSecs"]').value;
33
40
 
34
- return null;
41
+ }
42
+ else {
35
43
 
36
- }
37
- }
44
+ return null;
38
45
 
39
- set value(val) {
46
+ }
47
+ }
40
48
 
41
- // for setting the value in js (like document.querySelector("#bobPrepop").value = "05:05:05.005")
42
- if (val) {
43
49
 
50
+ /**
51
+ * set the input-duration value
52
+ * so in js use document.querySelector("#bobPrepop").value = "05:05:05.005"
53
+ * @return {duration}
54
+ * @param {duration} can be html attribute or set in js
55
+ */
44
56
 
45
- console.log(val);
57
+ set value(val) {
46
58
 
59
+ // for setting the value in js (like document.querySelector("#bobPrepop").value = "05:05:05.005")
60
+ if (val) {
47
61
 
48
- if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(val)) {
49
62
 
63
+ console.log(val);
50
64
 
51
- // split val
52
65
 
53
- var timeArray = val.split(/[.:]+/);
66
+ if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(val)) {
54
67
 
55
- console.log('time array is ' + timeArray[0] + ':' + timeArray[1] + ':' + timeArray[2] + ':' + timeArray[3]);
56
68
 
57
- console.log('this.id = ' + this.id);
69
+ // split val
58
70
 
59
- setTimeout(() => {
71
+ var timeArray = val.split(/[.:]+/);
60
72
 
61
- this.myElement.querySelector('input[name="startHours"]').value = timeArray[0];
62
- this.myElement.querySelector('input[name="startMinutes"]').value = timeArray[1];
63
- this.myElement.querySelector('input[name="startSeconds"]').value = timeArray[2];
64
- this.myElement.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
65
- }, 0);
73
+ console.log('time array is ' + timeArray[0] + ':' + timeArray[1] + ':' + timeArray[2] + ':' + timeArray[3]);
66
74
 
75
+ console.log('this.id = ' + this.id);
67
76
 
77
+ setTimeout(() => {
68
78
 
69
- this.setAttribute('value', val);
79
+ this.myElement.querySelector('input[name="startHours"]').value = timeArray[0];
80
+ this.myElement.querySelector('input[name="startMinutes"]').value = timeArray[1];
81
+ this.myElement.querySelector('input[name="startSeconds"]').value = timeArray[2];
82
+ this.myElement.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
70
83
 
71
- }
72
- else {
84
+ }, 0);
73
85
 
74
- 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.`);
75
86
 
76
- }
87
+ this.setAttribute('value', val);
77
88
 
78
- // I think this is for empty string to clear value
79
- // gives a False bool and removes value from Webcomponent chronlyHMS
80
- } else {
89
+ }
81
90
 
91
+ else {
82
92
 
83
- setTimeout(() => {
93
+ 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.`);
84
94
 
85
- this.myElement.querySelector('input[name="startHours"]').value = '00';
86
- this.myElement.querySelector('input[name="startMinutes"]').value = '00';
87
- this.myElement.querySelector('input[name="startSeconds"]').value = '00';
88
- this.myElement.querySelector('input[name="startMilliSecs"]').value = '000';
95
+ }
89
96
 
90
- }, 0);
97
+ // I think this is for empty string to clear value
98
+ // gives a False bool and removes value from Webcomponent chronlyHMS
91
99
 
100
+ } else {
92
101
 
93
- this.removeAttribute('value');
94
- }
95
- }
102
+ setTimeout(() => {
96
103
 
97
- /**
98
- * eventlistener that adds arrow key input of values (up/down) and place toggling (left/right) triggered by
99
- * the change event of the input
100
- * @method
101
- * @see boot()
102
- */
104
+ this.myElement.querySelector('input[name="startHours"]').value = '00';
105
+ this.myElement.querySelector('input[name="startMinutes"]').value = '00';
106
+ this.myElement.querySelector('input[name="startSeconds"]').value = '00';
107
+ this.myElement.querySelector('input[name="startMilliSecs"]').value = '000';
103
108
 
104
- addArrowKeyInput() {
109
+ }, 0);
105
110
 
111
+ this.removeAttribute('value');
106
112
 
107
- console.log('1 this: ' + this);
108
- console.log('1 this.myElement: ' + this.myElement);
109
- console.log('1 this.myElement active: ' + this.myElement);
113
+ }
114
+ }
110
115
 
111
- var mE = this.myElement;
112
116
 
113
- // Left and Right arrow key toggle between HMSmS
114
- // this depends on data-attributes ex. data-tp="1" in HTML
117
+ /**
118
+ * Called from constructor, sets up the html and event listeners
119
+ * @method
120
+ */
115
121
 
116
- this.myElement.querySelector("div.timeCase")
117
- .addEventListener('keydown', function (event) {
122
+ boot() {
118
123
 
119
- var et = event.target;
120
- var tp_active = mE.activeElement.dataset.tp;
124
+ this.addHTML();
121
125
 
122
- switch (true) {
126
+ // // set up event listeners
127
+ this.add0s();
128
+ this.addNumberLooping();
129
+ this.addArrowKeyInput();
130
+ this.addNumericInput();
131
+ this.addClicksToActivate();
132
+ this.nonNumericBugInHTML();
123
133
 
124
- case event.key == "ArrowLeft":
134
+ }
125
135
 
126
- if (tp_active >= 2) {
127
- tp_active--;
128
- }
129
136
 
130
- et.parentElement.querySelector("[data-tp='" + tp_active + "']").focus();
131
- setTimeout(function () { et.parentElement.querySelector("[data-tp='" + tp_active + "']").select(); }, 5);
137
+ /**
138
+ * eventlistener that adds arrow key input of values (up/down) and place toggling (left/right) triggered by
139
+ * the change event of the input
140
+ * @method
141
+ * @see boot()
142
+ */
132
143
 
133
- break;
144
+ addArrowKeyInput() {
134
145
 
135
- case event.key == "ArrowRight":
136
- // tp_active = this.myElement.shadowRoot.activeElement.dataset.tp;
146
+ console.log('1 this: ' + this);
147
+ console.log('1 this.myElement: ' + this.myElement);
148
+ console.log('1 this.myElement active: ' + this.myElement);
137
149
 
138
- if (tp_active <= 3) {
139
- tp_active++;
140
- }
150
+ var mE = this.myElement;
141
151
 
142
- et.parentElement.querySelector("[data-tp='" + tp_active + "']").focus();
143
- setTimeout(function () { et.parentElement.querySelector("[data-tp='" + tp_active + "']").select(); }, 5);
152
+ // Left and Right arrow key toggle between HMSmS
153
+ // this depends on data-attributes ex. data-tp="1" in HTML
144
154
 
145
- break;
155
+ this.myElement.querySelector("div.timeCase")
156
+ .addEventListener('keydown', function (event) {
146
157
 
147
- // these keep the input selected
148
- case event.key == "ArrowUp":
158
+ var et = event.target;
159
+ var tp_active = mE.activeElement.dataset.tp;
149
160
 
150
- setTimeout(function () { mE.activeElement.select(); }, 5);
161
+ switch (true) {
151
162
 
152
- break;
163
+ case event.key == "ArrowLeft":
153
164
 
154
- case event.key == "ArrowDown":
165
+ if (tp_active >= 2) {
166
+ tp_active--;
167
+ }
155
168
 
156
- setTimeout(function () { mE.activeElement.select(); }, 5);
169
+ et.parentElement.querySelector("[data-tp='" + tp_active + "']").focus();
170
+ setTimeout(function () { et.parentElement.querySelector("[data-tp='" + tp_active + "']").select(); }, 5);
157
171
 
158
- break;
172
+ break;
159
173
 
160
- // this is good for testing, to determine whether a key press is detected
161
- case /^([0-9]?)$/.test(event.key):
174
+ case event.key == "ArrowRight":
175
+ // tp_active = this.myElement.shadowRoot.activeElement.dataset.tp;
162
176
 
163
- break;
177
+ if (tp_active <= 3) {
178
+ tp_active++;
179
+ }
164
180
 
165
- }
166
- });
167
- }
181
+ et.parentElement.querySelector("[data-tp='" + tp_active + "']").focus();
182
+ setTimeout(function () { et.parentElement.querySelector("[data-tp='" + tp_active + "']").select(); }, 5);
168
183
 
169
- /**
170
- * used by boot() to update inputs marked with data-univHMS
171
- * @method
172
- * @see boot()
173
- */
184
+ break;
174
185
 
175
- addHTML() {
186
+ // these keep the input selected
187
+ case event.key == "ArrowUp":
176
188
 
177
- var spanIn = document.createElement("div");
189
+ setTimeout(function () { mE.activeElement.select(); }, 5);
178
190
 
179
- spanIn.classList.add('timeCase');
191
+ break;
180
192
 
181
- var template = document.createElement('template');
193
+ case event.key == "ArrowDown":
182
194
 
183
- template.innerHTML = `
195
+ setTimeout(function () { mE.activeElement.select(); }, 5);
196
+
197
+ break;
198
+
199
+ // this is good for testing, to determine whether a key press is detected
200
+ case /^([0-9]?)$/.test(event.key):
201
+
202
+ break;
203
+
204
+ }
205
+ });
206
+ }
207
+
208
+
209
+ /**
210
+ * updates inputs-duration marked with shadow html and css
211
+ * @method
212
+ * @see boot()
213
+ */
214
+
215
+ addHTML() {
216
+
217
+ var spanIn = document.createElement("div");
218
+
219
+ spanIn.classList.add('timeCase');
220
+
221
+ var template = document.createElement('template');
222
+
223
+ template.innerHTML = `
184
224
  <input id="inShadow" type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
185
225
  <span class="bds-h">:</span>
186
226
  <input type="number" class="sM D2 ts_digit" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
@@ -196,515 +236,375 @@ class ChronlyHMS extends HTMLElement {
196
236
  </svg>
197
237
  </div>
198
238
  <style>
199
- *:focus {
200
- outline: none;
201
- }
202
-
203
-
204
- div.timeCase{
205
- display: inline-flex;
206
- flex-direction: row;
207
- max-width: 300px;
208
- padding: 3px;
209
- border-style: solid;
210
- border-width: 1px;
211
- border-radius: 2px;
212
- }
213
-
214
-
215
- /* Each input width set and blinking cursor 'caret' removed */
216
- div.timeCase input{
217
- caret-color: transparent;
218
- width: 15px;
219
- padding-top:1px;
220
- }
221
-
222
-
223
- div.timeCase .D3{
224
- width: 25px;
225
- }
226
-
227
-
228
- /* Hiding the up and down arrow */
229
- /*https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/
230
- /* Chrome, Safari, Edge, Opera */
231
-
232
- input::-webkit-outer-spin-button,
233
- input::-webkit-inner-spin-button {
234
- -webkit-appearance: none;
235
- margin: 0;
236
- }
237
-
238
-
239
- /* Firefox */
240
-
241
- input[type=number] {
242
- /* -moz-appearance: textfield; */
243
- -moz-appearance: textarea;
244
- -webkit-appearance: textarea;
245
- }
246
-
247
-
248
- div.timeCase:focus-within {
249
- border: 2px solid black;
250
- padding: 2px;
251
- }
252
-
253
-
254
- .ts_digit {
255
- border: none;
256
- }
257
-
258
- /* between digit span */
259
- .bds{
260
- padding-bottom: 1px;
261
- }
262
-
263
- #svgContainer {
264
- width: 12px;
265
- height: 12px;
266
- padding-top: 1px;
267
- padding-right: 2px;
268
- color: black;
269
- }
270
-
271
- *:disabled {
272
- background-color: grey;
273
- color: lightgrey;
274
- opacity: .6;
275
- }
276
- </style> `
277
-
278
- spanIn.appendChild(template.content);
279
-
280
-
281
- // const chronlyCssLink = document.createElement('link');
282
- // let link = document.createElement('link');
283
- // chronlyCssLink.setAttribute('rel', 'stylesheet');
284
- // chronlyCssLink.setAttribute('href', 'chronlyWebComponent.css');
285
-
286
-
287
-
288
-
289
-
239
+ *:focus {
240
+ outline: none;
241
+ }
290
242
 
291
- this.myElement.appendChild(spanIn);
292
243
 
293
- // this.myElement.appendChild(chronlyCssLink);
244
+ div.timeCase{
245
+ display: inline-flex;
246
+ flex-direction: row;
247
+ max-width: 300px;
248
+ padding: 3px;
249
+ border-style: solid;
250
+ border-width: 1px;
251
+ border-radius: 2px;
252
+ }
294
253
 
295
- }
296
254
 
255
+ /* Each input width set and blinking cursor 'caret' removed */
256
+ div.timeCase input{
257
+ caret-color: transparent;
258
+ width: 15px;
259
+ padding-top:1px;
260
+ }
297
261
 
298
- /**
299
- * eventlistener that adds number looping for up and down keys triggered by
300
- * the change event of the input
301
- * @method
302
- * @see boot()
303
- */
304
262
 
305
- addNumberLooping() {
263
+ div.timeCase .D3{
264
+ width: 25px;
265
+ }
306
266
 
307
- // Numeric Value looping (eventually this can be 'parameterised' refactored)
308
- // ex. 99 uparrow to 0 hours, 59 uparrow to 0 minutes and seconds, 990 uparrow to 010, downarrow 000 milliseconds
309
267
 
310
- const sH = this.myElement.querySelector("input.sH");
311
- sH.addEventListener('change', function (event) {
268
+ /* Hiding the up and down arrow */
269
+ /*https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/
270
+ /* Chrome, Safari, Edge, Opera */
312
271
 
313
- if (sH.value == 100) {
314
- sH.value = '00';
315
- }
316
- if (sH.value == -1) {
317
- sH.value = 99;
318
- }
272
+ input::-webkit-outer-spin-button,
273
+ input::-webkit-inner-spin-button {
274
+ -webkit-appearance: none;
275
+ margin: 0;
276
+ }
319
277
 
320
- });
321
278
 
322
- const sM = this.myElement.querySelector("input.sM");
323
- sM.addEventListener('change', function (event) {
279
+ /* Firefox */
324
280
 
325
- if (sM.value == 60) {
326
- sM.value = '00';
327
- }
328
- if (sM.value == -1) {
329
- sM.value = 59;
330
- }
281
+ input[type=number] {
282
+ /* -moz-appearance: textfield; */
283
+ -moz-appearance: textarea;
284
+ -webkit-appearance: textarea;
285
+ }
331
286
 
332
- });
333
287
 
334
- const sS = this.myElement.querySelector("input.sS");
335
- sS.addEventListener('change', function (event) {
288
+ div.timeCase:focus-within {
289
+ border: 2px solid black;
290
+ padding: 2px;
291
+ }
336
292
 
337
- if (sS.value == 60) {
338
- sS.value = '00';
339
- }
340
293
 
341
- if (sS.value == -1) {
342
- sS.value = 59;
343
- }
294
+ .ts_digit {
295
+ border: none;
296
+ }
344
297
 
345
- });
298
+ /* between digit span */
299
+ .bds{
300
+ padding-bottom: 1px;
301
+ }
346
302
 
303
+ #svgContainer {
304
+ width: 12px;
305
+ height: 12px;
306
+ padding-top: 1px;
307
+ padding-right: 2px;
308
+ color: black;
309
+ }
347
310
 
348
- const sMS = this.myElement.querySelector("input.sMS");
349
- sMS.addEventListener('change', function (event) {
311
+ *:disabled {
312
+ background-color: grey;
313
+ color: lightgrey;
314
+ opacity: .6;
315
+ }
316
+ </style> `
350
317
 
351
- if (sMS.value == 1000) {
352
- sMS.value = "010";
353
- }
318
+ spanIn.appendChild(template.content);
354
319
 
355
- if (sMS.value == -10) {
356
- sMS.value = 990;
357
- }
320
+ this.myElement.appendChild(spanIn);
358
321
 
359
- if (sMS.value == 0) {
360
- }
322
+ }
361
323
 
362
- });
363
- }
364
324
 
365
- addNumericInput() {
325
+ /**
326
+ * eventlistener that adds number looping for up and down keys triggered by
327
+ * the change event of the input
328
+ * @method
329
+ * @see boot()
330
+ */
366
331
 
367
- const mE = this.myElement;
332
+ addNumberLooping() {
368
333
 
369
- // https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
370
- // Digit input 0-9 (typed in by user)
334
+ // Numeric Value looping (eventually this can be 'parameterised' refactored)
335
+ // ex. 99 uparrow to 0 hours, 59 uparrow to 0 minutes and seconds, 990 uparrow to 010, downarrow 000 milliseconds
371
336
 
372
- function setInputFilter(inputElement, inputFilter) {
373
- // this sets a listener and immediately updates the value of the input number (note: can update this from input text, like by removing setSelectionRange )
337
+ const sH = this.myElement.querySelector("input.sH");
338
+ sH.addEventListener('change', function (event) {
374
339
 
375
- console.log('inputElement: ' + inputElement);
376
- window.inputElement = inputElement;
340
+ if (sH.value == 100) {
341
+ sH.value = '00';
342
+ }
343
+ if (sH.value == -1) {
344
+ sH.value = 99;
345
+ }
377
346
 
378
- inputElement.addEventListener('keyup', function (event) {
347
+ });
379
348
 
380
- window.kue = event;
349
+ const sM = this.myElement.querySelector("input.sM");
350
+ sM.addEventListener('change', function (event) {
381
351
 
382
- if (/^([0-9]?)$/.test(event.key)) {
383
- if (inputFilter(this.value)) {
384
- this.oldValue = this.value;
385
- this.oldSelectionStart = this.selectionStart;
386
- this.oldSelectionEnd = this.selectionEnd;
387
- } else if (this.hasOwnProperty("oldValue")) {
388
- this.value = this.oldValue;
389
- // this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
390
- } else {
391
- this.value = "";
392
- }
393
- }
394
- });
395
- }
352
+ if (sM.value == 60) {
353
+ sM.value = '00';
354
+ }
355
+ if (sM.value == -1) {
356
+ sM.value = 59;
357
+ }
396
358
 
359
+ });
397
360
 
398
- // three boxes, hours or minutes and seconds (are the same) but milliseconds is different
361
+ const sS = this.myElement.querySelector("input.sS");
362
+ sS.addEventListener('change', function (event) {
399
363
 
400
- // sH
401
- var sH = this.myElement.querySelector('input.sH');
364
+ if (sS.value == 60) {
365
+ sS.value = '00';
366
+ }
402
367
 
403
- setInputFilter(sH, function (value) {
368
+ if (sS.value == -1) {
369
+ sS.value = 59;
370
+ }
404
371
 
405
- var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
372
+ });
406
373
 
374
+ const sMS = this.myElement.querySelector("input.sMS");
375
+ sMS.addEventListener('change', function (event) {
407
376
 
408
- if (value.length === 2) {
377
+ if (sMS.value == 1000) {
378
+ sMS.value = "010";
379
+ }
409
380
 
410
- mE.querySelector('input.sM').focus();
411
- mE.querySelector('input.sM').select();
381
+ if (sMS.value == -10) {
382
+ sMS.value = 990;
383
+ }
412
384
 
413
- }
385
+ if (sMS.value == 0) {
386
+ }
414
387
 
415
- return newV;
388
+ });
389
+ }
416
390
 
417
- });
418
391
 
419
- var sM = this.myElement.querySelector('input.sM');
420
- setInputFilter(sM, function (value) {
392
+ /**
393
+ * eventlistener that adds number input for keyed values triggered by the keyup event
394
+ * @method
395
+ * @see boot()
396
+ */
421
397
 
398
+ addNumericInput() {
422
399
 
423
- var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
400
+ const mE = this.myElement;
424
401
 
425
- if (value > 5 || value.length === 2) {
402
+ // https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
403
+ // Digit input 0-9 (typed in by user)
426
404
 
427
- mE.querySelector('input.sS').focus();
428
- mE.querySelector('input.sS').select();
405
+ function setInputFilter(inputElement, inputFilter) {
406
+ // this sets a listener and immediately updates the value of the input number (note: can update this from input text, like by removing setSelectionRange )
429
407
 
430
- }
408
+ console.log('inputElement: ' + inputElement);
409
+ window.inputElement = inputElement;
431
410
 
432
- return newV;
411
+ inputElement.addEventListener('keyup', function (event) {
433
412
 
434
- });
413
+ window.kue = event;
435
414
 
436
- var sS = this.myElement.querySelector('input.sS');
437
- setInputFilter(sS, function (value) {
415
+ if (/^([0-9]?)$/.test(event.key)) {
416
+ if (inputFilter(this.value)) {
417
+ this.oldValue = this.value;
418
+ this.oldSelectionStart = this.selectionStart;
419
+ this.oldSelectionEnd = this.selectionEnd;
420
+ } else if (this.hasOwnProperty("oldValue")) {
421
+ this.value = this.oldValue;
422
+ // this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
423
+ } else {
424
+ this.value = "";
425
+ }
426
+ }
427
+ });
428
+ }
438
429
 
439
- var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
430
+ // three filters, hours or minutes and seconds (are the same) but milliseconds is different
440
431
 
441
- if (value > 5 || value.length === 2) {
432
+ var sH = this.myElement.querySelector('input.sH');
442
433
 
443
- mE.querySelector('input.sMS').focus();
444
- mE.querySelector('input.sMS').select();
434
+ setInputFilter(sH, function (value) {
445
435
 
446
- }
436
+ var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
447
437
 
448
- return newV;
449
438
 
450
- });
439
+ if (value.length === 2) {
451
440
 
441
+ mE.querySelector('input.sM').focus();
442
+ mE.querySelector('input.sM').select();
452
443
 
453
- var sMS = this.myElement.querySelector('input.sMS');
454
- setInputFilter(sMS, function (value) {
444
+ }
455
445
 
456
- var newV = /^([0-9]?|[0-9][0-9]?|[0-9][0-9][0-9]?)$/.test(value);
446
+ return newV;
457
447
 
448
+ });
458
449
 
459
- if (value.length === 3) {
450
+ var sM = this.myElement.querySelector('input.sM');
451
+ setInputFilter(sM, function (value) {
460
452
 
461
- mE.querySelector('input.sMS').blur();
462
453
 
463
- }
454
+ var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
464
455
 
465
- return newV;
456
+ if (value > 5 || value.length === 2) {
466
457
 
467
- });
458
+ mE.querySelector('input.sS').focus();
459
+ mE.querySelector('input.sS').select();
468
460
 
469
- }
461
+ }
470
462
 
463
+ return newV;
471
464
 
472
- /**
473
- * each time Chronly is newed up, the constructor uses checkBoot() to
474
- * 1) check for an existing window.ChronlyFlag if there is one
475
- * 2) clear events a) named events, b) remove
476
- * 3) add events
477
- * @method
478
- */
465
+ });
479
466
 
480
- checkBoot() {
467
+ var sS = this.myElement.querySelector('input.sS');
468
+ setInputFilter(sS, function (value) {
481
469
 
482
- this.boot();
470
+ var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
483
471
 
472
+ if (value > 5 || value.length === 2) {
484
473
 
485
- // if (window.ChronlyFlag) {
486
- // this.reboot();
487
- // }
488
- // else {
489
- // this.boot();
490
- // }
491
- }
474
+ mE.querySelector('input.sMS').focus();
475
+ mE.querySelector('input.sMS').select();
492
476
 
477
+ }
493
478
 
479
+ return newV;
494
480
 
495
- /**
496
- * used by checkBoot() and externally exposed for user
497
- * @method
498
- *
499
- */
481
+ });
500
482
 
501
- boot() {
502
483
 
503
- this.addHTML();
504
- // this.addCSS();
505
- this.blockNonNumberInput();
484
+ var sMS = this.myElement.querySelector('input.sMS');
485
+ setInputFilter(sMS, function (value) {
506
486
 
507
- // // set up event listeners
508
- this.add0s();
509
- this.addNumberLooping();
510
- this.addArrowKeyInput();
511
- this.addNumericInput();
512
- this.addClicksToActivate();
513
- this.nonNumericBugInHTML();
514
- // this.updatePrototype();
487
+ var newV = /^([0-9]?|[0-9][0-9]?|[0-9][0-9][0-9]?)$/.test(value);
515
488
 
516
489
 
517
- /**
518
- * window.ChronlyFlag declared here
519
- * @global
520
- */
521
- // this.ChronlyFlag = true;
522
- }
490
+ if (value.length === 3) {
523
491
 
492
+ mE.querySelector('input.sMS').blur();
524
493
 
494
+ }
525
495
 
526
- disable() {
496
+ return newV;
527
497
 
498
+ });
499
+ }
528
500
 
529
- var closure = this;
530
501
 
502
+ /**
503
+ * eventlistener that adds 0s to preface numbers less than 10 triggered by
504
+ * the change event of the input
505
+ * @method
506
+ * @see boot()
507
+ */
531
508
 
532
- // disable chronly inputs on page
509
+ add0s() {
533
510
 
534
- closure.shadowRoot.querySelectorAll(".timeCase input").forEach(el => el.disabled = 'true')
511
+ // input for hours, minutes, seconds
512
+ this.myElement.querySelectorAll('input').forEach(i => i.addEventListener('change', function () {
513
+ if (!isNaN(this.value) && this.value.length === 1) {
514
+ this.value = '0' + this.value;
515
+ }
516
+ }));
535
517
 
518
+ // milliseconds
519
+ this.myElement.querySelectorAll("input.sMS").forEach(i => i.addEventListener('change', function () {
536
520
 
537
- }
521
+ if (!isNaN(this.value) && this.value.length === 2) {
522
+ this.value = '0' + this.value;
523
+ }
538
524
 
539
- /**
540
- * method adds the necessary CSS
541
- * @method
542
- * @see boot()
543
- * /
544
-
545
- addCSS(){
525
+ }));
546
526
 
547
- }
527
+ }
528
+
548
529
 
530
+ /**
531
+ * eventlistener that adds click to activate input of values by the keyboard triggered by
532
+ * the click event of the input
533
+ * @method
534
+ * @see boot()
535
+ */
549
536
 
550
- /**
551
- * eventlistener that adds 0s to preface numbers less than 10 triggered by
552
- * the change event of the input
553
- * @method
554
- * @see boot()
555
- */
537
+ addClicksToActivate() {
556
538
 
557
- add0s() {
539
+ this.myElement.querySelectorAll('input').forEach(i => i.addEventListener("click", function () { this.select(); }))
540
+ }
558
541
 
559
- // input for hours, minutes, seconds
560
- this.myElement.querySelectorAll('input').forEach(i => i.addEventListener('change', function () {
561
- if (!isNaN(this.value) && this.value.length === 1) {
562
- this.value = '0' + this.value;
563
- }
564
- }));
565
542
 
566
- // milliseconds
567
- this.myElement.querySelectorAll("input.sMS").forEach(i => i.addEventListener('change', function () {
543
+ /**
544
+ * eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by
545
+ * the keypress event of the input
546
+ * @method
547
+ * @see boot()
548
+ */
568
549
 
569
- if (!isNaN(this.value) && this.value.length === 2) {
570
- this.value = '0' + this.value;
571
- }
550
+ nonNumericBugInHTML() {
572
551
 
573
- }));
552
+ this.myElement.querySelectorAll(".timeCase input").forEach(item =>
574
553
 
575
- }
554
+ item.addEventListener('keypress', function (e) {
576
555
 
556
+ e = e || window.event;
557
+ var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
558
+ var charStr = String.fromCharCode(charCode);
577
559
 
578
- // this needs to be updated or removed, test
560
+ if (!charStr.match(/^[0-9]+$/))
561
+ e.preventDefault();
579
562
 
580
- blockNonNumberInput() {
563
+ }));
564
+ }
581
565
 
582
- document.querySelectorAll(".timeCase input").forEach(item =>
583
566
 
584
- item.addEventListener('keypress', function (e) {
567
+ // formatting and behaviour options
585
568
 
586
- e = e || window.event;
587
- var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
588
- var charStr = String.fromCharCode(charCode);
569
+ /**
570
+ * disables entire control => read-only
571
+ * @method
572
+ */
589
573
 
590
- if (!charStr.match(/^[0-9]+$/))
591
- e.preventDefault();
574
+ disable() {
592
575
 
593
- }));
594
- }
576
+ var closure = this;
595
577
 
578
+ // disable chronly inputs on page
596
579
 
597
- // second idea is to update prototype of ChronlyInputElement (class)
580
+ closure.shadowRoot.querySelectorAll(".timeCase input").forEach(el => el.disabled = 'true')
598
581
 
599
- updatePrototype() {
582
+ }
600
583
 
601
584
 
602
- ChronlyHMSElement.prototype.__defineGetter__('value', function () {
585
+ /**
586
+ * removes the hours, so the display is mm:ss.uuu
587
+ * @method
588
+ */
603
589
 
604
- if (this.myElement.querySelector('input[name="startHours"]') !== null) {
590
+ noHours() {
605
591
 
606
- return this.myElement.querySelector('input[name="startHours"]').value +
607
- ':' + this.myElement.querySelector('input[name="startMinutes"]').value +
608
- ':' + this.myElement.querySelector('input[name="startSeconds"]').value +
609
- '.' + this.myElement.querySelector('input[name="startMilliSecs"]').value;
592
+ var closure = this;
610
593
 
611
- }
612
- else {
594
+ // hide chronly hours inputs on page
613
595
 
614
- return null;
596
+ closure.shadowRoot.querySelectorAll(".timeCase input.sH").forEach(el => el.style.display = 'none');
615
597
 
616
- }
617
- });
618
598
 
599
+ // hide the hours colon on page
619
600
 
601
+ closure.shadowRoot.querySelectorAll(".timeCase span.bds-h").forEach(el => el.style.display = 'none');
620
602
 
621
- ChronlyHMSElement.prototype.__defineSetter__('value', function (timeString) {
622
-
623
- // will need warning about timeString format (like input type='time')
624
-
625
- if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(timeString)) {
626
-
627
- // split val
628
-
629
- var timeArray = timeString.split(/[.:]+/);
630
-
631
- this.myElement.querySelector('input[name="startHours"]').value = timeArray[0];
632
- this.myElement.querySelector('input[name="startMinutes"]').value = timeArray[1];
633
- this.myElement.querySelector('input[name="startSeconds"]').value = timeArray[2];
634
- this.myElement.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
635
-
636
- }
637
- else {
638
-
639
- console.warn(`The specified value ${timeString} 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.`);
640
-
641
- }
642
-
643
- });
644
- }
645
-
646
- /**
647
- * eventlistener that adds click to activate input of values by the keyboard triggered by
648
- * the click event of the input
649
- * @method
650
- * @see boot()
651
- */
652
-
653
- addClicksToActivate() {
654
-
655
- this.myElement.querySelectorAll('input').forEach(i => i.addEventListener("click", function () { this.select(); }))
656
- }
657
-
658
-
659
- noHours() {
660
-
661
- var closure = this;
662
-
663
- // hide chronly hours inputs on page
664
-
665
- closure.shadowRoot.querySelectorAll(".timeCase input.sH").forEach(el => el.style.display = 'none');
666
-
667
-
668
- // hide the hours colon on page
669
-
670
- closure.shadowRoot.querySelectorAll(".timeCase span.bds-h").forEach(el => el.style.display = 'none');
671
-
672
- }
673
-
674
-
675
-
676
-
677
-
678
-
679
-
680
- /**
681
- * eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by
682
- * the keypress event of the input
683
- * @method
684
- * @see boot()
685
- */
686
-
687
- nonNumericBugInHTML() {
688
-
689
- this.myElement.querySelectorAll(".timeCase input").forEach(item =>
690
-
691
- item.addEventListener('keypress', function (e) {
692
-
693
- e = e || window.event;
694
- var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
695
- var charStr = String.fromCharCode(charCode);
696
-
697
- if (!charStr.match(/^[0-9]+$/))
698
- e.preventDefault();
699
-
700
- }));
701
-
702
- }
703
-
704
-
705
- } // end class
603
+ }
604
+ }
605
+ // end class
706
606
 
707
607
 
708
- // page script (try making this auto instantiate in module like PM does)
608
+ export default customElements.define('input-duration', InputDuration);
709
609
 
710
- export default customElements.define('chronly-hms', ChronlyHMS);
610
+ // an option is to make all above an IIFE