Hatena Star with ICON

by a-kuma3 2015-12-22 [2015/12/22 12:20:27]
(Forked from ☆ with icon by yuta25)

Add ICON to Hatena Star like Hatena Blog Star

@@ -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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。