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

@@ -1,44 +1,100 @@
 /*
- * @title ☆ with icon
- * @description ブックマークについてる☆をアイコンにする
- * @include http://b.hatena.ne.jp/*
- * @include http://bkuma.hatena.ne.jp/*
+ * @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
- * @require 
+ * @javascript_url
  */
 
 (function(){
-  var iconize = function () {
-    var containers = document.querySelectorAll('.hatena-star-star-container a');
-    for (var i = 0, length = containers.length; i < length; i++) {
-      if (containers[i].hasAttribute('iconized')) continue;
-      var user = containers[i].href.replace(/^http:\/\/(b|bkuma)\.hatena\.ne\.jp\//, '').replace(/\/$/, '');
-      var icon = document.createElement('img');
-      icon.src = 'http://cdn1.www.st-hatena.com/users/' + user.substr(0, 2) + '/' + user + '/profile.gif';
-      icon.setAttribute('style', 'height:16px;position:absolute;width:16px;');
-      var star = containers[i].querySelector('.hatena-star-star');
-      star.style['position'] = 'absolute';
-      star.style['bottom'] = '1px';
-      star.style['opacity'] = '0.7';
-      // star.style['width'] = '7px';
-      containers[i].insertBefore(icon, star);
-      containers[i].setAttribute('iconized', '');
-      containers[i].style['width'] = '16px';
-      containers[i].style['height'] = '16px';
-      containers[i].style['position'] = 'relative';
-      containers[i].style['display'] = 'inline-block';
-      containers[i].style['margin'] = '0 1px 0 1px';
-      //containers[i].style['padding-top'] = '1px';
-      //containers[i].style['top'] = '10px';
-    }
-  };
-  iconize();
-  var timer  = 0;
-  document.addEventListener('DOMNodeInserted', function() {
-    if(timer) return;
-    timer = setTimeout(function() {
-      iconize();
-      timer = 0;
-    }, 500);
-  }, false);
+    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 ...
+
+    // http://s.hatena.ne.jp/js/HatenaStar.js
+    // new Hatena.Star.EntryLoader();
+    // add star twice !
+
 }());
+
+
+

• /*
   * @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 ...
  
      // http://s.hatena.ne.jp/js/HatenaStar.js
      // new Hatena.Star.EntryLoader();
      // add star twice !
  
  }());
  
  
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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