Feature/hide spoiler media

CHANGELOG

@@ -1,3 +1,7 @@
+v4.3.12 - 26/03/2024
+- Add button to hide sensitive/spoiler media
+- Fix Refresh button bug when empty text
+
 v4.3.10 - 21/03/2024
 - Allow to load more than 20 or 40 posts
 - Add link preview description

README.md

@@ -65,11 +65,11 @@ This option allows you to start without the need to upload any files on your ser
 Copy the following CSS and JS links to include them in your project:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.10/dist/mastodon-timeline.min.css" integrity="sha256-MZNfZ1eGzZqro7TWHz2Adyjn0nR4aupbRKfOVvAlcok=" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.12/dist/mastodon-timeline.min.css" crossorigin="anonymous">
 ```
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.10/dist/mastodon-timeline.umd.js" integrity="sha256-zQAs0dgRpdNJ029rph+/4AFl2ZjYJOviNvHUJxHTfzA=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.12/dist/mastodon-timeline.umd.js" crossorigin="anonymous"></script>
 ```
 
 ### Package manager

examples/local-timeline-customized.html

@@ -92,7 +92,8 @@
         padding-bottom: 2rem;
       }
       .mt-post-txt,
-      .mt-post-media-wrapper {
+      .mt-post-media-wrapper,
+      .mt-post-poll {
         width: calc(100% - 3rem);
         margin-left: auto;
       }
@@ -159,7 +160,8 @@
     padding-bottom: 2rem;
   }
   .mt-post-txt,
-  .mt-post-media-wrapper {
+  .mt-post-media-wrapper,
+  .mt-post-poll {
     width: calc(100% - 3rem);
     margin-left: auto;
   }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@idotj/mastodon-embed-timeline",
-  "version": "4.3.10",
+  "version": "4.3.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@idotj/mastodon-embed-timeline",
-      "version": "4.3.10",
+      "version": "4.3.12",
       "license": "GNU",
       "devDependencies": {
         "@rollup/plugin-terser": "^0.4.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idotj/mastodon-embed-timeline",
-  "version": "4.3.10",
+  "version": "4.3.12",
   "description": "Displays Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
   "license": "GNU",
   "author": {

src/mastodon-timeline.css

@@ -1,4 +1,4 @@
-/* Mastodon embed timeline v4.3.10 */
+/* Mastodon embed timeline v4.3.12 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-timeline */
 
@@ -548,20 +548,37 @@ body:has(dialog.mt-dialog[open]) {
   background-color: var(--mt-color-btn-bg-hover);
   text-decoration: none;
 }
-.mt-post-txt .mt-btn-spoiler {
+.mt-post-txt .mt-btn-spoiler-txt {
   display: inline-block;
   vertical-align: middle;
 }
-.mt-post-media.mt-loading-spinner > .mt-btn-spoiler {
+.mt-post-media.mt-loading-spinner > .mt-btn-spoiler-media {
   display: none;
 }
-.mt-post-media > .mt-btn-spoiler {
+.mt-post-media > .mt-btn-spoiler-media-show {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 2;
   transform: translate(-50%, -50%);
 }
+.mt-post-media.mt-post-media-spoiler > .mt-btn-spoiler-media-hide,
+.mt-post-media:not([data-media-width-hd]) > .mt-btn-spoiler-media-hide {
+  display: none;
+}
+.mt-post-media:not(.mt-post-media-spoiler) > .mt-btn-spoiler-media-show {
+  display: none;
+}
+.mt-post-media > .mt-btn-spoiler-media-hide {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 2;
+}
+.mt-post-media > .mt-btn-spoiler-media-hide > svg {
+  fill: var(--mt-color-content-txt);
+  pointer-events: none;
+}
 
 /* Error */
 .mt-error {

src/mastodon-timeline.js

@@ -1,7 +1,7 @@
 /**
  * Mastodon embed timeline
  * @author idotj
- * @version 4.3.10
+ * @version 4.3.12
  * @url https://gitlab.com/idotj/mastodon-embed-timeline
  * @license GNU AGPLv3
  */
@@ -642,7 +642,7 @@ export class Init {
         content =
           '<div class="mt-post-txt">' +
           c.spoiler_text +
-          ' <button type="button" class="mt-btn-dark mt-btn-spoiler" aria-expanded="false">' +
+          ' <button type="button" class="mt-btn-dark mt-btn-spoiler-txt" aria-expanded="false">' +
           this.mtSettings.btnShowMore +
           "</button>" +
           '<div class="spoiler-txt-hidden">' +
@@ -657,7 +657,7 @@ export class Init {
         content =
           '<div class="mt-post-txt">' +
           c.reblog.spoiler_text +
-          ' <button type="button" class="mt-btn-dark mt-btn-spoiler" aria-expanded="false">' +
+          ' <button type="button" class="mt-btn-dark mt-btn-spoiler-txt" aria-expanded="false">' +
           this.mtSettings.btnShowMore +
           "</button>" +
           '<div class="spoiler-txt-hidden">' +
@@ -912,9 +912,16 @@ export class Init {
    * @returns {string} Media in HTML format
    */
   #createMedia(m, s = false) {
-    const spoiler = s;
     const type = m.type;
+    const spoiler = s;
     let media = "";
+    const spoilerBtns =
+      '<button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-hide">' +
+      '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="icon icon-eye-slash" aria-hidden="true"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"></path></svg>' +
+      "</button>" +
+      '<button class="mt-btn-dark mt-btn-spoiler-media mt-btn-spoiler-media-show">' +
+      this.mtSettings.btnShowContent +
+      "</button>";
 
     if (type === "image") {
       media =
@@ -934,11 +941,7 @@ export class Init {
         '" style="padding-top: calc(100%/' +
         m.meta.small.aspect +
         ')">' +
-        (spoiler
+        (spoiler ? spoilerBtns : "") +
-          ? '<button class="mt-btn-dark mt-btn-spoiler">' +
-            this.mtSettings.btnShowContent +
-            "</button>"
-          : "") +
         '<img src="' +
         m.preview_url +
         '" alt="' +
@@ -966,11 +969,7 @@ export class Init {
           '" style="padding-top: calc(100%/' +
           m.meta.small.aspect +
           ')">' +
-          (spoiler
+          (spoiler ? spoilerBtns : "") +
-            ? '<button class="mt-btn-dark mt-btn-spoiler">' +
-              this.mtSettings.btnShowContent +
-              "</button>"
-            : "") +
           '<audio controls src="' +
           m.url +
           '"></audio>' +
@@ -987,11 +986,7 @@ export class Init {
           '" data-media-type="' +
           type +
           '">' +
-          (spoiler
+          (spoiler ? spoilerBtns : "") +
-            ? '<button class="mt-btn-dark mt-btn-spoiler">' +
-              this.mtSettings.btnShowContent +
-              "</button>"
-            : "") +
           '<audio controls src="' +
           m.url +
           '"></audio>' +
@@ -1018,11 +1013,7 @@ export class Init {
           '" style="padding-top: calc(100%/' +
           m.meta.small.aspect +
           ')">' +
-          (spoiler
+          (spoiler ? spoilerBtns : "") +
-            ? '<button class="mt-btn-dark mt-btn-spoiler">' +
-              this.mtSettings.btnShowContent +
-              "</button>"
-            : "") +
           '<img src="' +
           m.preview_url +
           '" alt="' +
@@ -1047,11 +1038,7 @@ export class Init {
           '" style="padding-top: calc(100%/' +
           m.meta.small.aspect +
           ')">' +
-          (spoiler
+          (spoiler ? spoilerBtns : "") +
-            ? '<button class="mt-btn-dark mt-btn-spoiler">' +
-              this.mtSettings.btnShowContent +
-              "</button>"
-            : "") +
           '<video controls src="' +
           m.url +
           '" loop></video>' +
@@ -1293,34 +1280,36 @@ export class Init {
   }
 
   /**
-   * Spoiler button
+   * Spoiler toggle for text
    * @param {event} e User interaction trigger
    */
-  #toogleSpoiler(e) {
+  #toogleTxtSpoiler(e) {
     const target = e.target;
     const nextSibling = target.nextSibling;
-    if (
+
-      nextSibling.localName === "img" ||
+    if (target.textContent == this.mtSettings.btnShowMore) {
-      nextSibling.localName === "audio" ||
+      nextSibling.classList.remove("spoiler-txt-hidden");
-      nextSibling.localName === "video"
+      nextSibling.classList.add("spoiler-txt-visible");
-    ) {
+      target.setAttribute("aria-expanded", "true");
+      target.textContent = this.mtSettings.btnShowLess;
+    } else {
+      nextSibling.classList.remove("spoiler-txt-visible");
+      nextSibling.classList.add("spoiler-txt-hidden");
+      target.setAttribute("aria-expanded", "false");
+      target.textContent = this.mtSettings.btnShowMore;
+    }
+  }
+
+  /**
+   * Spoiler toggle for image/video
+   * @param {event} e User interaction trigger
+   */
+  #toogleMediaSpoiler(e) {
+    const target = e.target;
+    if (target.classList.contains("mt-btn-spoiler-media-show")) {
       target.parentNode.classList.remove("mt-post-media-spoiler");
-      target.style.display = "none";
+    } else {
-    } else if (
+      target.parentNode.classList.add("mt-post-media-spoiler");
-      nextSibling.classList.contains("spoiler-txt-hidden") ||
-      nextSibling.classList.contains("spoiler-txt-visible")
-    ) {
-      if (target.textContent == this.mtSettings.btnShowMore) {
-        nextSibling.classList.remove("spoiler-txt-hidden");
-        nextSibling.classList.add("spoiler-txt-visible");
-        target.setAttribute("aria-expanded", "true");
-        target.textContent = this.mtSettings.btnShowLess;
-      } else {
-        nextSibling.classList.remove("spoiler-txt-visible");
-        nextSibling.classList.add("spoiler-txt-hidden");
-        target.setAttribute("aria-expanded", "false");
-        target.textContent = this.mtSettings.btnShowMore;
-      }
     }
   }
 
@@ -1431,14 +1420,16 @@ export class Init {
             </svg>
               ${this.mtSettings.btnReload}
           </button>`;
+    }
 
-      // Add footer container
+    // Add footer container
-      this.mtBodyNode.parentNode.insertAdjacentHTML(
+    this.mtBodyNode.parentNode.insertAdjacentHTML(
-        "beforeend",
+      "beforeend",
-        '<div class="mt-footer">' + btnSeeMoreHTML + btnReloadHTML + "</div>"
+      '<div class="mt-footer">' + btnSeeMoreHTML + btnReloadHTML + "</div>"
-      );
+    );
 
-      // Add event listener to the button "Refresh"
+    // Add event listener to the button "Refresh"
+    if (this.mtSettings.btnReload) {
       const reloadBtn =
         this.mtContainerNode.getElementsByClassName("btn-refresh")[0];
       reloadBtn.addEventListener("click", () => {
@@ -1466,12 +1457,14 @@ export class Init {
         this.#openPostUrl(e);
       }
 
-      // Check if Show More/Less button was clicked
+      // Check if spoiler text button was clicked
-      if (
+      if (target.classList.contains("mt-btn-spoiler-txt")) {
-        localName == "button" &&
+        this.#toogleTxtSpoiler(e);
-        target.classList.contains("mt-btn-spoiler")
+      }
-      ) {
+
-        this.#toogleSpoiler(e);
+      // Check if spoiler media button was clicked
+      if (target.classList.contains("mt-btn-spoiler-media")) {
+        this.#toogleMediaSpoiler(e);
       }
 
       // Check if image in post was clicked