☰

Habr Percentage Ring

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

// ==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);