☰

Der Standard - User Highlighting

Colorize all users in tickers.

  1. // ==UserScript==
  2. // @name         Der Standard - User Highlighting
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3.1
  5. // @description  Colorize all users in tickers.
  6. // @author       Winston Smith
  7. // @license      MIT
  8. // @match        https://www.derstandard.at/jetzt/livebericht/*
  9. // @icon         https://www.google.com/s2/favicons?domain=derstandard.at
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. // Text and background colors for yourself.
  14. // Use null for default.
  15. const OWN_BACKGROUND_COLOR = "gold";
  16. const OWN_TEXT_COLOR = null;
  17.  
  18. // Color settings for other users.
  19. // If enabled, the color will be generated based on the user ID.
  20. const OTHER_COLORS_ENABLED = true;
  21.  
  22. // Minimum value for color components to avoid dark colors.
  23. // Has to be between 0 and 255. The resulting color is the original value
  24. // scaled between MIN_COLOR_INTENSITY and 255.
  25. // Higher values result in brighter colors.
  26. const MIN_COLOR_INTENSITY = 128;
  27.  
  28. // We use Knuth's multiplicative hash to generate colors, so salting it should lead
  29. // to different colors for users.
  30. const HASH_SALT = 0;
  31.  
  32.  
  33. function generateColor(userId) {
  34.     const num = (((userId + HASH_SALT) * 2654435761) >>> 0);
  35.  
  36.     var r = (num & 0xFF0000) >> 16;
  37.     var g = (num & 0x00FF00) >> 8;
  38.     var b = num & 0x0000FF;
  39.  
  40.     r = Math.floor(MIN_COLOR_INTENSITY + (r / 256) * (256 - MIN_COLOR_INTENSITY));
  41.     g = Math.floor(MIN_COLOR_INTENSITY + (g / 256) * (256 - MIN_COLOR_INTENSITY));
  42.     b = Math.floor(MIN_COLOR_INTENSITY + (b / 256) * (256 - MIN_COLOR_INTENSITY));
  43.  
  44.     // Convert to hex and return as a color
  45.     return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
  46.  
  47. }
  48.  
  49. function colorizeElement(ownerId, e) {
  50.     const userContainer = e.querySelector("a.upost-usercontainer");
  51.     const parts = userContainer.href.split("/");
  52.     const userId = parts[parts.length - 1];
  53.  
  54.     if (userId == ownerId) {
  55.         e.style.backgroundColor = OWN_BACKGROUND_COLOR;
  56.         e.style.color = OWN_TEXT_COLOR;
  57.     } else if (OTHER_COLORS_ENABLED) {
  58.         e.style.backgroundColor = generateColor(userId);
  59.     }
  60. }
  61.  
  62. (function() {
  63.     'use strict';
  64.  
  65.     // Executed on DOM changes.
  66.     function onDomChange() {
  67.         highlightYourself();
  68.     }
  69.  
  70.     const observer = new MutationObserver(onDomChange);
  71.     const targetNode = document.body;
  72.     const config = { childList: true, subtree: true };
  73.     observer.observe(targetNode, config);
  74.  
  75.     function highlightYourself() {
  76.         let ownerId = JSON.parse(localStorage.userdata).value.communityIdentityId;
  77.         let xpath = `//a[contains(@href, '/legacy/') and contains(@class, 'upost-usercontainer')]/..`;
  78.         let nodes = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  79.  
  80.         for (let i = 0; i < nodes.snapshotLength; i++) {
  81.             const element = nodes.snapshotItem(i);
  82.             colorizeElement(ownerId, element);
  83.         }
  84.     }
  85. })();