From 9823ff831f48b06504b9fb946650bf54fab483fd Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 13 Dec 2018 14:21:51 +0000
Subject: [PATCH] Add publich recalculate method

Allows other JS to tell sticky elements to
recalculate their dimensions and then position
(and then check to see if their state needs
changing).

We need this because we change the content of our
element so its dimensions change.

The recalculation code also updates the shim for
elements that are 'stuck' so the horizontal space
the element would occupy in the flow of the page
is correct.
---
 .../stick-to-window-when-scrolling.js         | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/stick-to-window-when-scrolling.js b/app/assets/javascripts/stick-to-window-when-scrolling.js
index 31088225a..4761c84fd 100644
--- a/app/assets/javascripts/stick-to-window-when-scrolling.js
+++ b/app/assets/javascripts/stick-to-window-when-scrolling.js
@@ -39,6 +39,14 @@
     this._$shim.remove();
     this._$shim = null;
   };
+  StickyElement.prototype.updateShim = function () {
+    if (this._$shim) {
+      this._$shim.css({
+        'height': this.verticalSpace,
+        'width': this.horizontalSpace
+      });
+    }
+  };
   StickyElement.prototype.stop = function () {
     this._stopped = true;
   };
@@ -100,6 +108,7 @@
     var self = this;
     var onHeightSet = function () {
       el.scrolledTo = self.getScrollingTo(el);
+      el.updateShim(el);
       if (callback !== undefined) {
         callback();
       }
@@ -109,6 +118,14 @@
     this.setElWidth(el);
     this.setElHeight(el, onHeightSet);
   };
+  Sticky.prototype.recalculate = function () {
+    var self = this;
+
+    $.each(self._els, function (i, el) {
+      self.setElementDimensions(el);
+    });
+    self.setElementPositions();
+  };
   Sticky.prototype.setFixedTop = function (el) {
     var $siblingEl = $('<div></div>');
     $siblingEl.insertBefore(el.$fixedEl);
@@ -122,22 +139,19 @@
   };
   Sticky.prototype.setElHeight = function (el, callback) {
     var self = this;
-    var fixedOffset = parseInt(el.$fixedEl.css('top'), 10);
     var $el = el.$fixedEl;
     var $img = $el.find('img');
 
-    fixedOffset = isNaN(fixedOffset) ? 0 : fixedOffset;
-
     if ((!self._elsLoaded) && ($img.length > 0)) {
       var image = new global.Image();
       image.onload = function () {
-        el.verticalSpace = $el.outerHeight(true) + fixedOffset;
+        el.verticalSpace = $el.outerHeight(true);
         el.height = $el.outerHeight();
         callback();
       };
       image.src = $img.attr('src');
     } else {
-      el.verticalSpace = $el.outerHeight() + fixedOffset;
+      el.verticalSpace = $el.outerHeight(true);
       el.height = $el.outerHeight();
       callback();
     }