mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-08 04:13:41 -05:00
225a61ddd3
Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
(function(Modules) {
|
||
|
||
"use strict";
|
||
|
||
var render = ($options, $button) => (
|
||
filterOptionVisibility($options) && setButtonState($options, $button)
|
||
);
|
||
|
||
var filterOptionVisibility = $options => $options
|
||
.removeClass('js-visible')
|
||
.filter(
|
||
(index, element) => (index === 0 || $(element).has(':checked').length)
|
||
)
|
||
.addClass('js-visible');
|
||
|
||
var setButtonState = ($options, $button) => $button
|
||
.addClass('js-visible')
|
||
.prop(
|
||
'value',
|
||
$options.has(':checked').find('input').attr('id') === $options.eq(0).find('input').attr('id') ?
|
||
'Later' : 'Choose a different time'
|
||
);
|
||
|
||
// Workaround because GOV.UK SelectionButtons doesn’t deselect in this case
|
||
var deselectUnchecked = $options => $options
|
||
.filter(
|
||
(index, element) => $(element).not(':has(:checked)')
|
||
).removeClass('selected');
|
||
|
||
var refocus = $element => setTimeout(
|
||
() => $element.blur().trigger('focus'),
|
||
10
|
||
);
|
||
|
||
var renderIfComponentLosesFocus = ($options, $button, $focused) => () =>
|
||
($focused.attr('type') !== 'radio') &&
|
||
render($options, $button) &&
|
||
refocus($focused); // Make sure that window scrolls to focused element
|
||
|
||
Modules.RadioSelect = function() {
|
||
|
||
this.start = function(component) {
|
||
|
||
let $component = $(component);
|
||
let $options = $('label', $component);
|
||
|
||
$component.append(
|
||
$button = $('<input type="button" value="Later" class="tertiary-button" />')
|
||
);
|
||
|
||
$button.on('click', () =>
|
||
$options.addClass('js-visible').has(':checked').focus() &&
|
||
$button.removeClass('js-visible')
|
||
);
|
||
|
||
$component.on('keydown', 'input[type=radio]', function() {
|
||
|
||
// intercept keypresses which aren’t enter or space
|
||
if (event.which !== 13 && event.which !== 32) {
|
||
setTimeout(
|
||
renderIfComponentLosesFocus($options, $button, $(document.activeElement)),
|
||
200
|
||
);
|
||
return true;
|
||
}
|
||
|
||
event.preventDefault();
|
||
|
||
render($options, $button);
|
||
refocus($(this));
|
||
|
||
});
|
||
|
||
$component.on('click', 'input[type=radio]', function(event) {
|
||
|
||
deselectUnchecked($options);
|
||
|
||
// stop click being triggered by keyboard events
|
||
if (!event.pageX) return true;
|
||
|
||
render($options, $button);
|
||
refocus($(this));
|
||
|
||
});
|
||
|
||
render($options, $button);
|
||
|
||
};
|
||
|
||
};
|
||
|
||
})(window.GOVUK.Modules);
|