Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-08-02 06:44:28 -06:00
Code Issues Releases Wiki Activity

added event option

Browse Source
This commit is contained in:
peterd 2015-02-07 11:48:11 +01:00
parent 3873bbb1e7
commit e24c43823a
6 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -49,7 +49,8 @@ $('.color').colorPicker({
css: '', // replaces existing css css: '', // replaces existing css
cssAddon: '', // adds css to existing cssAddon: '', // adds css to existing
margin: '', // positioning margin (can also be set in cssAddon) margin: '', // positioning margin (can also be set in cssAddon)
preventFocus: false // prevents default on focus of input fields preventFocus: false // prevents default on focus of input fields,
body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change)
}); });
``` ```

19
index.css
View File

File diff suppressed because one or more lines are too long

14
index.html
View File

@ -3,16 +3,21 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="Description" content="tiny ColorPicker is a small (10.0KB, 4.5KB gZip) but very advanced jQuery color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc..." />
<meta name="Keywords" content="ColorPicker, color picker, color chooser, color, picker, javaScript, jquery, colors, rgb, hsv, hsl, hex, alpha, WCAG 2.0, grayscale, contrast, readability, realtime, retina, high resolution" />
<meta name="author" content="Peter Dematté" />
<meta http-equiv="language" content="en" />
<link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="index.css">
<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> --> <!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
<link rel="stylesheet" type="text/css" href="development/compatibility.css"> <link rel="stylesheet" type="text/css" href="development/compatibility.css">
<title>tiny jQuery colorPicker</title> <title>tiny jQuery colorPicker</title>
</head> </head>
<body> <body>
<div id="content-wrapper">
<h1>Tiny jQuery colorPicker</h1> <h1>Tiny jQuery colorPicker</h1>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br> <p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
This <strong>4.5KB</strong> small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in <a href="#demo">Demo</a>).</p> This <strong>4.5KB</strong> small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in <a href="#demo">Demo</a>).</p>
<a name="demo" id="demo"></a> <a name="demo" id="demo" class="a-inline"></a>
<h2>Demo</h2> <h2>Demo</h2>
On all elements with className 'color': <pre>$('.color').colorPicker();</pre> On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<p>Switch between plugins: <p>Switch between plugins:
@ -48,7 +53,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
&lt;/script> &lt;/script>
</pre> </pre>
<h2>Features</h2> <h2>Features</h2>
<p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.<br> <p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies, super fast rendering for best performance on desktop and mobile browsers and renders perfectly smooth on retina and high resolution displays.<br>
This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br> This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br>
As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <a href="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p> As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <a href="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p>
<p>The following snipped shows how easy it is to make plugins: use for mobile</p> <p>The following snipped shows how easy it is to make plugins: use for mobile</p>
@ -79,7 +84,8 @@ window.myColorPicker = $('input.color').colorPicker({
}); });
</pre> </pre>
<h2>API and usage</h2> <h2>API and usage</h2>
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p> <p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>
</div>
<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> --> <!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- <script type="text/javascript" src="colors.js"></script> --> <!-- <script type="text/javascript" src="colors.js"></script> -->
@ -562,6 +568,6 @@ window.myColorPicker = $('input.color').colorPicker({
); );
})(window); })(window);
</script> </script>
<a href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a> <a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
</body> </body>
</html> </html>

5
jqColorPicker.js
View File

@ -254,7 +254,8 @@
customBG: '#FFF', customBG: '#FFF',
opacity: true, opacity: true,
renderCallback: noop, renderCallback: noop,
buidCallback: noop buidCallback: noop,
body: document.body
// css: '', // css: '',
// cssAddon: '', // cssAddon: '',
// margin: '', // margin: '',
@ -264,7 +265,7 @@
if (!_colorPicker) { // we only want one single instance... if (!_colorPicker) { // we only want one single instance...
_colorPicker = new ColorPicker(options); _colorPicker = new ColorPicker(options);
$(document.body).on('touchstart mousedown pointerdown', function(e) { $(options.body).on('touchstart mousedown pointerdown', function(e) {
var $target = $(e.target); var $target = $(e.target);
if ($.inArray($target.closest($that.selector)[0], if ($.inArray($target.closest($that.selector)[0],

2
jqColorPicker.js.map
View File

File diff suppressed because one or more lines are too long

4
jqColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long