|
|
@ -49,7 +49,7 @@
|
|
|
|
ColorPicker.prototype = {
|
|
|
|
ColorPicker.prototype = {
|
|
|
|
render: preRender,
|
|
|
|
render: preRender,
|
|
|
|
toggle: toggle
|
|
|
|
toggle: toggle
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function extractValue(elm) {
|
|
|
|
function extractValue(elm) {
|
|
|
|
return elm.value || elm.getAttribute('value') ||
|
|
|
|
return elm.value || elm.getAttribute('value') ||
|
|
|
@ -105,7 +105,7 @@
|
|
|
|
preRender(false);
|
|
|
|
preRender(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function build() {
|
|
|
|
function build() {
|
|
|
|
$('head').append('<style type="text/css">' +
|
|
|
|
$('head').append('<style type="text/css">' +
|
|
|
@ -142,14 +142,17 @@
|
|
|
|
e.returnValue = false;
|
|
|
|
e.returnValue = false;
|
|
|
|
|
|
|
|
|
|
|
|
_$trigger._offset = $(this).offset();
|
|
|
|
_$trigger._offset = $(this).offset();
|
|
|
|
|
|
|
|
|
|
|
|
(action = action === 'xy_slider' ? xy_slider :
|
|
|
|
(action = action === 'xy_slider' ? xy_slider :
|
|
|
|
action === 'z_slider' ? z_slider : alpha)(e);
|
|
|
|
action === 'z_slider' ? z_slider : alpha)(e);
|
|
|
|
|
|
|
|
preRender();
|
|
|
|
|
|
|
|
|
|
|
|
$document.on(_pointerup, pointerup).on(_pointermove, action);
|
|
|
|
$document.on(_pointerup, function(e) {
|
|
|
|
}
|
|
|
|
$document.off('.a');
|
|
|
|
|
|
|
|
}).on(_pointermove, function(e) {
|
|
|
|
function pointerup(e) {
|
|
|
|
action(e);
|
|
|
|
$document.off('.a');
|
|
|
|
preRender();
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function xy_slider(event) {
|
|
|
|
function xy_slider(event) {
|
|
|
@ -161,23 +164,19 @@
|
|
|
|
s: x / _$xy_slider._width * 100,
|
|
|
|
s: x / _$xy_slider._width * 100,
|
|
|
|
v: 100 - (y / _$xy_slider._height * 100)
|
|
|
|
v: 100 - (y / _$xy_slider._height * 100)
|
|
|
|
}, 'hsv');
|
|
|
|
}, 'hsv');
|
|
|
|
preRender();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function z_slider(event) {
|
|
|
|
function z_slider(event) {
|
|
|
|
var z = resolveEventType(event).pageY - _$trigger._offset.top,
|
|
|
|
var z = resolveEventType(event).pageY - _$trigger._offset.top;
|
|
|
|
hsv = _color.colors.hsv;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
|
|
|
|
_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
|
|
|
|
preRender();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function alpha(event) {
|
|
|
|
function alpha(event) {
|
|
|
|
var x = resolveEventType(event).pageX - _$trigger._offset.left,
|
|
|
|
var x = resolveEventType(event).pageX - _$trigger._offset.left,
|
|
|
|
alpha = x / _$alpha._width;
|
|
|
|
alpha = x / _$alpha._width;
|
|
|
|
|
|
|
|
|
|
|
|
_color.setColor({}, 'rgb', alpha > 1 ? 1 : alpha < 0 ? 0 : alpha);
|
|
|
|
_color.setColor({}, 'rgb', alpha);
|
|
|
|
preRender();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function preRender(toggled) {
|
|
|
|
function preRender(toggled) {
|
|
|
@ -295,9 +294,8 @@
|
|
|
|
on(_pointerdown, function(e) {
|
|
|
|
on(_pointerdown, function(e) {
|
|
|
|
var $target = $(e.target);
|
|
|
|
var $target = $(e.target);
|
|
|
|
|
|
|
|
|
|
|
|
if ($.inArray($target.closest(_selector)[0],
|
|
|
|
if ($.inArray($target.closest(_selector)[0], _instance) === -1 &&
|
|
|
|
_instance) === -1 &&
|
|
|
|
!$target.closest(_$UI).length) {
|
|
|
|
!$target.closest(_$UI).length) {
|
|
|
|
|
|
|
|
toggle();
|
|
|
|
toggle();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).
|
|
|
|
}).
|
|
|
@ -313,9 +311,9 @@
|
|
|
|
$elm = findElement($(this));
|
|
|
|
$elm = findElement($(this));
|
|
|
|
|
|
|
|
|
|
|
|
$elm.data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX').
|
|
|
|
$elm.data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX').
|
|
|
|
attr('readonly', _options.preventFocus);
|
|
|
|
attr('readonly', _options.preventFocus);
|
|
|
|
options.doRender && $elm.
|
|
|
|
options.doRender &&
|
|
|
|
css({'background-color': value,
|
|
|
|
$elm.css({'background-color': value,
|
|
|
|
'color': function() {
|
|
|
|
'color': function() {
|
|
|
|
return _color.setColor(value).
|
|
|
|
return _color.setColor(value).
|
|
|
|
rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
|
|
|
|
rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
|
|
|
@ -329,6 +327,6 @@
|
|
|
|
_colorPicker.toggle(false);
|
|
|
|
_colorPicker.toggle(false);
|
|
|
|
_instance = null;
|
|
|
|
_instance = null;
|
|
|
|
_selector = '';
|
|
|
|
_selector = '';
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
})(jQuery, Colors);
|
|
|
|
})(jQuery, Colors);
|