English | 中文

TagCloud.js

It's 3D TagCloud that rolling with the mouse. It's only 6KB in minsize and doesn't depend on other libraries. Examples

• Usage
  • npm
  • Browser
  • React
• Constructor
  • TagCloud(container, texts, options)
    • container
    • texts
    • options
      • options.radius
      • options.maxSpeed
      • options.initSpeed
      • options.direction
      • options.keep
      • options.containerClass
      • options.itemClass
      • options.useContainerInlineStyles
      • options.useItemInlineStyles
      • options.useHTML
• Instance
  • tagcloud.update(texts)
  • tagcloud.pause()
  • tagcloud.resume()
  • tagcloud.destroy()
• Custom event handler
  • Use event delegation bind event listener to TagCloud instance root element
• License

Usage

npm

$ npm i -S TagCloud

const TagCloud = require('TagCloud');

const container = '.tagcloud';
const texts = [
    '3D', 'TagCloud', 'JavaScript',
    'CSS3', 'Animation', 'Interactive',
    'Mouse', 'Rolling', 'Sphere',
    '6KB', 'v2.x',
];
const options = {};

TagCloud(container, texts, options);

Browser

<!-- html -->
<script type="text/javascript" src="./dist/TagCloud.min.js"></script>

TagCloud(container, texts, options);

React

There is a React Component by Frank-Mayer on npm: @frank-mayer/react-tag-cloud

Constructor

TagCloud(container, texts, options)

Returns tagcloud instance.

container

Type: String or HTMLElement or Array

Container for constructing a tagcloud.

texts

Type: Array

List of tag text for init.

options

Type: Object

options.radius

Type: Number
Default: 100
Unit: px

Rolling radius.

options.maxSpeed

Optional: 'slow', 'normal', 'fast'
Default: 'normal'

Rolling max speed.

options.initSpeed

Optional: 'slow', 'normal', 'fast'
Default: 'normal'

Rolling init speed.

options.direction

Type: Number
Default: 135 (right-bottom)
Unit: clockwise deg

Rolling init direction, e.g. 0 (top) , 90 (left), 135 (right-bottom) ...

options.keep

Type: Boolean
Default: true

Whether to keep rolling after mouse out area. Default true (decelerate to rolling init speed, and keep rolling with mouse).

options.reverseDirection

Type: Boolean
Default: false

Whether to reverse the direction when the mouse controls the direction. Default false.

options.containerClass

Type: String
Default: tagcloud

Css class to be used for the tagcloud container. Default tagcloud

options.itemClass

Type: String
Default: tagcloud--item

Css class to be used for tagcloud items. Default tagcloud--item

options.useContainerInlineStyles

Type: Boolean
Default: true

Add inline styles to the tagcloud container which are required for correct view. When this option is disabled you have to add the css by yourself. Default true

options.useItemInlineStyles

Type: Boolean
Default: true

Add common inline styles to the items which are required for correct view. When this option is disabled you have to add the css by yourself. Default true

options.useHTML

Type: Boolean
Default: false

Add html tags with text.Using this will help you add style on elements. Default false

Instance

tagcloud.update(texts)

Update tag list.

tagcloud.pause()

Pause the tagcloud animation.

tagcloud.resume()

Resume the tagcloud animation.

tagcloud.destroy()

Destroy the tagcloud instance.

Custom event handler

Use event delegation bind event listener to TagCloud instance root element

The following is an example, click the TagCloud sub-item to jump to Google to search for keywords.

let rootEl = document.querySelector('.content');
rootEl.addEventListener('click', function clickEventHandler(e) {
    if (e.target.className === 'tagcloud--item') {
        window.open(`https://www.google.com/search?q=${e.target.innerText}`, '_blank');
        // your code here
    }
});

License

MIT