diff options
| author | Tom Smeding <tom@tomsmeding.com> | 2026-06-28 18:17:50 +0200 |
|---|---|---|
| committer | Tom Smeding <tom@tomsmeding.com> | 2026-06-28 18:19:58 +0200 |
| commit | 06dbdee019256ec52fce87d0bac4ffcda09fa392 (patch) | |
| tree | 72225f9d68d2319427fe189b0e8dfbf02bc8004e /pages | |
| parent | 5299662f7dacdb636df009aefdc8a7d52d5faf8e (diff) | |
Nick colors on client in JS
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/log.js | 94 | ||||
| -rw-r--r-- | pages/log.mustache | 3 |
2 files changed, 96 insertions, 1 deletions
diff --git a/pages/log.js b/pages/log.js new file mode 100644 index 0000000..b7fe9e3 --- /dev/null +++ b/pages/log.js @@ -0,0 +1,94 @@ +"use strict"; + +var colorTableLight = [ + // Tomorrow theme (light) (ish) + "#4d4d4c", // Foreground + "#c82829", // Red + "#cb6b01", // Orange (darker) + "#2d981a", // Green(ish) + "#3e999f", // Aqua + "#4271ae", // Blue + "#8959a8", // Purple + // Solarized theme + "#002b36", // Base03 + "#586e75", // Base01 + "#657b83", // Base00 + "#839496", // Base0 + "#b58900", // Yellow + "#cb4b16", // Orange + "#dc322f", // Red + "#d33682", // Magenta + "#6c71c4", // Violet + "#268bd2", // Blue + "#2aa198", // Cyan + "#859900", // Green +]; + +var colorTableDark = [ + // Tomorrow theme (dark) + "#c5c8c6", // Foreground + "#969896", // Comment + "#cc6666", // Red + "#de935f", // Orange + "#f0c674", // Yellow + "#b5bd68", // Green + "#8abeb7", // Aqua + "#81a2be", // Blue + "#b294bb", // Purple + // Solarized theme + "#fdf6e3", // Base3 + "#eee8d5", // Base2 + "#93a1a1", // Base1 + "#839496", // Base0 + "#b58900", // Yellow + "#cb4b16", // Orange + "#dc322f", // Red + "#d33682", // Magenta + "#6c71c4", // Violet + "#268bd2", // Blue + "#2aa198", // Cyan + "#859900", // Green +]; + +// weechat's gui_nick_hash_djb2_32 +function nickhash(nick) { + var h = 0; + for (var i = 0; i < nick.length; i++) + h ^= (h << 5) + (h >> 2) + nick.charCodeAt(i); + return h; +} + +function renderNickColors(dark) { + var table = dark ? colorTableDark : colorTableLight; + var n = table.length; + + var spans = document.querySelectorAll("table#events span.nick"); + for (var i = 0; i < spans.length; i++) { + var el = spans[i]; + var text = el.innerText; + var h = nickhash(el.innerText); + el.setAttribute("style", "color: " + table[h % n]); + } +} + +window.addEventListener("load", function() { + var querystr = "(prefers-color-scheme: dark)"; + if (!("matchMedia" in window)) { + renderNickColors(false); + return; + } + + var queryList = window.matchMedia(querystr); + renderNickColors(queryList.matches); + + // Apparently older Safari doesn't have addEventListener here yet + if ("addEventListener" in queryList) { + queryList.addEventListener("change", function(ql) { + renderNickColors(ql.matches); + }); + } else if ("addListener" in queryList) { + queryList.addListener(function() { + renderNickColors(window.matchMedia(querystr).matches); + }); + } +}); diff --git a/pages/log.mustache b/pages/log.mustache index 23eccc6..10a99cf 100644 --- a/pages/log.mustache +++ b/pages/log.mustache @@ -5,6 +5,7 @@ <title>{{channel}} ({{network}}) - tirclogv</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/style.css"> + <script src="/log.js"></script> <link rel="icon" type="image/png" href="/favicon.png"> </head> <body> @@ -56,7 +57,7 @@ {{#events}} <tr{{#classlist}} class="{{&.}}"{{/classlist}}> <td><a href="/log/{{&alias}}?eid={{&linkid}}#ev-{{&linkid}}" name="ev-{{&linkid}}">{{&datetime}}</a></td> - <td>{{#nickwrap1}}<span class="nickwrap">{{&.}}</span>{{/nickwrap1}}{{nick}}{{#nickwrap2}}<span class="nickwrap">{{&.}}</span>{{/nickwrap2}}</td> + <td>{{#nickwrap1}}<span class="nickwrap">{{&.}}</span>{{/nickwrap1}}<span class="nick">{{nick}}</span>{{#nickwrap2}}<span class="nickwrap">{{&.}}</span>{{/nickwrap2}}</td> <td>{{message}}</td> </tr> {{/events}} |