Tag cloud.js chaging the sortby to random?

Hi all,

First time poster and new forum member. I have this piece of javascript written by someone that has left the company, it's for a tag cloud, however I want to change how it is sorted/displayed. Currently it is returning the tags in alphabetical order. I want them to come back in random order. Below is the code:



(function($) {
$.fn.tagCloud = function(options) {

var defaults = { "fontMax": 200, "fontMin": 100, "fontUnit": "%",
tagClass: "tagCloud", tagUrlFormatString: "{0}", maxTagLimit: 100
},
o = $.extend({}, defaults, options);

var dataBlock = $(this).hide(),
regx = /[\w\s\']+/g,
dataTags = dataBlock.text(),
tags = [],
keywords,
maxCount = 0,
minCount = 1;

while ((keywords = regx.exec(dataTags)) != null) {
var key = $.trim(keywords[0].toLowerCase());

if (key) {
var tag = key;
key = "tag" + key;

if (tags[key] == null) {
tags[key] = tags.length;
tags.push(new tagElement(tag));
}
else
tags[tags[key]].Count++;

maxCount = Math.max(tags[tags[key]].Count, maxCount);
minCount = Math.min(tags[tags[key]].Count, minCount);
}
}

if (tags.length > o.maxTagLimit) {
tags.sort(sortByCount);
tags.splice(o.maxTagLimit, tags.length - o.maxTagLimit);
minCount = tags[tags.length - 1].Count;
}

var tagBlock = dataBlock.after("<div id='tagBlock' class='" + o.tagClass + "'></div>").next("div#tagBlock"),
scaleFont = (o.fontMax - o.fontMin) / Math.max(maxCount - minCount, 1);

tags.sort(sortByText);

function tagElement(text) {
this.Text = text;
this.Count = 1;
}

function sortByCount(a, b) {
return b.Count - a.Count;
}

function sortByText(a, b) {
return ((a.Text < b.Text) ? -1 : ((a.Text > b.Text) ? 1 : 0));
}

for (var i = 0; i < tags.length; i++) {
var tag = tags[i],
fontsize = (tag.Count - minCount) * scaleFont + o.fontMin;

tagBlock.append("<a href='" + o.tagUrlFormatString.replace("{0}", tag.Text) + "' title='" + tag.Count + " item(s)'>" + tag.Text + "</a>").children(":last").css("font-size", fontsize + o.fontUnit);
}
};
})(jQuery);



I know that there is a sortby.math function but I'm not too sure where to place it. Any ideas?

Thanks ahead, bosko2.

Just replace this line:

tags.sort(sortByText);

with this:

tags.sort( function() { return Math.random() < 0.5 ? -1 : 1; } );

It's not a perfect random sort, but it should be good enough for most purposes.

Or you could do it thus:

tags.sort(sortRandom);
...

function sortRandom()
{
return Math.random() < 0.5 ? -1 : 1;
}

Really 100% the same thing.

Thanks for that, do I need to delete all of the sortby functions after that first one?

No, because they aren't being used.

They was a miniscule amount of code space and they are there if you ever decide you want to use them. Would be different if each was hundreds of lines long, but as is...

So should it look like this? Thanks again for your help mate.


(function($) {
$.fn.tagCloud = function(options) {

var defaults = { "fontMax": 200, "fontMin": 100, "fontUnit": "%",
tagClass: "tagCloud", tagUrlFormatString: "{0}", maxTagLimit: 100
},
o = $.extend({}, defaults, options);

var dataBlock = $(this).hide(),
regx = /[\w\s\']+/g,
dataTags = dataBlock.text(),
tags = [],
keywords,
maxCount = 0,
minCount = 1;

while ((keywords = regx.exec(dataTags)) != null) {
var key = $.trim(keywords[0].toLowerCase());

if (key) {
var tag = key;
key = "tag" + key;

if (tags[key] == null) {
tags[key] = tags.length;
tags.push(new tagElement(tag));
}
else
tags[tags[key]].Count++;

maxCount = Math.max(tags[tags[key]].Count, maxCount);
minCount = Math.min(tags[tags[key]].Count, minCount);
}
}

if (tags.length > o.maxTagLimit) {
tags.sort(sortByCount);
tags.splice(o.maxTagLimit, tags.length - o.maxTagLimit);
minCount = tags[tags.length - 1].Count;
}

var tagBlock = dataBlock.after("<div id='tagBlock' class='" + o.tagClass + "'></div>").next("div#tagBlock"),
scaleFont = (o.fontMax - o.fontMin) / Math.max(maxCount - minCount, 1);

tags.sort(sortRandom);

function tagElement(text) {
this.Text = text;
this.Count = 1;
}

function sortRandom() {
return Math.random() < 0.5 ? -1 : 1;
}

function sortByText(a, b) {
return ((a.Text < b.Text) ? -1 : ((a.Text > b.Text) ? 1 : 0));
}

for (var i = 0; i < tags.length; i++) {
var tag = tags[i],
fontsize = (tag.Count - minCount) * scaleFont + o.fontMin;

tagBlock.append("<a href='" + o.tagUrlFormatString.replace("{0}", tag.Text) + "' title='" + tag.Count + " item(s)'>" + tag.Text + "</a>").children(":last").css("font-size", fontsize + o.fontUnit);
}
};
})(jQuery);

Looks okay to me. Did you try it?

Yep, I'm sure it works, however the webpart (this is in SharePoint) wants to point to the default javascript library (ie. where this original script resides, however I don't have write access to this library to re-upload, I have uploaded to a different section on our portal, but I can't get the webpart to link to this file. Below is the header from the webpart:


<script type="text/javascript" src="/javascript/tagCloud.js"></script>


My file lives in another place outside this library, but when I update the src="" section the webpart just doesn't find it. The location of the updated javascript looks like: /SafetyEnvironment/SEMS/Documents/tagCloud.js

Can't help you. Have never used Sharepoint.

No idea what "webpart" is, for that matter.

It's basically html. So I just need to know how to make a file reference to my version in a particular library..

ok I worked it out, just enter the URL without the "". When it runs I get this error 'Unexpected end of file looking for tag.'

Any ideas?

Not a clue. Never seen that error before.