v3:Developer Documentation

Debugging

Since version 3, all instance-specific data are contained within ColorPicker object. Reference to this object is assigned to input data(). To retrieve this object for inspecting, use the following:

var instance = $(input).data('jQWCP.instance');

---

WCP

WCP is an alias to $.fn.WheelColorPicker.

---

Static Objects and Flags

WCP.BUG_RELATIVE_PAGE_ORIGIN

On mobile browser (i.e. chrome), the top left page is not at (0,0) and could changes at any time. If top left is not at (0,0), this flag will return TRUE. This flag is planned to be removed. Use WCP.ORIGIN instead.

WCP.ORIGIN

Coordinates of the top left of the page. Use this origin to calculate absolute positioning instead of relying on jQuery offset() or window.scrollX/Y values. To calculate:

var top = WCP.ORIGIN.top + elm.getBoundingClientRect().top;

---

Static Members

There is no actual static concept in JavaScript. In this case the term static refers to variables/functions defined directly on ColorPicker class, instead of prototype object.

WCP.ColorPicker.widget

Reference to global color picker widget (popup).

WCP.ColorPicker.overlay

Reference to overlay DOM element (overlay for global popup).

---

Static Methods

WCP.ColorPicker.init

Initialize color picker globally.

WCP.ColorPicker.createWidget

Create color picker widget DOM structure.

WCP.ColorPicker.getWheelDataUrl

Render a color wheel and return the image as data url.

---

ColorPicker Members

The following lists ColorPicker class members which is intended for internal use.

WCP.ColorPicker.options

Plugin options for the color picker, extended from WCP.defaults.

WCP.ColorPicker.input

Reference to input DOM element.

WCP.ColorPicker.widget

Reference to widget DOM element, either to global popup widget or private inline block. In case layout is "popup", this value would be the same as static WCP.ColorPicker.widget.

WCP.ColorPicker.color

Selected color object.

WCP.ColorPicker.lastValue

Stores last input value when input is just focused.

---

Event Handlers

This section lists event handlers used internally by the plugin. All these handlers are defined under WCP.Handler object. Function names are written as {element}{event}{specials}. For example, an event handler bound to input.onBlur event for popup layout would be named input_blur_popup.

WCP.Handler.html_mousemove

Move the active slider (when mouse click is down).

Note: this event handler is also applied to touchmove.

WCP.Handler.html_mouseup

Clear active control reference. Also do cleanups after widget.onMouseDown.popup.

Note: this event handler is also applied to touchend.

WCP.Handler.input_blur_popup

onBlur event handler for popup layout.

WCP.Handler.input_keyup

Update the color picker while user type in color value.

WCP.Handler.input_change

Reformat the input value based on selected color and configurations.

WCP.Handler.input_focus_popup

WCP.Handler.overlay_click

Hide color picker popup dialog if overlay is clicked. This has the same effect as blurring input element if hideKeyboard = false.

WCP.Handler.sliderCursor_mousedown

Begin clicking the slider down. This will allow user to move the slider although the mouse is outside the slider.

WCP.Handler.slider_mousedown

Basically the same as sliderCursor_mousedown.

WCP.Handler.wheelCursor_mousedown

Begin clicking the wheel down. This will allow user to move the crosshair although the mouse is outside the wheel.

WCP.Handler.wheel_mousedown

Basically the same as wheelCursor_mousedown.

WCP.Handler.widget_blur_block

Try to trigger onChange event if value has been changed.

WCP.Handler.widget_focus_block

Prepare runtime widget data.

WCP.Handler.widget_mousedown_popup

Prevent loss of focus of the input causing the dialog to be hidden because of input blur event.

WCP.Handler.window_resize

Adjust block widgets when window is resized.