Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Tuesday, May 5, 2009

Tag Cloud JS 代码

有点丢脸,我看一会,想来想去才知道 log()在以下代码中的作用。以下是我在这个 Blog 中用的 Tag Cloud,我改动了一点点。没什么注释的了,也没什么好说的了,很简单。

log()是用作algorithmic interpolation(对数插值)。不知道是什么的话,自行查阅初中的数学书。要用是因为没有log()的话,linear interpolation(直线插值)在tag数量不平均时候算出的字体大小不合理。

<script type='text/javascript'>

// Label Cloud User Variables
var cloudMin = 0;
var maxFontSize = 20;
var maxColor = [85,136,170];
var minFontSize = 8;
var minColor = [0,0,0];
var lcShowCount = false;

// Cloud function s() ripped from del.icio.us
function s(a,b,i,x)
{
if(a>b)
{
var m=(a-b)/Math.log(x), v=a-Math.floor(Math.log(i)*m)
}
else
{
var m=(b-a)/Math.log(x), v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;

<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts)
{
if (!labelCount[ts[t]])
{
labelCount[ts[t]] = new Array(ts[t])
}
}

var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';

for(var t in ts)
{
if(ts[t] < cloudMin)
{
continue;
}
for (var i=0;3 > i;i++)
{
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);

if (lcShowCount)
{
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else
{
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}

ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

首先从<b:loop>取得data:labels的数组,然后用for loop把data:labels数据用s()公式算出字体大小,颜色控制亦是如此,同时准备html的a标志、资料和字体格式写入gadget内,就是这样了。其他还有些除错和个性化的处理,例如lcShowCount,自己看吧。