tfluehr / protocloud

A Prototype based Tag Cloud

ProtoCloud

ProtoCloud is a Prototype-based tag cloud control.

Example

Compatibility

ProtoCloud has been tested and is known to work in the following browsers:

• Firefox 3
• Internet Explorer 8
• Chrome 4
• Safari 4

Usage

Options

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
• 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.
• 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
• maxColorScale: 5
  • maximum amount to scale color for tags
    • < 1 will darken color
    • > 1 will lighten color
• 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

Callbacks

Examples

Authors

Written by Tim Fluehr – tfluehr.com

Credits