ColorPicker extends the input controls for websites. It acts just like a radio button, text input or select pulldown. It lets the user input a color in an intuitive way. This extension does not require any library like MooTools, ProtoType, YUI library, jQuery, etc. Also, it does not interfere with one so you're able use this control along with any library. As a demonstration of the control, why don't you choose the next color the header will fade to here:
Download the latest colorpicker.js file here.
To implement ColorPicker in your website just include the file in the page <head> and add one or more input element(s) (e.g. type="text") with classname 'colorpicker' to the page. Then execute ColorPicker.run() on page load or at the end after the last element to be a color picker. Example:
<hmtl> <head> <title>ColorPicker example</title> <script type="text/javascript" src="colorpicker.js" /> </head> <body onload="ColorPicker.run();"> <form> Choose a color: <input type="text" name="color" class="colorpicker" /> <input type="submit" /> </form> </body> </html>
As this control is simplified by default, more advanced usage might be needed for you. This color picker implements some features which you can use to tweak and customize the control.
To initialize a new color picker, you should construct one:
cp = new ColorPicker(element[, configurationHash]);
The configuration hash is optional here and will be discussed later on.
Another way to initialize one or more color pickers at once is by passing the classname of the target colorpickers to a factory function, which returns an array of ColorPicker objects.
cps = ColorPicker.init(classname[, configurationHash]);
Also a function run() is created to handle the default classname 'colorpicker', by convention.
cps = ColorPicker.run([configuraionHash]);
In the above passage a configurationHash is repeatedly mentioned. This parameter is an object (associative array) with settings for ColorPicker instances. The default configuration is as follows, where the container is the color picker itself, which appears when you click the trigger and the trigger is the control itself which changes color and is to be clicked to have the color picker appear:
{
'container': {
'borderColor': 'black',
'backgroundColor': '#444444',
'lineHeight': '18px'
},
'trigger': {
'style': 'background-color: ' + this._okColor + ';'+
'display: inline;'+
'border: 1px solid black;'+
'cursor: pointer;'+
'text-align: right;'+
'position: absolute'
},
'language': {
'ok': 'OK',
'cancel': 'Cancel'
},
'buttons': {
'backgroundColor': '#666666',
'borderColor': 'black'
},
'events': {}
};
To adjust the configuration one would not need to copy the entire table, parts will do. For instance, if you would like the 'Cancel' button to read 'Annuleren' (Dutch language) you could initialize a ColorPicker like this:
new ColorPicker(document.getElementById('cp'), {'language': {'cancel': 'Annuleren'}});
It would get you something like this (when clicked):
Also some eventhandlers can be added to the configuration. These events are defined below. The effect of adding a function to the events configuration is that the function will be add as an EventListener to the subject event type on initialization of the color picker. Example:
ColorPicker.run({'events': {
'ok': function(e) { alert('You picked '+ e.object.value +' as color'); },
'cancel': function(e) { alert('Why did you not choose a color?'); }
}});
Several events can be fired by the color picker. The event types are listed here. You can add a listener to the color picker's input element like you would register event listeners to any other element and in one additional way. An example follows below.
Example:
<input type="text" value="#008800" id="colorpicker" />
<script type="text/javascript">
/* <![CDATA[ */
// One way is to pass the handler on construction. The effect is the same as the regular way
new ColorPicker(document.getElementById('colorpicker'), {
'events': {'change': function(e) { alert('The colorpicker value changed!') }}
};
// The regular way is with addEventListener
var element = document.getElementById('colorpicker');
element.addEventListener('click', function(e) { alert('You picked a color to be set!') });
/* ]]> */
</script>
This API is a summary of the full API. All prototypical functions return the ColorPicker instance to enable chaining in the syntax.
function ColorPicker(elm, config) { CONSTRUCTOR }
ColorPicker.prototype.setConfig = function(config) { return ColorPicker }
ColorPicker.prototype.createPicker = function() { return void }
ColorPicker.prototype.showPicker = function() { return ColorPicker }
ColorPicker.prototype.hidePicker = function() { return ColorPicker }
ColorPicker.prototype.setSB = function(e) { return ColorPicker }
ColorPicker.prototype.setH = function(e) { return ColorPicker }
ColorPicker.prototype.setText = function(e) { return ColorPicker }
ColorPicker.prototype.toValue = function() { return ColorPicker }
ColorPicker.prototype.setValue = function(val) { return ColorPicker }
ColorPicker.prototype.resetPreview = function() { return ColorPicker }
ColorPicker.prototype.clickcancel = function() { return ColorPicker }
ColorPicker.prototype.clickok = function() { return ColorPicker }
ColorPicker.prototype.fireEvent = function(event){ return mixed }
ColorPicker.setInstance = function(inst) { return void }
ColorPicker.getInstance = function() { return instance || null }
ColorPicker.init = function(classname, config) { return ColorPicker[] }
ColorPicker.run = function(config) { return ColorPicker }
ColorPicker.HSBtoRGB = function(hsb) { return integer[3] }
ColorPicker.RGBtoHSB = function(rgb) { return float[3] }
ColorPicker.RGBtoHex = function(rgb) { return string }
ColorPicker.HextoRGB = function(hex) { integer[3] }
ColorPicker.Base = function(dec, base) { return string }
ColorPicker.unBase = function(num, base) { return integer }
ColorPicker.getEventElement = function (e) { return element }
ColorPicker.getEventMousePosition = function(e, relativeToElement) { return integer[2] }
ColorPicker.getEventType = function(e) { return string }
ColorPicker.getElementsByClassName = function (classname) { element[] }
ColorPicker.mergeArrays = function(arr1, arr2) { return array[] }
ColorPicker.getDimensions = function(Elem) { return integer [2] }
ColorPicker.getArrowImageBase64 = function(backgroundHex) { return string }
ColorPicker.getHImageBase64 = function() { return string };
ColorPicker.getSLImageBase64 = function() { return string }
Function.prototype.colorpicker_bind = function(scope) { return function }
Copyright (c) 2009-2010, J.P.Westerhof Permission is hereby granted, free of charge, to any person obtaining a copy of this software and/or (associated) documentation from eDesign.nl domains (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.