Frontpage aantal reacties in kleur zichtbaar maken

Pagina: 1
Acties:

Acties:
  • +2 Henk 'm!

  • Tjark
  • Registratie: Juni 2000
  • Laatst online: 29-05 20:12

Tjark

DON'T PANIC

Topicstarter
Niet een probleem, maar een feature die ik voor mezelf gemaakt heb, en mogelijk voor anderen ook interessant is. In kleurtjes zien waar de meeste reacties op zijn.

Afbeeldingslocatie: https://tweakers.net/i/y7GUiXOHfesYjkEb1lAtS2-xCcs=/fit-in/4920x3264/filters:max_bytes(3145728):no_upscale():strip_icc():strip_exif()/f/image/5glIGSG0ouXKCVKx85Ut7gDH.jpg?f=user_large

Run ik nu via Tampermonkey. de waarden 50/100 zijn arbitrair gekozen, maar werken best wel ok is gebleken.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// ==UserScript==
// @name         Frontpage aantal reacties in kleur zichtbaar maken
// @namespace    http://tampermonkey.net/
// @version      2024-03-19
// @description  try to take over the world!
// @author       You
// @match        https://tweakers.net/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tweakers.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var commentCounters = document.querySelectorAll('.comment-counter');
    commentCounters.forEach(function(counter) {
        var textElement = counter.querySelector('svg > text');
        if (textElement) {
            var count = parseInt(textElement.textContent, 10);
            var pathElement = counter.querySelector('svg > path');
            if (pathElement) {
                if (count < 50) {
                    pathElement.setAttribute('fill', 'green');
                } else if (count >= 50 && count <= 100) {
                    pathElement.setAttribute('fill', 'orange');
                } else if (count > 100) {
                    pathElement.setAttribute('fill', 'red');
                }
                // Setting the text color to white
                textElement.setAttribute('fill', 'white');
            }
        }
    });
})();

*insert signature here