Old: v0.81_2012-05-13 - 2014-06-02 - Imported from userscripts.org
New: v10.2014.6.24 - 2014-10-17 -
- @@ -1,57 +1,26 @@
- // ==UserScript==
- +// @id HabrPercentageRing
- // @name Habr Percentage Ring
-// @version 0.81_2012-05-13-// @namespace spmbt.kodingen.com- +// @version 10.2014.6.24
- +// @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.6 подгонка расположения эллипсов в Firefox в чистом скрипте и HabrAjax- +// @update 0.81 bug + подгонка эллипсов
- // @include http://*.habrahabr.ru/*
- // @include http://habrahabr.ru/*
- +// @include http://webcache.googleusercontent.com/search?q=cache:http://habrahabr.ru/*
- +// @include http://geektimes.ru/*
- // @exclude http://habrahabr.ru/api/*
- // ==/UserScript==
- // работает автономно или как модуль для HabrAjax
-getPositionCenter = function(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};-};-writePercRound = function(aP, aM, oX){- 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;-};-//.comments_list .comment_item .info .voting .mark- var win = typeof unsafeWindow !='undefined'? unsafeWindow: window;
- (win.habrPercentageRing = function(blck){
- var marks = blck && blck.childNodes && blck.querySelectorAll('.mark')
- , r2 =14- , isC2 = / c2/.test(blck.className)- , isQa = /\/qa\//.test(location.href);- + ,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]
- @@ -61,32 +30,65 @@
- if(/\/users\//.test(location.href) ){
- oP.style.marginRight ='14px';
- oP.style.marginTop ='2px';}
- var oX = getPositionCenter(o)- , oXS = o.querySelector('span');- + var oXS = $q('span', o);
- if(oXS && oXS.getAttribute('title')){
- var oXSt = oXS.getAttribute('title').match(/[\d\.]+/g);- var oC = o.querySelector('canvas');- + var oXSt = oXS.getAttribute('title').match(/[\d\.]+/g)
- + ,oC = $q('canvas', o);
- if(oC) oC.parentNode.removeChild(oC);
- if(oXSt && oXSt.length && !o.querySelector('canvas')){- + if(oXSt && oXSt.length && !$q('canvas', o)){
- var aP = oXSt[1], aM = oXSt[2]
- , c = writePercRound(aP, aM, oX)- , oPM = oP.querySelector('.minus')- , oPP = oP.querySelector('.plus')- + , 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 ='-7px';- + 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 ?5:-1)+'px';- c.style.top =isC2 ?'-5px':'-2px';- + oXS.style.left =(aP == aM ?7:-1)+'px';
- + c.style.top =isC2 ?'-8px':'-6px';
- }
- oXS.style.position ='relative';
- o.insertBefore(c, oXS);
- @@ -105,4 +107,3 @@
- win.addEventListener('chgDom', function(ev){ //проверить блок по событию от модулей (Fx6+, Chrome,Safari)
- win.habrPercentageRing(ev.detail);
- },!1);
-
