JS-Cumulus v0.2

WP-Cumulus in JavaScript made by jerone.

The latest version of this script can be found on GitHub.

Intro

SpinControl

Screenshot JS-Cumulus

I always loved the widely used WP-Cumulus made by Roy Tanc. This is a widget original made for Wordpress that shows all blog tags or categories. The tags rotate in a 3D circular way when you hover over the container and will slowdown when you hover over one to make it possible to click the tag.

The only downside this widget has, is that it’s made in Flash. I don’t hate flash, don’t get me wrong, but it has it flaws as people depend on a third party program, it isn’t very SEO compatible, is another language to learn and many more disadvantages. And I’ve always said; “What you can do in Flash, I can do in Javascript.”. And that’s the reason this project has started: JS-Cumulus.

So JS-Cumulus is a prove of concept. It has to prove that it can do the same thing as his older brother WP-Cumulus. I also wanted to not depend on Javascript libraries, so it could be added to any site.

And with this piece of code I can say for sure this has succeeded. It even adds more functionality then the original and is customizable with both Javascript and CSS. It doesn’t depend on libraries and when set up correctly it is even backwards compatible.

Some of the features are:

  • Same features as WP-Cumulus.
  • SEO compatible.
  • No need for third-party addons.
  • Javascript libraries independed.
  • Doesn't uses a server.
  • Text and images possible.
  • Controls available.
  • Cross browser. Tested working in all major browsers: Internet Explorer 6 - 8, Firefox 1 - 3.6, Opera 10, Chrome 1 - 5 and Safari 4. It should work with newer browsers and may work with older browsers, no promise until tested.

Options

  • TagCloud Datatype: Class Default: -
    Returns: TagCloud Class Status: Optional
    Description: The main function to add an JS-Cumulus.
    Syntax: This function can be called with different arguments: 
    new TagCloud(/* element, */ tags, /* width, */ /* height, */ /* options */);
    Examples of call defenitions can be, but not limited to: 
    new TagCloud(tags);
    new TagCloud(element, tags);
    new TagCloud(tags, width, height);
    new TagCloud(tags, options);
    new TagCloud(element, tags, width, height, options);
    Remember that the tags argument is mandatory and should always be defined. The rest is optional.
    It isn't nessecery to put all arguments in their own place, as long as they stay in right order.
    Example: 
    new TagCloud([ new Tag("JS-Cumulus"), new Tag("tag2"), ], 500, 500);
    Arguments:
    • element Datatype: Element Default: document.body
      Returns: - Status: Optional
      Description: The location where to add the TagCloud on the document.
      Example:-
    • tags Datatype: Tag Class Default: -
      Returns: - Status: Mandatory
      Description: List of tags that are displayed in the TagCloud.
      Example:-
    • width Datatype: Float Default: 400
      Returns: - Status: Optional
      Description: Width of the TagCloud container.
      Example: 
      parseFloat(document.getElementById("tagCloud").clientWidth)
    • height Datatype: Float Default: Same as width
      Returns: - Status: Optional
      Description: Height of the TagCloud container.
      Example: 
      parseFloat(document.getElementById("tagCloud").clientHeight)
    • options Datatype: Object Default: -
      Returns: - Status: Optional
      Description: Some optional options for more features.
      Example:-
      Options:
      • id Datatype: String Default: "tagCloud1234"
        Returns: - Status: Optional
        Description: Id of the TagCloud wrapper.
        Example:-
      • className Datatype: String Default: "tagCloud"
        Returns: - Status: Optional
        Description: Classname of the TagCloud wrapper.
        Example:-
      • consistent Datatype: Boolean Default: true
        Returns: - Status: Optional
        Description: Devide tags evenly.
        Example:-
      • radius Datatype: Float Default: Math.min(/* width */, /* height */) / 4);
        Returns: - Status: Optional
        Description:

        Radius of the TagCloud circle.

        The default value calculates the lowest value from the width and height of the TagCloud arguments, divided by 4.

        Example:-
      • fontMin Datatype: Float Default: 10
        Returns: - Status: Optional
        Description: Font size for smallest tag in pixels.
        Example:-
      • fontMax Datatype: Float Default: 24
        Returns: - Status: Optional
        Description: Font size for biggest tag in pixels.
        Example:-
      • overwrite Datatype: Boolean Default: false
        Returns: - Status: Optional
        Description: Override any existing HTML in the element.
        Example:-
    Methodes:
    • Distribute Datatype: Function Default: -
      Returns: TagCloud Class Status: Optional/Mandatory
      Description: Will distribute the tags in the TagCloud. This function is only mandatory if the element argument in the TagCloud Class isn't filled in. If no element argument is specified this function will just distribute the tags in the TagCloud.
      Example:-
      Arguments:
      • element Datatype: Element Default: element argument in TagCloud Class or document.body
        Returns: - Status: Optional/Mandatory
        Description: The location where to add the TagCloud on the document. This function will override the element argument in the TagCloud Class.
        Example:-
    • Animate Datatype: Function Default: -
      Returns: TagCloud Class Status: Optional/Mandatory
      Description: Will animate the tags in the TagCloud. To start the TagCloud rotation this function should be called at least once. A delta argument can be specified to rotate the tags differently.
      Example:-
      Arguments:
      • delta Datatype: Vector Default: ...
        Returns: - Status: Optional
        Description: The location to where the tag should be moving. An Vector Class should be used.
        Example: 
        tagCloud.Animate(new Vector(-2, -2, 0));
    • Pause Datatype: Function Default: -
      Returns: TagCloud Class Status: Optional
      Description: A simple function to pause the animation of the tags.
      The position, speed and vector are remembered. By calling the Animate method again the tags start rotation again from where the were paused.
      Example:-
    • Stop Datatype: Function Default: -
      Returns: TagCloud Class Status: Optional
      Description: A function to stop the animation of the tags. Speed and vector are reseted.
      Example:-
    • Update Datatype: Function Default: -
      Returns: TagCloud Class Status: Optional
      Description: Function to set the tags to a specific location. This function should only be used if you know what you're doing.
      Example:-
      Arguments:
      • delta Datatype: Vector Default: new Vector();
        Returns: - Status: Optional
        Description: The location to where the tag should be moving. An Vector Class should be used.
        Example: 
        tagCloud.Update(new Vector(-2, -2, 0));
  •  
  • Tag Datatype: Class Default: -
    Returns: Tag Class Status: Mandatory
    Description: The main function to make a tag that goes into the TagCloud Class.
    Syntax: This function can be called with different arguments: 
    new Tag(title, /* rank, */ /* url */);
    Examples of call defenitions can be, but not limited to: 
    new Tag(title);
    new Tag(title, rank);
    new Tag(title, url);
    new Tag(title, rank, url);
    Remember that the title argument is mandatory and should always be defined. The rest is optional.
    Example: 
    new Tag("JS-Cumulus", 80);
    new Tag("Jeroen van Warmerdam", 60, "http://www.jeroenvanwarmerdam.nl");
    Arguments:
    • title Datatype: String HTML Default: -
      Returns: - Status: Mandatory
      Description: The title of the tag. HTML is allowed, so escape all character that aren't meant to be HTML.
      Example:-
    • rank Datatype: Integer Default: 30
      Returns: - Status: Optional
      Description: The rank of the tag, which affects the size of the tag.
      Must be a number between 0 and 100 procent. The higher the number, the bigger the font size.
      Example:-
    • url Datatype: String URI Default: "#"
      Returns: - Status: Optional
      Description: The url that will be opened when clicked on the tag.
      Example:-
  •  
  • Vector Datatype: Class Default: -
    Returns: Vector Class Status: Optional
    Description: A special class designed to be used internally for positioning in the TagCloud class.
    The delta argument in the Animate and the Update methodes are the only use outside the TagCloud class.
    Example: 
    new Vector(2, 2, 0);
    Arguments:
    • x Datatype: Integer Default: 0
      Returns: - Status: Mandatory
      Description: ...
      Example:-
    • y Datatype: Integer Default: 0
      Returns: - Status: Optional
      Description: ...
      Example:-
    • z Datatype: Integer Default: 0
      Returns: - Status: Optional
      Description: ...
      Example:-

Usage

HTML

Place the following code in the head of your page.

<!-- Mandatory JavaScript files -->
<script type="text/javascript" src="js-cumulus.min.js"></script>

<!-- JS-Cumulus definition -->
<script type="text/javascript">
	(function() {
		var tags1 = [
			new Tag("JS-Cumulus", 100, "http://www.jeroenvanwarmerdam.nl"),
			new Tag("Tag 1", 50),
			new Tag("Tag 2"),
			new Tag("<del>No flash</del>"),
			new Tag("<img src='tagcloud.gif' alt='tagcloud' />")
		];
		new TagCloud(tags1, 400, 400).Distribute(document.getElementById("tagCloud1")).Animate();
	})();
</script>

<!-- JS-Cumulus style -->
<style type="text/css">
	.tagCloud {
		background: transparent url("background.gif") 0 0 repeat;
	}
	.tagCloud ul, .tagCloud li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.tagCloud .tagClass img {
		border: 0 none;
	}
	.tagCloud .tagClass a {
		color: #fff;
		font-family: Sans;
		font-weight: normal;
		padding: 3px;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
	}
	.tagCloud .tagClass a:hover {
		border: solid 1px #ffdb00;
		color: #ffdb00;
		text-decoration: none;
	}
	
	#jsCumulus1 {  /* style for tag 1 */
		color: #86C25E;
	}
	#jsCumulus2 {  /* style for tag 2 */
		color: #50B5D5;
	}
</style>

JS-Cumulus must be called after the document is loaded. You can use an external Javascript library to do that for you or you can place above Javascript in the body after the place where you want the JS-Cumulus to be.

 

Download

A zip archive for this script is available here: js-cumulus-0.2.1.zip (size: 119kb).

The zip archive contains the following files:

Changelog

  • version 0.3 Development (soon...):
    • ...
  • version 0.2.4 (12/18/0201):
  • version 0.2.3 (12/18/0201):
  • version 0.2.2 (12/18/0201):
    • MOD: clean up;
  • version 0.2.1 (2/5/2010):
    • FIX: fixed bug with manual Animate();
  • version 0.2 (2/5/2010):
    • ADD: default element;
    • ADD: running Distribute when element is known;
    • ADD: option to override existing html in the given element;
    • FIX: small bug in Update;
    • FIX: detection of HTML Element;
    • FIX: minor memory leaks;
    • FIX: recalculated attractor position
    • MOD: cleaned up code;
    • MOD: reactivate second tagcloud;
    • MOD: updated Distribute function;
    • MOD: changed tag id declaration;
    • MOD: updated documentation;
    • MOD: updated example page;
    • MOD: changed example to HTML5;
    • MOD: improved tag widget example
  • version 0.1 (1/18/2010):
    • Initial release;

FAQ

Which browsers is this plugin compatible with?
Tested working in Internet Explorer 6 - 8, Firefox 1 - 3.6, Opera 9 & 10, Chrome 1 - 5 and Safari 4. It should work with newer browsers and can work with older browsers, no promise until tested.

Does the plugin work with any other plugins?
There's no build-in support for other plugins.

Is there a VSDoc file available for this plugin?
Yes, there's a VSDoc file available on the download page.

What is VSDoc?
VSDoc is documentation format for Visual Studio. By using this file information is added to JavaScript Intellisense. This is only available in VS2008.

Related information

Known issues

  • -

Todo

  • IDEA: Mouse panning, zooming;
  • ADD: Documentation;
  • ADD: Z-sorting;
  • ADD: Slow down more on tag mouse focus;
  • ADD: Calculating the color instead using the Opacity property;
  • ADD: Tags from xml;
Links

Sub-Links

Search

Site Search

Search

Google Search

ad
 
ã‹¡