Habr Percentage Ring

Percentage Rings around numbers which show grades (for with userstyles)

当前为 2014-12-16 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @id HabrPercentageRing
// @name Habr Percentage Ring
// @version 11.2014.11.11
// @namespace github.com/spmbt
// @author spmbt0
// @contributor KOLANICH
// @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).ru(?!\/special|\/api)/
// @include http://habrahabr.ru*
// @exclude http://habrahabr.ru/api*
// @radius 14
// @magic_offsets [46, 99, 26, 56, 14, 18, 9, 12, 17, 43, 11, 4]
// @delay 2999
// @pos_vote_color #1b1
// @neg_vote_color #a24
// ==/UserScript==
// работает автономно или как модуль для HabrAjax
"use strict";
const mo=new Int8Array(JSON.parse(GM_getMetadata("magic_offsets")[0]));
const r2=GM_getMetadata("radius")[0];
const baseOpacity=0.25;
const pvc=GM_getMetadata("pos_vote_color")[0];
const nvc=GM_getMetadata("neg_vote_color")[0];

function writePercRound(aP, aM) {
	var aPM = Number(aP) + Number(aM);
	if (aPM == 0)
		return document.createElement('div');
	var c = document.createElement('canvas'), ell = 1 - 1 / 3.6;
	c.width = c.height = r2 * 2;
	c.style.backgroundColor = 'transparent';
	c.style.position = 'absolute';
	c.style.left = (-r2 + mo[7]) + 'px';
	c.style.top = (-r2 + 1 + 8) + 'px';
	var q = c.getContext("2d"),
	log = Math.log(aPM) / 1.6 + 1;
	c.style.opacity = baseOpacity + log * 0.1;
	c.style.zIndex = 1;
	
	q.lineWidth = log;
	q.strokeStyle = pvc;
	var perc = (0.5 - aM / aPM) * Math.PI, perc2 = (0.5 + aM / aPM) * Math.PI;
	q.beginPath();
	q.scale(1, ell);
	q.arc(r2, r2 / ell, r2 - 1, perc, perc2 + 2 * (perc == perc2 && aP != 0) * Math.PI, aP == 0 || aM != 0);
	q.stroke();
	q.beginPath();
	q.strokeStyle = nvc;
	q.arc(r2, r2 / ell, r2 - 1, perc, perc2 + 2 * (perc == perc2 && aM != 0) * Math.PI, !1);
	q.stroke();
	return c;
}

function setUpdateHandlers (oP,oPM, oPP) {
	var ff = function () {
		setTimeout(function () {
			habrPercentageRing(oP)
		}, GM_getMetadata("delay")[0])
	};
	oPM && oPM.addEventListener('click', ff, !1);
	oPP && oPP.addEventListener('click', ff, !1);
};
function getPositionCenter(obj) { //
	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};
};


function habrPercentageRing(blck) {
	var marks = blck && blck.childNodes && blck.querySelectorAll('.mark'),
	isC2 = blck && / c2/.test(blck.className),
	isQa = /\/qa\//.test(location.href);
	function $q(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 = mo[4]+'px';
			oP.style.marginTop = '2px';
		}
		var oXS = $q('span', o);
		if (oXS && oXS.getAttribute('title')) {
			let 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];
				let c = writePercRound(aP, aM);
				//getPositionCenter(o);
				var oPM = $q('.minus', oP), oPP = $q('.plus', oP), oPPI = /infopanel/.test(oP.parentNode.className);
				if (oPM && (-aP - aM))
					oPM.style.left = (oPPI ? mo[0] : mo[2] + 6 * (Math.abs(aP - aM) > mo[6])) + 'px';
				oXS.style.left = '-1px';
				if (oPPI) { //new layout
					c.style.left = (Math.abs(aP - aM) > mo[1] ? -r2 + mo[8] : (aP == aM ? -r2 + 3 : -r2 + mo[10] - mo[11] * (Math.abs(aP - aM) <= mo[6]))) + 'px';
					c.style.top = '-5px';
				} else if (oP.parentNode.parentNode.className == 'entry-info vote_holder') { //old layout
					c.style.left = (Math.abs(aP - aM) > mo[1] ? -r2 + mo[3] : (aP == aM ? -r2 + mo[9] : -r2 + mo[0] + mo[11] * (Math.abs(aP - aM) > mo[6]))) + 'px';
					c.style.top = isC2 ? '-6px' : '-4px';
				} else { //comments
					c.style.left = (Math.abs(aP - aM) > mo[1] ? -r2 + mo[5] : (aP == aM ? -r2 + 8 : -r2 + mo[6] + mo[11] * (Math.abs(aP - aM) > mo[6]))) - (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) > mo[1])
					o.style.left = (-mo[6])+'px';
				oXS.style.zIndex = 2;
				setUpdateHandlers(oP,oPM, oPP);
			}
		}
	}
};
habrPercentageRing(document);

window.addEventListener('chgDom', function (ev) { //проверить блок по событию от модулей (Fx6+, Chrome,Safari)
	habrPercentageRing(ev.detail);
}, !1);