Move News play button handlers out of html

thechangelog · Jun 26, 2024 · 7455744 · 7455744
1 parent aa04e5e
commit 7455744
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/assets/app/news.js b/assets/app/news.js
@@ -6,6 +6,10 @@ export default class News {
     this.container = document.getElementById("newsletter_iframe-container");
     this.testimonialsPlayed = 0;
 
+    document.querySelectorAll(".js-play-pause").forEach((el) => {
+      el.addEventListener("click", this.togglePlayPause);
+    });
+
     window.onload = () => {
       this.goToTestimonial(Math.floor(Math.random() * 4));
     };
@@ -83,7 +87,9 @@ export default class News {
     paginationButtons[index].parentNode.classList.add("is-active");
   }
 
-  togglePlayPause() {
+  togglePlayPause(event) {
+    event.preventDefault();
+
     const button = event.target;
     const issue = button.parentNode;
 

diff --git a/lib/changelog_web/templates/episode/news.html.heex b/lib/changelog_web/templates/episode/news.html.heex
@@ -1,6 +1,6 @@
 <article class="issue_list-item issue_list-item--sticky">
   <%= render(SharedView, "_news_issue_meta.html", issue: @episode) %>
-  <a class="play_button" title="Play Audio" href={audio_url(@episode)} onclick="news.togglePlayPause(); return false;" data-title={@episode.title}>
+  <a class="play_button js-play-pause" title="Play Audio" href={audio_url(@episode)} data-title={@episode.title}>
     <span class="mono-sm">PLAY</span>
   </a>
   <div class="progress_bar" style="--progress: 0%;"></div>

diff --git a/lib/changelog_web/templates/podcast/news.html.heex b/lib/changelog_web/templates/podcast/news.html.heex
@@ -1,6 +1,6 @@
 <article class="issue_list-item issue_list-item--sticky">
   <%= render(SharedView, "_news_issue_meta.html", issue: @episode) %>
-  <a class="play_button" title="Play Audio" href={EpisodeView.audio_url(@episode)} onclick="news.togglePlayPause(); return false;" data-title={@episode.title}>
+  <a class="play_button js-play-pause" title="Play Audio" href={EpisodeView.audio_url(@episode)} data-title={@episode.title}>
     <span class="mono-sm">PLAY</span>
   </a>
   <div class="progress_bar" style="--progress: 0%;"></div>