DOCSEARCHbyAlgolia
Submit Docs

TagCloud

repository·master·Indexed 19 days ago

https://github.com/cong-min/tagcloud

A lightweight (6KB), dependency-free 3D tag cloud library for browser and Node.js environments. Version 2.5.0 features a rolling animation controlled by mouse movement and provides a constructor for initialization along with instance methods for updating content, pausing, resuming, and destroying the cloud.

Tokens
2K
Snippets
13
Records
15
Agent score
64%

What's inside TagCloud

  2. Initialize TagCloud in the Browser

    master

    Include the minified script in your HTML and then call the TagCloud function.

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

<script>
  TagCloud(container, texts, options);
</script>

  4. Initialize TagCloud

    master

    Use the TagCloud constructor to create a 3D tag cloud. It requires a container, a list of texts, and an optional configuration object.

    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);
    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);

  6. Configure TagCloud options

    master

    The options object allows you to customize the behavior and appearance of the tag cloud.

    OptionTypeDefaultDescription
    radiusNumber100Rolling radius in px.
    maxSpeed'slow'|'normal'|'fast''normal'Maximum rolling speed.
    initSpeed'slow'|'normal'|'fast''normal'Initial rolling speed.
    directionNumber135Initial rolling direction in clockwise degrees (e.g., 0 is up, 90 is left, 135 is bottom-right).
    keepBooleantrueIf true, the cloud continues to roll (decelerating to initial speed) when the mouse leaves the container.
    reverseDirectionBooleanfalseWhether to reverse the direction when controlled by the mouse.
    containerClassString'tagcloud'CSS class for the container.
    itemClassString'tagcloud--item'CSS class for each tag item.
    useContainerInlineStylesBooleantrueIf true, adds inline styles to the container. If false, you must provide your own CSS.
    useItemInlineStylesBooleantrueIf true, adds inline styles to each item. If false, you must provide your own CSS.

  7. Handle TagCloud item clicks via event delegation

    master

    Since TagCloud items are generated dynamically, use event delegation on a parent element to handle clicks. Check if e.target.className matches the itemClass (default is tagcloud--item).

    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
    }
});

  8. Add custom events to tag items using event delegation

    master

    TagCloud items do not have individual event listeners attached. To handle clicks or other interactions on specific tags, use event delegation on the container element. Check the className of the target to ensure you are interacting with a tag item (tagcloud--item).

    Example: Opening a Google search for the clicked tag text:

    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');
    }
});
    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
    }
});

  9. Initialize TagCloud via npm

    master

    Import TagCloud and call the constructor with a container selector (or element), an array of strings, and an options object.

    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);

  10. Use the TagCloud constructor

    master

    The TagCloud(container, texts, options) function initializes a 3D rolling tag cloud. It returns a TagCloud instance that allows you to control the animation.

    // Returns tagcloud instance
const instance = TagCloud(container, texts, options);

  11. Control the TagCloud instance

    master

    The object returned by the TagCloud constructor provides methods to manage the lifecycle and state of the animation.

    const instance = TagCloud(container, texts, options);

instance.update(texts); // Update the tag list
instance.pause();       // Pause the animation
instance.resume();      // Resume the animation
instance.destroy();    // Destroy the instance

  12. Use TagCloud instance methods

    master

    The TagCloud constructor returns an instance that provides methods to control the lifecycle and data of the cloud.

    • tagcloud.update(texts): Updates the list of tag texts.
    • tagcloud.pause(): Pauses the animation.
    • tagcloud.resume(): Resumes the animation.
    • tagcloud.destroy(): Destroys the tag cloud instance.