feed-condense-content.js: adds extra Read less button at start

1 files changed, 38 insertions, 12 deletions

diff --git a/http/public/scripts/feed-condense-content.js b/http/public/scripts/feed-condense-content.js
index 014a07b..5203517 100644
--- a/http/public/scripts/feed-condense-content.js
+++ b/http/public/scripts/feed-condense-content.js
@@ -1,8 +1,13 @@
 const expandedClass = "e-content--expanded";
 
 export function toggleContentExpanded(id) {
-  const content = document.querySelector(`[data-content-id="${id}"]`);
-  const button = document.querySelector(`[data-content-id="${id}"] + button`);
+  const content = document.querySelector(`.e-content[data-content-id="${id}"]`);
+  const buttonBefore = document.querySelector(
+    `button:has(+ .e-content[data-content-id="${id}"])`,
+  );
+  const buttonAfter = document.querySelector(
+    `.e-content[data-content-id="${id}"] + button`,
+  );
 
   if (!content) {
     throw new Error(`No content found with ID: ${id}`);
@@ -16,16 +21,32 @@ export function toggleContentExpanded(id) {
     content.setAttribute("class", [...classes, expandedClass].join(" "));
   }
 
-  if (!button) {
-    console.warn(
-      `Toggled content expansion, but no button next to content with ID: ${id}`,
-    );
+  if (wasExpanded) {
+    if (!buttonBefore) {
+      console.warn("Tried to remove 'Read less' button but could not find it");
+    } else {
+      buttonBefore.remove();
+    }
+    if (!buttonAfter) {
+      console.warn(
+        "Tried to toggle 'Read less' button to say 'Read more' but could not find it",
+      );
+    } else {
+      buttonAfter.textContent = "Read more";
+    }
   } else {
-    if (wasExpanded) {
-      button.textContent = "Read more";
+    if (!buttonAfter) {
+      console.warn(
+        "Tried to toggle 'Read more' button to say 'Read less' but could not find it",
+      );
     } else {
-      button.textContent = "Read less";
+      buttonAfter.textContent = "Read more";
+    }
+    if (buttonBefore) {
+      buttonBefore.remove();
     }
+    const newButtonBefore = createExpandCondenseButton(id, "Read less");
+    content.insertAdjacentElement("beforebegin", newButtonBefore);
   }
 }
 
@@ -33,9 +54,14 @@ export function addExpandItemButtons() {
   for (const content of document.querySelectorAll(".e-content")) {
     const contentId = crypto.randomUUID();
     content.setAttribute("data-content-id", contentId);
-    const button = document.createElement("button");
-    button.textContent = "Read more";
-    button.addEventListener("click", () => toggleContentExpanded(contentId));
+    const button = createExpandCondenseButton(contentId, "Read more");
     content.insertAdjacentElement("afterend", button);
   }
 }
+
+function createExpandCondenseButton(contentId, initialText) {
+  const button = document.createElement("button");
+  button.textContent = initialText;
+  button.addEventListener("click", () => toggleContentExpanded(contentId));
+  return button;
+}