// ==UserScript==
// @name メタブ表示
// @description メタブ表示
// @include http://b.hatena.ne.jp/*
// ==/UserScript==
/*
* @title メタブ表示
* @description メタブ表示
* @include http://b.hatena.ne.jp/*
* @license MIT License
* @require
*/
////
(function(){
////////////////////////////////////////////////////////////
var win = this,
doc = this.document,
loc = this.location,
con = this.console;
var gm = typeof(win.GM_info) === 'undefined';
var setTimeout = this.setTimeout;
var DEBUG = true;
////////////////////////////////////////////////////////////
var HATEB_DOMAIN = "http://b.hatena.ne.jp";
var API_DOMAIN = "//b.hatena.ne.jp";
var ICON_DOMAIN = "http://cdn1.www.st-hatena.com/users/";
var JSONP_MAX_BYTES = 1800;
var LOADING_GIF = HATEB_DOMAIN + '/images/loading.gif';
////////////////////////////////////////////////////////////
var CSS = [
'.metab-popup-locker {',
' position: fixed;',
' top: 0px;',
' left: 0px;',
' width: 100%;',
' height: 100%;',
' z-index: 9000;',
' background: rgba(0,0,0,0.25);',
'}',
'.metab-popup {',
' height: 90%;',
' width: 600px;',
' margin: 2.5% auto;',
' padding: 10px;',
' border-radius: 20px;',
' overflow: auto;',
' background: #F8F8F8;',
'}',
'.metab-container {',
' margin: 5px;',
' padding: 5px;',
' border: solid #9CF 1px;',
' border-radius: 10px;',
'}',
'ul.bookmark-list > li > .metab-container {',
' max-height: 600px;',
' overflow: auto;',
'}',
'.metab-container > .metab-title > .title{',
' display: inline-block;',
' margin: 0px 10px 0px 0px;',
' font-size: 11px;',
' color: #69F;',
'}',
'.metab-container > ul > li > span.head-part > .metab-count, ',
'.metab-container > .metab-title > .metab-count{',
' font-size: 10px;',
' font-weight: 900;',
' color: #F00;',
' background-color: #FCC;',
' display: inline-block;',
' text-decoration: none;',
' line-height: 12px !important;',
' padding: 2px;',
' margin: 10px 0px;',
'}',
'.metab-container > .metab-title > .metab-count-detail{',
' display: inline-block;',
' margin: 0px 10px;',
' font-size: 11px;',
' color: rgb(153, 153, 153);',
'}',
'.metab-container > ul{',
' display: block;',
' margin: 0px;',
' padding: 0px;',
'}',
'.metab-container > ul > li{',
' margin: 0px;',
' padding: 11px 0px 11px 30px;',
' border-bottom: solid #CCC 1px;',
'}',
'.metab-container > ul.comments > li{',
' width: auto !important;',
' display: block;',
' list-style: none;',
'}',
'.metab-container > ul.no-comments > li{',
' width: auto !important;',
' margin: 0px 11px 0px 0px;',
' border: none;',
' list-style: none;',
' display: inline-block;',
'}',
'.metab-container > ul > li > span.head-part > a.profile-icon {',
' margin-left: -30px;',
'}',
'.metab-container > ul > li > span.head-part > a.profile-icon > img{',
' width: 24px;',
' height: 24px;',
'}',
'.metab-container > ul > li > span.head-part > a.username{',
' font-size: 12px;',
' display: inline-block;',
' margin: 0px 11px;',
'}',
'.metab-container > ul > li > span.tags{',
' display: inline-block;',
' margin: 0px 11px 0px 0px;',
'}',
'.metab-container > ul > li > span.comment{',
' font-size: 12px;',
'}',
'.metab-container .user-comment-meta{',
' font-size: 11px;',
' color: rgb(153,153,153);',
'}',
'.metab-container a{',
' color: rgb(0, 143, 222);',
'}',
'.metab-container a.user-comment-link {',
' background-image: url("/images/v3/comment-link.png");',
' background-position: left center;',
' background-repeat: no-repeat;',
' background-size: 15px 15px;',
' color: rgb(153, 153, 153);',
' font-size: 11px;',
' font-weight: normal;',
' margin: 0 8px 0 -1px;',
' padding-left: 16px;',
' text-decoration: none;',
'}',
''].join("\n");
////////////////////////////////////////////////////////////
var PageType = ((function(pn){
if(pn.match(/^\/entry\//)){
if(pn.match(/^\/entry\/\d+\/comment\//)) return 'comment';
return 'entry';}
return 'other';
})(String(loc.pathname)));
////////////////////////////////////////////////////////////
var p = function p() {
if ( !DEBUG ) return;
con.log.apply(con, arguments);};
var forEach = function forEach(a,f){
if(!a) return;
for (var i=0,l=a.length;i<l;i++){
if(f(a[i]) === false) break;}};
var gensym = (function(){
var rnd = function(){return Math.floor(Math.random() * (1<<30)).toString(16);};
var cnt = 0;
var prefix = 'metabsym_' + Date.now().toString(16) + '_' + rnd() + '_';
return function gensym(){ return prefix + (cnt++).toString(16); };})();
var receiver = function receiver(cb){
var name = gensym();
win[name] = function(){
delete win[name];
cb.apply(this, arguments);};
return name;};
var jsonp = function jsonp(url, opt){
var query = '';
for(var f in opt){
var v = opt[f];
if(v instanceof Function) v = receiver(v);
query += '&' + encodeURIComponent(f) + '=' + encodeURIComponent(v);}
url += query.replace(/^./, url.match(/\?/) ? '&' : '?');
var script = doc.createElement('script');
script.src = url;
script.type = 'text/javascript';
doc.querySelector('head').appendChild(script);};
var elementModifier = function(fun){
var FLAG = 'httb-modifier-modified';
return function(n){
if(n.getAttribute(FLAG)) return null;
n.setAttribute(FLAG, 'true');
return fun(n);};};
////////////////////////////////////////////////////////////
var withHatena = function(cb){(function(){
if(typeof(win.Hatena) === 'undefined'){
setTimeout(arguments.callee, 100);
return;}
cb(win.Hatena);})();};
var withStar = function(cb){
withHatena(function(Hatena){(function(){
if(typeof(Hatena.Star) === 'undefined'){
setTimeout(arguments.callee, 100);
return;}
cb(Hatena.Star, Hatena);})();});};
var withBookmark = function(cb){
withHatena(function(Hatena){(function(){
if(typeof(Hatena.Bookmark) == 'undefined'){
setTimeout(arguments.callee, 100);
return;}
cb(Hatena.Bookmark, Hatena);})();});};
////////////////////////////////////////////////////////////
var withUserInfo = (function(){
var users = {};
return function(user, cont){
var slot = (users[user] || (users[user] = {data: null, cont: []}));
if(slot.data){
cont(slot.data, user);
return;}
slot.cont.push(cont);
if(slot.data === false) return;
slot.data = false;
var done = 0;
var rs = {};
var Xhr = win.XMLHttpRequest;
['information', 'services'].forEach(function(field){
var req = new Xhr();
req.onreadystatechange = function(){
if(req.readyState !== Xhr.DONE) return;
rs[field] = req.status == 200 ? req.responseText : '';
done++;
if(done < 2) return;
var div = doc.createElement('div');
div.innerHTML = rs.information + rs.services;
slot.data = div;
slot.cont.forEach(function(cont){cont(slot.data, user);});};
req.open('GET', 'http://b.hatena.ne.jp/'+user+'/partial.' + field, true);
req.send();});};})();
var profileIconUrl = function(user){
return ICON_DOMAIN + '/' + user.substring(0,2) + '/' + user +
'/profile_l.gif'; };
var profileIcon = function(user){
var a = doc.createElement('a');
a.href = HATEB_DOMAIN + '/' + user + '/';
a.target = '_blank';
a.title = user;
a.className = 'profile-icon';
var icon = doc.createElement('img');
icon.src = profileIconUrl(user);
icon.alt = user;
a.appendChild(icon);
return a; };
////////////////////////////////////////////////////////////
var PageEid = (function(){
var ucl = doc.querySelector('a.user-comment-link');
if(!ucl) return null;
return String(ucl.href).replace(/^\/entry\//,'').replace(/\/comments\/.*/,'');});
var domifyIcon = function(bm){
return profileIcon(bm.user);};
var domifyUsername = function(bm, entry){
var a = doc.createElement('a');
var date = String(bm.timestamp).replace(/ .+$/,'').replace(/\//g,'');
a.href = '/' + bm.user + '/' + date + '#bookmark-' + entry.eid ;
a.target = '_blank';
a.title = bm.user;
a.className = 'username';
a.appendChild(doc.createTextNode(bm.user));
return a;};
var domifyUsermetab = function(bm, entry){
var ph = doc.createElement('span');
ph.className = 'user-metab-ph';
ph.setAttribute('title', bm.user);
return ph;};
var domifyTags = function(bm){
var tags = bm.tags || [];
if(tags.length < 1) return doc.createDocumentFragment();
var tagSpan = doc.createElement('span');
tagSpan.className = 'tags';
forEach(tags , function(tagName){
var tagLink = doc.createElement('a');
tagLink.className = 'user-tag';
tagLink.href =
HATEB_DOMAIN + '/' + bm.user + '/' + encodeURIComponent(tagName);
tagLink.appendChild(doc.createTextNode(tagName));
tagSpan.appendChild(tagLink);});
return tagSpan;};
var domifyComment = (function(){
var reURL = (function(){
var RE_HEX = '%[a-fA-F0-9][a-fA-F0-9]';
var RE_SCHEME = '[a-z]+:';
var RE_CHAR = '(?:[a-zA-Z0-9\-_\.]|' + RE_HEX + ')';
var RE_STR = RE_CHAR + '+';
var RE_STR0 = RE_CHAR + '*';
var RE_HOST = RE_STR;
var RE_PATH = '(?:/(?:' + RE_STR + '/)*' + RE_STR0 + ')';
var RE_QV = RE_STR0 + '=' + RE_STR0;
var RE_QUERY = '(?:\\?(?:(?:' + RE_QV + '&)*'+RE_QV+')?|'+RE_QV+')';
var RE_HASH = '(?:#' + RE_STR0 + ')';
var RE_URL = 'https?://' + RE_HOST + RE_PATH +'?' +
RE_QUERY + '?' + RE_HASH + '?';
return new RegExp('(.*?)(' + RE_URL + ')(.*)');
})();
return function(bm){
var comment = bm.comment;
var R = doc.createElement('span');
R.className = 'comment';
while(comment.length > 0){
var match = comment.match(reURL);
if(!match){
if(comment.length > 0) R.appendChild(doc.createTextNode(comment));
break;
}
var head = match[1];
var url = match[2];
comment = match[3];
if(head.length > 0) R.appendChild(doc.createTextNode(head));
var a = doc.createElement('a');
a.href = url;
a.target = '_blank';
a.appendChild(doc.createTextNode(url));
R.appendChild(a);
}
return R;};})();
var domifyMeta = function(bm, entry){
var meta = doc.createElement('div');
meta.className = 'user-comment-meta';
var plink = doc.createElement('a');
plink.className = 'user-comment-link';
plink.href = '/entry/' + entry.eid + '/comment/' + bm.user;
plink.title = 'パーマリンク';
plink.target = '_blank';
plink.appendChild(doc.createTextNode('リンク'));
meta.appendChild(plink);
var tspan = doc.createElement('span');
tspan.className = 'timestamp';
tspan.appendChild(doc.createTextNode(bm.timestamp));
meta.appendChild(tspan);
var star = doc.createElement('span');
star.className = 'hatena-bookmark-star';
meta.appendChild(star);
return meta;};
var domifyCount = function(entry){
var count = entry.count;
var frgn = doc.createDocumentFragment();
var a = doc.createElement('a');
a.className = 'metab-count';
a.href = entry.entry_url;
a.target = "_blank";
a.appendChild(doc.createTextNode(String(count) + " users"));
frgn.appendChild(a);
var bmc = (entry.bookmarks || []).length;
if(count != bmc){
var span = doc.createElement('span');
span.className = 'metab-count-detail';
span.appendChild(doc.createTextNode(String(bmc) + " comments + " +
String(count - bmc)));
frgn.appendChild(span);}
return frgn;};
var domifyBookmarks = function(entry){
var node = doc.createDocumentFragment();
if((entry.bookmarks || []).length < 1) return node;
var comments = doc.createElement('ul');
comments.className = 'comments';
var noComments = doc.createElement('ul');
noComments.className = 'no-comments';
forEach(entry.bookmarks, function(bm){
var li = doc.createElement('li');
li.className = 'metab';
var headPart = doc.createElement('span');
headPart.className = 'head-part';
headPart.appendChild(domifyIcon( bm, entry));
headPart.appendChild(domifyUsername( bm, entry));
headPart.appendChild(domifyUsermetab(bm, entry));
li.appendChild(headPart);
li.appendChild(domifyTags( bm, entry));
li.appendChild(domifyComment( bm, entry));
li.appendChild(domifyMeta( bm, entry));
(String(bm.comment).length > 0 // || tags.length > 0
? comments : noComments).appendChild(li);});
if(comments.firstChild) node.appendChild(comments);
if(noComments.firstChild) node.appendChild(noComments);
return node;};
var domifyTitle = function(entry, title){
if(!(title && title.length > 0)) return doc.createDocumentFragment();
var node = doc.createElement('div');
node.className = 'metab-title';
var tspan = doc.createElement('span');
tspan.appendChild(doc.createTextNode(title));
tspan.className = 'title';
node.appendChild(tspan);
node.appendChild(domifyCount( entry));
return node; };
var domifyEntry = function(entry, title){
if((entry || {count:0}).count < 1) return doc.createDocumentFragment();
var node = doc.createElement('div');
node.className = 'metab-container';
node.appendChild(domifyTitle(entry, title));
node.appendChild(domifyBookmarks( entry));
return node;};
var addStars = function(node){ withStar(function(Star, Hatena){
var entries = [];
forEach(node.querySelectorAll('li.metab') || [], function(li){
var uri = li.querySelector('a.username').href;
// var uri = li.querySelector('a.user-comment-link').href;
var sc = li.querySelector('.hatena-bookmark-star');
var cc = doc.createElement('span');
sc.parentNode.insertBefore(cc, sc);
var earg = {
entryNode: li,
uri: uri,
title: Star.EntryLoader.scrapeTitle(li) || '',
comment_container: cc,
star_container: sc};
var e = new Star.Entry(earg);
e.showButtons();
entries.push(e);});
//
var receive = function(res){
var entries_ = res.entries;
var encodedUriToEntryInfoMap = {};
if (!entries_) entries_ = [];
forEach(entries_, function(entryInfo){
if ( !entryInfo.uri ) return;
var eURI = entryInfo.eURI;
if ( !eURI ) eURI = entryInfo.eURI = encodeURIComponent( entryInfo.uri );
encodedUriToEntryInfoMap[eURI] = entryInfo;});
forEach(entries, function(e){
if ( e.hasBoundToStarEntry() ) return;
if ( !e.eURI ) e.eURI = encodeURIComponent(e.uri);
var entryInfo = entryInfo = encodedUriToEntryInfoMap[e.eURI];
if ( entryInfo ) e.bindStarEntry( entryInfo );
if (typeof(e.can_comment) == 'undefined') e.setCanComment(res.can_comment);
e.showStars();
e.showCommentButton();});
if (res.rks) {
if (!Hatena.Visitor || typeof(Hatena.Visitor) == 'undefined') {
Hatena.Visitor = {};}
if (!Hatena.Visitor.RKS) {
Hatena.Visitor.RKS = res.rks;}}
Hatena.Star.User.RKS.ready(res.rks);};
// getStarEntries
(function(){
if (!entries.length) return;
var jsonpBase = Star.BaseURL.replace(
/^http:/, Star.BaseURLProtocol) + 'entries.json?';
var url = jsonpBase;
for (var i = 0; i < entries.length; i++) {
if (url.length > JSONP_MAX_BYTES) {
jsonp(url, {callback: receive});
url = jsonpBase;}
url += 'uri=' + encodeURIComponent(entries[i].uri) + '&';}
if (!Hatena.Visitor) url += 'timestamp=1';
jsonp(url, {callback: receive});})();});};
var addBehaviors = function(node){
if(! node.tagName) return node;
addStars(node);
forEach(node.querySelectorAll('span.user-metab-ph'), function(ph){
var user = ph.getAttribute('title');
reserveUserMetab(user, function(entry){
if(!entry){
if(ph.parentNode) ph.parentNode.removeChild(ph);
return;
}
var a = doc.createElement('a');
a.appendChild(doc.createTextNode(entry.count + ' users'));
a.className = 'metab-count';
a.href = 'javascript:undefined;';
a.addEventListener('click', function(e){
e.stopPropagation();
e.preventDefault();
popupUserMetab(user);
}, false);
(function(){
if(!ph.parentNode){
setTimeout(arguments.callee, 100);
return; }
//console.log(user, '<-', ph.parentNode, a);
//ph.appendChild(a);
ph.parentNode.replaceChild(a, ph);
})(); });
});
return node;};
////////////////////////////////////////////////////////////
var metabToDOM, receivedMetab, reserveMetab;
(function(){
var entries = {};
metabToDOM = function(entry, uri, title){
var slot = entries[uri];
var node = slot.dom || (slot.dom = node = domifyEntry(entry,title));
return addBehaviors(node.cloneNode(true));};
receivedMetab = function(entry, uri, title){
var slot = entries[uri];
slot.entry = entry || false;
slot.cont.forEach(function(c){c(entry, uri, title);});};
reserveMetab = function(uri, cont_, title_){
var slot = (entries[uri] ||
(entries[uri] = {entry: null, cont:[], req: false}));
var title = title_ || '';
var cont = cont_ instanceof Function ? cont_ : (function(){
var container = cont_;
if(container.className == 'metab-popup'){
var e = new Error();
console.log(e.stack);
throw e;
}
return function(entry){
container.appendChild(metabToDOM(entry, uri, title));};})();
if(slot.entry !== null){
cont(slot.entry, uri, title);
return; }
slot.cont.push(cont || function(){});
if(slot.req) return;
slot.req = true;
jsonp(API_DOMAIN + '/entry/jsonlite/',
{url: uri,
callback: function(entry){receivedMetab(entry, uri, title);}});};})();
var reserveUserMetab = function reserveUserMetab(user, cont_, title_){
var uri = HATEB_DOMAIN + '/' + user + '/';
var title = title_ || 'metab for id:'+user;
reserveMetab(uri, cont_, title);};
////////////////////////////////////////////////////////////
var popupUserMetab = (function(){
var popups = {};
var locker = null;
var makeLocker = function(){
var div = doc.createElement('div');
div.className = 'metab-popup-locker';
div.addEventListener('click', function(e){
if(e.target !== div) return;
hidePopup();});
return div;};
var getLocker = function(){ return locker || (locker = makeLocker()); };
var lockPage,
unlockPage;
(function(){
var html = null, body = null,
cssTextHtml = null, cssTextBody = null;
var init = function(){
if(html) return;
html = doc.querySelector('html');
body = doc.body;
cssTextHtml = html.style.cssText;
cssTextBody = body.style.cssText;};
lockPage = function(){
init();
html.style.cssText = 'overflow: hidden;';
body.style.cssText = 'overflow: hidden;';};
unlockPage = function(){
init();
html.style.cssText = cssTextHtml;
body.style.cssText = cssTextBody;};})();
var showLocker = function(){
var locker = getLocker();
lockPage();
doc.body.appendChild(locker);
return locker; };
var hideLocker = function(){
var locker = getLocker();
unlockPage();
doc.body.appendChild(locker);
return locker;; };
var makePopup = function(user){
var popup = doc.createElement('div');
popup.className = 'metab-popup';
var icon = profileIcon(user);
popup.appendChild(icon);
withUserInfo(user, function(dom){
if(dom.innerHTML != "") popup.replaceChild(dom.cloneNode(true), icon);});
reserveUserMetab(user, function(entry, uri, title){
var metabdom = metabToDOM(entry, uri, title);
if(!popup.querySelector('.metab-container')){
popup.appendChild(metabdom);}});
return popup; };
var showPopup = function(popup){
hidePopup();
showLocker().appendChild(popup);};
var hidePopup = function(){
var locker = hideLocker();
locker.innerHTML = '';
locker.parentNode.removeChild(locker);};
return function(user){
var popup = popups[user] || (popups[user]=makePopup(user));
showPopup(popup); };})();
////////////////////////////////////////////////////////////
var applyStyle = function(){
var style = doc.createElement('style');
style.type = 'text/css';
style.appendChild(doc.createTextNode(CSS));
doc.querySelector('head').appendChild(style);};
var showCommentMetab = elementModifier(function(n){
if(PageType != 'entry') return;
var nparent = n.parentNode;
if(nparent.className == 'metab-popup') return;
var cl = nparent.querySelector('a.user-comment-link');
if(!cl) return;
reserveMetab(cl.href, nparent, 'metab for this comment');
var user = n.href.match(/([^\/]+)\/$/)[1];
reserveUserMetab(user, nparent);});
////////////////////////////////////////////////////////////
var updateStarBehavior = elementModifier( function(n){
var a = n.parentNode;
if(String(a.tagName).toLowerCase() != 'a') return;
n.style.width = '24px';
n.style.height = '24px';
var user = (function(m){return m[1];})(a.href.match(/([^\/]*)\/?$/));
a.style.display = 'inline-block';
a.style.paddingTop = '8px';
a.style.borderRadius = '6px';
a.style.border = 'double rgba(0,0,0,0.5) 3px';
a.style.margin = '1px';
a.style.width = '24px';
a.style.height = '34px';
a.style.backgroundRepeat = 'no-repeat';
a.style.backgroundSize = '8px 8px';
a.style.backgroundImage = 'url('+n.src+')';
a.style.position = 'relative;';
n.src = profileIconUrl(user);
reserveUserMetab( user, function(entry){
if(entry){
a.style.borderColor = 'rgba(255,0,0,0.5)';
a.style.paddingTop = '0px';
var miniCount = doc.createElement('span');
miniCount.appendChild(doc.createTextNode(String(entry.count)));
miniCount.style.cssText = [
' display: block;',
' text-align: right;',
' margin: 1px;',
' color: red;',
' height: 8px;',
' overflow: hidden;',
' font-size: 8px !important;',
' line-height: 8px !important;',
' text-decoration: none !important;'
].join("\n");
a.insertBefore(miniCount,n);
a.addEventListener('click', function(ev){
ev.stopPropagation();
ev.preventDefault();
popupUserMetab(user);}, false);}
else{
a.style.border = null;}});} );
var expandHatenaStar = elementModifier(function(n){
n.dispatchEvent(new win.MouseEvent('click'));});
////////////////////////////////////////////////////////////
var classnameActions = {
'profile-icon': showCommentMetab,
'hatena-star-inner-count': expandHatenaStar,
'hatena-star-star': updateStarBehavior };
var observeMutation = function(){
var modify = function(n, selector, modifier){
if(n.className == selector) setTimeout(function(){modifier(n);},100);
forEach(n.querySelectorAll(selector), function(n){
setTimeout(function(){modifier(n);}, 100);});};
var mo = new win.MutationObserver(function(ms){ms.forEach(function(m){
var cn,act;
switch(m.type){
case 'childList':{
forEach(m.addedNodes, function(n){
if(!n.tagName) return;
for(cn in classnameActions){
modify(n, '.'+cn, classnameActions[cn]);}});
break;}
case 'attributes':{
var n = m.target, av;
switch(m.attributeName){
case 'class':{
for(cn in classnameActions){
if(cn != n.className) continue;
setTimeout( function(){
classnameActions[n.className].call(null,n);},100);}
break;}
default:{
break;}}
break;}
default: {
break;}}});});
mo.observe(doc.body, {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ['class']});};
////////////////////////////////////////////////////////////
var main = function(){
applyStyle();
for(var cn in classnameActions)
forEach(doc.querySelectorAll('.'+cn), classnameActions[cn]);
observeMutation(); };
var gm_main = function(field){
var src = '(' + field.toSource() + ').call(this);';
var script = doc.createElement('script');
script.type = 'text/javascript';
script.appendChild(doc.createTextNode(src));
doc.querySelector('head').appendChild(script); };
if(gm) main();
else gm_main(arguments.callee);
}).call(this);
// Local Variables:
// mode: hatena-let
// coding: utf-8-dos
// End:
