Class: Colorcircle

Colorcircle is a Mootols 1.2.0 based Colorpicker.

Important: You also need the Mootools Color-Plugin to get it working.

Report bugs to email please.

Download

	Colorcircle 1.0	Colorcircle 1.0 with minimal required Mootools
uncompressed	Download	Download
YUI Compressor	Download	Download

Note: If you take Colorcircle with minimal required Mootools version, you don't need to include moootools.js.

Demo

Basic Usage

1. Include mootools.js (if you haven't allready) and colorcircle.js in your HTML.

   <script type="text/javascript" src="mootools.js"></script>
   <script type="text/javascript" src="colorcircle/colorcircle.js"></script>

2. Create a placeholder div wherever you want the Colorcircle to be placed.

   <div id="placeholder"></div>

3. Create a JavaScript-Tag, add a load event and call the constructor.

   <script type="text/javascript">
     window.addEvent("load", function() {
       new Colorcircle("placeholder");
     });
   </script>

Colorcircle Method: constructor

Syntax:

var colorcircle = new Colorcircle(container[, properties]);

Arguments:

1. container - (mixed) The tag name of the div to be created in or an actual DOM element.
2. properties - (object, optional) Sets the properties of the Colorcircle

Properties:

• color - (mixed: defaults to #F00) The start color; A string, an array representation of a color or a Mootools-Color Object.
• onChange - (function) A function which is called when color changes.
• onInitialize - (function) A function which is called when Colorcircle is initialized.
• size - (int: defaults to 200) Only needed if you change the graphics circle.png and mask.png. Note that mask.png should be half size of mask.png allways.
• directory - (String: defaults to colorcircle/) Directory which contains the images circle.png and mask.png.

Returns:

• (object) A new Colorcircle instance.

Example:

var colorcircle = new Colorcircle("myContainer", {
  color: "#0f0",
  onChange: function(color) {
    alert(color.hex);
  },
  onInitialize: function(color) {
    alert(color.hsb);
  }
  size: 200,
  directory: "colorcircle/"
});

Event change:

• (function) Function to execute on change.

Signature:

onChange(color)

Arguments

1. color - (object) A Mootools-Color Object.

Example:

var colorcircle = new Colorcircle("myElement");
colorcircle.addEvent("change", function(color) {
  alert(color.hex);
});

Colorcircle Method: setColor

Sets a new Color of the Colorcircle.

Syntax:

myColorcircle.setColor(color);

Arguments:

1. color - (mixed) A string, an array representation of a color or a Motools-Color Object.

Colorcircle Attributes:

• color - (object) A Mootools-Color Object.