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

Use JS for applying focus & add styling for it

Browse Source 
Adds some extra styles so <fieldset>'s show as
focused when they are.

Also includes replacement of `overflow: hidden` on
sticky elements with a clearfix. hiding overflow
clips the outline and the clearfix can be used for
containing any floats instead. (I'm assuming that's
why it was set here.)
This commit is contained in:
Tom Byers
2019-01-29 15:53:59 +00:00
parent 0c823db970
commit 2b2641b039
2 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,10 +19,10 @@
this.states = [ this.states = [
{key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false}, {key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false},
{key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false}, {key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false},
{key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true}, {key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_folder_radios fieldset', true)},
{key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true}, {key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_new_folder_name', false)},
{key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true}, {key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_folder_name', false)},
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true} {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_template_form fieldset', true)}
]; ];
// cancel/clear buttons only relevant if JS enabled, so // cancel/clear buttons only relevant if JS enabled, so
@@ -44,6 +44,18 @@
this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged()); this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
}; };
this.getFocusRoutine = function (selector, setTabindex) {
return function () {
let $el = $(selector);
if (setTabindex) {
$el.attr('tabindex', '-1');
}
$el.focus();
};
};
this.activateStickyElements = function() { this.activateStickyElements = function() {
var oldClass = 'js-will-stick-at-bottom-when-scrolling'; var oldClass = 'js-will-stick-at-bottom-when-scrolling';
var newClass = 'js-stick-at-bottom-when-scrolling'; var newClass = 'js-stick-at-bottom-when-scrolling';
@@ -139,13 +151,16 @@
}; };
this.render = function() { this.render = function() {
var mode = 'default'; let mode = 'default';
let currentStateObj = this.states.filter(state => { return (state.key === this.currentState); })[0];
// detach everything, unless they are the currentState // detach everything, unless they are the currentState
this.states.forEach( this.states.forEach(
state => (state.key === this.currentState ? this.$stickyBottom.append(state.$el) : state.$el.detach()) state => (state.key === this.currentState ? this.$stickyBottom.append(state.$el) : state.$el.detach())
); );
if (currentStateObj && ('setFocus' in currentStateObj)) { currentStateObj.setFocus(); }
// use dialog mode for states which contain more than one form control // use dialog mode for states which contain more than one form control
if (['move-to-existing-folder', 'add-new-template'].indexOf(this.currentState) !== -1) { if (['move-to-existing-folder', 'add-new-template'].indexOf(this.currentState) !== -1) {
mode = 'dialog'; mode = 'dialog';

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

@@ -4,11 +4,16 @@
.js-stick-at-top-when-scrolling, .js-stick-at-top-when-scrolling,
.js-stick-at-bottom-when-scrolling { .js-stick-at-bottom-when-scrolling {
overflow: hidden; @extend %contain-floats;
margin-left: -$gutter-half; margin-left: -$gutter-half;
padding: 10px 0 0 $gutter-half; padding: 10px 0 0 $gutter-half;
position: relative; position: relative;
fieldset:focus {
outline: solid 3px $focus-colour;
outline-offset: $gutter-half;
}
.form-group { .form-group {
margin-bottom: 20px; margin-bottom: 20px;
} }