From f4d9c379403d102350cea4e8ad7300b86bd94473 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 30 Jan 2019 11:45:24 +0000
Subject: [PATCH] Move setting of sticky mode out of recalculate

The `recalculate` method currently does three
things:
1. sync's the internal store with the DOM
2. updates the saved positional and dimensional
data from the new DOM
3. allows the mode to be set

The problem with using it as the way to set the
mode is that, every call to it is effectively
setting the mode but this isn't always the
intention.

This splits off setting the mode so other modules
have to explicity set it and those that don't
intend to can just call `recalculate` to notify of
DOM changes.
---
 .../javascripts/stick-to-window-when-scrolling.js     | 11 ++++++-----
 app/assets/javascripts/templateFolderForm.js          |  7 +++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/stick-to-window-when-scrolling.js b/app/assets/javascripts/stick-to-window-when-scrolling.js
index e15bddfa4..bcc413084 100644
--- a/app/assets/javascripts/stick-to-window-when-scrolling.js
+++ b/app/assets/javascripts/stick-to-window-when-scrolling.js
@@ -272,6 +272,9 @@
     this.CSS_SELECTOR = selector;
     this.STOP_PADDING = 10;
   };
+  Sticky.prototype.setMode = function (mode) {
+    _mode = mode;
+  };
   Sticky.prototype.getWindowDimensions = function () {
     return {
       height: $(global).height(),
@@ -360,7 +363,7 @@
     }
   };
   // Recalculate stored dimensions for all sticky elements
-  Sticky.prototype.recalculate = function (opts) {
+  Sticky.prototype.recalculate = function () {
     var self = this;
     var onSyncComplete = function () {
       self.setEvents();
@@ -371,8 +374,6 @@
       self.setElementPositions();
     };
 
-    if ((opts !== undefined) && ('mode' in opts)) { _mode = opts.mode; }
-
     this.syncWithDOM(onSyncComplete);
   };
   Sticky.prototype.setElWidth = function (el) {
@@ -493,8 +494,8 @@
       });
     }
   };
-  Sticky.prototype.init = function (opts) {
-    this.recalculate(opts);
+  Sticky.prototype.init = function () {
+    this.recalculate();
   };
   Sticky.prototype.setEvents = function () {
     var self = this;
diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index dcd91a5a1..b7b0cf43b 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -144,9 +144,12 @@
         state => (state.key === this.currentState ? this.$stickyBottom.append(state.$el) : state.$el.detach())
       );
 
-      // make sticky JS recalculate its cache of the element's position
       // use dialog mode for states which contain more than one form control
-      GOVUK.stickAtBottomWhenScrolling.recalculate({ 'mode': 'dialog' });
+      if (['move-to-existing-folder', 'add-new-template'].includes(this.currentState)) {
+        GOVUK.stickAtBottomWhenScrolling.setMode('dialog');
+      }
+      // make sticky JS recalculate its cache of the element's position
+      GOVUK.stickAtBottomWhenScrolling.recalculate();
     };
 
     this.nothingSelectedButtons = $(`