From 2a2c02c99fce0f9339d3627949928e5c9f0351ce Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Tue, 25 Jul 2023 21:12:26 +0200
Subject: [PATCH] Remove extra height on loading images + Fix spoiler btn

---
 CHANGELOG                 |  4 +++-
 src/mastodon-timeline.css | 39 ++++++++++++++++++---------------------
 src/mastodon-timeline.js  | 36 ++++++++++++++++++++++--------------
 3 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 4542454..257e00d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,5 +1,7 @@
-v3.7.1 - 15/07/2023
+v3.7.2 - 25/07/2023
 - Use window.onload to take async attribute into account
+- Remove extra height on loading images
+- Fix interaction conflict with sensitive media and content warning
 
 v3.7.0 - 10/07/2023
 - Add Markdown to HTML feature
diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css
index 64c9318..0e7bac5 100644
--- a/src/mastodon-timeline.css
+++ b/src/mastodon-timeline.css
@@ -1,4 +1,4 @@
-/* Mastodon embed feed timeline v3.7.1 */
+/* Mastodon embed feed timeline v3.7.2 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
 
@@ -100,7 +100,6 @@ html[data-theme="dark"] {
   left: 5px;
   width: 3rem;
   height: 3rem;
-  background-color: transparent;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: contain;
@@ -132,19 +131,8 @@ html[data-theme="dark"] {
 }
 .toot-text .spoiler-link {
   display: inline-block;
-  border-radius: 2px;
-  background-color: var(--bg-hover-color);
-  border: 0;
-  color: var(--content-text);
-  font-weight: 700;
-  font-size: 0.7rem;
-  padding: 0 0.35rem;
-  text-transform: uppercase;
-  line-height: 1.25rem;
-  cursor: pointer;
-  vertical-align: top;
 }
-.toot-text .spoiler-text {
+.toot-text .spoiler-text-hidden {
   display: none;
 }
 .toot-text.truncate {
@@ -222,13 +210,8 @@ html[data-theme="dark"] {
   top: 50%;
   left: 50%;
   z-index: 1;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
+  transform: translate(-50%, -50%); 
 }
-:not(.toot-media-spoiler) > .spoiler-link {
-  visibility: hidden;
-}
-
 .toot-media-spoiler > img {
   filter: blur(2rem);
 }
@@ -256,6 +239,21 @@ html[data-theme="dark"] {
   text-align: center;
 }
 
+/* Spoiler button */
+.spoiler-link {
+  border-radius: 2px;
+  background-color: var(--line-gray-color);
+  border: 0;
+  color: var(--content-text);
+  font-weight: 700;
+  font-size: 0.7rem;
+  padding: 0 0.35rem;
+  text-transform: uppercase;
+  line-height: 1.25rem;
+  cursor: pointer;
+  vertical-align: top;
+}
+
 /* Date */
 .toot-date {
   font-size: 0.75rem;
@@ -271,7 +269,6 @@ html[data-theme="dark"] {
   right: calc(50% - 1.5rem);
 }
 .loading-spinner {
-  height: 100%;
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center center;
diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js
index 11c0174..08946ba 100644
--- a/src/mastodon-timeline.js
+++ b/src/mastodon-timeline.js
@@ -1,4 +1,4 @@
-// Mastodon embed feed timeline v3.7.1
+// Mastodon embed feed timeline v3.7.2
 // More info at:
 // https://gitlab.com/idotj/mastodon-embed-feed-timeline
 
@@ -279,7 +279,7 @@ MastodonApi.prototype.getToots = function () {
         '<div class="toot-text">' +
         status_.spoiler_text +
         ' <button type="button" class="spoiler-link" aria-expanded="false">Show more</button>' +
-        '<div class="spoiler-text">' +
+        '<div class="spoiler-text-hidden">' +
         this.formatTootText(status_.content) +
         "</div>" +
         "</div>";
@@ -403,15 +403,25 @@ MastodonApi.prototype.getToots = function () {
 
   // Spoiler button
   let toogleSpoiler = function (e) {
-    let spoilerText = e.target.nextSibling;
-    let spoilerBtnText = e.target.textContent;
-    spoilerText.classList.toggle("spoiler-text");
-    if (spoilerBtnText == "Show more") {
-      spoilerBtnText = "Show less";
-      e.target.setAttribute("aria-expanded", "true");
-    } else {
-      spoilerBtnText = "Show more";
-      e.target.setAttribute("aria-expanded", "false");
+    const nextSibling = e.target.nextSibling;
+    if (nextSibling.localName === "img") {
+      e.target.parentNode.classList.remove("toot-media-spoiler");
+      e.target.style.display = "none";
+    } else if (
+      nextSibling.classList.contains("spoiler-text-hidden") ||
+      nextSibling.classList.contains("spoiler-text-visible")
+    ) {
+      if (e.target.textContent == "Show more") {
+        nextSibling.classList.remove("spoiler-text-hidden");
+        nextSibling.classList.add("spoiler-text-visible");
+        e.target.setAttribute("aria-expanded", "true");
+        e.target.textContent = "Show less";
+      } else {
+        nextSibling.classList.remove("spoiler-text-visible");
+        nextSibling.classList.add("spoiler-text-hidden");
+        e.target.setAttribute("aria-expanded", "false");
+        e.target.textContent = "Show more";
+      }
     }
   };
 };
@@ -470,9 +480,7 @@ MastodonApi.prototype.replaceMedias = function (m, s) {
     '<div class="toot-media ' +
     (spoiler ? "toot-media-spoiler" : "") +
     ' img-ratio14_7 loading-spinner">' +
-    (spoiler
-      ? '<button class="spoiler-link" onclick="this.parentNode.classList.remove(\'toot-media-spoiler\')">Show content</button>'
-      : "") +
+    (spoiler ? '<button class="spoiler-link">Show content</button>' : "") +
     '<img onload="removeSpinner(this)" onerror="removeSpinner(this)" src="' +
     m.preview_url +
     '" alt="" loading="lazy" />' +