From 74557447ffc06127a7a96df96d325427dfaa189a Mon Sep 17 00:00:00 2001
From: Jerod Santo <jerod@changelog.com>
Date: Wed, 26 Jun 2024 10:22:12 -0500
Subject: [PATCH] Move News play button handlers out of html

---
 assets/app/news.js                                 | 8 +++++++-
 lib/changelog_web/templates/episode/news.html.heex | 2 +-
 lib/changelog_web/templates/podcast/news.html.heex | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/assets/app/news.js b/assets/app/news.js
index 3f7ec8e63f..ea3f952461 100644
--- 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
index 4f168eaca6..7e5f7c20fc 100644
--- 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
index 64eed621a0..7c4c5e609c 100644
--- 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>