replace star by profile icon for UserScript

replaceStarByProfileIcon.user.js

// ==UserScript==
// @name        replace star by profile icon
// @namespace   https://www.hatena.ne.jp/noromanba/
// @description replace star by profile icon for UserScript
// @include     http://*
// @include     https://*.hatena.tld/*
// @exclude     http://serif.hatelabo.jp/*
// @grant       none
// @version     2017.2.28.2
// @run-at      document-end
// @homepage    https://gist.github.com/2725191
// @downloadURL https://gist.github.com/noromanba/2725191/raw/replaceStarByProfileIcon.user.js
// @contributor os0x            https://gist.github.com/2424/
// @contributor nikolat         https://gist.github.com/761858/
// @contributor saitamanodoruji https://gist.github.com/saitamanodoruji/5726562
// @author      noromanba       https://www.hatena.ne.jp/noromanba/
// @license     Unknown (as-is)
// @icon        https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Star_coin.png/128px-Star_coin.png
// ==/UserScript==

// Icon (PD by Mr.Yahoo!)
// https://commons.wikimedia.org/wiki/File%3AStar_coin.png

// Devel
// https://gist.github.com/2725191


// TODO
// - to ES2015
// - smart exist Hatena.Star

// TBD
// - s.hatena.tld -> profile page
//  - http://d.hatena.ne.jp/noromanba/20140401/1396294430
//  - https://s.hatena.ne.jp/js/HatenaStar.js:2464
// - Ten.js way Class inherit model; new Ten.Class
// - handle self star immediately
//  - e.g. MutationObserver

// c.f.
// http://d.hatena.ne.jp/os0x/20070911/1189544433
(function () {
    'use strict';

    // use native avatarize on Hatena Blog
    if (document.body.querySelector([
            '#globalheader-container[data-brand="hatenablog"] iframe#globalheader'
        ]) &&
        !/^\/archive/.test(location.pathname) &&
        !/^\/search/.test(location.pathname)) {
        // TBD check exist Hatena.Star
        return;
    }

    var avatarize = function () {
        var Hatena = window.Hatena;
        if (!Hatena || !Hatena.Star) return;

        var coloring = (function () {
            // You can change color as you like e.g.
            // 'green' : 'rgb(0, 255, 0)', 'red' : '#f30', ...
            var palette = {
                'yellow': '#ffd700',
                'green' : 'green',
                'red'   : 'red',
                'blue'  : 'blue',
                'purple': 'purple',
                'temp'  : 'ghostwhite'
            };
            return function (color) {
                // If You want coloring yellow star, replace "//*" to "/*"
                //*/
                // yellow -> undefined
                return '2px solid ' + (palette[color] || color);
                /*/
                return '2px solid ' + (palette[color] || color || palette['yellow']);
                /*/
            };
        })();

        Array.prototype.forEach.call(document.body.querySelectorAll([
            '.hatena-star-star-container > a'
        ]), function (star) {
            // TODO handle Twitter, FB, and OAuth services or omit
            if (/^[a-zA-Z][-\w]{1,30}[a-zA-Z\d]/.test(star.alt)) {
                var color = (star.src.match(/star-(\w+)\.gif(?:$|\?)/) || [])[1];
                star.style.border = coloring(color);
                star.src = Hatena.Star.User.getProfileIcon(star.alt).src;
            }
        });

        var pushStars = Hatena.Star.Entry.prototype.pushStars;
        Hatena.Star.Entry.prototype.pushStars = function (stars, color) {
            stars = stars.map(function (star) {
                var image = Hatena.Star.User.getProfileIcon(star.name);
                image.alt = star.name;
                // workaround: block a tooltip cover-over pop-up
                image.title = '';
                image.style.outline = coloring(color);
                image.classList.add('hatena-star-star');
                // TODO fix style w/o remove class or assert in the comment block
                // workaround: out of star position on Hatena Bookmark comment; e.g.
                // http://b.hatena.ne.jp/entry/let.hatelabo.jp/noromanba/let/hLHX5-ST-aMn
                image.classList.remove('profile-icon');

                star.img = image;
                return star;
            });
            pushStars.call(this, stars, color);
        };

        var showName = Hatena.Star.Star.prototype.showName;
        // TBD restrict arg name
        Hatena.Star.Star.prototype.showName = function (e) {
            this.screen_name = this.name;
            showName.call(this, e);
        };

        // TBD s.hatena.tld -> profile page when user do not use current service
        //     mix-in or inherit w/ Ten.Class
//        var userPage = Hatena.Star.User.prototype.userPage;
//        Hatena.Star.User.prototype.userPage = function () {
//            var BaseURL = Hatena.Star.BaseURL;
//            Hatena.Star.BaseURL = Hatena.Star.PortalURL;
//            userPage.call(this);
//            Hatena.Star.BaseURL = BaseURL;
//        };
    }; // /avatarize

    // c.f.
    // http://subtech.g.hatena.ne.jp/secondlife/20091228/1262001989
    // https://gist.github.com/761858
    var executeBrowserContext = (function () {
        var wall = document.head || document.documentElement || document.body;

        var container = document.createElement('script');
        container.type = 'text/javascript';
        container.charset = 'utf-8';
        wall.appendChild(container);

        return function (funcOrString) {
            container.appendChild(document.createTextNode('(' + funcOrString.toString() + ')();\n'));
        };
    })();

    // append timing c.f.
    // http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness
    // http://javascripter.github.com/readystate.html
    executeBrowserContext(avatarize);

})();

// DBG
// Twitter user icon e.g.
// http://d.hatena.ne.jp/noromanba/20140401/1396294430
// https://s.hatena.ne.jp/js/HatenaStar.js:2464
//  Hatena.Star.BaseURL