/*--------------------------------------------------------------------------------------------------
**
** PROCOLOR v1.0
**
** Copyright (c) 2009 by the Phantom Inker (inker2576@yahoo.com).
** All Rights Reserved.
**
**--------------------------------------------------------------------------------------------------
**
** OVERVIEW
** --------
**
** ProColor is yet another web color picker, this time for Prototype, and hue-wheel-based,
** which seems to be a friendlier concept to artists than many of the RGB-box-based pickers.
**
**--------------------------------------------------------------------------------------------------
**
** PROCOLOR LICENSE
** ----------------
**
** Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are met:
**
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
**
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in the
** documentation and/or other materials provided with the distribution.
**
** THIS SOFTWARE IS PROVIDED BY THE PHANTOM INKER AND CONTRIBUTORS "AS IS"
** AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
** IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
** ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
** LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
** CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
** SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
** INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
** CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
** ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
** THE POSSIBILITY OF SUCH DAMAGE.
**
**--------------------------------------------------------------------------------------------------
**
** USAGE
** -----
**
** Usage is straightforward. Include this file (or better yet, the compressed
** version), and then make this call to create a color-picker:
**
** new ProColor(options);
**
** For example, for a static color picker:
**
** new ProColor({ mode:'static', parent:container_element });
**
** Or for a drop-down/popup color picker:
**
** new ProColor({ mode:'popup', input:input_element });
**
** If you want a drop-down color picker the easy way, it's better to use the button factory
** method to create them:
**
**
** ...
** ProColor.prototype.attachButton('mycolor', options);
**
** Or if that's still too hard, you can make it even simpler by using the automatic factory
** method that runs during onload. This factory method uses the current setting of
** ProColor.prototype.options for its options, and creates a button attached to any
** whose class contains 'procolor':
**
**
**
**--------------------------------------------------------------------------------------------------
**
** OPTIONS
** -------
**
** ProColor offers many different options for configuring its behavior. All of the important
** ones are documented below.
**
** Options:
**
** mode: Either 'static' or 'popup'.
**
** input: Input textbox or hidden field to record color in. (Format: '#RRGGBB' string.)
**
** showInField: Show the current color as the input field's background color (default: false).
**
** parent: In static mode, the containing element to insert this into.
** In popup mode, this is the element the popup should be attached to (usually
** the same as input).
**
** closeButton: Show close button (default: false for 'static', true for 'popup').
**
** color: Initial color to select (default: extract from input field, or use #FFFFFF).
**
** imgPath: URL to dir containing ProColor's .png files, if they're not in the same place
** as the .js file. This is directly prepended to the names of the files, so
** it usually must have a trailing '/'.
**
** width: Dimensions of the color picker, in pixels. Default width is 360.
** height: Dimensions of the color picker, in pixels. Default height is 192.
**
** offsetx: Offset of color picker's content, from its left edge, in pixels. Default is 0.
** offsety: Offset of color picker's content, from its top edge, in pixels. Default is 0.
**
** editbg: Background color of color picker's edit fields. Default is '#FFFFFF'.
** edittext: Color of text in color picker's edit fields: Default is '#4C4C4C'.
**
** outputFormat: How to format the text in the textbox. A format string that accepts:
**
** {RR} Two-digit red hex value.
** {GG} Two-digit green hex value.
** {BB} Two-digit blue hex value.
** {R} One-digit red hex value.
** {G} One-digit green hex value.
** {B} One-digit blue hex value.
** {red} Decimal red (0-255).
** {grn} Decimal green (0-255).
** {blu} Decimal blue (0-255).
** {hue} Decimal hue (0-359).
** {sat} Decimal saturation (0-100).
** {brt} Decimal brightness (0-100).
** . All other characters will be copied as-is.
**
** In addition, you may use tokens like {rr} to request lowercase hex instead
** of uppercase. The default format string is "#{RR}{GG}{BB}".
**
** onOpening: Called when the color picker is about to appear: callback(this, 'opening').
** onOpened: Called after the color picker has appeared: callback(this, 'opened').
** onClosing: Called when the color picker is about to be destroyed: callback(this, 'closing').
** onClosed: Called after the color picker has been destroyed: callback(this, 'closed').
**
** onChanging: Called when the color is changing (many events): callback(this, 'changing').
** onChanged: Called when the color has changed (at mouseup): callback(this, 'changed').
**
** onCancelClick: Called when user presses Esc or clicks outside popup: callback(this, 'cancelclick').
** onAcceptClick: Called when user presses Enter or double-clicks: callback(this, 'acceptclick').
**
** onCloseButton: Called when user clicks close button, before closing: callback(this, 'closebutton').
**
**--------------------------------------------------------------------------------------------------
**
** CHANGELOG
** ---------
**
** Version 1.0 (2009-02-26) - Initial release.
**
**------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------
** Make sure that Prototype has already been loaded.
*/
if (typeof Prototype == 'undefined')
alert("ProColor Error: Prototype is not loaded. Please make sure that your page includes prototype.js before it includes procolor.js.");
if (Prototype.Version < "1.6")
alert("ProColor Error: Minimum Prototype 1.6.0 is required; you are using " + Prototype.Version);
/*--------------------------------------------------------------------------------------------------
** Add two useful methods to Element. Many other libraries add build(), and ours
** is, in theory, compatible with all of their versions.
*/
Element.addMethods({
/* Create a child element with the given options (attributes) and style. */
build: function(element, type, options, style) {
var e = $(document.createElement(type));
$H(options).each(function(pair) { e[pair.key] = pair.value; });
if (style) e.setStyle(style);
element.appendChild(e);
return e;
},
/* Return true if this event was a mouse event that occurred inside the given element. */
isEventIn: function(element, event) {
var d = element.getDimensions();
var p = element.cumulativeOffset();
var x = event.pointerX(), y = event.pointerY();
return (x >= p.left && y >= p.top && x < p.left+d.width && y < p.top+d.height);
}
});
/*--------------------------------------------------------------------------------------------------
** This is a simple class for capturing all mouse input after a mouse button
** is held down until the mouse button is released.
*/
var MouseCapture = Class.create({
initialize: function() { },
onEvent: function(event, callback) {
if (callback && event.type != 'mouseover' && event.type != 'mouseout')
callback(event, event.type);
event.stop();
},
setCursor: function(c) {
if (this.div)
this.div.setStyle({ cursor: c });
},
begin: function(callback) {
/* Create our event listener. We'll need this object now, and later on to
be able to stop listening to events too. */
this.listener = this.onEvent.bindAsEventListener(this, callback);
/* Start observing events. */
Event.observe(document, 'mouseup', this.listener);
Event.observe(document, 'mousemove', this.listener);
Event.observe(document, 'mousedown', this.listener);
Event.observe(document, 'mouseover', this.listener);
Event.observe(document, 'mouseout', this.listener);
Event.observe(document, 'keyup', this.listener);
Event.observe(document, 'keydown', this.listener);
/* Don't let the browser perform text-selection while capturing. */
this.old_body_ondrag = document.body.ondrag;
this.old_body_onselectstart = document.body.onselectstart;
document.body.ondrag = function () { return false; };
document.body.onselectstart = function () { return false; };
var body = Element.extend(document.body);
var dim = body.getDimensions();
/* Build a (nearly) invisible
that covers the entire document and that
will capture all events, even those that would go to iframes. */
this.div = body.build('div', { }, {
display: 'block',
position: 'absolute',
top: '0px', left: '0px',
width: dim.width + 'px', height: dim.height + 'px',
zIndex: 999999999,
cursor: 'default',
backgroundColor: '#FFFFFF',
opacity: 0.0001
});
},
end: function() {
/* Remove our invisible event-capturing
. */
this.div.remove();
/* Stop event observing. */
Event.stopObserving(document, 'mouseup', this.listener);
Event.stopObserving(document, 'mousemove', this.listener);
Event.stopObserving(document, 'mousedown', this.listener);
Event.stopObserving(document, 'mouseover', this.listener);
Event.stopObserving(document, 'mouseout', this.listener);
Event.stopObserving(document, 'keyup', this.listener);
Event.stopObserving(document, 'keydown', this.listener);
/* Reenable selection. */
document.body.ondrag = this.old_body_ondrag;
document.body.onselectstart = this.old_body_onselectstart;
delete this.old_body_ondrag;
delete this.old_body_onselectstart;
}
});
/*--------------------------------------------------------------------------------------------------
** The ProColor class, which can be used to instantiate ProColor color-picker objects.
*/
var ProColor = Class.create({
/*------------------------------------------------------------------------------------------
** Default object properties.
*/
/* The entire color palette, minus the easy grayscale colors, and packed down to
consume as little code space as possible. This is stored three hex digits per
color, in the same order as the visible palette. */
palette: [
"F00C30900633963C63",
"FC9FC0C93F93F96F60",
"993CC3FF0FF6FF9FFC",
"3306639966939C39C6",
"0F09C99F9CFCCF69F0",
"3C36960630933C6396",
"6999CC9FF0FF6FC3C9",
"36603303936F69F0CF",
"00666C00F66F99FCCF",
"C9F90F60C63F30930C",
"96CC6FC3F90C639306",
"C9C969C6CF9F909606",
"F0FF9CC69F39F69F06",
"F66F99FCC936C36C39"
],
/* These are the default options used by the optional automatic setup routine that
runs at page onload. */
options: {
imgPath:'img/procolor_win_',
showInField: true
},
/*------------------------------------------------------------------------------------------
** Creation and destruction.
*/
/* Create this color picker, with the given creation options. */
initialize: function(options) {
/* Determine if we're on an old browser that can't handle alpha PNGs. */
var browser_version = navigator.appVersion.split("MSIE");
var browser_version_number = parseFloat(browser_version[1]);
this.old_ie = (browser_version_number >= 5.5 && browser_version_number < 7
&& document.body.filters);
/* Set initial values. */
this.div = null;
this.color = null;
this.listeners = { };
this.dblclk = { time: 0 };
if (options.parent) this.parent = $(options.parent);
else this.parent = Element.extend(document.body);
if (options.input) this.input = $(options.input);
else this.input = null;
this.options = {
mode: 'static',
width: 360, height: 192,
offsetx: 13, offsety: 8,
input: null,
showInField: false,
parent: null,
closeButton: (options.mode == 'popup'),
imgPath: "",
color: (!this.input ? '#FFFFFF'
: this.input.tagName == 'INPUT' ? this.input.value
: this.input.innerHTML),
editbg: '#FFFFFF',
edittext: '#4C4C4C',
outputFormat: '#{RR}{GG}{BB}',
onOpening: null,
onOpened: null,
onClosing: null,
onClosed: null,
onCloseButton: null,
onChanging: null,
onChanged: null,
onCancelClick: null,
onAcceptClick: null
};
for (var i in options)
this.options[i] = options[i];
if (this.options.onOpening)
this.options.onOpening(this, 'opening');
this.createDiv();
if (this.options.mode == 'popup') {
this.positionPopup();
Event.observe(document, "mousedown",
this.closeClickHandler = this.handleCloseClick.bindAsEventListener(this));
Event.observe(document, "keypress",
this.keyPressHandler = this.handleKeyPress.bindAsEventListener(this));
}
if (this.options.onOpened)
this.options.onOpened(this, 'opened');
},
/* Reposition the popup properly relative to its parent element. */
positionPopup: function() {
var c_pos = this.div.cumulativeOffset(), c_left = c_pos[0], c_top = c_pos[1];
var c_dim = this.div.getDimensions(), c_height = c_dim.height, c_width = c_dim.width;
var w_height = document.viewport.getHeight(), w_width = document.viewport.getWidth();
var w_scroll = document.viewport.getScrollOffsets();
var e_dim = $(this.input).cumulativeOffset(), e_top = e_dim[1], e_left = e_dim[0];
var e_height = $(this.input).getDimensions().height, e_bottom = e_top + e_height;
if (e_left + c_width > w_width - 8)
e_left = w_width - 8 - c_width;
if (e_left < 8) e_left = 8;
var above = (e_bottom + c_height > w_scroll.top + w_height) && (e_bottom - c_height > w_scroll.top);
var left_px = e_left.toString() + "px";
var top_px = (above ? (e_top - c_height) : (e_top + e_height)).toString() + "px";
this.div.style.left = left_px; this.div.style.top = top_px;
this.div.setStyle({ visibility:"", display:"block" });
},
/* Create the main color picker
at the given relative coordinates with an image as its background,
applying the given CSS style options. */
loadBgImage: function(parent, filename, x, y, w, h, options) {
var style = {
display: 'block',
position: 'absolute',
width: w + 'px',
height: h + 'px',
left: x + this.options.offsetx + 'px',
top: y + this.options.offsety + 'px',
padding: '0',
backgroundImage: 'url(' + this.options.imgPath + filename + ')'
};
if (options)
for (var i in options)
style[i] = options[i];
return parent.build('div', { }, style);
},
/* Create an at the given absolute coordinates,
applying the given CSS style options. This is remarkably similar to
creating the