☰

Userstyles World Stats Keeper v 1.15

Keeps stats of number of install and show number of install since your last visit of the page and if you don't clear with its button "Clear StatsKeeper"

Versión del día 31/01/2025. Echa un vistazo a la versión más reciente.

// ==UserScript==
// @name           Userstyles World Stats Keeper v 1.15
// @version        1.16
// @description	   Keeps stats of number of install and show number of install since your last visit of the page and if you don't clear with its button "Clear StatsKeeper"
// @icon           https://external-content.duckduckgo.com/ip3/userstyles.world.ico
// @namespace      https://greasyfork.org/users/8
// @match          https://userstyles.world/user/*

// @author         decembre
// @grant          none
// ==/UserScript==

(function() {
  'use strict';

  // Create a storage object to store the stats
  var storage = localStorage;

  // Function to get the style ID and installs from a card
  function getStyleStats(card) {
    var styleId = card.querySelector('.grid.flex.rwrap .card.col.gap .card-header.thumbnail').href.match(/\/style\/(\d+)/)[1];
    console.log('Number ID found:', styleId);
    var installs = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]').textContent;
    console.log('Number Install found:', installs);
    return { styleId: styleId, installs: installs };
  }

// Function to update the stats and show the difference
function updateStats(card) {
  console.log('Updating stats for card:', card);
  var styleId = getStyleStats(card).styleId;
  var installs = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]').textContent;
  console.log('Number Install found:', installs);
  var initialInstalls = storage.getItem(styleId + '_initial');
  if (!initialInstalls) {
    initialInstalls = installs;
    storage.setItem(styleId + '_initial', initialInstalls);
  }
  console.log('Création de l\'élément statsElement');
  var statsElement = document.createElement('span');
  statsElement.className = 'StatsKeeper';
  var installsInt = parseInt(installs.replace(/[^0-9]/g, '')); // Remove non-numeric characters
  var initialInstallsInt = parseInt(initialInstalls.replace(/[^0-9]/g, '')); // Remove non-numeric characters
  var diff = installsInt - initialInstallsInt;
  console.log('Diff:', diff);
  if (diff > 0) {
    statsElement.textContent = '+' + diff;
    statsElement.style.background = 'green';
    statsElement.style.borderRadius = '5px';
    statsElement.style.color = 'gold';
  } else {
    statsElement.textContent = '⦁ ⦁ ⦁';
    statsElement.style.color = 'gray';
  }
  console.log('Récupération de l\'élément timeElement');
  var timeElement = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]');
  if (timeElement) {
    console.log('Time element trouvé:', timeElement);
    timeElement.parentNode.insertBefore(statsElement, timeElement.nextSibling);
    console.log('StatsKeeper ajouté:', statsElement);
  } else {
    console.error('Time element non trouvé');
  }
}

  // Function to load stored stats
  function loadStats(cards) {
    cards.forEach(function(card) {
      var styleId = getStyleStats(card).styleId;
      var installs = getStyleStats(card).installs;
      var initialInstalls = storage.getItem(styleId + '_initial');
      if (initialInstalls) {
        var statsElement = document.createElement('span');
        statsElement.className = 'StatsKeeper';
        var installsInt = parseInt(installs.replace(/[^0-9]/g, '')); // Remove non-numeric characters
        var initialInstallsInt = parseInt(initialInstalls.replace(/[^0-9]/g, '')); // Remove non-numeric characters
        var diff = installsInt - initialInstallsInt;
        console.log('Diff:', diff);
        if (diff > 0) {
          statsElement.textContent = '+' + diff;
          statsElement.style.background = 'green';
          statsElement.style.borderRadius = '5px';
          statsElement.style.color = 'gold';
        } else {
          statsElement.textContent = '⦁ ⦁ ⦁';
          statsElement.style.color = 'gray';
        }
        console.log('Stats element:', statsElement);
        var timeElement = card.querySelector('.grid.flex.rwrap .card.col.gap small:first-of-type +  small > [data-tooltip]');
console.log('Time element:', timeElement);
timeElement.parentNode.insertBefore(statsElement, timeElement.nextSibling);
console.log('StatsKeeper added:', statsElement);
}
});
}

// Function to clear all stats
function clearStats() {
console.log('Clearing all stats');
storage.clear();
var statsElements = document.querySelectorAll('.StatsKeeper');
statsElements.forEach(function(element) {
element.parentNode.removeChild(element);
});
}

// Get all cards and update the stats
var cards = document.querySelectorAll('.grid.flex.rwrap .card.col.gap');
console.log('Cards:', cards);
// loadStats(cards);
cards.forEach(function(card) {
  updateStats(card);
});

// Add a style to the page
   var style = document.createElement('style');
    style.innerHTML = `
.card-body:has(.StatsKeeper) span.author {
    position: relative !important;
    display: inline-block !important;
    width: 57% !important;
    top: 0vh !important;
    margin: 0vh 0 0 0px !important;
    padding: 2px 5px;
    font-size: 12px !important;
    border-radius: 5px;
/*border: 1px solid yellow  !important;*/
}
.card-footer small.flex:nth-child(2) span.StatsKeeper:not([style="color: gray;"]) {
    position: relative !important;
    display: inline-block !important;
    width: 40px!important;
    height: 1.5vh !important;
    line-height: 1.1vh !important;
    top: -0.2vh !important;
    left: -180px  !important;
    margin: 0vh 0 0 -20px !important;
    padding: 2px 5px;
    font-size: 12px !important;
    border-radius: 5px;
    text-align: right !important;
color: gold !important;
/*border: 1px solid aqua  !important;*/
}
.card-footer small.flex:nth-child(2) span.StatsKeeper[style="color: gray;"] {
    position: relative !important;
    display: inline-block !important;
    width: 40px!important;
    height: 1.5vh !important;
    line-height: 0.9vh !important;
    top: -0.2vh !important;
    left: -180px  !important;
    margin: 0vh 0 0 -20px !important;
    padding: 2px 5px;
    font-size: 8px !important;
    border-radius: 5px;
    text-align: right !important;
color: silver !important;
border: none  !important;
}

.ClearStatsButton {
    position: absolute !important;
    margin: 0 0 0 -150px !important;
    padding: 2px 5px !important;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
color: #fff;
background-color: #4CAF50;
border: none;
}
    `;
    document.head.appendChild(style);

// Add a button to clear all stats
var clearButton = document.createElement('button');
clearButton.textContent = 'Clear StatsKeeper';
clearButton.className = 'ClearStatsButton';
clearButton.onclick = clearStats;
var countElement = document.querySelector('#content section#styles .flex p.count');
countElement.parentNode.appendChild(clearButton);
})();