Greasy Fork is available in English.
Percentage Rings around numbers which show grades (for with userstyles)
目前為
// ==UserScript==
// @id HabrPercentageRing
// @name Habr Percentage Ring
// @version 12.2015.1.21
// @namespace github.com/spmbt
// @author spmbt0
// @description Percentage Rings around numbers which show grades (for with userstyles)
// @icon http://habrahabr.ru/favicon.ico
// @update 0.81 bug + подгонка эллипсов
// @include /^https?://(m\.|webcache\.googleusercontent\.com\/search\?q=cache(:|%3A|%3a)(http(:|%3A|%3a)(\/|%2F|%2f)(\/|%2F|%2f))?)?(habrahabr|geektimes|megamozg|h).ru(?!\/special|\/api)/
// @include http://habrahabr.ru*
// @exclude http://habrahabr.ru/api/*
// ==/UserScript==
// работает автономно или как модуль для HabrAjax: https://greasyfork.org/en/scripts/1970-habrajax
var win = typeof unsafeWindow !='undefined'? unsafeWindow: (function(){return this})();
(win.habrPercentageRing = function(blck){
var marks = blck && blck.childNodes && blck.querySelectorAll('.mark')
,r2 = 14
,isC2 = blck && / c2/.test(blck.className)
,isQa = /\/qa\//.test(location.href)
,$q = function(q, f){return (f||document).querySelector(q)};
if(!marks) return;
for(var i in marks){
var o = marks[i]
, oP = o.parentNode;
if(!o || !o.attributes) continue;
o.style.position ='relative';
if(/\/users\//.test(location.href) ){
oP.style.marginRight ='14px';
oP.style.marginTop ='2px';}
var oXS = $q('span', o);
if(oXS && oXS.getAttribute('title')){
var oXSt = oXS.getAttribute('title').match(/[\d\.]+/g)
,oC = $q('canvas', o);
if(oC) oC.parentNode.removeChild(oC);
if(oXSt && oXSt.length && !$q('canvas', o)){
var aP = oXSt[1], aM = oXSt[2]
, c = (function(aP, aM){ //writePercRound
var aPM = Number(aP) + Number(aM);
if(aPM ==0) return document.createElement('div');
var c = document.createElement('canvas')
, pi = Math.PI, r2 = 14, ell = 1-1/3.6;
c.width = c.height = r2 *2;
c.style.backgroundColor ='transparent';
c.style.position ='absolute';
c.style.left = (-r2 +12) +'px';
c.style.top = (-r2 +1 +8) +'px';
var q = c.getContext("2d")
, log = Math.log(aPM)/1.6 +1;
c.style.opacity = 0.25 + log *0.1;
c.style.zIndex = 1;
q.beginPath();
q.lineWidth = log;
q.strokeStyle ='#1b1';
var perc = (0.5- aM/aPM)* pi
, perc2 = (0.5+ aM/aPM)* pi;
q.scale(1, ell);
q.arc(r2, r2 /ell, r2 -1, perc, perc2 +2*(perc == perc2 && aP !=0)*pi, aP ==0 || aM !=0);
q.stroke();
q.beginPath();
q.strokeStyle ='#a24';
q.arc(r2, r2/ell, r2 -1, perc, perc2 +2*(perc == perc2 && aM !=0)*pi, !1);
q.stroke();
return c;
})(aP, aM, (function(obj){ //getPositionCenter
var x=0, y=0
,w2 = Math.floor(obj.offsetWidth /2)
,h2 = Math.floor(obj.offsetHeight /2);
while(obj){ x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent;}
return {x: x, y: y, w2: w2, h2: h2};
})(o))
, oPM = $q('.minus', oP)
, oPP = $q('.plus', oP)
, oPPI = /infopanel/.test(oP.parentNode.className);
if(oPM && (-aP - aM))
oPM.style.left =(oPPI?46:26 +6*(Math.abs(aP - aM) >9))+'px';
oXS.style.left ='-1px';
if(oPPI){//new layout
c.style.left = (Math.abs(aP - aM) >99 ? -r2 +17 : (aP == aM ? -r2 +3 : -r2 +11 -4*(Math.abs(aP - aM) <=9))) +'px';
c.style.top ='-5px';
}else if(oP.parentNode.parentNode.className =='entry-info vote_holder'){//old layout
c.style.left = (Math.abs(aP - aM) >99 ? -r2 +56 : (aP == aM ? -r2 +43 : -r2 +46 +4*(Math.abs(aP - aM) >9))) +'px';
c.style.top =isC2 ?'-6px':'-4px';
}else{//comments
c.style.left = (Math.abs(aP - aM) >99 ? -r2 +18 : (aP == aM ? -r2 +8 : -r2 +9 +4*(Math.abs(aP - aM) >9))) -(isC2 && !isQa ?3:0) +'px';
oXS.style.top =0;
oXS.style.left =(aP == aM ?7:-1)+'px';
c.style.top =isC2 ?'-8px':'-6px';
}
oXS.style.position ='relative';
o.insertBefore(c, oXS);
if(oPPI && Math.abs(aP - aM) >99)
o.style.left ='-9px';
oXS.style.zIndex =2;
(function(oP){
var ff = function(){setTimeout(function(){
win.habrPercentageRing(oP)},2999)};
oPM && oPM.addEventListener('click',ff,!1);
oPP && oPP.addEventListener('click',ff,!1);
})(oP)
}}}
})(document);
win.addEventListener('chgDom', function(ev){ //проверить блок по событию от модулей (Fx6+, Chrome,Safari)
win.habrPercentageRing(ev.detail);
},!1);