Kang-min Liu - Widget.TagCloud-0.02

NAME

Widget.TagCloud - TagCloud effect made easy

SYNOPSIS

  # Just show something
  var tc = Widget.TagCloud.show(data)

  # OO-style
  var tc = new Widget.TagCloud()
  tc.data(data)
  tc.create()
  tc.show()

DESCRIPTION

This is a pure javascript implementation of tag cloud. It creates markups and CSS for you so you don't need to worry about it too much. The simplest usage looks like this:

    Widget.TagCloud.show(data)

This appends a new div to document.body. If you would like to control that, you could say something like:

    var elem = document.getElementById("my-tag-cloud-div")
    Widget.TagCloud.show(data, { parentNode: elem })

That would append a new div to element elem.

The format of data is like this:

    var data = [
        { tag: "Foo", url: "/tag/Foo", count: 10 },
        { tag: "Bar", url: "/tag/Bar", count: 20 },
        { tag: "Baz", url: "/tag/Baz", count: 30 }
    ];

It's a array of hash. Each element has 3 keys: tag, url, count. tag and url will be used to create a link element. count will be used to show different font size. Required CSS are dynamically generated.

If you prefer more OO-ish way, here's 4 required steps:

First, create an object:

  var tc = new Widget.TagCloud()

Second and third, create markup:

  tc.data(data)
  tc.create()

Last, put into document.body

  tc.show()

Again, show() method could have parameter indicating the parent node of tag cloud div:

  tc.show({ parentNode: elem })

That's about everything you should now to use this library. Please give me some feedback about any kinds suggesstions.

AUTHOR

Kang-min Liu, <gugod@gugod.org>

COPYRIGHT

This module is free software; you can redistribute it and/or modify it under the same terms as the Perl programming language (your choice of GPL or the Perl Artistic license).

if ( typeof Widget == "undefined" )
    Widget = {};

Widget.TagCloud = function(param){
    this.init(param);
    return this;
}

Widget.TagCloud.VERSION = '0.02'
Widget.TagCloud.EXPORT = []
Widget.TagCloud.EXPORT_OK = []
Widget.TagCloud.EXPORT_TAGS = {}

Widget.TagCloud.show = function(data, param) {
    var tc = new Widget.TagCloud()
    tc.data(data)
    tc.create()
    return tc.show(param)
}

Widget.TagCloud.prototype = (function(){return {
    init: function(param) {
        this.state = { inited: 1 }
        this._data = new Array();
    },
    create: function() {
        var d = this._data.sort(function(a, b) {return a.count - b.count})
        var max = d[data.length-1].count
        var factor = 36/Math.log(max)

        this.data(this._data.sort(function(a, b) {
            var ta = a.tag.toLowerCase()
            var tb = b.tag.toLowerCase()
            return ((ta > tb) ? 1 : (ta < tb) ? -1 : 0 )}))

        this.div = (function(data){
            var d = document.createElement("div")
            d.setAttribute("class", "jsan-widget-tagcloud")
            for (var i = 0; i < data.length ; i++) {
                var a = document.createElement("a")
                a.setAttribute("href", data[i].url)
                a.appendChild(document.createTextNode(data[i].tag))
                var s = document.createElement("span")
                var level = Math.floor(Math.log(data[i].count) * factor);
                s.setAttribute("class", "jsan-widget-tagcloud" + level)
                s.appendChild(a)
                d.appendChild(s)
                d.appendChild(document.createTextNode(" "))
            }
            return d
        })(this._data)

        this.style = (function(css){
            var s = document.createElement("style")
            s.setAttribute("type", "text/css")
            s.appendChild(document.createTextNode(css))
            return s
        })(this.css())
 
        this.state.created = 1
        return this
    },
    show: function(param) {
        if (!param)
            param = {}
        if (!param.parentNode)
           param.parentNode = document.body
        
        param.parentNode.appendChild(this.div)
        var head = ( document.getElementsByTagName("head") )[0]
        head.appendChild(this.style)
        this.state.shown = 1
    },
    hide: function() {
        if ( this.state.shown ) {
            document.body.removeChild(this.div)
            var head = ( document.getElementsByTagName("head") )[0]
            head.removeChild(this.style)
        }
    },
    add: function(tag, url, count) {
        this._data.push({tag: tag, url: url, count: count })
    },
    css: function() {
        var L = ".jsan-widget-tagcloud {line-height:1em;text-align:center;}\n.jsan-widget-tagcloud a {text-decoration: none;}\nYIELD\n"
        var T = ".jsan-widget-tagcloudLEVEL {font-size: SIZEpx;}\n"

        var rule = '';
        for(var i = 0; i < this._data.length; i++) {
            rule += T.replace(/LEVEL/, i).replace(/SIZE/, i + 12)
        }
        
        return L.replace(/YIELD/, rule)
    },
    data: function(data) {
        if ( data ) {
            this._data = data
        }
        return this._data
    }
}})()


/**

*/