MediaWiki:Gadget-RainbowHeaders.js
From Elwiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
$('tr.rainbow').each(function(e){
var colors = [36, 72, 108, 144, 180, 216, 252, 288, 324];
var tr = $(this);
if(!(tr.css('position') in ['relative', 'absolute'])){
tr.css('position', 'relative');
}
var trWidth = tr.width();
$(this).children('th').each(function(e){
var th = $(this);
var Hs = Math.round(th.position().left / trWidth * 360);
var He = Math.round((th.position().left + th.width()) / trWidth * 360);
var Ps = Math.floor(Hs / 36);
var Pe = Math.ceil(He / 36);
var color = colors.slice(Ps, Pe - Ps - 1);
Hs = Math.max(0, Hs);
He = Math.min(359, He);
if(!color[0] || color[0] != Hs) color.unshift(Hs);
if(!color[color.length] || color[color.length] != He) color.push(He);
var colorString = color.map(function(H){
return 'hsl(' + H + ', 80%, 80%)';
}).join();
colorString = 'linear-gradient(to right, ' + colorString + ')';
th.css('background-image', colorString);
console.log(colorString, th);
});
});
