☰

GitHub Dark Script

Companion Script to GitHub Dark

От 26.12.2015. Виж последната версия.

// ==UserScript==
// @name         GitHub Dark Script
// @version      0.1
// @description  Companion Script to GitHub Dark
// @namespace    https://github.com/StylishThemes
// @include      http*github.com*
// @grant        none
// ==/UserScript==

"use strict";

if (/\/issues\/\d/.test(document.location)) {
    var comments = document.querySelectorAll(".js-discussion > .timeline-comment-wrapper > a"), authors = {};
    for (var i = 0, len = comments.length; i < len; i++) {
        var href = comments[i].getAttribute("href");
        if (/^\//.test(href)) {
            var author = href.substring(1);
            if (!authors[author])
                authors[author] = [];
            authors[author].push(comments[i].nextElementSibling);
        }
    }
    // TODO: Determine color for each author and apply the style to the comment box
}

var hsl, hslGradient, color,
    colors = '',
    styles = document.createElement('style');
for (author in authors) {
    if (authors.hasOwnProperty(author)) {
        hsl = colorFromString(author),
        color = (hsl[2] > 50) ? '#000' : '#fff',
        hslGradient = hsl[0] + ',' + hsl[1] + '%,' + (hsl[2] - 10) + '%';
        hsl = hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%';
        authors[author].forEach(function(){
            // this works - but how to change the arrow color (.timeline-comment:before, .timeline-comment:after)?
            // element.setAttribute('style', 'border-color: rgb(' + rgb + ') !important');
            colors += 'a[href^="/' + author + '"] + div.timeline-comment { border-color: hsl(' + hsl + ') !important; }' +
                'a[href^="/' + author + '"] + div.timeline-comment:before,' +
                'a[href^="/' + author + '"] + div.timeline-comment:after { border-right-color: hsl(' + hsl + ') !important; }' + 
                'a[href^="/' + author + '"] + div.timeline-comment .timeline-comment-header { ' +
                    'background: linear-gradient(to bottom, hsl(' + hsl + '), hsl(' + hslGradient + ')) !important;' +
                    'border-color: hsl(' + hsl + ') !important;' +
                    'color: ' + color + ' !important; }' +
                'a[href^="/' + author + '"] + div.timeline-comment .timeline-comment-header a { color: ' + color + ' !important; }'
        });
    }
}
styles.innerHTML = colors;
document.getElementsByTagName('body')[0].appendChild(styles);

// get RGB color values in the format [red,green,blue] for a given string
// based on : https://github.com/garycourt/murmurhash-js
// then convert RGB to HSL
function colorFromString(string) {
    var remainder, bytes, h1, h1b, c1, c2, k1, i, r, g, b;
    remainder = string.length & 3;
    bytes = string.length - remainder;
    h1 = 0; // Seed value
    c1 = 0xcc9e2d51;
    c2 = 0x1b873593;
    i = 0;

    while (i < bytes) {
        k1 =
          ((string.charCodeAt(i) & 0xff)) |
          ((string.charCodeAt(++i) & 0xff) << 8) |
          ((string.charCodeAt(++i) & 0xff) << 16) |
          ((string.charCodeAt(++i) & 0xff) << 24);
        ++i;

        k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff;
        k1 = (k1 << 15) | (k1 >>> 17);
        k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff;

        h1 ^= k1;
        h1 = (h1 << 13) | (h1 >>> 19);
        h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff;
        h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16));
    }

    k1 = 0;

    switch (remainder) {
        case 3: k1 ^= (string.charCodeAt(i + 2) & 0xff) << 16;
        case 2: k1 ^= (string.charCodeAt(i + 1) & 0xff) << 8;
        case 1: k1 ^= (string.charCodeAt(i) & 0xff);

        k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
        k1 = (k1 << 15) | (k1 >>> 17);
        k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
        h1 ^= k1;
    }

    h1 ^= string.length;

    h1 ^= h1 >>> 16;
    h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff;
    h1 ^= h1 >>> 13;
    h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff;
    h1 ^= h1 >>> 16;

    var integer = h1 >>> 0;
    var colors = [];

    var j = 3;
    while (j) {
        colors[--j] = integer & (255);
        integer = integer >> 8;
    }

    // convert rgb to hsl - from http://stackoverflow.com/a/2348659
    r = colors[0];
    g = colors[1];
    b = colors[2];

    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    } else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
}