mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-29 10:30:20 -04:00
Change when folder controls become sticky
The controls for the template folders are all present in the page when it loads. The templateFolderForm JS filters them so you only see the one you need to for the thing you're trying to do. This changes when the controls are made sticky so it happens after the templateFolderForm JS has performed its filtering.
This commit is contained in:
@@ -29,6 +29,9 @@
|
||||
this.states.filter(state => state.cancellable).forEach((x) => this.addCancelButton(x));
|
||||
this.states.filter(state => state.key === 'items-selected-buttons').forEach(x => this.addClearButton(x));
|
||||
|
||||
// activate stickiness of elements in each state
|
||||
this.activateStickyElements();
|
||||
|
||||
// first off show the new template / new folder buttons
|
||||
this.currentState = this.$form.data('prev-state') || 'unknown';
|
||||
if (this.currentState === 'unknown') {
|
||||
@@ -41,6 +44,18 @@
|
||||
this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
|
||||
};
|
||||
|
||||
this.activateStickyElements = function() {
|
||||
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)
|
||||
.removeClass(oldClass)
|
||||
.addClass(newClass);
|
||||
});
|
||||
};
|
||||
|
||||
this.addCancelButton = function(state) {
|
||||
let $cancel = this.makeButton('Cancel', () => {
|
||||
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
{% if templates_and_folders_form.move_to.choices and template_list.templates_to_show %}
|
||||
<div id="move_to_folder_radios">
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
<div class="js-will-stick-at-bottom-when-scrolling">
|
||||
{{ radios_nested(templates_and_folders_form.move_to, move_to_children, option_hints=option_hints) }}
|
||||
</div>
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
<div class="js-will-stick-at-bottom-when-scrolling">
|
||||
{{ page_footer('Move', button_name='operation', button_value='move-to-existing-folder') }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="move_to_new_folder_form" class="js-stick-at-bottom-when-scrolling">
|
||||
<div id="move_to_new_folder_form" class="js-will-stick-at-bottom-when-scrolling">
|
||||
<fieldset>
|
||||
<legend class="visuallyhidden">Move to a new folder</legend>
|
||||
{{ textbox(templates_and_folders_form.move_to_new_folder_name) }}
|
||||
@@ -21,7 +21,7 @@
|
||||
</fieldset>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="add_new_folder_form" class="js-stick-at-bottom-when-scrolling">
|
||||
<div id="add_new_folder_form" class="js-will-stick-at-bottom-when-scrolling">
|
||||
<fieldset>
|
||||
<legend class="visuallyhidden">Add a new folder</legend>
|
||||
{{ textbox(templates_and_folders_form.add_new_folder_name) }}
|
||||
@@ -31,10 +31,10 @@
|
||||
<div id="add_new_template_form">
|
||||
<fieldset>
|
||||
<legend class="visuallyhidden">Add a new template</legend>
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
<div class="js-will-stick-at-bottom-when-scrolling">
|
||||
{{ radios(templates_and_folders_form.add_template_by_template_type) }}
|
||||
</div>
|
||||
<div class="js-stick-at-bottom-when-scrolling">
|
||||
<div class="js-will-stick-at-bottom-when-scrolling">
|
||||
{{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
Reference in New Issue
Block a user