tinyColorPicker/index.html

<!DOCTYPE html>
<html>
<head>
	<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="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="shortcut icon" type="image/x-icon" href="development/favicon.ico">
	<link rel="icon" type="image/x-icon" href="development/favicon.ico">
	<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
	<link rel="stylesheet" type="text/css" href="development/compatibility.css">

	<!-- <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 type="text/javascript" src="colors.js"></script>
	<script type="text/javascript" src="jqColorPicker.js"></script>
	<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->

	<title>tiny jQuery color picker</title>
</head>
<body>
<div id="content-wrapper">
<h1>Tiny jQuery colorPicker</h1>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
This <strong>5.07KB</strong> (gZip; 11.39KB minified) 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" class="a-inline"></a>
<h2>Demo</h2>
On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<p>Switch between plugins:
	<select id="pluginSelect">
		<option value="desktop">Desktop (no plugin)</option>
		<option value="mobile">Mobile</option>
		<option value="input">Input fields</option>
		<option value="memory">Color memory spaces</option>
		<option value="skinned">Skinned (white)</option>
		<option value="skinned_sa">Skinned, selective alpha</option>
        <option value="dev_skinned">Skinned dev-tools like</option>
        <option value="dev_skinned_rgb">Skinned, RGB sliders</option>
		<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>
		<option value="noalpha">Default without alpha</option>
		<option value="small">Default but smaller</option>
		<option value="IE8">Better IE8- support</option>
	</select>
	(see index.html for more details...)
</p>
<div class="input-toggles">
	<input class="color no-alpha" value="#B6BD79" />
	<input class="color no-alpha" value="rgb(162, 63, 3)" />
	<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
	<div class="trigger" value="#556B2F"><div><div></div></div></div>
	<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
	<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
	<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo">
</div>
<h2>Usage</h2>
<p>There is only one file you need to load... No images and no CSS required.</p>
<pre style="display: block; overflow: auto;">
&lt;script type="text/javascript" src="jqColorPicker.min.js">
&lt;script type="text/javascript">
    $('.color').colorPicker(); // that's it
&lt;/script>
</pre>
<h2>Features</h2>
<p>Tiny jQuery colorPicker only loads into memory if triggered to show and auto repositiones inside view-port if it doesn't fit. 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>
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>
<pre style="display: block; overflow: auto;">
window.myColorPicker = $('input.color').colorPicker({
    buildCallback: function($elm) {
        this.$colorPatch = $elm.prepend('&lt;div class="cp-disp">').find('.cp-disp');
    },
    cssAddon:
        '.cp-disp {padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
        '.cp-xy-slider {width:200px; height:200px;}' +
        '.cp-xy-cursor {width:16px; height:16px; border-width:2px; margin:-8px}' +
        '.cp-z-slider {height:200px; width:40px;}' +
        '.cp-z-cursor {border-width:8px; margin-top:-8px;}' +
        '.cp-alpha {height:40px;}' +
        '.cp-alpha-cursor {border-width:8px; margin-left:-8px;}',

    renderCallback: function($elm, toggled) {
        var colors = this.color.colors;

        this.$colorPatch.css({
            backgroundColor: '#' + colors.HEX,
            color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
        }).text(this.color.toString($elm._colorMode)); // $elm.val();
    }
});
</pre>
<h2>API and usage</h2>
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>
</div>
<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>

<script type="text/javascript" src="index.js"></script>

</body>
</html>
Initial commit 9 yıl önce			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<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" />`
added event option 9 yıl önce			`<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" />`
Initial commit 9 yıl önce			`<link rel="stylesheet" type="text/css" href="index.css">`
Added small height demo 9 yıl önce			`<link rel="shortcut icon" type="image/x-icon" href="development/favicon.ico">`
			`<link rel="icon" type="image/x-icon" href="development/favicon.ico">`
Initial commit 9 yıl önce			`<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->`
			`<link rel="stylesheet" type="text/css" href="development/compatibility.css">`
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations. 8 yıl önce
			`<!-- <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 type="text/javascript" src="colors.js"></script>`
			`<script type="text/javascript" src="jqColorPicker.js"></script>`
			`<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->`

Added small height demo 9 yıl önce			`<title>tiny jQuery color picker</title>`
Initial commit 9 yıl önce			`</head>`
			`<body>`
added event option 9 yıl önce			`<div id="content-wrapper">`
Initial commit 9 yıl önce			`<h1>Tiny jQuery colorPicker</h1>`
			`<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>`
Minor updates 8 yıl önce			This <strong>5.07KB</strong> (gZip; 11.39KB minified) 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>
added event option 9 yıl önce			`<a name="demo" id="demo" class="a-inline"></a>`
Initial commit 9 yıl önce			`<h2>Demo</h2>`
added support for triggering nested elements (Nested) elements besides input fields can now also be used for triggering the colorPicker 9 yıl önce			`On all elements with className 'color': <pre>$('.color').colorPicker();</pre>`
Initial commit 9 yıl önce			`<p>Switch between plugins:`
			`<select id="pluginSelect">`
			`<option value="desktop">Desktop (no plugin)</option>`
			`<option value="mobile">Mobile</option>`
			`<option value="input">Input fields</option>`
Added memory demo 9 yıl önce			`<option value="memory">Color memory spaces</option>`
Added skinning demo 9 yıl önce			`<option value="skinned">Skinned (white)</option>`
New demo; enriched model $UI now in instance model; added selective alpha demo 9 yıl önce			`<option value="skinned_sa">Skinned, selective alpha</option>`
new RGB slider demo 9 yıl önce			`<option value="dev_skinned">Skinned dev-tools like</option>`
			`<option value="dev_skinned_rgb">Skinned, RGB sliders</option>`
Added 'stay inside view-port' functionality 9 yıl önce			`<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>`
Initial commit 9 yıl önce			`<option value="noalpha">Default without alpha</option>`
added 'smaller' demo 9 yıl önce			`<option value="small">Default but smaller</option>`
better preventFocus support (for mobile) 9 yıl önce			`<option value="IE8">Better IE8- support</option>`
Initial commit 9 yıl önce			`</select>`
Added memory demo 9 yıl önce			`(see index.html for more details...)`
Initial commit 9 yıl önce			`</p>`
added support for triggering nested elements (Nested) elements besides input fields can now also be used for triggering the colorPicker 9 yıl önce			`<div class="input-toggles">`
New demo; enriched model $UI now in instance model; added selective alpha demo 9 yıl önce			`<input class="color no-alpha" value="#B6BD79" />`
			`<input class="color no-alpha" value="rgb(162, 63, 3)" />`
			`<input class="color no-alpha" value="hsl(32, 95%, 23%)" />`
added support for triggering nested elements (Nested) elements besides input fields can now also be used for triggering the colorPicker 9 yıl önce			`</div>`
			`<div class="div-toggles">`
Multiple instance support 9 yıl önce			`<div class="trigger" value="#556B2F"><div><div></div></div></div>`
			`<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>`
			`<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>`
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations. 8 yıl önce			`<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo">`
			`</div>`
better preventFocus support (for mobile) 9 yıl önce			`<h2>Usage</h2>`
			`<p>There is only one file you need to load... No images and no CSS required.</p>`
			`<pre style="display: block; overflow: auto;">`
			`<script type="text/javascript" src="jqColorPicker.min.js">`
			`<script type="text/javascript">`
			`$('.color').colorPicker(); // that's it`
			`</script>`
			`</pre>`
Initial commit 9 yıl önce			`<h2>Features</h2>`
Added 'stay inside view-port' functionality 9 yıl önce			`<p>Tiny jQuery colorPicker only loads into memory if triggered to show and auto repositiones inside view-port if it doesn't fit. 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>`
Initial commit 9 yıl önce			`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>`
			`<p>The following snipped shows how easy it is to make plugins: use for mobile</p>`
			`<pre style="display: block; overflow: auto;">`
			`window.myColorPicker = $('input.color').colorPicker({`
Typo fix buidCallback -> buildCallback 9 yıl önce			`buildCallback: function($elm) {`
Minor updates - minor optimizations - added options ‘dark’ and ‘light’ 8 yıl önce			`this.$colorPatch = $elm.prepend('<div class="cp-disp">').find('.cp-disp');`
Initial commit 9 yıl önce			`},`
			`cssAddon:`
Added memory demo 9 yıl önce			`'.cp-disp {padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +`
			`'.cp-xy-slider {width:200px; height:200px;}' +`
			`'.cp-xy-cursor {width:16px; height:16px; border-width:2px; margin:-8px}' +`
			`'.cp-z-slider {height:200px; width:40px;}' +`
			`'.cp-z-cursor {border-width:8px; margin-top:-8px;}' +`
			`'.cp-alpha {height:40px;}' +`
			`'.cp-alpha-cursor {border-width:8px; margin-left:-8px;}',`
Initial commit 9 yıl önce
			`renderCallback: function($elm, toggled) {`
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations. 8 yıl önce			`var colors = this.color.colors;`
Initial commit 9 yıl önce
Minor updates - minor optimizations - added options ‘dark’ and ‘light’ 8 yıl önce			`this.$colorPatch.css({`
Initial commit 9 yıl önce			`backgroundColor: '#' + colors.HEX,`
			`color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'`
Minor updates - minor optimizations - added options ‘dark’ and ‘light’ 8 yıl önce			`}).text(this.color.toString($elm._colorMode)); // $elm.val();`
Initial commit 9 yıl önce			`}`
			`});`
			`</pre>`
			`<h2>API and usage</h2>`
added event option 9 yıl önce			`<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>`
			`</div>`
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations. 8 yıl önce			`<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>`
Added small height demo 9 yıl önce
externalize demos 9 yıl önce			`<script type="text/javascript" src="index.js"></script>`
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations. 8 yıl önce
Initial commit 9 yıl önce			`</body>`
			`</html>`