Netsyms/colorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/colorPicker.git synced 2025-09-07 08:12:36 -06:00
Code Issues Releases Wiki Activity

initial jQuery impementation

Browse Source
This commit is contained in:
peterd 2014-09-07 17:49:36 +02:00
parent 7521ead7ef
commit 1ec1685529
9 changed files with 231 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -1,3 +1,4 @@
# colorPicker and colors # colorPicker and colors
An advanced, fast but small (46.9KB, 19.9KB gZip) **javaScript** (only, framework independent) **color picker** (or color chooser for desktop use) that uses only one javaScript (.js) file (no extra HTML, CSS, images, etc... on IE9+ and internet browsers).<br />ColorPicker works in all browsers incl. IE6+ (an extra CSS has to be made to make it work in IE6 though and some additional setTimeout tricks to make it work in IE5.5)<br /> An advanced, fast but small (46.9KB, 19.9KB gZip) **javaScript** (only, framework independent) **color picker** (or color chooser for desktop use) that uses only one javaScript (.js) file (no extra HTML, CSS, images, etc... on IE9+ and internet browsers).<br />ColorPicker works in all browsers incl. IE6+ (an extra CSS has to be made to make it work in IE6 though and some additional setTimeout tricks to make it work in IE5.5)<br />

28
colorPicker.jquery.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "ColorPicker",
"title": "jQuery-ColorPicker",
"description": "Advanced javaScript color picker for jQuery (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...)",
"keywords": [
"color-picker",
"color",
"colour"
],
"version": "1.0",
"author": {
"name": "Peter Dematté",
"email": "colorPicker@dematte.at",
"url": "http://dematte.at/colorPicker"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/PitPik/colorPicker/blob/master/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/PitPik/colorPicker/issues",
"homepage": "http://dematte.at/colorPicker",
"docs": "https://github.com/PitPik/colorPicker",
"dependencies": {
"jquery": ">=1.7"
}
}

3
colorPicker.js
View File

@ -438,10 +438,11 @@
if (_mouseMoveAction) { if (_mouseMoveAction) {
_startCoords = {pageX: page.X, pageY: page.Y}; _startCoords = {pageX: page.X, pageY: page.Y};
_mainTarget.style.display = 'block'; _mainTarget.style.display = 'block'; // for resizer...
_targetOrigin = getOrigin(_mainTarget); _targetOrigin = getOrigin(_mainTarget);
_targetOrigin.width = _nodes.opacity.offsetWidth; // ??????? _targetOrigin.width = _nodes.opacity.offsetWidth; // ???????
_targetOrigin.childWidth = _nodes.opacity_slider.offsetWidth; // ??????? _targetOrigin.childWidth = _nodes.opacity_slider.offsetWidth; // ???????
_mainTarget.style.display = ''; // ??? for resizer...
_mouseMoveAction(event); _mouseMoveAction(event);
addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction); addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
_renderTimer = window[requestAnimationFrame](renderAll); _renderTimer = window[requestAnimationFrame](renderAll);

2
colors.js
View File

@ -345,7 +345,7 @@
var ColorConverter = { var ColorConverter = {
txt2color: function(txt) { txt2color: function(txt) {
var color = {}, var color = {},
parts = txt.replace(/(?:#|\))/, '').split('('), parts = txt.replace(/(?:#|\)|%)/g, '').split('('),
values = (parts[1] || '').split(/,\s*/), values = (parts[1] || '').split(/,\s*/),
type = parts[1] ? parts[0].substr(0, 3) : 'rgb', type = parts[1] ? parts[0].substr(0, 3) : 'rgb',
m = ''; m = '';

3
index.css
View File

File diff suppressed because one or more lines are too long

3
index.html
View File

@ -53,7 +53,8 @@
<div></div> <div></div>
</div> </div>
<div id="description">Demo patches: demonstrate how to build color pickers and how Colors' / ColorPicker's API work. Patches are linked to <select><option value="Colors">Colors</option><option value="ColorPicker">ColorPicker</option></select></div> <div id="description">Demo patches: demonstrate how to build color pickers and how Colors' / ColorPicker's API work. Patches are linked to <select><option value="Colors">Colors</option><option value="ColorPicker">ColorPicker</option></select>
<p>See a simple jQuery implementation <a href="jQuery_implementation/">preview here</a></p></div>
<!-- <div id="model_display"></div> --> <!-- <div id="model_display"></div> -->
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas--> <!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->

38
jQuery_implementation/index.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<link href="../index.css" media="all" rel="stylesheet" type="text/css" />
<link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a jQuery implememntation example">
<title>colorPicker jQuery implementation example</title>
</head>
<body>
<h1>Simple jQuery implementation</h1>
Calling the colorPicker on all inputs with the calssName 'color': <pre>$('input.color').colorPicker();</pre>
<p>
<input class="color" value="#323f03" />
<input class="color" value="rgb(162, 63, 3)" />
<input class="color" value="hsl(32, 95%, 23%)" />
</p>
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
<!-- <script type="text/javascript" src="../color.all.min.js"></script> -->
<script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../colorPicker.data.js"></script>
<script type="text/javascript" src="../colorPicker.js"></script>
<script type="text/javascript" src="jqColor.js"></script>
<script type="text/javascript">
var $colors = $('input.color').colorPicker().each(function(idx, elm) { // {multipleInstances: true}
$(elm).css({'background-color': this.value})
});
</script>
</body>
</html>

20
jQuery_implementation/jqColor.css Normal file
View File

@ -0,0 +1,20 @@
body {
color: #ccc;
padding: .5em 2em;
font: normal normal normal .9em/1.35em Georgia, "Times New Roman", Times, serif;
}
input:focus {
outline: none;
}
pre {
display: inline;
background-color: rgba(255, 255, 255, .2);
padding: .5em;
}
.color {
padding: .5em;
margin-right: .4em;
border: 1px solid #aaa;
border-radius: 3px;
width: 140px;
}

136
jQuery_implementation/jqColor.js Normal file
View File

@ -0,0 +1,136 @@
(function ($, window) {
$.fn.extend({
colorPicker: function(config) {
var renderCallback = function(colors, mode) {
var options = this,
$input = $(options.input),
$patch = $(options.patch),
RGB = colors.RND.rgb,
HSL = colors.RND.hsl,
AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
isAlpha = colors.alpha !== 1 && !options.isIE8,
colorMode = $input.data('colorMode');
$patch.css({
'color': (colors.rgbaMixBlack.luminance > 0.22 ? '#222' : '#ddd'), // Black...???
'background-color': RGBAText,
'filter' : (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '')
});
$input.val(colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
(isAlpha ? ', ' + colors.alpha : '') + ')')
);
if (options.displayCallback) {
options.displayCallback(colors, mode, options);
}
},
createInstance = function(elm, config) {
var initConfig = {
klass: window.ColorPicker,
input: elm,
patch: elm,
isIE8: document.all && !document.addEventListener, // Opera???
animationSpeed: 200,
draggable: true,
margin: {left: -1, top: 2},
// displayCallback: displayCallback,
/* --- regular colorPicker options from this point --- */
color: elm.value,
initStyle: 'display: none',
mode: 'hsv-h',
size: 1,
renderCallback: renderCallback
};
for (var n in config) {
initConfig[n] = config[n];
}
return new initConfig.klass(initConfig);
},
doEventListeners = function(elm, multiple, off) {
var onOff = off ? 'off' : 'on';
$(elm)[onOff]('focus.colorPicker', function(e) {
var $input = $(this),
position = $input.position(),
index = multiple ? $(that).index(this) : 0,
colorPicker = colorPickers[index] ||
(colorPickers[index] = createInstance(this, config)),
options = colorPicker.color.options,
$colorPicker = $.ui && options.draggable ?
$(colorPicker.nodes.colorPicker).draggable(
{cancel: '.' + options.CSSPrefix + 'app div'}
) : $(colorPicker.nodes.colorPicker);
$colorPicker.css({
'position': 'absolute',
'left': position.left + options.margin.left,
'top': position.top + +$input.outerHeight(true) + options.margin.top
});
if (!multiple) {
options.input = elm;
options.patch = elm; // check again???
colorPicker.setColor(elm.value, undefined, undefined, true);
colorPicker.saveAsBackground();
}
colorPickers.current = colorPickers[index];
$colorPicker.show(colorPicker.color.options.animationSpeed);
});
if (!colorPickers.evt || off) {
colorPickers.evt = true; // prevent new eventListener for window
$(window)[onOff]('mousedown.colorPicker', function(e) {
var colorPicker = colorPickers.current,
$colorPicker = $(colorPicker ? colorPicker.nodes.colorPicker : undefined),
animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
isColorPicker = $(e.target).closest('.cp-app')[0],
inputIndex = $(that).index(e.target);
if (isColorPicker && $(colorPickers).index(isColorPicker)) {
if (e.target === colorPicker.nodes.exit) {
$colorPicker.hide(animationSpeed);
$(':focus').trigger('blur');
} else {
$(document.body).append(isColorPicker);
}
} else if (inputIndex !== -1) {
// input field
} else {
$colorPicker.hide(animationSpeed);
}
});
}
},
that = this,
colorPickers = this.colorPickers || []; // this is a way to prevent data binding on HTMLElements
this.colorPickers = colorPickers;
$(this).each(function(idx, elm) {
if (config === 'destroy') {
// doEventListeners(elm, (config && config.multipleInstances), true);
$(elm).off('.colorPicker');
$(window).off('.colorPicker');
if (colorPickers[idx]) {
colorPickers[idx].destroyAll();
}
} else {
var value = elm.value.split('(');
$(elm).data('colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
doEventListeners(elm, (config && config.multipleInstances), false);
}
});
return this;
}
});
})(jQuery, this);