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
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。