Habr Percentage Ring

Percentage Rings around numbers which show grades (for with userstyles)
换行
// ==UserScript==
// @id HabrPercentageRing
// @name Habr Percentage Ring
// @version 15.2016.3.7
// @namespace github.com/spmbt
// @author spmbt0
// @description Percentage Rings around numbers which show grades (for with userstyles)
// @icon https://habrahabr.ru/favicon.ico
// @include https://habrahabr.ru*
// @include https://geektimes.ru*
// @include /^https?://(m\.|webcache\.googleusercontent\.com\/search\?q=cache(:|%3A|%3a)(https?(:|%3A|%3a)(\/|%2F|%2f)(\/|%2F|%2f))?)?(habrahabr|geektimes|megamozg|h).ru(?!\/special|\/api)/
// @exclude https://habrahabr.ru/api/*
// @update 14 https
// ==/UserScript==
// работает автономно или как модуль для HabrAjax: https://gf.qytechs.cn/en/scripts/1970-habrajax
var w1n = typeof unsafeWindow !='undefined'? unsafeWindow: (function(){return this})();
(w1n.habrPercentageRing = function(blck){
var marks = blck && blck.childNodes && blck.querySelectorAll('.voting-wjt__counter')
	,r2 = 14
	,isC2 = blck && / c2/.test(blck.className)
	,$q = function(q, f){return (f||document).querySelector(q)}
	,zen = (function(a, b){ //индикатор подключения юзерстилей ZenComment
		a = $q(b) || $q(a); //b - устаревший переходной индикатор, a - входящий в действие
		b = a && w1n.getComputedStyle(a, null);
		return !!(b && (b.getPropertyValue('z-index')=='10026' || b.getPropertyValue('max-width')=='1420px'));})('.nav_panel .tab_user','#navbar')
	,isHajax = function(){return !!$q('.hAjaxLogo');};
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)
			,hajax = isHajax();
		if(oC) oC.parentNode.removeChild(oC);
		if(oXSt && oXSt.length && !$q('canvas', o)){
			var aP = oXSt[1], aM = oXSt[2]
				,abs = Math.abs(aP - aM)
				,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 = /postinfo-panel__item/.test(oP.parentNode.className);
			//console.log('oPM', oPM)
			if(oPM && (-aP - aM))
				oPM.style.left =(oPPI ? 46 : (abs >9 ? 32 : 26))+'px';
			if(oPPI){ //article
				oXS.style.left ='-1px';
				c.style.left = -r2 + (abs >99 ? 17 : (abs >9 ? 11 : (abs ? 7 : 3))) +'px';
				c.style.top = 5 - (hajax && 0) +'px';
			}else{ //comments
				oXS.style.left = (abs ? -1 : 7)+'px';
				oXS.style.top =0;
				c.style.left = -1 -r2 + (abs >99 ? 18 : (abs >9 ? 11 : (abs ? 7 : 8))) -(isC2 && 1) +(zen && 0) +'px';
				c.style.top = 1+ (isC2 ? -5 + zen : -3) +(zen && 0) +'px';
			}
			oXS.style.position ='relative';
			o.insertBefore(c, oXS);
			if(oPPI && abs >99)
				o.style.left ='-9px';
			oXS.style.zIndex =2;
			(function(oP){
				var ff = function(){setTimeout(function(){
					w1n.habrPercentageRing(oP)},2999)};
				oPM && oPM.addEventListener('click',ff,!1);
				oPP && oPP.addEventListener('click',ff,!1);
			})(oP)
}}}
})(document);

w1n.addEventListener('chgDom', function(ev){ //проверить блок по событию от модулей (Fx6+, Chrome,Safari)
	w1n.habrPercentageRing(ev.detail);
},!1);
欢迎访问Greasy Fork镜像
