Hatena Star with ICON

    @@ -7,9 +7,9 @@ */ (function(){ - var d_ = document; - var re_user = /^(\S+)( \(\w+\))?$/; - var re_facebook_id = /@facebook$/; + var D_ = document; + var RE_USER = /^(\S+)( \(\w+\))?$/; + var RE_FACEBOOK_ID = /@facebook$/; var forEach = Array.prototype.forEach; var setStyle = function(e, s) { @@ -22,13 +22,13 @@ if (lnk.iconized) return; var user = star.alt; - var match = re_user.exec(user); // e.g. alt="a-kuma3 (green)" + var match = RE_USER.exec(user); // e.g. alt="a-kuma3 (green)" if (match) { user = match[1]; } - var icon = d_.createElement('img'); - if (re_facebook_id.exec(user)) { // Facebook user + var icon = D_.createElement('img'); + if (RE_FACEBOOK_ID.exec(user)) { // Facebook user icon.src = "http://n.hatena.com/" + user + "/profile/image.gif"; // } else if (...) { // Twitter user // for Twitter user @@ -70,7 +70,7 @@ }); }; - iconizeAll(d_.body); + iconizeAll(D_.body); // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver var MutationObserver = window.MutationObserver || window.WebkitMutationObserver; @@ -85,16 +85,30 @@ }); } }); - }).observe(d_.body, { childList: true, subtree: true }); + }).observe(D_.body, { childList: true, subtree: true }); // Hatena Star doesn't work after autopagerizing in q.hatena.ne.jp ... - - // http://s.hatena.ne.jp/js/HatenaStar.js - // new Hatena.Star.EntryLoader(); - // add star twice ! + // + // cf. https://gist.github.com/noromanba/2725191 + // http://s.hatena.ne.jp/js/HatenaStar.js + + if (location.hostname == "q.hatena.ne.jp") { + new MutationObserver(function (records) { + records.forEach(function (record) { + if (record.addedNodes) { + forEach.call(record.addedNodes, function(e) { + if (e.className == 'list-balloon answer') { + Hatena.Star.EntryLoader.loadNewEntries(e); + } + }); + } + }); + }).observe(D_.body, { childList: true, subtree: true }); + } }()); +
  • /*
     * @title Hatena Star with ICON
     * @description Add ICON to Hatena Star like Hatena Blog Star
     * @contributor yuta25 http://let.hatelabo.jp/yuta25/let/hJmdwaO-jcEv (Fork of)
     * @license MIT License
     * @javascript_url
     */
    
    (function(){
        var D_ = document;
        var RE_USER = /^(\S+)( \(\w+\))?$/;
        var RE_FACEBOOK_ID = /@facebook$/;
    
        var forEach = Array.prototype.forEach;
        var setStyle = function(e, s) {
            for (var i in s) {
                e.style[i] = s[i];
            }
        };
        var iconizeStar = function (star) {
            var lnk = star.parentNode;
            if (lnk.iconized) return;
    
            var user = star.alt;
            var match = RE_USER.exec(user);     // e.g. alt="a-kuma3 (green)"
            if (match) {
                user = match[1];
            }
    
            var icon = D_.createElement('img');
            if (RE_FACEBOOK_ID.exec(user)) {        // Facebook user
                icon.src = "http://n.hatena.com/" + user + "/profile/image.gif";
    //      } else if (...) {       // Twitter user
                // for Twitter user
            } else {        // hatena user
                icon.src = 'http://cdn1.www.st-hatena.com/users/' + user.substr(0, 2) + '/' + user + '/profile.gif';
            }
    
            // Hatena Blog style
            setStyle(lnk, {
                    "width": "20px",
                    "height": "20px",
                    "position": "relative",
                    "display": "inline-block",
                    "margin": "2px",
                    "vertical-align": "middle",
                });
            setStyle(icon, {
                    "height": "20px",
                    "width": "20px",
                    "position": "absolute",
                });
            setStyle(star, {
                    "position": "absolute",
                    "bottom": "0px",
                    "left": "0px",
                    "margin": "0px",
                    "background": "rgba(255, 255, 255, 0.8)",
                    "borderptop-top-right-radius": "2px",
                    "borderptop-bottom-left-radius": "2px",
                });
    
            lnk.insertBefore(icon, star);
            lnk.iconized = true;
    
        };
        var iconizeAll = function(ctx) {
            forEach.call(ctx.querySelectorAll('.hatena-star-star-container img.hatena-star-star'), function (star) {
                iconizeStar(star);
            });
        };
    
        iconizeAll(D_.body);
    
        // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
        var MutationObserver = window.MutationObserver || window.WebkitMutationObserver;
        new MutationObserver(function (records) {
            records.forEach(function (record) {
                if (record.addedNodes) {
                    forEach.call(record.addedNodes, function(e) {
                        var child = e.firstChild;
                        if (child && child.tagName == "IMG" && child.className == "hatena-star-star") {
                            iconizeStar(child);
                        }
                    });
                }
            });
        }).observe(D_.body, { childList: true, subtree: true });
    
    
        // Hatena Star doesn't work after autopagerizing in q.hatena.ne.jp ...
        //
        // cf. https://gist.github.com/noromanba/2725191
        //     http://s.hatena.ne.jp/js/HatenaStar.js
    
        if (location.hostname == "q.hatena.ne.jp") {
            new MutationObserver(function (records) {
                records.forEach(function (record) {
                    if (record.addedNodes) {
                        forEach.call(record.addedNodes, function(e) {
                            if (e.className == 'list-balloon answer') {
                                Hatena.Star.EntryLoader.loadNewEntries(e);
                            }
                        });
                    }
                });
            }).observe(D_.body, { childList: true, subtree: true });
        }
    
    }());
    
    
    
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2015/12/22 12:20:27 - 2015-12-22
  2. 2015/12/22 02:22:30 - 2015-12-22
  3. 2015/12/22 02:19:59 - 2015-12-22
  4. 2015/07/30 18:11:48 - 2015-07-30
  5. 2015/07/30 17:50:07 - 2015-07-30
  6. 2015/07/15 16:06:48 - 2015-07-15
  7. 2015/07/15 16:01:38 - 2015-07-15