From b2196561e24a1773d46e0a70fed39d04d590b57a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Fri, 21 Aug 2020 14:49:34 +0200
Subject: [PATCH 1/2] Override proposal sticky top property when anchored

It's known that Foundation Sticky causes some renderization problems
when rendering sticky elements in anchored position.

The problem seems to be that Foundation Sticky is showing the
support box on medium and up devices overlapped with "Share" and
"Community" sidebar boxes when loading proposal page through
Turbolinks and when restoring the page from brwoser history.
Foundation seems to be doing some top property dynamic calculation
(javascript) and is setting top property to `206px` when it should be
`0px`. Notice that this do not happen on page first load (without
Turbolinks). Check foundation/foundation-sites issue 11098.

Another workaround could be to remove sticky feature for bigger that
small devices (medium large xlarge xxlarge).
Check foundation/foundation-sites issue 9892.
---
 app/assets/stylesheets/application.scss      |  1 +
 app/assets/stylesheets/sticky_overrides.scss |  9 +++++++++
 spec/system/proposals_spec.rb                | 13 +++++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 app/assets/stylesheets/sticky_overrides.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index da217b874..5158c724d 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -26,3 +26,4 @@
 @import "autocomplete_overrides";
 @import "jquery-ui/sortable";
 @import "leaflet";
+@import "sticky_overrides";
diff --git a/app/assets/stylesheets/sticky_overrides.scss b/app/assets/stylesheets/sticky_overrides.scss
new file mode 100644
index 000000000..f00d7417e
--- /dev/null
+++ b/app/assets/stylesheets/sticky_overrides.scss
@@ -0,0 +1,9 @@
+// Overrides styles of foundation-sticky
+
+// Patch authored by shashabeep
+// Check https://github.com/foundation/foundation-sites/issues/11098#issuecomment-528363771
+.proposal-show {
+  .sticky.is-anchored {
+    top: 0 !important;
+  }
+}
diff --git a/spec/system/proposals_spec.rb b/spec/system/proposals_spec.rb
index cd84e2c5b..cb67e8ee3 100644
--- a/spec/system/proposals_spec.rb
+++ b/spec/system/proposals_spec.rb
@@ -212,6 +212,19 @@ describe "Proposals" do
     end
   end
 
+  describe "Sticky support button on medium and up screens", :js do
+    scenario "is shown anchored to top" do
+      proposal = create(:proposal)
+      visit proposals_path
+
+      click_link proposal.title
+
+      within("#proposal_sticky") do
+        expect(find(".is-anchored")).to match_style(top: "0px")
+      end
+    end
+  end
+
   describe "Show sticky support button on mobile screens", :js do
     let!(:window_size) { Capybara.current_window.size }
 

From 46af09e348b688341a2b08a35448df536cbedfac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Fri, 21 Aug 2020 15:14:57 +0200
Subject: [PATCH 2/2] Destroy Sticky elements before leaving the page

When Foundation initializes a page that has any sticky element, it
loads a window scroll listener into window object to handle the sticky
element positioning when scrolling. This works great until user moves
to a page without sticky elements and the window listeners remain
attached to the window object on this new page too when there is no
need to run the scrollListener and there is no sticky elements so the
window scroll listener cannot find the sticky object on that page a lot
of errors are thrown when user scrolls.

With this approach we are destroying sticky elements before leaving
the page which also remove the Sticky scrollListener from the window
object.

I do not know how to write a test to demonstrate this fix, but at least
there is some steps to reproduce this behavior:

0. Undo this commit
1. Go to any proposal page
2. Click on any link (with Turbolinks enabled)
3. Scroll the page
4. Check the console log. Yo will find as error occurrences as pixels you scrolled.
---
 app/assets/javascripts/foundation_extras.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/assets/javascripts/foundation_extras.js b/app/assets/javascripts/foundation_extras.js
index de709505d..435bd7e49 100644
--- a/app/assets/javascripts/foundation_extras.js
+++ b/app/assets/javascripts/foundation_extras.js
@@ -3,6 +3,13 @@
   App.FoundationExtras = {
     initialize: function() {
       $(document).foundation();
+    },
+    destroy: function() {
+      if ($(".sticky").length > 0) {
+        $(".sticky").foundation("_destroy");
+      }
     }
   };
+
+  $(document).on("turbolinks:before-visit", App.FoundationExtras.destroy);
 }).call(this);