start js for template folder form

have a bunch of separate elements within the sticky_template_forms div
that we hide or show based on button presses and such. This commit just
sets up the class - it doesn't actually deal with button presses or
checkboxes etc yet.

app/assets/javascripts/templateFolderForm.js

@@ -0,0 +1,58 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.TemplateFolderForm = function() {
+
+    this.start = function(templateFolderForm) {
+      this.$form = $(templateFolderForm);
+
+      this.$stickyBottom = this.$form.find('#sticky_template_forms');
+
+      this.$stickyBottom.append(this.nothingSelectedButtons);
+      this.$stickyBottom.append(this.itemsSelectedButtons);
+
+      // all the diff states that we want to show or hide
+      this.states = {
+        nothingSelectedButtons: this.$form.find('#nothing_selected'),
+        itemsSelectedButtons: this.$form.find('#items_selected'),
+        moveToFolderRadios: this.$form.find('#move_to_folder_radios'),
+        addNewFolderName: this.$form.find('#add_new_folder_form'),
+        moveToNewFolderName: this.$form.find('#move_to_new_folder_form'),
+      };
+
+      this.render();
+    };
+
+    this.countSelectedCheckboxes = function() {
+      return this.$form.find('input[type=checkbox]:checked').length;
+    };
+
+    this.render = function() {
+      let numSelected = this.countSelectedCheckboxes();
+
+      // hide everything
+      Object.values(this.states).forEach($el => $el.hide());
+
+      this.states.nothingSelectedButtons.show();
+    };
+
+    this.nothingSelectedButtons = function() {
+      return `
+        <div id="nothing_selected">
+          <button class="button-secondary" value="new_template">New template</button>
+          <button class="button-secondary" value="new_folder">New folder</button>
+        </div>
+      `;
+    };
+
+    this.itemsSelectedButtons = function() {
+      return `
+        <div id="items_selected">
+          <button class="button-secondary" value="move_to_folder">Move</button>
+          <button class="button-secondary" value="add_to_new_folder">Add to a new folder</button>
+        </div>
+      `;
+    };
+  };
+
+})(window.GOVUK.Modules);

app/templates/views/templates/_move_to.html

@@ -1,6 +1,7 @@
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
 
+<div id="sticky_template_forms">
   <button type="submit" name="operation" value="unknown" hidden></button>
   {% if templates_and_folders_form.move_to.choices and template_list.templates_to_show %}
     <div id="move_to_folder_radios">
@@ -29,3 +30,4 @@
       {{ page_footer('Continue', button_name='operation', button_value='add_template') }}
     </fieldset>
   </div>
+</div>

app/templates/views/templates/choose.html

@@ -78,7 +78,7 @@
     {{ live_search(target_selector='#template-list .template-list-item', show=show_search_box, form=search_form) }}
 
     {% if can_manage_folders %}
-      {% call form_wrapper() %}
+      {% call form_wrapper(module='template-folder-form') %}
         {% include 'views/templates/_template_list.html' %}
         {% with templates=templates, template_folders=template_folders, templates_and_folders_form=templates_and_folders_form %}
           {% include 'views/templates/_move_to.html' %}

gulpfile.babel.js

@@ -75,6 +75,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/fullscreenTable.js',
     paths.src + 'javascripts/emailPreviewPane.js',
     paths.src + 'javascripts/colourPreview.js',
+    paths.src + 'javascripts/templateFolderForm.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.prettyerror())