Frontpage aantal reacties in kleur zichtbaar maken

Pagina: 1
Acties:

  • Tjark
  • Registratie: Juni 2000
  • Laatst online: 15-08 11:28

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/// ==UserScript==
// @name         Tweakers reacties kleuren
// @namespace    http://tampermonkey.net/
// @version      2026-08-07
// @description  Kleurt reactie-aantallen op Tweakers
// @author       You
// @match        https://tweakers.net/*
// @match        https://www.tweakers.net/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    function colorCommentCounters() {
        const counters = document.querySelectorAll(
            'span.headline--replies.replies a.comment-counter'
        );

        counters.forEach(counter => {
            const path = counter.querySelector('svg path');
            const text = counter.querySelector('svg text');

            if (!path || !text) {
                return;
            }

            const count = parseInt(text.textContent.trim(), 10);

            if (isNaN(count)) {
                return;
            }

            let color;

            if (count < 50) {
                color = 'green';
            } else if (count <= 100) {
                color = 'orange';
            } else {
                color = 'red';
            }

            path.setAttribute('fill', color);
            text.setAttribute('fill', 'white');
        });
    }

    // Bestaande reactie-aantallen kleuren
    colorCommentCounters();

    // Ook nieuwe/dynamisch geladen headlines kleuren
    const observer = new MutationObserver(() => {
        colorCommentCounters();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

[ Voor 35% gewijzigd door Tjark op 07-08-2026 15:48 ]

*insert signature here