Coomer Card Resize

Resize card list and add margin

As of 2025-02-27. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name        Coomer Card Resize
// @namespace   Violentmonkey Scripts
// @match       https://coomer.su/*
// @version     1.2
// @author      Nimby345
// @description Resize card list and add margin
// @grant       none
// ==/UserScript==

(function () {
  "use strict";

  // Regex to match allowed URLs
  const urlPattern = /^https:\/\/coomer\.su\/(?:fansly|onlyfans)\/user\/[^/?]+(?:\?o=\d+)?$|^https:\/\/coomer\.su\/posts\/popular(?:.*)?$/;

  const cardSize = 400; // Card size in px, original 400
  const cardGap = 0.25; // Gap in em, original 3.3

  function shouldUpdate() {
    return urlPattern.test(window.location.href);
  }

  function updateCardSize() {
    const cardList = document.querySelector(".card-list__items");
    if (cardList) {
      cardList.style.setProperty("--card-size", cardSize + "px", "important"); // Sets card-size
      cardList.style.gap = cardGap + "em"; // Adds space between the images
      //console.log("Card size and margin updated!");
    } //else {
      //console.log("Card list not found, retrying...");
      //setTimeout(updateCardSize, 500); // Retry if card list not found -> Now checks for URL changes further down in the script instead
    //}
  }
   
  // Function to observe page changes
  function observeChanges() {
    const observer = new MutationObserver((mutations) => {
      let updated = false;

      mutations.forEach((mutation) => {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
          //console.log(New content detected");

          // Check if the URL matches the allowed pattern before updating
          if (shouldUpdate()) {
            updateCardSize();
            updated = true;
          }
        }
      });

      // if (!updated) {
        //console.log("New page detected, but no content updates");
      //}
    });

    observer.observe(document.body, { childList: true, subtree: true });
    //console.log("Observer attached");
  }
  // Function to run URL check, card size update and observer
  function init() {
    if (shouldUpdate()) {
      updateCardSize();
      observeChanges();
    } //else {
      //console.log("Script not applied, URL doesn't match allowed pattern: " + window.location.href);
    //}
  }

  // Listen for page navigation
  window.addEventListener('popstate', () => {
    init();
  });

  // Check the URL when the script is first loaded
  window.addEventListener("load", () => {
    init();
    // Check for URL changes every 500 ms
    setInterval(() => {
      if (shouldUpdate()) {
        updateCardSize(); // Update if URL is in the allowed pattern
      }
    }, 500);
  });
})();