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

make classes in folder dialog states consistent

Browse Source 
make sure the class is applied to a child element, so that `$el.find`
will always find something for `js-will-stick-at-bottom-when-scrolling`.

Also, clean up code by treating all stickies on the template folder
form as dialogs - they all are after all all dialogs - modals that
expect your attention on top of the main page content.
This commit is contained in:
Leo Hemsted
2019-01-25 16:47:49 +00:00
parent 05c455250c
commit d5e95af446
2 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,12 +17,12 @@
// all the diff states that we want to show or hide
this.states = [
{key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false, isStickyGroup: false},
{key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false, isStickyGroup: false},
{key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, isStickyGroup: true},
{key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true, isStickyGroup: false},
{key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true, isStickyGroup: false},
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, isStickyGroup: true}
{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: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true},
{key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true},
{key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true},
{key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true}
];
// cancel/clear buttons only relevant if JS enabled, so
@@ -45,12 +45,12 @@
};
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';
this.states.forEach(state => {
state.$el
.find(oldClass)
.find('.' + oldClass)
.removeClass(oldClass)
.addClass(newClass);
});
@@ -146,29 +146,29 @@
// make sticky JS recalculate its cache of the element's position
// use dialog mode for states which contain more than one form control
if (['move-to-existing-folder', 'add-new-template'].includes(this.currentState)) {
GOVUK.stickAtBottomWhenScrolling.recalculate({ 'mode': 'dialog' });
} else {
GOVUK.stickAtBottomWhenScrolling.recalculate();
}
GOVUK.stickAtBottomWhenScrolling.recalculate({ 'mode': 'dialog' });
};
this.nothingSelectedButtons = $(`
<div id="nothing_selected" class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="add-new-template">New template</button>
<button class="button-secondary" value="add-new-folder">New folder</button>
<div class="template-list-selected-counter">
Nothing selected
<div id="nothing_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="add-new-template">New template</button>
<button class="button-secondary" value="add-new-folder">New folder</button>
<div class="template-list-selected-counter">
Nothing selected
</div>
</div>
</div>
`).get(0);
this.itemsSelectedButtons = $(`
<div id="items_selected" class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="move-to-existing-folder">Move</button>
<button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
<div class="template-list-selected-counter">
<span class="template-list-selected-counter-count">1</span> selected
<div id="items_selected">
<div class="js-stick-at-bottom-when-scrolling">
<button class="button-secondary" value="move-to-existing-folder">Move</button>
<button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
<div class="template-list-selected-counter">
<span class="template-list-selected-counter-count">1</span> selected
</div>
</div>
</div>
`).get(0);

8
app/templates/views/templates/_move_to.html
View File

@@ -13,16 +13,16 @@
{{ page_footer('Move', button_name='operation', button_value='move-to-existing-folder') }}
</div>
</div>
<div id="move_to_new_folder_form" class="js-will-stick-at-bottom-when-scrolling">
<fieldset>
<div id="move_to_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="visuallyhidden">Move to a new folder</legend>
{{ textbox(templates_and_folders_form.move_to_new_folder_name) }}
{{ page_footer('Move to a new folder', button_name='operation', button_value='move-to-new-folder') }}
</fieldset>
</div>
{% endif %}
<div id="add_new_folder_form" class="js-will-stick-at-bottom-when-scrolling">
<fieldset>
<div id="add_new_folder_form">
<fieldset class="js-will-stick-at-bottom-when-scrolling">
<legend class="visuallyhidden">Add a new folder</legend>
{{ textbox(templates_and_folders_form.add_new_folder_name) }}
{{ page_footer('New folder', button_name='operation', button_value='add-new-folder') }}