darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 00:07:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

Deal with focus state following cancelation

Browse Source 
Follows pattern from dialogs whereby focus returns
to the button/link that fired the dialog when it
closes.
This commit is contained in:
Tom Byers
2019-02-01 16:13:04 +00:00
parent d633bdbb6d
commit 693ddadbc4
2 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/templateFolderForm.js
View File

@@ -35,7 +35,7 @@
// first off show the new template / new folder buttons // first off show the new template / new folder buttons
this.currentState = this.$form.data('prev-state') || 'unknown'; this.currentState = this.$form.data('prev-state') || 'unknown';
if (this.currentState === 'unknown') { if (this.currentState === 'unknown') {
this.selectActionButtons(); this.selectActionButtons(false);
} else { } else {
this.render(); this.render();
} }
@@ -75,6 +75,7 @@
}; };
this.addCancelButton = function(state) { this.addCancelButton = function(state) {
let selector = `[value=${state.key}]`;
let $cancel = this.makeButton('Cancel', () => { let $cancel = this.makeButton('Cancel', () => {
// clear existing data // clear existing data
@@ -82,8 +83,8 @@
state.$el.find('input:text').val(''); state.$el.find('input:text').val('');
// go back to action buttons // go back to action buttons
this.selectActionButtons(); this.selectActionButtons(selector);
}); }, selector);
state.$el.find('[type=submit]').after($cancel); state.$el.find('[type=submit]').after($cancel);
}; };
@@ -91,7 +92,6 @@
this.addClearButton = function(state) { this.addClearButton = function(state) {
let $clear = this.makeButton('Clear', () => { let $clear = this.makeButton('Clear', () => {
// uncheck all templates and folders // uncheck all templates and folders
this.$form.find('input:checkbox').prop('checked', false); this.$form.find('input:checkbox').prop('checked', false);
@@ -102,9 +102,10 @@
state.$el.find('.template-list-selected-counter').append($clear); state.$el.find('.template-list-selected-counter').append($clear);
}; };
this.makeButton = (text, fn) => $('<a></a>') this.makeButton = (text, fn, cancelSelector) => $('<a></a>')
.html(text) .html(text)
.addClass('js-cancel') .addClass('js-cancel')
.data('target', cancelSelector) // isn't set if cancelSelector is undefined
.attr('tabindex', '0') .attr('tabindex', '0')
.on('click keydown', event => { .on('click keydown', event => {
// space, enter or no keyCode (must be mouse input) // space, enter or no keyCode (must be mouse input)
@@ -114,12 +115,16 @@
} }
}); });
this.selectActionButtons = function () { this.selectActionButtons = function (targetSelector) {
// If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state, // If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state,
// and then pretend a checkbox was clicked to work out whether to show zero or non-zero options. // and then pretend a checkbox was clicked to work out whether to show zero or non-zero options.
// This calls a render at the end // This calls a render at the end
this.currentState = 'nothing-selected-buttons'; this.currentState = 'nothing-selected-buttons';
this.templateFolderCheckboxChanged(); this.templateFolderCheckboxChanged();
if (targetSelector) {
let setFocus = this.getFocusRoutine(targetSelector, false);
setFocus();
}
}; };
this.actionButtonClicked = function(event) { this.actionButtonClicked = function(event) {

8
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -1,6 +1,8 @@
// CSS adapted from // CSS adapted from
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling // https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
$sticky-padding: $gutter * 2 / 3;
.js-stick-at-top-when-scrolling, .js-stick-at-top-when-scrolling,
.js-stick-at-bottom-when-scrolling { .js-stick-at-bottom-when-scrolling {
@@ -44,11 +46,9 @@
.js-stick-at-bottom-when-scrolling { .js-stick-at-bottom-when-scrolling {
$vertical-padding: $gutter * 2 / 3;
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out; transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
padding: $vertical-padding 0 $vertical-padding $gutter-half; padding: $sticky-padding 0 $sticky-padding $gutter-half;
margin-top: -$vertical-padding; margin-top: -$sticky-padding;
& + .js-stick-at-bottom-when-scrolling { & + .js-stick-at-bottom-when-scrolling {
margin-top: ($sticky-padding * 2) * -1; margin-top: ($sticky-padding * 2) * -1;