ColorHashMenu for #plenty #userscript #work

ColorHashMenu.user.js

// ==UserScript==
// @id              465249
// @name            pm_ColorHashMenu
// @version         0.5a
// @namespace       samenhaus.de
// @author          Daniel Jackel <[email protected]> http://0x4a.net/
// @description     Color the PlentyMarkets menu at the top according to hostname. Extremely usefull if you have multiple accounts instead of multishops. 
// @include         */plenty/ui/*
// @require         https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require         https://gist.github.com/raw/2625891/waitForKeyElements.js
// @icon            https://camo.githubusercontent.com/5509efbef113affa6671254a6a4c65c14052be10/687474703a2f2f692e696d6775722e636f6d2f4f746c74585a312e706e67
// @downloadURL     https://openuserjs.org/install/Jekyll/PlentyMarkets_ColorHashMenu.user.js

// @run-at          document-end
// @grant           GM_getValue
// @grant           GM_setValue
// @grant           GM_notification
// @grant           GM_addStyle
// ==/UserScript==
const NAME = "pm_ColorHashMenu";
const VERSION = "0.5b";

this.$ = this.jQuery = jQuery.noConflict(true);
(function(){
    var firstrun = 1;
    waitLogin();

    function waitLogin(){
    console.log(NAME + " waiting for login..." + (firstrun ? "" : " again!"));  
    firstrun = 0;
    waitForKeyElements (".LogoutLabel", colorMenuBar);
    }

    function hashCode(str) {                                                    // https://stackoverflow.com/a/3426956
        var hash = 0;
        for (var i = 0; i < str.length; i++) {
           hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        return hash;
    }

    function intToRGB(i) {
        return ((i>>16)&0xFF).toString(16) + 
               ((i>>8)&0xFF).toString(16) + 
               (i&0xFF).toString(16);
    }

    function shadeColor(color, percent) {                                       // https://stackoverflow.com/a/13542669
        var num = parseInt(color,16),
        amt = Math.round(2.55 * percent),
        R = (num >> 16) + amt,
        G = (num >> 8 & 0x00FF) + amt,
        B = (num & 0x0000FF) + amt;
        return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
    }

    function contrastingColor(color)                                            // https://stackoverflow.com/a/6511606
    {
        return (luma(color) >= 165) ? '000' : 'fff';
    }
    function luma(color) // color can be a hx string or an array of RGB values 0-255
    {
        var rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
        return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
    }
    function hexToRGBArray(color)
    {
        if (color.length === 3)
            color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
        else if (color.length !== 6)
            throw('Invalid hex color: ' + color);
        var rgb = [];
        for (var i = 0; i <= 2; i++)
            rgb[i] = parseInt(color.substr(i * 2, 2), 16);
        return rgb;
    }

    function colorMenuBar (jNode) {
        console.log(NAME + " " + VERSION + " started! (jQuery " + $().jquery + ")");  

        var color = intToRGB(hashCode(window.location.hostname));
        var color_menu = shadeColor(color, -20);
        var color_border = shadeColor(color_menu, -20);
        var color_font = contrastingColor(color_menu);

        console.log("main color for " + window.location.hostname + " is #" + color_menu);

        // menu background
        GM_addStyle('.horizontalNavigationWrapper, .PlentyMainMenuBar.gwt-MenuBar-vertical .gwt-MenuItem-selected, .PlentyMainMenuBar.gwt-MenuBar-vertical tr:hover > td, .PlentyMainMenuBar.gwt-MenuBar-vertical .gwt-MenuItem-selected + .subMenuIcon-selected {background-color: #' + color_menu + ' !important}');

        // menu border
        GM_addStyle('.horizontalNavigationWrapper, .PlentyVerticalNavigationWrapper > .adminMainIconNavi {border-color: #' + color_border + ' !important}');
        
        // vertical menu border
        GM_addStyle('.gwt-MenuBar-vertical.PlentyMainMenuBar {border: 1px solid #' + color_menu + ' !important}');
        
        // menu font
        GM_addStyle('.PlentyMainMenuBar.gwt-MenuBar-horizontal .gwt-MenuItem {color: #' + color_font + ' !important}');

        // add hostname
        $('.horizontalNavigationWrapper').append('<div class="HostnamePanel" style="position: relative; overflow: hidden;"><a href="' + location.protocol + "//" + location.hostname + '" target="_blank">' + window.location.hostname.replace('www.','') + '</a></div>');

        // hostname link
        GM_addStyle('.HostnamePanel {cursor: default; color: #' + color_font + '; float: right; margin-right: 16px; margin-top: 7px; font-size: 13px; letter-spacing: 0.2em; }');
        GM_addStyle('.HostnamePanel a {text-decoration: none; text-shadow: 0 0 .4px #' + color_font + '; color: transparent; }');
        GM_addStyle('.HostnamePanel a:hover {color: #' + color_font + '; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }');

        waitForKeyElements (".adminLoginBox", waitLogin);
    }
})();