Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
tag cloud and select per title
  • Loading branch information
leogomes committed Oct 26, 2011
1 parent 6697f2e commit 6c1f110
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 4 deletions.
76 changes: 72 additions & 4 deletions src/main/webapp/index.html
Expand Up @@ -9,6 +9,8 @@
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.selectBox.min.js"></script>
<script type="text/javascript" src="js/jquery.tagcloud-2.js"></script>


<script type="text/javascript">
$(document).ready(function() {
Expand All @@ -30,9 +32,6 @@
});


// Select
$('SELECT').selectBox();

// Select event triggers ajax call
$('select.team').change(function() {

Expand All @@ -41,6 +40,8 @@

});


// Loads the accordions with the list of PTRs
function loadMsgs(teamVal) {

$.get('./Messages', {team: teamVal},
Expand All @@ -51,6 +52,8 @@
$('#accordion').accordion("destroy");

var htmlStr = "";
var tags = new Array();
var msgTitles = {};

for(var ptr in data){

Expand All @@ -65,6 +68,11 @@
var msg = data[ptr][i];
htmlStr += "<li><b>[" + msg.severity + "]</b> ";
htmlStr += msg.title + " - " + msg.details + "</li>";
addTags(tags, msg);
// add titles
if (!(msg.title in msgTitles)){
msgTitles[msg.title]=true;
}
}

htmlStr += "</ul></div></div>";
Expand All @@ -73,8 +81,47 @@
$('#accordion').html(htmlStr);
$('#accordion').accordion({ header: "h3", event: "mouseover" });

$("#tags").tagCloud(tags);

// SELECT BOX PART
$('#msgs').empty();
$('SELECT').selectBox("destroy");

for (var title in msgTitles) {

$('#msgs').append("<option value='" + title + "'>" + title + "</option>");
}

$('SELECT').selectBox();

}, 'json');
}

function addTags(tags, msg) {

// tags in the msg
for (var i = 0; i < msg.tags.length; i++) {

var found = false;

// existing tags
for (var j = 0; j < tags.length; j++) {
if (msg.tags[i] == tags[j].tag) {
tags[j].count++;
found = true;
break;
}
}

// Initialize the new tag if it couldn't be found in the previous loop
if (!found) {
var elem = new Object();
elem.tag = msg.tags[i];
elem.count = 1;
tags[j++] = elem;
}
}
}
});


Expand All @@ -89,6 +136,21 @@
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}

#accordion {
float:left;
width:70%;
}

#tags {
float:right;
width:25%;
}

a.tagcloudlink {
color:#E17009;
}

</style>
</head>
<body>
Expand All @@ -100,10 +162,16 @@ <h1>Raul, the PTR analyzer.</h1>
<option value="FRW" selected="selected">FRW</option>
<option value="SCC">SCC</option>
</select>
<select id="msgs" name="msgs-select">
</select>

</p>

<div id="accordion">
</div>

<div id="tags">
</div>


<!-- ui-dialog -->
Expand Down
124 changes: 124 additions & 0 deletions src/main/webapp/js/jquery.tagcloud-2.js
@@ -0,0 +1,124 @@
/*
TagCloud jQuery plugin
A dynamic JavaScript tag/keyword cloud plugin for jQuery, designed to use with Ajax:
the cloud is generated from an array.
MIT license.
Schaffer Krisztián
http://woophoo.com
Usage:
------
Call it on a jQuery object created from one element and pass an array of
objects with "tag" and "count" attributes. E.g.:
var tags = [{tag: "computers", count: 56}, {tag: "mobile" , count :12}, ... ];
$("#tagcloud"}.tagCloud(tags);
Configuration:
--------------
Optionally you can pass a configuration object to tagCloud as the second
parameter. Allowed settings are:
sort: Comparator function used for sort the tags before displaying, or false if
no sorting needed.
default: sort by tag text using
function (a, b) {return a.tag < b.tag ? -1 : (a.tag == b.tag ? 0 : 1)
click: Event handler which receives the tag name as first parameter
and the original click event as second. The preventDefault() is called
on event before passing so don't bother.
default: does nothing:
function(tag, event) {}
maxFontSizeEm: Size of the largest tag in the cloud in css 'em'. The smallest
one's size is 1em so this value is the ratio of the smallest and largest
sizes.
default: 4
Styling:
--------
The plugin adds the "tagcloudlink" class to the generated tag links. Note that
an "&nbsp;" is generated between the links too.
Originally based on DynaCloud v3 by
Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>
CHANGES:
05 sept. 2008
- Improved normalization algorithm - better looking font sizes
- New settings: click, maxFontSizeEm
- Documentation
04 sept. 2008
- Initial version
*/

jQuery.fn.tagCloud = function(cl, givenOptions) { //return this.each( function() { //like a real jQuery plugin: run on on each element
if (!cl || !cl.length)
return this;

// Default settings:
var defaults = {
sort: function (a, b) {return a.tag < b.tag ? -1 : (a.tag == b.tag ? 0 : 1)},//default sorting: abc
click: function(tag) {},
maxFontSizeEm: 4
}

var options = {};
jQuery.extend(options, defaults, givenOptions);

// calculating the max and min count values
var max = -1;
var min = cl[0].count;
$.each(cl, function(i, n) {
max = Math.max(n.count, max);
min = Math.min(n.count, min);
});

if (options.sort) {
cl.sort(options.sort);
}

//Normalization helper
var diff = ( max == min ? 1 // if all values are equal, do not divide by zero
: (max - min) / (options.maxFontSizeEm - 1) ); //optimization: Originally we want to divide by diff
// and multiple by maxFontSizeEm - 1 in getNormalizedSize.
function getNormalizedSize(count) {
return 1 + (count - min) / diff;
}

// Generating the output
this.empty();
for (var i = 0; i < cl.length; ++i) {
var tag = cl[i].tag;
var tagEl = jQuery('<a href="" class="tagcloudlink" style="font-size: '
+ getNormalizedSize(cl[i].count)
+ 'em">' + tag + '<\/a>')
.data('tag', tag);

if (options.click) {
tagEl.click(function(event) {
event.preventDefault();
options.click(jQuery(event.target).data('tag'), event);
});
}
this.append(tagEl).append(" ");
}
return this;
//})
}

0 comments on commit 6c1f110

Please sign in to comment.