input-duration 2.0.12 → 2.1.1

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