Split move_to forms into separate sticky elements

app/assets/javascripts/templateFolderForm.js

@@ -13,22 +13,33 @@
       this.$stickyBottom = this.$form.find('#sticky_template_forms');
 
       this.$stickyBottom.append(this.nothingSelectedButtons);
+      GOVUK.stickAtBottomWhenScrolling.add(this.nothingSelectedButtons, true);
       this.$stickyBottom.append(this.itemsSelectedButtons);
+      GOVUK.stickAtBottomWhenScrolling.add(this.itemsSelectedButtons, true);
 
       // 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},
+        {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},
+        {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},
+        {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},
+        {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},
+        {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}
+        {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, isStickyGroup: true}
       ];
 
       // cancel/clear buttons only relevant if JS enabled, so
       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));
 
+      // add all sticky elements from states
+      this.states.forEach(state => {
+        if (state.isStickyGroup) {
+          state.$el.find(".js-stick-at-bottom-when-scrolling").each((idx, el) => {
+            GOVUK.stickAtBottomWhenScrolling.add(el, false);
+          });
+        }
+      });
+
       // first off show the new template / new folder buttons
       this.currentState = this.$form.data('prev-state') || 'unknown';
       if (this.currentState === 'unknown') {
@@ -135,25 +146,25 @@
       }
     };
 
-    this.nothingSelectedButtons = `
+    this.nothingSelectedButtons = $(`
-      <div id="nothing_selected">
+      <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>
       </div>
-    `;
+    `).get(0);
 
-    this.itemsSelectedButtons = `
+    this.itemsSelectedButtons = $(`
-      <div id="items_selected">
+      <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>
       </div>
-    `;
+    `).get(0);
   };
 
 })(window.GOVUK.Modules);

app/templates/views/templates/_move_to.html

@@ -1,15 +1,19 @@
 {% from "components/radios.html" import radios, radios_nested %}
 {% from "components/page-footer.html" import page_footer %}
 
-<div id="sticky_template_forms" class="js-stick-at-bottom-when-scrolling">
+<div id="sticky_template_forms">
   <button type="submit" name="operation" value="unknown" hidden></button>
   <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">
       {{ radios_nested(templates_and_folders_form.move_to, move_to_children, option_hints=option_hints) }}
+      </div>
+      <div class="js-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">
+    <div id="move_to_new_folder_form" class="js-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) }}
@@ -17,7 +21,7 @@
       </fieldset>
     </div>
   {% endif %}
-  <div id="add_new_folder_form">
+  <div id="add_new_folder_form" class="js-stick-at-bottom-when-scrolling">
     <fieldset>
       <legend class="visuallyhidden">Add a new folder</legend>
       {{ textbox(templates_and_folders_form.add_new_folder_name) }}
@@ -27,8 +31,12 @@
   <div id="add_new_template_form">
     <fieldset>
       <legend class="visuallyhidden">Add a new template</legend>
+      <div class="js-stick-at-bottom-when-scrolling">
       {{ radios(templates_and_folders_form.add_template_by_template_type) }}
+      </div>
+      <div class="js-stick-at-bottom-when-scrolling">
       {{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
+      </div>
     </fieldset>
   </div>
 </div>