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:
Tom Byers
2019-01-17 10:52:13 +00:00
parent 98789c98c8
commit 59b02e0fe0
2 changed files with 21 additions and 6 deletions

View File

@@ -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', () => {

View File

@@ -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>