From 43eabd7dad727d2d30552cdfd1eff9cd9cc1584a Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Mon, 17 Jun 2024 14:47:19 +0200 Subject: [PATCH 1/7] prevent multiple eventListener binds on tab change --- app/assets/javascripts/shared/behaviors.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/shared/behaviors.js b/app/assets/javascripts/shared/behaviors.js index cd6ac4f75..f2d3267ce 100644 --- a/app/assets/javascripts/shared/behaviors.js +++ b/app/assets/javascripts/shared/behaviors.js @@ -81,11 +81,13 @@ } // Update address bar with current tab param - $('[data-bs-toggle~=tab]').on('shown.bs.tab', function (e) { - let currentTab = $(e.target).attr('href').substring(1); - searchParams.set('tab', currentTab); - history.pushState(null, null, `?${searchParams.toString()}`); - }); + $('[data-bs-toggle~=tab]') + .unbind() + .on('shown.bs.tab', function (e) { + let currentTab = $(e.target).attr('href').substring(1); + searchParams.set('tab', currentTab); + history.pushState(null, null, `?${searchParams.toString()}`); + }); } document.addEventListener('turbolinks:load', function () { From 63c6e82de67871f622b1e64724e658f3f7d0e339 Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Mon, 17 Jun 2024 14:49:07 +0200 Subject: [PATCH 2/7] navigate to tabbed pages using browser back button --- app/assets/javascripts/shared/behaviors.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/assets/javascripts/shared/behaviors.js b/app/assets/javascripts/shared/behaviors.js index f2d3267ce..a78b53c84 100644 --- a/app/assets/javascripts/shared/behaviors.js +++ b/app/assets/javascripts/shared/behaviors.js @@ -88,6 +88,14 @@ searchParams.set('tab', currentTab); history.pushState(null, null, `?${searchParams.toString()}`); }); + + // Allows users to navigate using the native browser back/forward buttons + // even when we manipulate the browser history with pushState() + $(window) + .unbind() + .on('popstate', function () { + location.reload(); + }); } document.addEventListener('turbolinks:load', function () { From 0c6ae00d962d18680c78e3d31b830b1e6d120794 Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Mon, 17 Jun 2024 14:50:58 +0200 Subject: [PATCH 3/7] update changelog --- CHANGELOG | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 4968516d7..3a90ae93a 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -2,8 +2,7 @@ - Liquid: Make project-level collections available for Liquid syntax - Upgraded gems: nokogiri, rails, rexml - Bugs fixes: - - [entity]: - - [future tense verb] [bug fix] + - Navigation: Restore functionality of native browser back/forward buttons - Bug tracker items: - [item] - New integrations: From 2b28481b6675a63bf75db35ad961a93dbe675239 Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Tue, 18 Jun 2024 11:53:53 +0200 Subject: [PATCH 4/7] limit scope of eventLister to prevent N bindings --- app/assets/javascripts/shared/behaviors.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/shared/behaviors.js b/app/assets/javascripts/shared/behaviors.js index a78b53c84..059d14f4e 100644 --- a/app/assets/javascripts/shared/behaviors.js +++ b/app/assets/javascripts/shared/behaviors.js @@ -81,8 +81,8 @@ } // Update address bar with current tab param - $('[data-bs-toggle~=tab]') - .unbind() + $(parentElement) + .find('[data-bs-toggle~=tab]') .on('shown.bs.tab', function (e) { let currentTab = $(e.target).attr('href').substring(1); searchParams.set('tab', currentTab); @@ -91,11 +91,9 @@ // Allows users to navigate using the native browser back/forward buttons // even when we manipulate the browser history with pushState() - $(window) - .unbind() - .on('popstate', function () { - location.reload(); - }); + $(window).on('popstate', function () { + location.reload(); + }); } document.addEventListener('turbolinks:load', function () { From 2980a098270a0415388ef0fa77725a1a4f54f6b3 Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Wed, 19 Jun 2024 15:09:57 +0200 Subject: [PATCH 5/7] navigate with `Turbolinks` vs `location.reload()` --- app/assets/javascripts/shared/behaviors.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/shared/behaviors.js b/app/assets/javascripts/shared/behaviors.js index 059d14f4e..6563983fd 100644 --- a/app/assets/javascripts/shared/behaviors.js +++ b/app/assets/javascripts/shared/behaviors.js @@ -86,14 +86,19 @@ .on('shown.bs.tab', function (e) { let currentTab = $(e.target).attr('href').substring(1); searchParams.set('tab', currentTab); - history.pushState(null, null, `?${searchParams.toString()}`); + let urlWithTab = `?${searchParams.toString()}`; + history.replaceState(null, null, urlWithTab); }); // Allows users to navigate using the native browser back/forward buttons // even when we manipulate the browser history with pushState() - $(window).on('popstate', function () { - location.reload(); - }); + $(window) + .off() + .on('popstate', function () { + if (location.search.length) { + Turbolinks.visit(location, { action: 'replace' }); + } + }); } document.addEventListener('turbolinks:load', function () { From 28fee462776e26a3b962cce57f8f5c2082e2e34d Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Wed, 19 Jun 2024 15:14:30 +0200 Subject: [PATCH 6/7] add tab to history rather than replacing current history --- app/assets/javascripts/shared/behaviors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/shared/behaviors.js b/app/assets/javascripts/shared/behaviors.js index 6563983fd..29bdaa231 100644 --- a/app/assets/javascripts/shared/behaviors.js +++ b/app/assets/javascripts/shared/behaviors.js @@ -87,7 +87,7 @@ let currentTab = $(e.target).attr('href').substring(1); searchParams.set('tab', currentTab); let urlWithTab = `?${searchParams.toString()}`; - history.replaceState(null, null, urlWithTab); + history.pushState(null, null, urlWithTab); }); // Allows users to navigate using the native browser back/forward buttons From 489b982d4387894490c86ef25d9d13c06d5151d7 Mon Sep 17 00:00:00 2001 From: Matt Budz Date: Mon, 24 Jun 2024 18:11:12 +0200 Subject: [PATCH 7/7] set data in pushState to load page with tab param --- app/assets/javascripts/shared/behaviors.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/shared/behaviors.js b/app/assets/javascripts/shared/behaviors.js index 29bdaa231..9aa1e52a0 100644 --- a/app/assets/javascripts/shared/behaviors.js +++ b/app/assets/javascripts/shared/behaviors.js @@ -87,17 +87,11 @@ let currentTab = $(e.target).attr('href').substring(1); searchParams.set('tab', currentTab); let urlWithTab = `?${searchParams.toString()}`; - history.pushState(null, null, urlWithTab); - }); - - // Allows users to navigate using the native browser back/forward buttons - // even when we manipulate the browser history with pushState() - $(window) - .off() - .on('popstate', function () { - if (location.search.length) { - Turbolinks.visit(location, { action: 'replace' }); - } + history.pushState( + { turbolinks: true, url: urlWithTab }, + '', + urlWithTab + ); }); }