From aba55f2a77dd5dd1e063a5339babfe909f0e1393 Mon Sep 17 00:00:00 2001
From: Julien Maury <6878027+jmau111@users.noreply.github.com>
Date: Mon, 21 Jun 2021 05:59:30 +0200
Subject: [PATCH] stories list script as separate js file - defer attribute
 (#13993)

* stories list script as separate js file - defer attribute

* change name storiesListScript for storiesList

* remove legacy function hasClass()

* add description to js pack

* remove case that triggers nothing

* Revert "remove case that triggers nothing"

 the if statement is on the element not its parents

This reverts commit f4402f5456e15da122f9820917f5965a1ebc50a4.

* remove deprecated code from storiesList pack

* remove unused code
---
 app/assets/stylesheets/articles.scss          |  4 ---
 app/javascript/packs/storiesList.js           |  8 +++++
 app/views/articles/index.html.erb             |  2 +-
 app/views/articles/search.html.erb            |  2 +-
 app/views/organizations/show.html.erb         |  2 +-
 app/views/podcast_episodes/index.html.erb     |  2 +-
 app/views/podcasts/new.html.erb               |  2 +-
 .../stories/_stories_list_script.html.erb     | 29 -------------------
 .../stories/tagged_articles/index.html.erb    |  2 +-
 app/views/users/show.html.erb                 |  2 +-
 10 files changed, 15 insertions(+), 40 deletions(-)
 create mode 100644 app/javascript/packs/storiesList.js
 delete mode 100644 app/views/stories/_stories_list_script.html.erb

diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
index 4a73a7461..daba07d8d 100644
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@@ -289,10 +289,6 @@
     position: relative;
     @include dev-card;
 
-    &.active {
-      // TODO: what is this .active thingy?
-      opacity: 0.66;
-    }
     &.single-article-small-pic {
       vertical-align: top;
       overflow: hidden;
diff --git a/app/javascript/packs/storiesList.js b/app/javascript/packs/storiesList.js
new file mode 100644
index 000000000..32007f438
--- /dev/null
+++ b/app/javascript/packs/storiesList.js
@@ -0,0 +1,8 @@
+/**
+ * @file A custom event that gets dispatched to notify search forms to synchronize their state.
+ */
+window.dispatchEvent(
+  new CustomEvent('syncSearchForms', {
+    detail: { querystring: location.search },
+  }),
+);
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index f135a4d92..58ec45bba 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -90,5 +90,5 @@
     <%= render "articles/sidebar_additional" %>
   </div>
 
-  <%= render "stories/stories_list_script" %>
+  <%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
 <% end %>
diff --git a/app/views/articles/search.html.erb b/app/views/articles/search.html.erb
index ddd966843..770fa4de0 100644
--- a/app/views/articles/search.html.erb
+++ b/app/views/articles/search.html.erb
@@ -56,4 +56,4 @@
 </main>
 <%= render "articles/search" %>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/organizations/show.html.erb b/app/views/organizations/show.html.erb
index f623ef93a..58ce524b0 100644
--- a/app/views/organizations/show.html.erb
+++ b/app/views/organizations/show.html.erb
@@ -24,4 +24,4 @@
   <%= render "organizations/sidebar_additional" %>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb
index 758993bc9..433aff401 100644
--- a/app/views/podcast_episodes/index.html.erb
+++ b/app/views/podcast_episodes/index.html.erb
@@ -32,4 +32,4 @@
   <%= render "podcast_episodes/sidebar_additional" %>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/podcasts/new.html.erb b/app/views/podcasts/new.html.erb
index 59527ddd0..10177572b 100644
--- a/app/views/podcasts/new.html.erb
+++ b/app/views/podcasts/new.html.erb
@@ -9,4 +9,4 @@
   <%= render "podcast_episodes/sidebar_additional" %>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/stories/_stories_list_script.html.erb b/app/views/stories/_stories_list_script.html.erb
deleted file mode 100644
index c5c1e9883..000000000
--- a/app/views/stories/_stories_list_script.html.erb
+++ /dev/null
@@ -1,29 +0,0 @@
-<script defer>
-  var isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
-  if (isTouchDevice) {
-    function hasClass(el, cls) {
-      return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
-    }
-
-    var activeLinks = document.getElementsByClassName('active');
-    Array.prototype.forEach.call(activeLinks, function (el) {
-      el.classList.remove("active");
-    });
-
-    document.getElementById('main-content').addEventListener('click', function (event) {
-      var clickedEl = event.target;
-      if (hasClass(clickedEl, "bm-initial") || hasClass(clickedEl, "bm-success")) {
-        //do nothing
-      } else if (hasClass(clickedEl.parentNode, "crayons-story")) {
-        clickedEl.parentNode.classList.add('active');
-      } else if (hasClass(clickedEl.parentNode.parentNode, "crayons-story")) {
-        clickedEl.parentNode.parentNode.classList.add('active');
-      } else if (hasClass(clickedEl.parentNode.parentNode.parentNode, "crayons-story")) {
-        clickedEl.parentNode.parentNode.parentNode.classList.add('active');
-      }
-    });
-  }
-
-  // A custom event that gets dispatched to notify search forms to synchronize their state.
-  window.dispatchEvent(new CustomEvent('syncSearchForms', { detail: { querystring: location.search } }));
-</script>
diff --git a/app/views/stories/tagged_articles/index.html.erb b/app/views/stories/tagged_articles/index.html.erb
index d0649e07e..db04e1efd 100644
--- a/app/views/stories/tagged_articles/index.html.erb
+++ b/app/views/stories/tagged_articles/index.html.erb
@@ -113,5 +113,5 @@
     <%= render "stories/tagged_articles/sidebar_additional" %>
   </div>
 
-  <%= render "stories/stories_list_script" %>
+  <%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
 <% end %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index aa9097687..970525099 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -158,4 +158,4 @@
   </main>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>