File alloy-ui/src/aui-color-picker/js/aui-hsv-palette.js
/**
* The Color Picker Component
*
* @module aui-color-picker
* @submodule aui-hsv-palette
*/
var AColor = A.Color,
AWidget = A.Widget,
Lang = A.Lang,
getClassName = A.getClassName,
MAXLEN_HEX = 6,
MAX_HUE = 360,
MAX_SATURATION = 100,
MAX_VALUE = 100,
MAX_OPACITY_PERC = 100,
MIN_HUE = 0,
MIN_SATURATION = 0,
MIN_VALUE = 0,
SELECTOR_FORM_GROUP_ERROR = '.form-group.has-error',
SELECTOR_FORM_GROUP = '.form-group',
SELECTOR_HSV_VALUE = '.hsv-value',
CSS_CONTAINER = getClassName('hsv-container'),
CSS_CONTAINER_CONTROLS = getClassName('hsv-container-controls'),
CSS_DEFAULT_SIZE = getClassName('hsv-default-size'),
CSS_VIEW_CONTAINER = getClassName('hsv-view-container'),
CSS_HS_IMAGE_CONTAINER = getClassName('hsv-image-container'),
CSS_HS_IMAGE_WRAPPER = getClassName('hsv-image-wrapper'),
CSS_HS_IMAGE_BACKDROP = getClassName('hsv-image-backdrop'),
CSS_HS_VIEW_BACKDROP = getClassName('hsv-view-backdrop'),
CSS_HS_CONTAINER = getClassName('hsv-hs-container'),
CSS_HS_THUMB = getClassName('hsv-hs-thumb'),
CSS_VALUE_CONTAINER = getClassName('hsv-value-container'),
CSS_VALUE_SLIDER_CONTAINER = getClassName('hsv-value-slider-container'),
CSS_VALUE_SLIDER_WRAPPER = getClassName('hsv-value-slider-wrapper'),
CSS_VALUE_CANVAS = getClassName('hsv-value-canvas'),
CSS_VALUE_THUMB = getClassName('hsv-value-thumb'),
CSS_VALUE_THUMB_IMAGE = getClassName('hsv-value-image'),
CSS_RESULT_VIEW = getClassName('hsv-result-view'),
CSS_CONTROLS_WRAPPER = getClassName('hsv-controls-wrapper'),
CSS_HEX_WRAPPER = getClassName('hsv-hex-wrapper'),
CSS_RESULT_WRAPPER = getClassName('hsv-result-wrapper'),
CSS_LABEL_VALUE_CONTAINER = getClassName('hsv-label-value-container'),
CSS_LABEL_VALUE_HSV_CONTAINER = getClassName('hsv-label-value-hsv-container'),
CSS_LABEL_VALUE_RGB_CONTAINER = getClassName('hsv-label-value-rgb-container'),
CSS_LABEL_VALUE_OUTPUT_CONTAINER = getClassName('hsv-label-value-hex-container'),
CSS_LABEL_VALUE = getClassName('hsv-label-value'),
CSS_LABEL_VALUE_HEX = getClassName('hsv-label-value-hex'),
CSS_LABEL_HIDDEN = getClassName('hsv-label-hidden'),
CSS_LABEL = getClassName('hsv-label'),
CSS_VALUE = getClassName('hsv-value'),
REGEX_HEX_COLOR = /^([a-f0-9]{6}|[a-f0-9]{3})$/i,
REGEX_RANGE_0_100 = /^([0-9]|[1-9][0-9]|100)$/,
REGEX_RANGE_0_255 = /^([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])$/,
REGEX_RANGE_0_360 = /^([0]{0,2}[1-9]|[0]?[1-9][0-9]|[12][0-9][0-9]|3[0-5][0-9]|360)$/,
/**
* A base class for `HSVPalette`.
*
* @class A.HSVPalette
* @extends Widget
* @uses A.WidgetCssClass, A.WidgetToggle
* @param {Object} config Object literal specifying widget configuration
* properties.
* @constructor
* @example
```
<div id="myHsvPalette" style="padding-left: 10px;"></div>
```
* @example
```
YUI().use(
'aui-color-picker-base',
function(Y) {
new Y.HSVPalette().render('#myHsvPalette');
}
);
```
*/
HSVPalette = A.Base.create('hsv-palette', A.Widget, [A.WidgetCssClass, A.WidgetToggle], {
TPL_CONTAINER: '<div class="' + CSS_CONTAINER + ' {subClass}"></div>',
TPL_VIEW_CONTAINER: '<div class="autofit-float autofit-row ' + CSS_VIEW_CONTAINER + '"></div>',
TPL_IMAGE_BACKDROP: '<div class="' + CSS_HS_IMAGE_BACKDROP + '"></div>',
TPL_IMAGE_WRAPPER: '<div class="autofit-col ' +
CSS_HS_IMAGE_WRAPPER + '"><div class="' +
CSS_HS_IMAGE_CONTAINER + '"></div></div>',
TPL_VIEW_BACKDROP: '<div class="' + CSS_HS_VIEW_BACKDROP + '"></div>',
TPL_HS_CONTAINER: '<div class="' + CSS_HS_CONTAINER + '"></div>',
TPL_HS_THUMB: '<div class="' + CSS_HS_THUMB + '"></div>',
TPL_VALUE_CONTAINER: '<div class="autofit-col autofit-col-expand ' + CSS_VALUE_CONTAINER + '"><div class="autofit-row"></div></div>',
TPL_VALUE_RIGHT_SIDE_CONTAINER: '<div class="autofit-col autofit-col-expand">' +
'<div class="autofit-row"><div class="autofit-col ' +
CSS_RESULT_WRAPPER + '"></div>' +
'<div class="autofit-col autofit-col-expand ' + CSS_HEX_WRAPPER +
'"></div></div><div class="autofit-row ' + CSS_CONTROLS_WRAPPER +
'"></div></div>',
TPL_VALUE_SLIDER_WRAPPER: '<div class="autofit-col ' +
CSS_VALUE_SLIDER_WRAPPER + '"><div class="' +
CSS_VALUE_SLIDER_CONTAINER + '"></div></div>',
TPL_VALUE_CANVAS: '<span class="' + CSS_VALUE_CANVAS + '"></span>',
TPL_VALUE_THUMB: '<span class="' + CSS_VALUE_THUMB + '"><span class="' +
CSS_VALUE_THUMB_IMAGE + '"></span></span>',
TPL_RESULT_VIEW: '<div class="' + CSS_RESULT_VIEW + '"></div>',
TPL_LABEL_VALUE_CONTAINER: '<div class="' + CSS_LABEL_VALUE_CONTAINER + ' {subClass}"></div>',
TPL_OUTPUT: '<div class="form-group ' + CSS_LABEL_VALUE + ' ' +
CSS_LABEL_VALUE_HEX + '">' + '<label>{label}</label>' +
'<input class="form-control ' + CSS_VALUE +
'" data-type="{type}" type="text" maxlength="{maxlength}" value="{value}">' +
'</div>',
TPL_LABEL_VALUE: '<div class="form-group input-group">' +
'<label class="add-on input-group-item input-group-item-shrink">{label}</label>' +
'<div class="input-group-item input-group-item-shrink"><input class="form-control ' + CSS_VALUE +
'" data-type="{type}" type="number" max="{max}" maxlength="{maxlength}" min="{min}" value="{value}"></div>' +
'<label class="input-group-item input-group-item-shrink ' + CSS_LABEL + '">{labelUnit}</label>' + '</div>',
_outputType: 'hex',
/**
* Construction logic executed during `HSVPalette` instantiation.
* Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function() {
var instance = this;
instance.on('selectedChange', instance._onSelectedChange, instance);
},
/**
* Bind the events on the `HSVPalette` UI. Lifecycle.
*
* @method bindUI
* @protected
*/
bindUI: function() {
var instance = this;
instance._hsContainer.after('mousedown', instance._afterPaletteMousedown, instance);
instance._paletteContainer.delegate('input', instance._afterInputChange, SELECTOR_HSV_VALUE, instance);
instance._bindDD();
},
/**
* Destructor lifecycle implementation for the `HSVPalette` class.
*
* @method destructor
* @protected
*/
destructor: function() {
var instance = this;
instance._dd.destroy();
},
/**
* Render the `HSVPalette` component instance. Lifecycle.
*
* @method renderUI
* @protected
*/
renderUI: function() {
var instance = this;
instance._renderContainer();
instance.get('contentBox').appendChild(instance._paletteContainer);
instance._colorThumbGutter = Math.floor(instance._colorThumb.get('offsetHeight') / 2);
instance._hsContainerWidth = instance._hsContainer.get('offsetWidth');
instance._hsContainerHeight = instance._hsContainer.get('offsetHeight');
this._createSliders();
},
/**
* Updates selected color after input `valueChange`.
*
* @method _afterInputChange
* @param {EventFacade} event
* @protected
*/
_afterInputChange: function(event) {
var instance = this,
fieldNode,
type,
value;
fieldNode = event.currentTarget;
if (instance._validateFieldValue(fieldNode)) {
value = fieldNode.get('value');
type = fieldNode.getAttribute('data-type');
fieldNode.ancestor(SELECTOR_FORM_GROUP).removeClass('has-error');
}
else {
fieldNode.ancestor(SELECTOR_FORM_GROUP).addClass('has-error');
}
if (!instance._paletteContainer.one(SELECTOR_FORM_GROUP_ERROR)) {
instance._updateViewFromInput(fieldNode);
}
},
/**
* Updates color based on the X and Y coordinates.
*
* @method _afterHSThumbChange
* @param {Number} x
* @param {Number} y
* @protected
*/
_afterHSThumbChange: function(x, y) {
var instance = this,
hexColor,
hexValue,
hue,
rgbColor,
rgbColorArray,
saturation,
value;
hue = instance._calculateHue(x);
saturation = instance._calculateSaturation(y);
value = MAX_VALUE - instance._valueSlider.get('value');
rgbColor = instance._calculateRGBColor(hue, saturation, value);
rgbColorArray = AColor.toArray(rgbColor);
hexColor = AColor.toHex(rgbColor);
hexValue = instance._getHexValue(hexColor, rgbColorArray);
instance._resultView.setStyle('backgroundColor', hexColor);
instance._setValueSliderContainerStyle(hue, saturation);
instance._setFieldValue(instance._outputContainer, hexValue);
instance._setFieldValue(instance._hContainer, Math.round(hue));
instance._setFieldValue(instance._sContainer, Math.round(saturation));
instance._setFieldValue(instance._rContainer, rgbColorArray[0]);
instance._setFieldValue(instance._gContainer, rgbColorArray[1]);
instance._setFieldValue(instance._bContainer, rgbColorArray[2]);
instance.fire(
'hsThumbChange', {
x: x,
y: y,
hexColor: hexColor
}
);
instance.set('selected', hexValue, {
src: AWidget.UI_SRC
});
},
/**
* Gets X and Y coordinates from mousedown on HS container and updates
* color selection based on position.
*
* @method _afterPaletteMousedown
* @param {EventFacade} event
* @protected
*/
_afterPaletteMousedown: function(event) {
var instance = this,
hsContainerXY,
thumbXY,
x,
y;
instance._updatePaletteThumbPosition([event.pageX, event.pageY]);
hsContainerXY = instance._hsContainer.getXY();
thumbXY = instance._colorThumb.getXY();
x = (thumbXY[0] - hsContainerXY[0] + instance._colorThumbGutter);
y = (thumbXY[1] - hsContainerXY[1] + instance._colorThumbGutter);
instance._afterHSThumbChange(x, y);
event.target = instance._colorThumb;
instance._dd._handleMouseDownEvent(event);
},
/**
* Sets the X and Y coordinates of the HS container on drag start.
*
* @method _afterPaletteDragStart
* @protected
*/
_afterPaletteDragStart: function() {
var instance = this;
instance._setHSContainerXY();
},
/**
* Sets the X and Y coordinates of the HS container after drag.
*
* @method _afterPaletteThumbDrag
* @param {EventFacade} event
* @protected
*/
_afterPaletteThumbDrag: function(event) {
var instance = this,
x,
y;
x = (event.pageX - instance._hsContainerXY[0] + instance._colorThumbGutter);
y = (event.pageY - instance._hsContainerXY[1] + instance._colorThumbGutter);
instance._afterHSThumbChange(x, y);
},
/**
* Binds drag events to thumb selector.
*
* @method _bindDD
* @protected
*/
_bindDD: function() {
var instance = this,
dd;
dd = new A.DD.Drag({
node: instance._colorThumb
}).plug(A.Plugin.DDConstrained, {
constrain2node: instance._hsContainer,
gutter: '-' + instance._colorThumbGutter
});
dd.after('start', instance._afterPaletteDragStart, instance);
dd.after('drag', instance._afterPaletteThumbDrag, instance);
instance._dd = dd;
},
/**
* Calculates and returns RGB color value.
*
* @method _calculateRGBColor
* @param {Number} hue
* @param {Number} saturation
* @param {Number} value
* @return {String} RGB value
* @protected
*/
_calculateRGBColor: function(hue, saturation, value) {
var instance = this;
return instance._calculateRGB(hue, saturation, value);
},
/**
* Calculates and returns hue value based on X position.
*
* @method _calculateHue
* @param {Number} x
* @return {Number} hue
* @protected
*/
_calculateHue: function(x) {
var instance = this,
hue;
if (x <= MIN_HUE) {
hue = MIN_HUE;
}
else if (x >= (instance._hsContainerWidth - 1)) {
hue = MAX_HUE;
}
else {
hue = x / instance._hsContainerWidth * MAX_HUE;
}
return Math.round(hue);
},
/**
* Calculates RGB color value from HSV color value.
*
* @method _calculateRGB
* @param {Number} hue
* @param {Number} saturation
* @param {Number} value
* @return {String} RGB value
* @protected
*/
_calculateRGB: function(hue, saturation, value) {
var rgbColor = 'rgb(255, 0, 0)',
hsvColor;
if (Lang.toInt(hue) !== MAX_HUE || Lang.toInt(saturation) !== MAX_SATURATION || Lang.toInt(value) !== MAX_VALUE) {
hsvColor = 'hsva(' + (hue === MAX_HUE ? MAX_HUE - 1 : hue) + ', ' + saturation + '%, ' + value +
'%' + ')';
rgbColor = AColor.toRGB(hsvColor);
}
return rgbColor;
},
/**
* Calculates and returns RGB value from array of values.
*
* @method _calculateRGBArray
* @param {Number} r
* @param {Number} g
* @param {Number} b
* @return {String} RGB value
* @protected
*/
_calculateRGBArray: function(r, g, b) {
return AColor.fromArray([r, g, b], 'RGB');
},
/**
* Calculates and returns saturation value based on Y position.
*
* @method _calculateSaturation
* @param {Number} y
* @return {Number} saturation
* @protected
*/
_calculateSaturation: function(y) {
var instance = this,
saturation;
if (y <= MIN_SATURATION) {
saturation = MAX_SATURATION;
}
else if (y >= instance._hsContainerHeight) {
saturation = MIN_SATURATION;
}
else {
saturation = MAX_SATURATION - (y / instance._hsContainerHeight * MAX_SATURATION);
}
return Math.round(saturation);
},
/**
* Calculates X value based on hue input value.
*
* @method _calculateX
* @param {Number} hue
* @return {Number} x
* @protected
*/
_calculateX: function(hue) {
var instance = this,
x = this._colorThumbGutter * -1;
if (hue <= MIN_HUE) {
x += MIN_HUE;
}
else if (hue >= MAX_HUE) {
x += instance._hsContainerWidth;
}
else {
x += hue / MAX_HUE * instance._hsContainerWidth;
}
return x;
},
/**
* Calculates Y value based on saturation input value.
*
* @method _calculateY
* @param {Number} saturation
* @return {Number} y
* @protected
*/
_calculateY: function(saturation) {
var instance = this,
y = this._colorThumbGutter * -1;
if (saturation <= MIN_SATURATION) {
y += instance._hsContainerHeight;
}
else if (saturation >= MAX_SATURATION) {
y += MIN_SATURATION;
}
else {
y += instance._hsContainerHeight / MAX_SATURATION * (MAX_SATURATION - saturation);
}
return y;
},
/**
* Creates sliders.
*
* @method _createSliders
* @protected
*/
_createSliders: function() {
var instance = this;
instance._createValueSlider();
},
/**
* Renders and binds events to the sliders.
*
* @method _createValueSlider
* @protected
*/
_createValueSlider: function() {
var instance = this,
contentBox,
slider,
valueThumbHeight;
contentBox = instance.get('contentBox');
slider = new A.Slider({
axis: 'y',
min: MIN_VALUE,
max: MAX_VALUE
});
slider.RAIL_TEMPLATE = instance.TPL_VALUE_CANVAS;
slider.THUMB_TEMPLATE = instance.TPL_VALUE_THUMB;
slider.render(instance._valueSliderContainer);
valueThumbHeight = contentBox.one('.' + CSS_VALUE_THUMB_IMAGE).get('offsetHeight');
slider.set(
'length',
instance._valueSliderContainer.get('offsetHeight') + (valueThumbHeight / 2)
);
slider.on(['slideStart', 'railMouseDown'], instance._setHSContainerXY, instance);
slider.on('valueChange', instance._onValueChange, instance);
instance._valueSlider = slider;
},
/**
* Returns container class name.
*
* @method _getContainerClassName
* @return {String} class name
* @protected
*/
_getContainerClassName: function() {
return CSS_CONTAINER_CONTROLS;
},
/**
* Returns field value.
*
* @method _getFieldValue
* @param {Node} fieldNode
* @return {Number} field value
* @protected
*/
_getFieldValue: function(fieldNode) {
return fieldNode.one('.' + CSS_VALUE).get('value');
},
/**
* Returns hexadecimal color value.
*
* @method _getHexValue
* @param {String} hexColor
* @param {Array} rgbColorArray
* @return {String} hex value
* @protected
*/
_getHexValue: function(hexColor) {
return hexColor.substring(1);
},
/**
* Returns hex container configuration.
*
* @method _getHexContainerConfig
* @return {Object} hex container config object
* @protected
*/
_getHexContainerConfig: function() {
var instance = this;
return {
label: instance.get('strings').hex,
maxlength: MAXLEN_HEX,
type: 'hex',
unit: '',
value: 'ff0000'
};
},
/**
* Returns HSV color values.
*
* @method _getHSVArray
* @param {Number} hsv
* @return {Array} hsv color array
* @protected
*/
_getHSVArray: function(hsv) {
return AColor.toArray(hsv, 'HSV');
},
/**
* Returns X and Y values from hue and saturation input values.
*
* @method _getXYFromHueSaturation
* @param {Number} hue
* @param {Number} saturation
* @return {Array} x and y positions
* @protected
*/
_getXYFromHueSaturation: function(hue, saturation) {
var instance = this,
x,
y;
x = instance._calculateX(hue);
y = instance._calculateY(saturation);
return [x, y];
},
/**
* Formats hexadecimal color values.
*
* @method _normalizeHexValue
* @param {String} hex
* @return {String} formatted hex color value
* @protected
*/
_normalizeHexValue: function(hex) {
var padding = '';
if (hex.indexOf('#') === 0) {
hex = hex.substring(1);
}
if (hex.length === 3) {
padding = 'fff';
}
return (hex += padding).toUpperCase();
},
/**
* Updates view on `selectedChange`.
*
* @method _onSelectedChange
* @param {EventFacade} event
* @protected
*/
_onSelectedChange: function(event) {
var instance = this;
if (event.src !== AWidget.UI_SRC) {
instance._updateViewByHEX(event.newVal);
}
},
/**
* Updates color on input `valueChange`.
*
* @method _onValueChange
* @param {EventFacade} event
* @protected
*/
_onValueChange: function(event) {
var instance = this,
hexColor,
hexValue,
hue,
rgbColor,
rgbColorArray,
saturation,
thumbXY,
val,
x,
y;
if (event.src !== AWidget.UI_SRC) {
val = event.newVal;
instance._hsContainer.setStyle('opacity', 1 - (val / MAX_VALUE));
thumbXY = instance._colorThumb.getXY();
x = (thumbXY[0] - instance._hsContainerXY[0] + instance._colorThumbGutter);
y = (thumbXY[1] - instance._hsContainerXY[1] + instance._colorThumbGutter);
hue = instance._calculateHue(x);
saturation = instance._calculateSaturation(y);
val = MAX_VALUE - val;
rgbColor = instance._calculateRGBColor(hue, saturation, val);
rgbColorArray = AColor.toArray(rgbColor);
hexColor = AColor.toHex(rgbColor);
hexValue = instance._getHexValue(hexColor, rgbColorArray);
instance._resultView.setStyle('backgroundColor', hexColor);
instance._setFieldValue(instance._outputContainer, hexValue);
instance._setFieldValue(instance._vContainer, val);
instance._setFieldValue(instance._rContainer, rgbColorArray[0]);
instance._setFieldValue(instance._gContainer, rgbColorArray[1]);
instance._setFieldValue(instance._bContainer, rgbColorArray[2]);
instance.fire(
'valueChange', {
value: val,
hexColor: hexColor
}
);
instance.set('selected', hexValue, {
src: AWidget.UI_SRC
});
}
},
/**
* Renders container.
*
* @method _renderContainer
* @protected
*/
_renderContainer: function() {
var instance = this,
className;
className = instance._getContainerClassName();
instance._paletteContainer = A.Node.create(
Lang.sub(
instance.TPL_CONTAINER, {
subClass: className
}
)
);
instance._renderViewContainer();
},
/**
* Renders view container.
*
* @method _renderViewContainer
* @protected
*/
_renderViewContainer: function() {
var instance = this;
instance._viewContainer = A.Node.create(instance.TPL_VIEW_CONTAINER);
instance._renderViewContainerContent();
instance._paletteContainer.appendChild(instance._viewContainer);
},
/**
* Renders contents of container.
*
* @method _renderViewContainerContent
* @protected
*/
_renderViewContainerContent: function() {
var instance = this;
instance._renderImageContainer();
instance._renderValueContainer();
},
/**
* Renders input field.
*
* @method _renderField
* @param {Node} container
* @param {Object} data
* @return {Node} field node
* @protected
*/
_renderField: function(container, data) {
var instance = this;
return container.appendChild(
Lang.sub(
instance.TPL_LABEL_VALUE, {
classLabel: data.classLabel || '',
label: data.label,
labelUnit: data.unit,
max: data.max,
maxlength: data.maxlength,
min: data.min,
type: data.type,
value: data.value
}
)
);
},
/**
* Renders hexadecimal output field.
*
* @method _renderOutputField
* @param {Node} container
* @param {Object} data
* @return {Node} field node
* @protected
*/
_renderOutputField: function(container, data) {
var instance = this;
return container.appendChild(
Lang.sub(
instance.TPL_OUTPUT, {
label: data.label,
maxlength: data.maxlength,
type: data.type,
value: data.value
}
)
);
},
/**
* Renders hexNode.
*
* @method _renderHexNode
* @param {Node} container Container node where the contents
* should be rendered.
* @protected
*/
_renderHexNode: function(container) {
var instance = this,
labelValueHexContainer,
hexContainerConfig;
labelValueHexContainer = A.Node.create(
Lang.sub(
instance.TPL_LABEL_VALUE_CONTAINER, {
subClass: CSS_LABEL_VALUE_OUTPUT_CONTAINER
}
)
);
hexContainerConfig = instance._getHexContainerConfig();
instance._outputContainer = instance._renderOutputField(labelValueHexContainer, hexContainerConfig);
container.appendChild(labelValueHexContainer);
instance._labelValueRGBContainer = labelValueHexContainer;
},
/**
* Renders input fields.
*
* @method _renderFields
* @param {Node} container Container node where the contents
* should be rendered.
* @protected
*/
_renderFields: function(container) {
var instance = this,
labelValueHSVContainer,
labelValueRGBContainer;
labelValueHSVContainer = A.Node.create(
Lang.sub(
instance.TPL_LABEL_VALUE_CONTAINER, {
subClass: CSS_LABEL_VALUE_HSV_CONTAINER +
' autofit-col'
}
)
);
labelValueRGBContainer = A.Node.create(
Lang.sub(
instance.TPL_LABEL_VALUE_CONTAINER, {
subClass: CSS_LABEL_VALUE_RGB_CONTAINER +
' autofit-col'
}
)
);
instance._hContainer = instance._renderField(
labelValueHSVContainer, {
label: instance.get('strings').h,
max: 360,
maxlength: 3,
min: 0,
type: 'hue',
unit: '°',
value: MIN_HUE
}
);
instance._sContainer = instance._renderField(
labelValueHSVContainer, {
label: instance.get('strings').s,
max: MAX_SATURATION,
maxlength: 3,
min: 0,
type: 'saturation',
unit: '%',
value: MAX_SATURATION
}
);
instance._vContainer = instance._renderField(
labelValueHSVContainer, {
label: instance.get('strings').v,
max: MAX_VALUE,
maxlength: 3,
min: 0,
type: 'value',
unit: '%',
value: MAX_VALUE
}
);
instance._rContainer = instance._renderField(
labelValueRGBContainer, {
classLabel: CSS_LABEL_HIDDEN,
label: instance.get('strings').r,
max: 255,
maxlength: 3,
min: 0,
type: 'r',
unit: '',
value: 255
}
);
instance._gContainer = instance._renderField(
labelValueRGBContainer, {
classLabel: CSS_LABEL_HIDDEN,
label: instance.get('strings').g,
max: 255,
maxlength: 3,
min: 0,
type: 'g',
unit: '',
value: 0
}
);
instance._bContainer = instance._renderField(
labelValueRGBContainer, {
classLabel: CSS_LABEL_HIDDEN,
label: instance.get('strings').b,
max: 255,
maxlength: 3,
min: 0,
type: 'b',
unit: '',
value: 0
}
);
container.appendChild(labelValueHSVContainer);
container.appendChild(labelValueRGBContainer);
instance._labelValueHSVContainer = labelValueHSVContainer;
instance._labelValueRGBContainer = labelValueRGBContainer;
},
/**
* Renders color canvas backdrop.
*
* @method _renderImageBackdrop
* @protected
*/
_renderImageBackdrop: function() {
var instance = this;
instance._hsImageBackdrop = instance._hsImageContainer.appendChild(
instance.TPL_IMAGE_BACKDROP
);
},
/**
* Renders the image container and its contents.
*
* @method _renderImageContainer
* @protected
*/
_renderImageContainer: function() {
var imageContainer;
imageContainer = this._viewContainer.appendChild(
this.TPL_IMAGE_WRAPPER
);
this._hsImageContainer = imageContainer.one(
'.' + CSS_HS_IMAGE_CONTAINER
);
this._renderImageBackdrop();
this._renderHSContainer();
this._renderThumb();
},
/**
* Renders color canvas.
*
* @method _renderHSContainer
* @protected
*/
_renderHSContainer: function() {
var instance = this;
instance._hsContainer = instance._hsImageContainer.appendChild(
instance.TPL_HS_CONTAINER
);
},
/**
* Renders the value container.
*
* @method _renderValueContainer
* @protected
*/
_renderValueContainer: function() {
this._valueContainer = this._viewContainer.appendChild(
this.TPL_VALUE_CONTAINER
);
this._valueContainer = this._valueContainer.one('.autofit-row');
this._renderValueSliderContainer();
this._renderValueRightSideContainer();
},
/**
* Renders the right side of the value.
*
* @method _renderValueRightSideContainer
* @protected
*/
_renderValueRightSideContainer: function() {
var controlsWrapper,
hexWrapper,
resultWrapper,
rightSideContainer;
rightSideContainer = this._valueContainer.appendChild(
this.TPL_VALUE_RIGHT_SIDE_CONTAINER
);
resultWrapper = rightSideContainer.one('.' + CSS_RESULT_WRAPPER);
this._renderResultBackdrop(resultWrapper);
this._renderResultView(resultWrapper);
hexWrapper = rightSideContainer.one('.' + CSS_HEX_WRAPPER);
this._renderHexNode(hexWrapper);
controlsWrapper = rightSideContainer.one('.' + CSS_CONTROLS_WRAPPER);
this._renderFields(controlsWrapper);
if (!this.get('controls')) {
controlsWrapper.hide();
}
},
/**
* Renders value slider container.
*
* @method _renderValueSliderContainer
* @protected
*/
_renderValueSliderContainer: function() {
this._valueSliderWrapper = this._valueContainer.appendChild(
this.TPL_VALUE_SLIDER_WRAPPER
);
this._valueSliderContainer = this._valueSliderWrapper.one(
'.' + CSS_VALUE_SLIDER_CONTAINER
);
},
/**
* Renders results backdrop.
*
* @method _renderResultBackdrop
* @param {Node} container Container node where the contents
* should be rendered.
* @protected
*/
_renderResultBackdrop: function(container) {
var instance = this;
instance._resultViewBackdrop = container.appendChild(
instance.TPL_VIEW_BACKDROP
);
},
/**
* Render results view.
*
* @method _renderResultView
* @param {Node} container Container node where the contents
* should be rendered.
* @protected
*/
_renderResultView: function(container) {
var instance = this;
instance._resultView = container.appendChild(
instance.TPL_RESULT_VIEW
);
},
/**
* Renders thumb selector.
*
* @method _renderThumb
* @protected
*/
_renderThumb: function() {
var instance = this;
instance._colorThumb = instance._hsContainer.appendChild(
instance.TPL_HS_THUMB
);
},
/**
* Sets X and Y coordinates of HS container.
*
* @method _setHSContainerXY
* @protected
*/
_setHSContainerXY: function() {
var instance = this;
instance._hsContainerXY = instance._hsContainer.getXY();
},
/**
* Sets value of field node.
*
* @method _setFieldValue
* @param {Node} fieldNode
* @param {Number} value
* @protected
*/
_setFieldValue: function(fieldNode, value) {
fieldNode.one('.' + CSS_VALUE).set('value', value);
},
/**
* Sets background style of value slider container.
*
* @method _setValueSliderContainerStyle
* @param {Number} hue
* @param {Number} saturation
* @protected
*/
_setValueSliderContainerStyle: function(hue, saturation) {
var instance = this,
rgbColor;
rgbColor = instance._calculateRGBColor(hue, saturation, 100);
instance._valueSliderContainer.setStyle('backgroundColor', rgbColor);
},
/**
* Set the `width` attribute on the UI. This is called
* automatically whenever the `width` attribute changes.
*
* @method _uiSetWidth
* @protected
*/
_uiSetWidth: function(val) {
val = Lang.isNumber(val) ? val + this.DEF_UNIT : val;
if (val) {
this._paletteContainer.setStyle('width', val);
this._paletteContainer.removeClass(CSS_DEFAULT_SIZE);
}
else {
this._paletteContainer.setStyle('width', '');
this._paletteContainer.addClass(CSS_DEFAULT_SIZE);
}
this._updateViewByHEX(this.get('selected'));
},
/**
* Updates X and Y position of thumb selector.
*
* @method _updatePaletteThumbPosition
* @param {Array} xy
* @protected
*/
_updatePaletteThumbPosition: function(xy) {
var instance = this;
instance._colorThumb.setXY([xy[0] - instance._colorThumbGutter, xy[1] - instance._colorThumbGutter]);
},
/**
* Updates results view from input values.
*
* @method _updateViewFromInput
* @param {Node} fieldNode
* @protected
*/
_updateViewFromInput: function(fieldNode) {
var instance = this,
type;
type = fieldNode.getAttribute('data-type');
if (type === 'hue' || type === 'saturation' || type === 'value' || type === 'alpha') {
instance._updateViewByHSVA(fieldNode);
}
else if (type === 'r' || type === 'g' || type === 'b') {
instance._updateViewByRGB(fieldNode);
}
else if (type === 'hex') {
instance._updateViewByHEXNode(fieldNode);
}
},
/**
* Updates results view from HSVA input values.
*
* @method _updateViewByHSVA
* @param {Node} fieldNode
* @protected
*/
_updateViewByHSVA: function(fieldNode) {
var instance = this,
hexColor,
hexValue,
hue,
position,
rgbColor,
rgbColorArray,
saturation,
value;
hue = instance._getFieldValue(instance._hContainer);
saturation = instance._getFieldValue(instance._sContainer);
value = instance._getFieldValue(instance._vContainer);
position = instance._getXYFromHueSaturation(hue, saturation);
instance._colorThumb.setStyles({
left: position[0],
top: position[1]
});
instance._valueSlider.set(
'value',
MAX_VALUE - value, {
src: AWidget.UI_SRC
}
);
rgbColor = instance._calculateRGBColor(hue, saturation, value);
rgbColorArray = AColor.toArray(rgbColor);
hexColor = AColor.toHex(rgbColor);
hexValue = instance._getHexValue(hexColor, rgbColorArray);
instance._resultView.setStyle('backgroundColor', hexColor);
instance._setValueSliderContainerStyle(hue, saturation);
instance._hsContainer.setStyle('opacity', 1 - ((MAX_OPACITY_PERC - value) / MAX_OPACITY_PERC));
instance._setFieldValue(instance._outputContainer, hexValue);
instance._setFieldValue(instance._rContainer, rgbColorArray[0]);
instance._setFieldValue(instance._gContainer, rgbColorArray[1]);
instance._setFieldValue(instance._bContainer, rgbColorArray[2]);
instance.fire(
'hsvaInputChange', {
hexColor: hexColor,
node: fieldNode
}
);
instance.set('selected', hexValue, {
src: AWidget.UI_SRC
});
},
/**
* Updates results view from RGB input values.
*
* @method _updateViewByRGB
* @param {Node} fieldNode
* @protected
*/
_updateViewByRGB: function(fieldNode) {
var instance = this,
b,
g,
hexColor,
hexValue,
hsv,
hsvArray,
hue,
position,
r,
rgbArray,
rgbColor,
rgbColorArray,
saturation,
value;
r = instance._getFieldValue(instance._rContainer);
g = instance._getFieldValue(instance._gContainer);
b = instance._getFieldValue(instance._bContainer);
rgbArray = instance._calculateRGBArray(r, g, b);
hsv = AColor.toHSV(rgbArray);
hsvArray = instance._getHSVArray(hsv);
hue = hsvArray[0];
saturation = hsvArray[1];
value = hsvArray[2];
rgbColor = instance._calculateRGBColor(hue, saturation, value);
rgbColorArray = AColor.toArray(rgbColor);
hexColor = AColor.toHex(rgbColor);
hexValue = instance._getHexValue(hexColor, rgbColorArray);
position = instance._getXYFromHueSaturation(hue, saturation);
instance._colorThumb.setStyles({
left: position[0],
top: position[1]
});
instance._valueSlider.set(
'value',
MAX_VALUE - value, {
src: AWidget.UI_SRC
}
);
instance._resultView.setStyle('backgroundColor', hexColor);
instance._setValueSliderContainerStyle(hue, saturation);
instance._hsContainer.setStyle('opacity', 1 - ((MAX_OPACITY_PERC - value) / MAX_OPACITY_PERC));
instance._setFieldValue(instance._outputContainer, hexValue);
instance._setFieldValue(instance._hContainer, hue);
instance._setFieldValue(instance._sContainer, saturation);
instance._setFieldValue(instance._vContainer, value);
instance.fire(
'rgbInputChange', {
hexColor: hexColor,
node: fieldNode
}
);
instance.set('selected', hexValue, {
src: AWidget.UI_SRC
});
},
/**
* Updates results view from hexNode values.
*
* @method _updateViewByHEXNode
* @param {Node} fieldNode
* @protected
*/
_updateViewByHEXNode: function(fieldNode) {
var instance = this,
hex;
hex = fieldNode.get('value');
instance._updateViewByHEX(hex);
instance.fire(
'hexInputChange', {
hexColor: hex,
fieldNode: fieldNode
}
);
instance.set('selected', hex, {
src: AWidget.UI_SRC
});
},
/**
* Update the HSV Palette view according to the provided HEX value.
*
* The function normalizes and extracts the hue, saturation, value, also
* r, g and b and updates their representatives - the sliders, the
* image, etc. Also, it updates the text fields (if the "controls"
* attribute is set to true) with the extracted values.
*
* @method _updateViewByHEX
* @param {String} hexValue
* @protected
*/
_updateViewByHEX: function(hexValue) {
var instance = this,
b,
currentHexValue,
g,
hex,
hexColor,
hsvColor,
hsvColorArray,
hue,
position,
r,
rgb,
rgbColorArray,
saturation,
value;
hex = instance._normalizeHexValue(hexValue);
hex = hex.substr(0, 6);
hsvColor = AColor.toHSV(hex);
hsvColorArray = AColor.toArray(hsvColor, 'HSV');
hue = hsvColorArray[0];
saturation = hsvColorArray[1];
value = hsvColorArray[2];
rgb = AColor.toRGBA(hsvColor);
rgbColorArray = AColor.toArray(rgb);
r = rgbColorArray[0];
g = rgbColorArray[1];
b = rgbColorArray[2];
position = instance._getXYFromHueSaturation(hsvColorArray[0], hsvColorArray[1]);
instance._colorThumb.setStyles({
left: position[0],
top: position[1]
});
instance._valueSlider.set(
'value',
MAX_VALUE - value, {
src: AWidget.UI_SRC
}
);
hexColor = '#' + hex;
instance._resultView.setStyle('backgroundColor', hexColor);
instance._setValueSliderContainerStyle(hue, saturation);
instance._hsContainer.setStyle('opacity', 1 - ((MAX_OPACITY_PERC - value) / MAX_OPACITY_PERC));
currentHexValue = instance._getFieldValue(instance._outputContainer);
if (hexValue.toLowerCase() !== currentHexValue.toLowerCase()) {
instance._setFieldValue(instance._outputContainer, hexValue);
}
instance._setFieldValue(instance._hContainer, hue);
instance._setFieldValue(instance._sContainer, saturation);
instance._setFieldValue(instance._vContainer, value);
instance._setFieldValue(instance._rContainer, r);
instance._setFieldValue(instance._gContainer, g);
instance._setFieldValue(instance._bContainer, b);
},
/**
* Validates field value.
*
* @method _validateFieldValue
* @param {Node} fieldNode
* @param {Boolean} field validation
* @return {Boolean} The result of the validation
* @protected
*/
_validateFieldValue: function(fieldNode) {
var instance = this,
fieldValidator,
result,
validator,
value;
fieldValidator = instance.get('fieldValidator');
validator = fieldValidator[fieldNode.getAttribute('data-type')];
result = false;
value = fieldNode.get('value');
if (validator && validator.test(value)) {
result = true;
}
return result;
}
}, {
/**
* Static property provides a string to identify the CSS prefix.
*
* @property CSS_PREFIX
* @type {String}
* @static
*/
CSS_PREFIX: getClassName('hsv-palette'),
/**
* Static property used to define the default attribute
* configuration for the `HSVPalette`.
*
* @property ATTRS
* @type {Object}
* @static
*/
ATTRS: {
/**
* Determines if HSVA and RGB input `controls` are visible.
*
* @attribute controls
* @default true
* @type {Boolean}
* @writeOnce
*/
controls: {
validator: Lang.isBoolean,
value: true,
writeOnce: true
},
/**
* Collection of regular expressions used to validate field values.
*
* @attribute fieldValidator
* @type {Object}
*/
fieldValidator: {
validator: Lang.isObject,
value: {
alpha: REGEX_RANGE_0_255,
b: REGEX_RANGE_0_255,
g: REGEX_RANGE_0_255,
hex: REGEX_HEX_COLOR,
hue: REGEX_RANGE_0_360,
r: REGEX_RANGE_0_255,
saturation: REGEX_RANGE_0_100,
value: REGEX_RANGE_0_100
}
},
/**
* Currently `selected` color value.
*
* @attribute selected
* @default ''
* @type {String}
*/
selected: {
validator: Lang.isString,
value: 'ff0000ff'
},
/**
* Collection of strings used to label elements of the UI.
*
* @attribute strings
* @type {Object}
*/
strings: {
value: {
a: 'A',
b: 'B',
g: 'G',
h: 'H',
r: 'R',
hex: 'Hex',
s: 'S',
v: 'V'
}
}
},
/**
* Static property provides a string to identify the class.
*
* @property NAME
* @type {String}
* @static
*/
NAME: 'hsv-palette',
/**
* Static property provides a string to identify the namespace.
*
* @property NS
* @type {String}
* @static
*/
NS: 'hsv-palette'
});
A.HSVPalette = HSVPalette;