Skip to content

Commit ec140a4

Browse files
author
Daniel Tonon
committed
Merge branch 'develop'
2 parents 00ec7d2 + 4dbc3b3 commit ec140a4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1140
-1030
lines changed

‎README.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,23 @@
44

55
An accessible polyfill for `<input type='time'/>` elements.
66

7-
- ✔️ Modeled after the Chrome and Firefox desktop implementations.
7+
- ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.
88
- ✔️ Fully keyboard and screen reader accessible.
9-
- ✔️ Submits the same values to servers as real time inputs.
9+
- ✔️ Submits the same values to servers as real time inputs (24 hour time).
1010
- ✔️ Only downloads the full polyfill code in the browsers that need it.
1111
- ✔️ Zero dependencies.
1212

1313
Demo available here: https://dan503.github.io/time-input-polyfill/
1414

1515
**Note:** If the recommended version in this documentation is out of sync with the npm version, this is because npm only allows readme edits to be committed through full releases. To prevent needless cache invalidation, I'll only update the recommended version number when there are actual changes to the polyfill code. The current recommended version is `1.0.7`. As long as you are using a version that is equal to or higher than that, you are using the latest version of the polyfill.
1616

17+
## Pre-built components
18+
19+
To make it easier to implement this polyfill into your projects, I have some pre-built component versions of it that you might find easier to use.
20+
21+
- [React component](https://www.npmjs.com/package/react-time-input-polyfill)
22+
- [Vue component](https://www.npmjs.com/package/vue-time-input-polyfill) (not built yet)
23+
1724
## Fastest and easiest way to implement
1825

1926
Add the following script element to your page:

‎auto.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1+
var supports_time = require('./core/helpers/supportsTime')
2+
var loadJS = require('./core/helpers/loadJS')
13

2-
var supports_time = require('./core/helpers/supportsTime');
3-
var loadJS = require('./core/helpers/loadJS');
4-
5-
document.addEventListener("DOMContentLoaded", function() {
6-
if (!supports_time) {
7-
loadJS('https://cdn.jsdelivr.net/npm/[email protected]/dist/time-input-polyfill.min.js', function(){
8-
var $inputs = [].slice.call(document.querySelectorAll('input[type="time"]'));
9-
$inputs.forEach(function($input) {
10-
new TimePolyfill($input);
11-
});
12-
});
13-
}
14-
});
4+
document.addEventListener('DOMContentLoaded', function() {
5+
if (!supports_time) {
6+
loadJS(
7+
'https://cdn.jsdelivr.net/npm/[email protected]/dist/time-input-polyfill.min.js',
8+
function() {
9+
var $inputs = [].slice.call(
10+
document.querySelectorAll('input[type="time"]'),
11+
)
12+
$inputs.forEach(function($input) {
13+
new TimePolyfill($input)
14+
})
15+
},
16+
)
17+
}
18+
})

‎core/accessibility/create_a11y_block.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
2-
module.exports = function create_accessibility_block () {
3-
var $block = document.createElement('div');
4-
$block.setAttribute('aria-live', 'assertive');
5-
$block.setAttribute('style', 'position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none;');
6-
$block.classList.add('time-input-polyfill-accessibility-block');
7-
document.querySelector('body').appendChild($block);
8-
return $block;
1+
module.exports = function create_accessibility_block() {
2+
var $block = document.createElement('div')
3+
$block.setAttribute('aria-live', 'assertive')
4+
$block.setAttribute(
5+
'style',
6+
'position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none;',
7+
)
8+
$block.classList.add('time-input-polyfill-accessibility-block')
9+
document.querySelector('body').appendChild($block)
10+
return $block
911
}

‎core/accessibility/update_a11y.js

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,41 @@
1-
2-
var get_current_segment = require('../getters/get_current_segment');
3-
var get_values = require('../getters/get_values');
4-
5-
module.exports = function update_a11y ($input, announcementArray) {
6-
// Timeout helps ensure that the input has stabilized
7-
setTimeout(function(){
8-
var current_segment = get_current_segment($input);
9-
var values = get_values($input);
10-
var value = values[current_segment];
11-
var finalValue = value == '--' ? 'blank' : value;
12-
13-
var segmentName = {
14-
hrs: 'Hours',
15-
min: 'Minutes',
16-
mode: 'AM/PM'
17-
}[current_segment];
18-
19-
var announcements = {
20-
initial: '$label grouping $fullValue.',
21-
select: '$segmentName spin button $segmentValue.',
22-
update: '$segmentValue.',
23-
}
24-
25-
var textArray = announcementArray.map(function(providedString){
26-
if (announcements[providedString]) {
27-
return announcements[providedString];
28-
}
29-
return providedString;
30-
});
31-
32-
var fullValue = $input.value.replace(/--/g,'blank');
33-
34-
var html = '<p>' + textArray.join('</p><p>') + '</p>';
35-
html = html.replace(/\$label/g, $input.polyfill.label);
36-
html = html.replace(/\$segmentName/g, segmentName);
37-
html = html.replace(/\$segmentValue/g, finalValue);
38-
html = html.replace(/\$fullValue/g, fullValue);
39-
40-
$input.polyfill.$a11y.innerHTML = html;
41-
}, 1);
1+
var get_current_segment = require('../getters/get_current_segment')
2+
var get_values = require('../getters/get_values')
3+
4+
module.exports = function update_a11y($input, announcementArray) {
5+
// Timeout helps ensure that the input has stabilized
6+
setTimeout(function() {
7+
var current_segment = get_current_segment($input)
8+
var values = get_values($input)
9+
var value = values[current_segment]
10+
var finalValue = value == '--' ? 'blank' : value
11+
12+
var segmentName = {
13+
hrs: 'Hours',
14+
min: 'Minutes',
15+
mode: 'AM/PM',
16+
}[current_segment]
17+
18+
var announcements = {
19+
initial: '$label grouping $fullValue.',
20+
select: '$segmentName spin button $segmentValue.',
21+
update: '$segmentValue.',
22+
}
23+
24+
var textArray = announcementArray.map(function(providedString) {
25+
if (announcements[providedString]) {
26+
return announcements[providedString]
27+
}
28+
return providedString
29+
})
30+
31+
var fullValue = $input.value.replace(/--/g, 'blank')
32+
33+
var html = '<p>' + textArray.join('</p><p>') + '</p>'
34+
html = html.replace(/\$label/g, $input.polyfill.label)
35+
html = html.replace(/\$segmentName/g, segmentName)
36+
html = html.replace(/\$segmentValue/g, finalValue)
37+
html = html.replace(/\$fullValue/g, fullValue)
38+
39+
$input.polyfill.$a11y.innerHTML = html
40+
}, 1)
4241
}

‎core/converters/convert_hours_to_12hr_time.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
2-
module.exports = function convert_hours_to_12hr_time (hours) {
3-
return hours <= 12 ? hours === 0 ? 12 : hours : hours - 12;
1+
module.exports = function convert_hours_to_12hr_time(hours) {
2+
return hours <= 12 ? (hours === 0 ? 12 : hours) : hours - 12
43
}

‎core/converters/convert_number.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
2-
module.exports = function convert_number (number) {
3-
return isNaN(number) ? number : parseInt(number);
1+
module.exports = function convert_number(number) {
2+
return isNaN(number) ? number : parseInt(number)
43
}

‎core/converters/convert_to_12hr_time.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1+
var convert_number = require('./convert_number')
2+
var convert_hours_to_12hr_time = require('./convert_hours_to_12hr_time')
3+
var leading_zero = require('./leading_zero')
14

2-
var convert_number = require('./convert_number');
3-
var convert_hours_to_12hr_time = require('./convert_hours_to_12hr_time');
4-
var leading_zero = require('./leading_zero');
5-
6-
module.exports = function convert_to_12hr_time (timeString_24hr) {
7-
if (timeString_24hr === '') return '--:-- --';
8-
var twentyFour_regex = /([0-9]{2})\:([0-9]{2})/;
9-
var result = twentyFour_regex.exec(timeString_24hr);
10-
var hrs_24 = convert_number(result[1]);
11-
var min = result[2];
12-
var hrs_12 = convert_hours_to_12hr_time(hrs_24);
13-
var isPM = hrs_24 > 12;
14-
var mode = isPM ? 'PM' : 'AM';
15-
return [leading_zero(hrs_12), ':', min, ' ', mode].join('');
5+
module.exports = function convert_to_12hr_time(timeString_24hr) {
6+
if (timeString_24hr === '') return '--:-- --'
7+
var twentyFour_regex = /([0-9]{2})\:([0-9]{2})/
8+
var result = twentyFour_regex.exec(timeString_24hr)
9+
var hrs_24 = convert_number(result[1])
10+
var min = result[2]
11+
var hrs_12 = convert_hours_to_12hr_time(hrs_24)
12+
var isPM = hrs_24 > 12
13+
var mode = isPM ? 'PM' : 'AM'
14+
return [leading_zero(hrs_12), ':', min, ' ', mode].join('')
1615
}

‎core/converters/convert_to_24hr_time.js

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1+
var leading_zero = require('./leading_zero')
12

2-
var leading_zero = require('./leading_zero');
3-
4-
module.exports = function convert_to_24hr_time (timeString_12hr) {
5-
if (/-/.test(timeString_12hr)) return '';
6-
var isPM = timeString_12hr.indexOf('PM') > -1;
7-
var timeResult = /^([0-9]{2})/.exec(timeString_12hr);
8-
var hrs = timeResult ? parseInt(timeResult[1]) : '';
9-
var newHrs;
10-
if (hrs === 12) {
11-
newHrs = isPM ? 12 : 0;
12-
} else {
13-
newHrs = isPM ? hrs + 12 : hrs;
14-
}
15-
var finalHrs = newHrs === 24 ? 0 : newHrs;
16-
var timeRegEx = /^[0-9]{2}:([0-9]{2}) (AM|PM)/;
17-
return timeString_12hr.replace(timeRegEx, leading_zero(finalHrs)+':$1');
3+
module.exports = function convert_to_24hr_time(timeString_12hr) {
4+
if (/-/.test(timeString_12hr)) return ''
5+
var isPM = timeString_12hr.indexOf('PM') > -1
6+
var timeResult = /^([0-9]{2})/.exec(timeString_12hr)
7+
var hrs = timeResult ? parseInt(timeResult[1]) : ''
8+
var newHrs
9+
if (hrs === 12) {
10+
newHrs = isPM ? 12 : 0
11+
} else {
12+
newHrs = isPM ? hrs + 12 : hrs
13+
}
14+
var finalHrs = newHrs === 24 ? 0 : newHrs
15+
var timeRegEx = /^[0-9]{2}:([0-9]{2}) (AM|PM)/
16+
return timeString_12hr.replace(timeRegEx, leading_zero(finalHrs) + ':$1')
1817
}

‎core/converters/leading_zero.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
2-
module.exports = function leading_zero (number) {
3-
if (isNaN(number)) return number;
4-
var purified = parseInt(number);
5-
return purified < 10 ? '0' + purified : number;
1+
module.exports = function leading_zero(number) {
2+
if (isNaN(number)) return number
3+
var purified = parseInt(number)
4+
return purified < 10 ? '0' + purified : number
65
}

‎core/converters/toArray.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
2-
module.exports = function(array){
3-
return Array.prototype.slice.call(array, 0);
1+
module.exports = function(array) {
2+
return Array.prototype.slice.call(array, 0)
43
}

0 commit comments

Comments
 (0)