ProtoCloud is a Prototype-based tag cloud control.
ProtoCloud has been tested and is known to work in the following browsers:
- Firefox 3
- Internet Explorer 8
- Chrome 4
- Safari 4
ProtoCloud takes a number of options that you can use to modify its behavior:
Option name is in bold, default value is in italics
- dataAttributes – Object with three properties specifying data attributes
- count: ‘count’
- Key name for the count/rank attribute in the data
- tag: ‘name’
- Key name for the label/name attribute in the data
- slug: ‘slug’
- Key name for the slug attribute in the data
- count: ‘count’
- useEffects: true
- set to false to disable all effects when showing the tag cloud
- effects – Object with three properties specifying what effects to use when showing the tag cloud
- position: true
- move tags from the center to their final location
- color: true
- transitions color from baseColor to the tag’s final color
- opacity: false
- fades in the tag from invisible to fully visible
- false by default because IE has some display issues with opague text where it doesn’t look quite right.
- position: true
- minFontSize: 100
- minimum font size in percent for tags
- maxFontSize: 300
- maximum font size in percent for tags
- minColorScale: 1
- minimum amount to scale color for tags
- < 1 will darken color
- > 1 will lighten color
- minimum amount to scale color for tags
- maxColorScale: 5
- maximum amount to scale color for tags
- < 1 will darken color
- > 1 will lighten color
- maximum amount to scale color for tags
- scaleColor: true
- set to false to disable color scaling of tags (all tags will be base color)
- className: ‘ProtoCloud’
- css class name to add to the div that contains the tag cloud
- not used by the cloud component itself but added to make styling of clouds easier.
- baseColor: ‘#??’
- base color to use for tag colors and color scaling
- the default is the css color of the cloud’s div container
- tagForSlug: false
- if true and dataAttributes.slug is undefined on a tag then dataAttributes.tag will be substituted in the hrefTemplate
- hrefTemplate: new Template(‘javascript:alert("name: #{name}, count: #{count}, slug: #{slug}, ");’)
- Prototype template used for building the href of the individual tags.
- linkAttributes: false
- can be set to a function for building additional element attributes to be added to the tag links
- specify as an object of key/value pairs. the function will receive the tagData as it’s parameter
- showTooltip: true
- add a title attribute (for showing the browser tooltips) to the link containing the tag and count
- showCount: false
- show the count/rank with the tag in the cloud
- isHref: false
- set to true if the dataAttributes.slug property will contain the full contents for the tag link href
- hrefTemplate will not be used if this is set to true
- fitToTarget: false
- set to true to remove the lowest ranked tags that do not fit in the initial dimentions of the container div
- depending on the data set this may cause the smallest item to be larger then minFontSize
- data: []
- array of objects to use for each tag
Written by Tim Fluehr – tfluehr.com