File Count on Cards

plugins/cjCardTweaks/README.md

@@ -0,0 +1,9 @@
+# CJ's Card Tweaks
+This plugin contains the various tweaks I've made to my Stash cards for anyone who may be interested. Each tweak will be toggleable, so users have the option to subscribe to some without subscribing to all.
+
+## Tweaks
+
+### File Count on Cards
+![Screenshot 2024-07-24 173921](https://github.com/user-attachments/assets/8eaf0dce-a6c2-4d92-aa78-7ddc2322392a)
+
+Scenes, Galleries, or Images with a file count greater than one will have a badge similar to the badge present in the file count tab when more than one file is present. This badge will be located at the top right on the card where the studio logo used to live. ATM, the CSS that relocates the studio logo to the left of the title card, is not included as a toggleable tweak, but I plan to extract that out of my SCSS theme project and incorporate it here as a toggleable tweak. Until then, users who aren't using any other plugins that reposition the studio logo can tweak the CSS to reposition the file count to a new location.

plugins/cjCardTweaks/cjCardTweaks.css

@@ -0,0 +1,16 @@
+span.file-count.badge.badge-pill.badge-info {
+  position: absolute;
+  top: 0.3rem;
+  right: 0.5rem;
+  border-radius: 50%;
+  width: 1.7rem;
+  height: 1.7rem;
+  padding: 5px 8px;
+  font-size: 100%;
+  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.5);
+}
+
+.grid-card:hover .file-count.badge {
+  opacity: 0;
+  transition: opacity 0.5s;
+}

plugins/cjCardTweaks/cjCardTweaks.js

@@ -0,0 +1,127 @@
+(function () {
+  function addFileCount(cardClass, thumbnailSelector, list) {
+    for (const card of document.querySelectorAll(cardClass)) {
+      const cardLink = card.querySelector(thumbnailSelector);
+      if (cardLink) {
+        const cardUrl = cardLink.href;
+        const cardId = cardUrl.split("/").pop().split("?")[0];
+        const cardData = list[cardId];
+        if (cardData?.files.length > 1) {
+          const el = createElementFromHTML(
+            `<span class="file-count badge badge-pill badge-info">` +
+              cardData?.files.length +
+              `</span>`
+          );
+          cardLink.parentElement.appendChild(el);
+        }
+      }
+    }
+  }
+
+  //Scene Listerers
+  stash.addEventListener("page:scenes", function () {
+    waitForElementClass("scene-card", function () {
+      addFileCount(
+        ".scene-card",
+        ".video-section.thumbnail-section > a",
+        stash.scenes
+      );
+    });
+  });
+
+  stash.addEventListener("page:performer:scenes", function () {
+    waitForElementClass("scene-card", function () {
+      addFileCount(
+        ".scene-card",
+        ".video-section.thumbnail-section > a",
+        stash.scenes
+      );
+    });
+  });
+
+  stash.addEventListener("page:movie:scenes", function () {
+    waitForElementClass("scene-card", function () {
+      addFileCount(
+        ".scene-card",
+        ".video-section.thumbnail-section > a",
+        stash.scenes
+      );
+    });
+  });
+
+  stash.addEventListener("page:studio:scenes", function () {
+    waitForElementClass("scene-card", function () {
+      addFileCount(
+        ".scene-card",
+        ".video-section.thumbnail-section > a",
+        stash.scenes
+      );
+    });
+  });
+
+  stash.addEventListener("page:tag:scenes", function () {
+    waitForElementClass("scene-card", function () {
+      addFileCount(
+        ".scene-card",
+        ".video-section.thumbnail-section > a",
+        stash.scenes
+      );
+    });
+  });
+
+  //Gallery Listerers
+  stash.addEventListener("page:galleries", function () {
+    waitForElementClass("gallery-card", function () {
+      addFileCount(".gallery-card", ".thumbnail-section > a", stash.galleries);
+    });
+  });
+
+  stash.addEventListener("page:performer:galleries", function () {
+    waitForElementClass("gallery-card", function () {
+      addFileCount(".gallery-card", ".thumbnail-section > a", stash.galleries);
+    });
+  });
+
+  stash.addEventListener("page:studio:galleries", function () {
+    waitForElementClass("gallery-card", function () {
+      addFileCount(".gallery-card", ".thumbnail-section > a", stash.galleries);
+    });
+  });
+
+  stash.addEventListener("page:tag:galleries", function () {
+    waitForElementClass("gallery-card", function () {
+      addFileCount(".gallery-card", ".thumbnail-section > a", stash.galleries);
+    });
+  });
+
+  //Image Listerers
+  stash.addEventListener("page:images", function () {
+    waitForElementClass("image-card", function () {
+      addFileCount(".image-card", ".thumbnail-section > a", stash.images);
+    });
+  });
+
+  stash.addEventListener("page:gallery", function () {
+    waitForElementClass("image-card", function () {
+      addFileCount(".image-card", ".thumbnail-section > a", stash.images);
+    });
+  });
+
+  stash.addEventListener("page:performer:images", function () {
+    waitForElementClass("image-card", function () {
+      addFileCount(".image-card", ".thumbnail-section > a", stash.images);
+    });
+  });
+
+  stash.addEventListener("page:studio:images", function () {
+    waitForElementClass("image-card", function () {
+      addFileCount(".image-card", ".thumbnail-section > a", stash.images);
+    });
+  });
+
+  stash.addEventListener("page:tag:images", function () {
+    waitForElementClass("image-card", function () {
+      addFileCount(".image-card", ".thumbnail-section > a", stash.images);
+    });
+  });
+})();

plugins/cjCardTweaks/cjCardTweaks.yml

@@ -0,0 +1,10 @@
+name: CJ's Card Tweaks.
+description: Provides various tweak for the Scene, Gallery, and Images Cards.
+version: 1.0
+ui:
+  requires:
+    - StashUserscriptLibrary
+  css:
+    - cjCardTweaks.css
+  javascript:
+    - cjCardTweaks.js