[RFC] Custom Javascript: Hide Age for Performers above a certain age

[plz-send-help]

EDIT:

WORKING SCRIPT: (Tested with: v0.20.2-23-g55d3deee)

function hideDivsWithAge40OrHigher() {
  const elements = document.querySelectorAll('.performer-card__age, .age');

  for (const element of elements) {
    const age = parseInt(element.textContent.match(/\d+/)[0], 10);

    if (age >= 40) {
      element.style.display = 'none';

      // Hide the corresponding span with class "age-tail" if the element has class "age"
      if (element.classList.contains('age')) {
        const ageTail = element.nextElementSibling;

        if (ageTail && ageTail.classList.contains('age-tail')) {
          ageTail.style.display = 'none';
        }
      }
    }
  }
}

// Set up a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      hideDivsWithAge40OrHigher();
    }
  }
});

// Start observing the entire document for changes
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

---

Scope

Being able to hide the age of performers after a certain age range has been met.

Long Form

On the Performer page, things can get awkward if you have any vintage content, or even content from 20 years ago. While on the scenes view, it's usually not an issue (due to the calculated age of the performer based on the scene) However I feel like it's advantages to be able to hide ages after a certain range. Hence this javascript mod.

Examples

This is my current (half-working) version of the script: Tested with: v0.20.2-23-g55d3deee

function hideDivsByAge() {
  // Select all divs with the class "performer-card__age"
  const ageDivs = document.querySelectorAll('.performer-card__age');
  let hiddenCount = 0;

  // Iterate through each div
  ageDivs.forEach(div => {
    // Parse the content for a number
    const age = parseInt(div.textContent, 10);

    // If the number is 40 or higher, hide the div and increment the hidden count
    if (age >= 40) {
      div.style.display = 'none';
      hiddenCount++;
    }
  });

  // Output the total amount of divs found and the number of divs hidden
  //console.log('Total divs found:', ageDivs.length);
  //console.log('Number of divs hidden:', hiddenCount);
}

// Execute the function 1 second after onload
window.addEventListener('load', () => {
  setTimeout(hideDivsByAge, 1000);
});

Current Issues

I cant for the life of me figure out how to call my function, after the cards have been loaded, without relying on a timeout. • I've tried altering the existing function, which creates the performer cards - however had no success in inserting my script between loading of the PerformerCard js and its execution • I've also tried various forms of loading my function after the dom is done, however my usual methods either didn't work at all, or were still too soon.

Neither does it work on page change.

Any advice on having my function called without timeout would be greatly appreciated.

[plz-send-help]

Figured out an alternative method, by just stalking the dom for any changes. A bit bruteforcy, but at least it works nice and without delay :)

Change age >= 40, to whatever your preferred cutoff age is.

[DogmaDragon]

Just for the future reference, custom add-ons and their issues are better suited for https://github.com/stashapp/CommunityScripts repository.