mirror of
https://github.com/PitPik/tinyColorPicker
synced 2025-08-11 19:22:45 -06:00
AMD / CommonJS / bower
This commit is contained in:
peterd
parent
046c0c5619
commit
10ee8931e0
17
README.md
17
README.md
@ -24,21 +24,14 @@ Supported color spaces are: rgb, hsv(b), hsl, HEX
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## AMD wrapper
|
## AMD / CommonJS wrapper
|
||||||
tinyColorPicker now supports AMD (thanks to [Munawwar](https://github.com/Munawwar)). Both files colors.js and jqColorPicker.js return their constructors so that it is easy to wrap them inside colors-amd-wrapper.js and jqColorPicker-amd-wrapper.js. So, if you want to use require.js or other module loaders just follow the instructions inside those 2 files. (Maybe someone of you wants to write a grunt task to automate this ;o)
|
tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)).
|
||||||
|
|
||||||
If you don't want to use AMD but would like to store the constructor `Colors` on a different name space you can change this in color.js where you find:
|
## bower support
|
||||||
```javascript
|
tinyColorPicker can be received by bower:
|
||||||
window.Colors = (function...
|
|
||||||
// change this to what you want
|
|
||||||
window.myNameSpace.ColorTool = (function...
|
|
||||||
```
|
|
||||||
If you do so you also need to change this reference in jqColorPicker.js at the very end:
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
})(window, jQuery, Colors);
|
bower install tinyColorPicker
|
||||||
// changes to
|
|
||||||
})(window, jQuery, myNameSpace.ColorTool);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
##jqColorPicker.js
|
##jqColorPicker.js
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
"description": "Tiny jQuery color picker for mobile and desktop with alpha channel",
|
"description": "Tiny jQuery color picker for mobile and desktop with alpha channel",
|
||||||
"main": "jqColorPicker.min.js",
|
"main": "jqColorPicker.min.js",
|
||||||
"authors": [
|
"authors": [
|
||||||
"peterd <peter@dematte.at>"
|
"Peter Dematté <peter@dematte.at>"
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
@ -18,7 +18,9 @@
|
|||||||
],
|
],
|
||||||
"homepage": "https://github.com/PitPik/tinyColorPicker",
|
"homepage": "https://github.com/PitPik/tinyColorPicker",
|
||||||
"moduleType": [
|
"moduleType": [
|
||||||
"globals"
|
"amd",
|
||||||
|
"globals",
|
||||||
|
"node"
|
||||||
],
|
],
|
||||||
"ignore": [
|
"ignore": [
|
||||||
"**/.*",
|
"**/.*",
|
||||||
|
|||||||
14
colors.js
14
colors.js
@ -1,4 +1,14 @@
|
|||||||
window.Colors = (function(window, undefined){
|
(function (root, factory) {
|
||||||
|
if (typeof exports === 'object') {
|
||||||
|
module.exports = factory(root);
|
||||||
|
} else if (typeof define === 'function' && define.amd) {
|
||||||
|
define([], function () {
|
||||||
|
return factory(root);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
root.Colors = factory(root);
|
||||||
|
}
|
||||||
|
}(this, function(window, undefined) {
|
||||||
"use strict"
|
"use strict"
|
||||||
|
|
||||||
var _valueRanges = {
|
var _valueRanges = {
|
||||||
@ -417,4 +427,4 @@ window.Colors = (function(window, undefined){
|
|||||||
}
|
}
|
||||||
|
|
||||||
return Colors;
|
return Colors;
|
||||||
})(window);
|
}));
|
||||||
584
jqColorPicker.js
584
jqColorPicker.js
@ -1,331 +1,341 @@
|
|||||||
(function(window, $, Colors, undefined){
|
(function (root, factory) {
|
||||||
'use strict';
|
if (typeof exports === 'object') {
|
||||||
|
module.exports = factory(root, require('jquery'), require('colors'));
|
||||||
|
} else if (typeof define === 'function' && define.amd) {
|
||||||
|
define(['jquery', 'colors'], function (jQuery, Colors) {
|
||||||
|
return factory(root, jQuery, Colors);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
factory(root, root.jQuery, root.Colors);
|
||||||
|
}
|
||||||
|
}(this, function(window, $, Colors, undefined){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
var $document = $(document),
|
var $document = $(document),
|
||||||
_instance = $(),
|
_instance = $(),
|
||||||
_colorPicker,
|
_colorPicker,
|
||||||
_color,
|
_color,
|
||||||
_options,
|
_options,
|
||||||
|
|
||||||
_$trigger,
|
_$trigger,
|
||||||
_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
|
_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
|
||||||
|
|
||||||
_pointermove = 'touchmove.a mousemove.a pointermove.a',
|
_pointermove = 'touchmove.a mousemove.a pointermove.a',
|
||||||
_pointerdown = 'touchstart.a mousedown.a pointerdown.a',
|
_pointerdown = 'touchstart.a mousedown.a pointerdown.a',
|
||||||
_pointerup = 'touchend.a mouseup.a pointerup.a',
|
_pointerup = 'touchend.a mouseup.a pointerup.a',
|
||||||
_GPU = false,
|
_GPU = false,
|
||||||
_round = Math.round,
|
_round = Math.round,
|
||||||
_animate = window.requestAnimationFrame ||
|
_animate = window.requestAnimationFrame ||
|
||||||
window.webkitRequestAnimationFrame || function(cb){cb()},
|
window.webkitRequestAnimationFrame || function(cb){cb()},
|
||||||
_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
|
_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
|
||||||
'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
|
'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
|
||||||
'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
|
'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
|
||||||
'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
|
'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
|
||||||
// 'grunt-contrib-uglify' puts all this back to one single string...
|
// 'grunt-contrib-uglify' puts all this back to one single string...
|
||||||
_css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
|
_css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
|
||||||
'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
|
'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
|
||||||
'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
|
'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
|
||||||
'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
|
'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
|
||||||
'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
|
'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
|
||||||
'bottom:6px;background:linear-gradient(to right,#FFF,rgba(255,255' +
|
'bottom:6px;background:linear-gradient(to right,#FFF,rgba(255,255' +
|
||||||
',255,0))}.cp-white{height:100%;width:100%;background:linear-grad' +
|
',255,0))}.cp-white{height:100%;width:100%;background:linear-grad' +
|
||||||
'ient(rgba(0,0,0,0),#000)}.cp-xy-cursor{position:absolute;top:0;w' +
|
'ient(rgba(0,0,0,0),#000)}.cp-xy-cursor{position:absolute;top:0;w' +
|
||||||
'idth:10px;height:10px;margin:-5px;border:1px solid #fff;border-r' +
|
'idth:10px;height:10px;margin:-5px;border:1px solid #fff;border-r' +
|
||||||
'adius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin' +
|
'adius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin' +
|
||||||
'-left:6px;height:128px;width:20px;background:linear-gradient(red' +
|
'-left:6px;height:128px;width:20px;background:linear-gradient(red' +
|
||||||
' 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-' +
|
' 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-' +
|
||||||
'cursor{position:absolute;margin-top:-4px;width:100%;border:4px s' +
|
'cursor{position:absolute;margin-top:-4px;width:100%;border:4px s' +
|
||||||
'olid #fff;border-color:transparent #fff;box-sizing:border-box}.c' +
|
'olid #fff;border-color:transparent #fff;box-sizing:border-box}.c' +
|
||||||
'p-alpha{clear:both;width:100%;height:16px;margin:6px 0;backgroun' +
|
'p-alpha{clear:both;width:100%;height:16px;margin:6px 0;backgroun' +
|
||||||
'd:linear-gradient(to right,#444,rgba(0,0,0,0))}.cp-alpha-cursor{' +
|
'd:linear-gradient(to right,#444,rgba(0,0,0,0))}.cp-alpha-cursor{' +
|
||||||
'position:absolute;margin-left:-4px;height:100%;border:4px solid ' +
|
'position:absolute;margin-left:-4px;height:100%;border:4px solid ' +
|
||||||
'#fff;border-color:#fff transparent;box-sizing:border-box}',
|
'#fff;border-color:#fff transparent;box-sizing:border-box}',
|
||||||
|
|
||||||
ColorPicker = function(options) {
|
ColorPicker = function(options) {
|
||||||
_color = this.color = new Colors(options);
|
_color = this.color = new Colors(options);
|
||||||
_options = _color.options;
|
_options = _color.options;
|
||||||
_colorPicker = this;
|
_colorPicker = this;
|
||||||
};
|
};
|
||||||
|
|
||||||
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') ||
|
||||||
$(elm).css('background-color') || '#fff';
|
$(elm).css('background-color') || '#fff';
|
||||||
}
|
}
|
||||||
|
|
||||||
function resolveEventType(event) {
|
function resolveEventType(event) {
|
||||||
event = event.originalEvent && event.originalEvent.touches ?
|
event = event.originalEvent && event.originalEvent.touches ?
|
||||||
event.originalEvent.touches[0] : event;
|
event.originalEvent.touches[0] : event;
|
||||||
|
|
||||||
return event.originalEvent ? event.originalEvent : event;
|
return event.originalEvent ? event.originalEvent : event;
|
||||||
}
|
}
|
||||||
|
|
||||||
function findElement($elm) {
|
function findElement($elm) {
|
||||||
return $($elm.find(_options.doRender)[0] || $elm[0]);
|
return $($elm.find(_options.doRender)[0] || $elm[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle(event) {
|
function toggle(event) {
|
||||||
var $this = $(this),
|
var $this = $(this),
|
||||||
position = $this.offset(),
|
position = $this.offset(),
|
||||||
$window = $(window),
|
$window = $(window),
|
||||||
gap = _options.gap;
|
gap = _options.gap;
|
||||||
|
|
||||||
if (event) {
|
if (event) {
|
||||||
_$trigger = findElement($this);
|
_$trigger = findElement($this);
|
||||||
_$trigger._colorMode = _$trigger.data('colorMode');
|
_$trigger._colorMode = _$trigger.data('colorMode');
|
||||||
|
|
||||||
_colorPicker.$trigger = $this;
|
_colorPicker.$trigger = $this;
|
||||||
|
|
||||||
(_$UI || build()).css({
|
(_$UI || build()).css({
|
||||||
// 'width': _$UI[0]._width,
|
// 'width': _$UI[0]._width,
|
||||||
'left': (_$UI[0]._left = position.left) -
|
'left': (_$UI[0]._left = position.left) -
|
||||||
((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width -
|
((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width -
|
||||||
($window.scrollLeft() + $window.width())) + gap > 0 ?
|
($window.scrollLeft() + $window.width())) + gap > 0 ?
|
||||||
_$UI[0]._left + gap : 0),
|
_$UI[0]._left + gap : 0),
|
||||||
'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
|
'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
|
||||||
((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height -
|
((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height -
|
||||||
($window.scrollTop() + $window.height())) + gap > 0 ?
|
($window.scrollTop() + $window.height())) + gap > 0 ?
|
||||||
_$UI[0]._top + gap : 0)
|
_$UI[0]._top + gap : 0)
|
||||||
}).show(_options.animationSpeed, function() {
|
}).show(_options.animationSpeed, function() {
|
||||||
if (event === true) {
|
if (event === true) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
_$alpha._width = _$alpha.width();
|
_$alpha._width = _$alpha.width();
|
||||||
_$xy_slider._width = _$xy_slider.width();
|
_$xy_slider._width = _$xy_slider.width();
|
||||||
_$xy_slider._height = _$xy_slider.height();
|
_$xy_slider._height = _$xy_slider.height();
|
||||||
_color.setColor(extractValue(_$trigger[0]));
|
_color.setColor(extractValue(_$trigger[0]));
|
||||||
|
|
||||||
preRender(true);
|
preRender(true);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$(_$UI).hide(_options.animationSpeed, function() {
|
$(_$UI).hide(_options.animationSpeed, function() {
|
||||||
preRender(false);
|
preRender(false);
|
||||||
_colorPicker.$trigger = null;
|
_colorPicker.$trigger = null;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function build() {
|
function build() {
|
||||||
$('head').append('<style type="text/css">' +
|
$('head').append('<style type="text/css">' +
|
||||||
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
|
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
|
||||||
|
|
||||||
return _colorPicker.$UI = _$UI =
|
return _colorPicker.$UI = _$UI =
|
||||||
$(_html).css({'margin': _options.margin})
|
$(_html).css({'margin': _options.margin})
|
||||||
.appendTo('body')
|
.appendTo('body')
|
||||||
.show(0, function() {
|
.show(0, function() {
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
|
|
||||||
_GPU = _options.GPU && $this.css('perspective') !== undefined;
|
_GPU = _options.GPU && $this.css('perspective') !== undefined;
|
||||||
_$xy_slider = $('.cp-xy-slider', this);
|
_$xy_slider = $('.cp-xy-slider', this);
|
||||||
_$xy_cursor = $('.cp-xy-cursor', this);
|
_$xy_cursor = $('.cp-xy-cursor', this);
|
||||||
_$z_cursor = $('.cp-z-cursor', this);
|
_$z_cursor = $('.cp-z-cursor', this);
|
||||||
_$alpha = $('.cp-alpha', this).toggle(!!_options.opacity);
|
_$alpha = $('.cp-alpha', this).toggle(!!_options.opacity);
|
||||||
_$alpha_cursor = $('.cp-alpha-cursor', this);
|
_$alpha_cursor = $('.cp-alpha-cursor', this);
|
||||||
_options.buildCallback.call(_colorPicker, $this);
|
_options.buildCallback.call(_colorPicker, $this);
|
||||||
$this.prepend('<div>').children().eq(0).css('width',
|
$this.prepend('<div>').children().eq(0).css('width',
|
||||||
$this.children().eq(0).width() // stabilizer
|
$this.children().eq(0).width() // stabilizer
|
||||||
);
|
);
|
||||||
this._width = this.offsetWidth;
|
this._width = this.offsetWidth;
|
||||||
this._height = this.offsetHeight;
|
this._height = this.offsetHeight;
|
||||||
}).hide()
|
}).hide()
|
||||||
.on(_pointerdown,
|
.on(_pointerdown,
|
||||||
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
|
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
|
||||||
}
|
}
|
||||||
|
|
||||||
function pointerdown(e) {
|
function pointerdown(e) {
|
||||||
var action = this.className
|
var action = this.className
|
||||||
.replace(/cp-(.*?)(?:\s*|$)/, '$1').replace('-', '_');
|
.replace(/cp-(.*?)(?:\s*|$)/, '$1').replace('-', '_');
|
||||||
|
|
||||||
if ((e.button || e.which) > 1) return;
|
if ((e.button || e.which) > 1) return;
|
||||||
|
|
||||||
e.preventDefault && e.preventDefault();
|
e.preventDefault && e.preventDefault();
|
||||||
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();
|
preRender();
|
||||||
|
|
||||||
$document.on(_pointerup, function(e) {
|
$document.on(_pointerup, function(e) {
|
||||||
$document.off('.a');
|
$document.off('.a');
|
||||||
}).on(_pointermove, function(e) {
|
}).on(_pointermove, function(e) {
|
||||||
action(e);
|
action(e);
|
||||||
preRender();
|
preRender();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function xy_slider(event) {
|
function xy_slider(event) {
|
||||||
var e = resolveEventType(event),
|
var e = resolveEventType(event),
|
||||||
x = e.pageX - _$trigger._offset.left,
|
x = e.pageX - _$trigger._offset.left,
|
||||||
y = e.pageY - _$trigger._offset.top;
|
y = e.pageY - _$trigger._offset.top;
|
||||||
|
|
||||||
_color.setColor({
|
_color.setColor({
|
||||||
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');
|
||||||
}
|
}
|
||||||
|
|
||||||
function z_slider(event) {
|
function z_slider(event) {
|
||||||
var z = resolveEventType(event).pageY - _$trigger._offset.top;
|
var z = resolveEventType(event).pageY - _$trigger._offset.top;
|
||||||
|
|
||||||
_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
|
_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
|
||||||
}
|
}
|
||||||
|
|
||||||
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);
|
_color.setColor({}, 'rgb', alpha);
|
||||||
}
|
}
|
||||||
|
|
||||||
function preRender(toggled) {
|
function preRender(toggled) {
|
||||||
var colors = _color.colors,
|
var colors = _color.colors,
|
||||||
hueRGB = colors.hueRGB,
|
hueRGB = colors.hueRGB,
|
||||||
RGB = colors.RND.rgb,
|
RGB = colors.RND.rgb,
|
||||||
HSL = colors.RND.hsl,
|
HSL = colors.RND.hsl,
|
||||||
dark = '#222',
|
dark = '#222',
|
||||||
light = '#ddd',
|
light = '#ddd',
|
||||||
colorMode = _$trigger._colorMode,
|
colorMode = _$trigger._colorMode,
|
||||||
isAlpha = colors.alpha !== 1,
|
isAlpha = colors.alpha !== 1,
|
||||||
alpha = _round(colors.alpha * 100) / 100,
|
alpha = _round(colors.alpha * 100) / 100,
|
||||||
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
|
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
|
||||||
text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
|
text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
|
||||||
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
|
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
|
||||||
(!isAlpha ? 'rgb(' + RGBInnerText + ')' :
|
(!isAlpha ? 'rgb(' + RGBInnerText + ')' :
|
||||||
'rgba(' + RGBInnerText + ', ' + alpha + ')') :
|
'rgba(' + RGBInnerText + ', ' + alpha + ')') :
|
||||||
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
|
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
|
||||||
HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
|
HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
|
||||||
HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
|
HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
|
||||||
alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
|
alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
|
||||||
h = (1 - colors.hsv.h) * _$xy_slider._height,
|
h = (1 - colors.hsv.h) * _$xy_slider._height,
|
||||||
s = colors.hsv.s * _$xy_slider._width,
|
s = colors.hsv.s * _$xy_slider._width,
|
||||||
v = (1 - colors.hsv.v) * _$xy_slider._height,
|
v = (1 - colors.hsv.v) * _$xy_slider._height,
|
||||||
a = alpha * _$alpha._width,
|
a = alpha * _$alpha._width,
|
||||||
translate3d = _GPU ? 'translate3d' : '',
|
translate3d = _GPU ? 'translate3d' : '',
|
||||||
triggerValue = _$trigger[0].value,
|
triggerValue = _$trigger[0].value,
|
||||||
hasNoValue = _$trigger[0].hasAttribute('value') && // question this
|
hasNoValue = _$trigger[0].hasAttribute('value') && // question this
|
||||||
triggerValue === '' && toggled !== undefined;
|
triggerValue === '' && toggled !== undefined;
|
||||||
|
|
||||||
_$xy_slider._css = {
|
_$xy_slider._css = {
|
||||||
backgroundColor: 'rgb(' +
|
backgroundColor: 'rgb(' +
|
||||||
hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'};
|
hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'};
|
||||||
_$xy_cursor._css = {
|
_$xy_cursor._css = {
|
||||||
transform: translate3d + '(' + s + 'px, ' + v + 'px, 0)',
|
transform: translate3d + '(' + s + 'px, ' + v + 'px, 0)',
|
||||||
left: !_GPU ? s : '',
|
left: !_GPU ? s : '',
|
||||||
top: !_GPU ? v : '',
|
top: !_GPU ? v : '',
|
||||||
borderColor : colors.RGBLuminance > 0.22 ? dark : light
|
borderColor : colors.RGBLuminance > 0.22 ? dark : light
|
||||||
};
|
};
|
||||||
_$z_cursor._css = {
|
_$z_cursor._css = {
|
||||||
transform: translate3d + '(0, ' + h + 'px, 0)',
|
transform: translate3d + '(0, ' + h + 'px, 0)',
|
||||||
top: !_GPU ? h : '',
|
top: !_GPU ? h : '',
|
||||||
borderColor : 'transparent ' + HUEContrast
|
borderColor : 'transparent ' + HUEContrast
|
||||||
};
|
};
|
||||||
_$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
|
_$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
|
||||||
_$alpha_cursor._css = {
|
_$alpha_cursor._css = {
|
||||||
transform: translate3d + '(' + a + 'px, 0, 0)',
|
transform: translate3d + '(' + a + 'px, 0, 0)',
|
||||||
left: !_GPU ? a : '',
|
left: !_GPU ? a : '',
|
||||||
borderColor : alphaContrast + ' transparent'
|
borderColor : alphaContrast + ' transparent'
|
||||||
};
|
};
|
||||||
_$trigger._css = {
|
_$trigger._css = {
|
||||||
backgroundColor : hasNoValue ? '' : text,
|
backgroundColor : hasNoValue ? '' : text,
|
||||||
color: hasNoValue ? '' :
|
color: hasNoValue ? '' :
|
||||||
colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
|
colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
|
||||||
};
|
};
|
||||||
_$trigger.text = hasNoValue ? '' : triggerValue !== text ? text : '';
|
_$trigger.text = hasNoValue ? '' : triggerValue !== text ? text : '';
|
||||||
|
|
||||||
toggled !== undefined ? render(toggled) : _animate(render);
|
toggled !== undefined ? render(toggled) : _animate(render);
|
||||||
}
|
}
|
||||||
|
|
||||||
// As _animate() is actually requestAnimationFrame(), render() gets called
|
// As _animate() is actually requestAnimationFrame(), render() gets called
|
||||||
// decoupled from any pointer action (whenever the browser decides to do
|
// decoupled from any pointer action (whenever the browser decides to do
|
||||||
// so) as an event. preRender() is coupled to toggle() and all pointermove
|
// so) as an event. preRender() is coupled to toggle() and all pointermove
|
||||||
// actions; that's where all the calculations happen. render() can now be
|
// actions; that's where all the calculations happen. render() can now be
|
||||||
// called without extra calculations which results in faster rendering.
|
// called without extra calculations which results in faster rendering.
|
||||||
function render(toggled) {
|
function render(toggled) {
|
||||||
_$xy_slider.css(_$xy_slider._css);
|
_$xy_slider.css(_$xy_slider._css);
|
||||||
_$xy_cursor.css(_$xy_cursor._css);
|
_$xy_cursor.css(_$xy_cursor._css);
|
||||||
_$z_cursor.css(_$z_cursor._css);
|
_$z_cursor.css(_$z_cursor._css);
|
||||||
_$alpha.css(_$alpha._css);
|
_$alpha.css(_$alpha._css);
|
||||||
_$alpha_cursor.css(_$alpha_cursor._css);
|
_$alpha_cursor.css(_$alpha_cursor._css);
|
||||||
|
|
||||||
_options.doRender && _$trigger.css(_$trigger._css);
|
_options.doRender && _$trigger.css(_$trigger._css);
|
||||||
_$trigger.text && _$trigger.val(_$trigger.text);
|
_$trigger.text && _$trigger.val(_$trigger.text);
|
||||||
|
|
||||||
_options.renderCallback.call(
|
_options.renderCallback.call(
|
||||||
_colorPicker,
|
_colorPicker,
|
||||||
_$trigger,
|
_$trigger,
|
||||||
typeof toggled === 'boolean' ? toggled : undefined
|
typeof toggled === 'boolean' ? toggled : undefined
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
$.fn.colorPicker = function(options) {
|
$.fn.colorPicker = function(options) {
|
||||||
var noop = function(){};
|
var noop = function(){};
|
||||||
|
|
||||||
options = $.extend({
|
options = $.extend({
|
||||||
animationSpeed: 150,
|
animationSpeed: 150,
|
||||||
GPU: true,
|
GPU: true,
|
||||||
doRender: true,
|
doRender: true,
|
||||||
customBG: '#FFF',
|
customBG: '#FFF',
|
||||||
opacity: true,
|
opacity: true,
|
||||||
renderCallback: noop,
|
renderCallback: noop,
|
||||||
buildCallback: noop,
|
buildCallback: noop,
|
||||||
body: document.body,
|
body: document.body,
|
||||||
scrollResize: true,
|
scrollResize: true,
|
||||||
gap: 4
|
gap: 4
|
||||||
// css: '',
|
// css: '',
|
||||||
// cssAddon: '',
|
// cssAddon: '',
|
||||||
// margin: '',
|
// margin: '',
|
||||||
// preventFocus: false
|
// preventFocus: false
|
||||||
}, options);
|
}, options);
|
||||||
|
|
||||||
!_colorPicker && options.scrollResize && $(window)
|
!_colorPicker && options.scrollResize && $(window)
|
||||||
.on('resize.a scroll.a', function() {
|
.on('resize.a scroll.a', function() {
|
||||||
if (_colorPicker.$trigger) {
|
if (_colorPicker.$trigger) {
|
||||||
_colorPicker.toggle.call(_colorPicker.$trigger[0], true);
|
_colorPicker.toggle.call(_colorPicker.$trigger[0], true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
_instance = _instance.add(this);
|
_instance = _instance.add(this);
|
||||||
this.colorPicker = _instance.colorPicker =
|
this.colorPicker = _instance.colorPicker =
|
||||||
_colorPicker || new ColorPicker(options);
|
_colorPicker || new ColorPicker(options);
|
||||||
|
|
||||||
$(options.body).off('.a').on(_pointerdown, function(e) {
|
$(options.body).off('.a').on(_pointerdown, function(e) {
|
||||||
!_instance.add(_$UI).find(e.target)
|
!_instance.add(_$UI).find(e.target)
|
||||||
.add(_instance.filter(e.target))[0] && toggle();
|
.add(_instance.filter(e.target))[0] && toggle();
|
||||||
});
|
});
|
||||||
|
|
||||||
return this.on('focusin.a click.a', toggle)
|
return this.on('focusin.a click.a', toggle)
|
||||||
.on('change.a', function() {
|
.on('change.a', function() {
|
||||||
_color.setColor(this.value || '#FFF');
|
_color.setColor(this.value || '#FFF');
|
||||||
_instance.colorPicker.render(true);
|
_instance.colorPicker.render(true);
|
||||||
})
|
})
|
||||||
.each(function() {
|
.each(function() {
|
||||||
var value = extractValue(this),
|
var value = extractValue(this),
|
||||||
mode = value.split('('),
|
mode = value.split('('),
|
||||||
$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 &&
|
options.doRender &&
|
||||||
$elm.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'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.colorPicker.destroy = function() {
|
$.fn.colorPicker.destroy = function() {
|
||||||
_instance.add(_options.body).off('.a'); // saver
|
_instance.add(_options.body).off('.a'); // saver
|
||||||
_colorPicker.toggle(false);
|
_colorPicker.toggle(false);
|
||||||
_instance = $();
|
_instance = $();
|
||||||
};
|
};
|
||||||
|
|
||||||
return $;
|
return $;
|
||||||
|
|
||||||
})(window, jQuery, Colors);
|
}));
|
||||||
File diff suppressed because one or more lines are too long
4
jqColorPicker.min.js
vendored
4
jqColorPicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "tinyColorPicker",
|
"name": "tinyColorPicker",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "http://github.com/PitPik/tinyColorPicker.git"
|
"url": "http://github.com/PitPik/tinyColorPicker.git"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user