From 59b02e0fe00f6a59c1fbfc62496fd6e059642e81 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 17 Jan 2019 10:52:13 +0000
Subject: [PATCH] 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.
---
 app/assets/javascripts/templateFolderForm.js | 15 +++++++++++++++
 app/templates/views/templates/_move_to.html  | 12 ++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 01cc8bab3..b6668d19a 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -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', () => {
 
diff --git a/app/templates/views/templates/_move_to.html b/app/templates/views/templates/_move_to.html
index cf752d9b8..c08713bdf 100644
--- a/app/templates/views/templates/_move_to.html
+++ b/app/templates/views/templates/_move_to.html
@@ -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>