MediaWiki:Gadget-RainbowHeaders.js: Difference between revisions

From Elwiki
mNo edit summary
mNo edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
$('tr.rainbow').each(function(e){
$('tr.rainbow').each(function(e){
    var colors = [36, 72, 108, 144, 180, 216, 252, 288, 324];
     var tr = $(this);
     var tr = $(this);
     if(!(tr.css('position') in ['relative', 'absolute'])){
     if(!(tr.css('position') in ['relative', 'absolute'])){
Line 7: Line 8:
     $(this).children('th').each(function(e){
     $(this).children('th').each(function(e){
         var th = $(this);
         var th = $(this);
         var startH = Math.floor(th.position().left / trWidth * 360);
         var Hs = Math.round(th.position().left / trWidth * 360);
         var endH = Math.floor((th.position().left + th.width()) / trWidth * 360);
         var He = Math.round((th.position().left + th.width()) / trWidth * 360);
         startH = Math.max(0, startH);
 
         endH = Math.min(359, endH);
        var Ps = Math.floor(Hs / 36);
         console.log(startH, endH);
         var Pe = Math.ceil(He / 36);
         th.css('background-image', 'linear-gradient(to right, hsl(' + startH + ', 50%, 50%), hsl(' + endH + ', 50%, 50%))');
        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);
     });
     });
});
});

Latest revision as of 04:35, 4 June 2016

$('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);
    });
});