fork

js/jquery-colorpicker/.gitignore

@@ -0,0 +1 @@
+.svn

js/jquery-colorpicker/README

@@ -0,0 +1,231 @@
+jQuery.colorpicker v0.9.3
+
+Copyright (c) 2011-2012 Martijn W. van der Lee
+Licensed under the MIT.
+
+Full-featured colorpicker for jQueryUI with full theming support.
+Most images from jPicker by Christopher T. Tillman.
+Sourcecode created from scratch by Martijn W. van der Lee.
+
+IE support; make sure you have a doctype defined, or the colorpicker will not
+display correctly.
+
+Options:
+	alpha:				false
+		Whether or not to show the inputs for alpha.
+
+	altAlpha:			true
+		Change the opacity of the altField element(s) according to the alpha
+		setting.
+
+	altField:			''
+		Change the background color of the elements specified in this element.
+
+	altOnChange:		true
+		If true, the altField element(s) are updated on every change, otherwise
+		only upon closing.
+
+	altProperties:		'background-color'
+		Comma-separated list of CSS properties to set color of in the altField.
+		The following properties are allowed, all others are ignored.
+			background-color
+			color
+			border-color
+			outline-color
+
+	autoOpen:			false
+		If true, the dialog opens automatically upon page load.
+
+	buttonColorize:		false
+		If a buttonimage is specified, change the background color of the
+		image when the color is changed.
+
+	buttonImage:		'images/ui-colorpicker.png'
+		Same as jQueryUI DatePicker.
+
+	buttonImageOnly:	false
+		Same as jQueryUI DatePicker.
+
+	buttonText:			null
+		Same as jQueryUI DatePicker. If null, use language default.
+
+	closeOnEscape:		true
+		Close the window when pressing the Escape key on the keyboard.
+
+	closeOnOutside:		true
+		Close the window when clicking outside the colorpicker display.
+
+	color:				'#00FF00'
+		Initial color. Formats recognized are:
+			#rrggbb
+			rrggbb (same as previous, but without the #)
+			rgb(rrr,ggg,bbb)
+			rgba(rrr,ggg,bbb,a.a)
+			rgb(rrr%,ggg%,bbb%)
+			rgba(rrr%,ggg%,bbb%,aaa%)
+			w3c-defined color name
+
+	colorFormat:		'HEX'
+		Specifies the format of the color string returned in callbacks.
+		You can either specify one of the predefined formats:
+			#HEX	#112233
+			#HEX3	#123 if possible, otherwise false.
+			HEX		112233
+			HEX3	123 if possible, otherwise false.
+			RGB		rgb(123,45,67) if opaque, otherwise false.
+			RGBA	rgba(123,45,67,0.123%)
+			RGB%	rgb(12%,34%,56%) if opaque, otherwise false.
+			RGBA%	rgba(12%,34%,56%,0.123%)
+			HSL		hsl(123,45,67) if opaque, otherwise false.
+			HSLA	hsla(123,45,67,0.123%)
+			HSL%	hsl(12%,34%,56%) if opaque, otherwise false.
+			HSLA%	hsla(12%,34%,56%,0.123%)
+			NAME	Closest color name
+			EXACT	Exact name if possible, otherwise false.
+		or specify your own format...
+		Each color channel is specified as a pair of two characters.
+		The first character determines the color channel:
+			a			Alpha
+			r, g, b		RGB color space; red, green and blue
+			h, s, v		HSV color space; hue, saturation and value
+			c, m, y, k	CMYK color space; cyan, magenta, yellow and black
+			L, A, B		LAB color space; Luminosity, *A and *B.
+		The second character specifies the data type:
+			x			Two-digit hexadecimal notation.
+			d			Decimal (0-255) notation.
+			f			Floating point (0-1) notation, not rounded.
+			p			Percentage (0-100) notation, not rounded.
+		If you prefix a valid pair with a backslash, it won't be replaced.
+		All patterns are case sensitive.
+		For example, to create the common hex color format, use "#rxgxbx".
+		For an rgba() format, use "rgba(rd,gd,bd,af)"
+
+		You can also specify an array of formats where the first non-FALSE one
+		is returned. Note that the only formats able to return FALSE are the
+		predefined formats HEX3 and EXACT. For example, this array will output
+		HEX3 format if possible or HEX format otherwise:
+			['HEX3', 'HEX']
+
+	dragggable:			true
+		Make the dialog draggable if the header is visible and the dialog is
+		not inline.
+
+	duration:			'fast'
+		Same as jQueryUI DatePicker.
+
+	hsv:				true
+		Whether or not to show the inputs for HSV.
+
+	layout:				{ ... }
+		Set the position of elements in a table layout.
+		You could create any layout possible with HTML tables by specifying
+		cell position and size of each part.
+		@todo document how this works.
+
+	limit:				''
+		Limit the selectable colors to any of the predefined limits:
+				''			No limitations, allow 8bpp color for a palette of
+							all 16 million colors.
+				'websafe'	Set of 216 colors composed of 00, 33, 66, 99, cc
+							and ff color channel values in #rrggbb.
+				'nibble'	4 bits per color, can be easily converted to #rgb
+							format.
+							The palette is limited to 4096 colors.
+				'binary'	Allow only #00 or #ff as color channel values for
+							primary	colors only; only 8 colors are available
+							with this limit.
+				'name'		Limit to closest color name.
+
+	modal:
+		Ensures no other controls on screen can be used while the dialog is
+		opened.
+		Also look at showCancelButton and closeOnEscape to use in combination
+		with the modal option. closeOnOutside is redundant when used with modal.
+
+	mode:				'h'
+		Determines the functionality of the map and bar components. Allowed
+		values are; 'h', 's', 'l', 'r', 'g', 'b' or 'a', for hue, saturation,
+		luminosity, red, green, blue and alpha respectively.
+
+	parts:				''
+		Determine which parts to display.
+		Use any of the preset names ('full', 'popup' or 'inline') or specify
+		an array of part names (i.e. ['header', 'map', 'bar', 'hex', 'hsv',
+		'rgb', 'alpha', 'lab', 'cmyk', 'preview', 'swatches', 'footer']).
+		If an empty string is given, the parts will be automatically chosen as
+		preset 'popup' or 'inline' depending on the context in which the
+		colorpicker is used.
+
+	rgb:				true,		// Show RGB controls and modes
+		Whether or not to show the inputs for RGB.
+
+	regional:			'',
+		Sets the language to use. Note that you must load the appropriate
+		language file from the i18n directory. '' is included by default.
+
+	showAnim:			'fadeIn'
+		Same as jQueryUI DatePicker.
+
+	showCancelButton:	true
+		Show the Cancel button if buttonpane is visible.
+
+	showCloseButton:	true
+		Show the Close button if the header is visible.
+		If the dialog is inline, the close button is never shown.
+
+	showNoneButton:		false
+		Show the None/Revert button if buttonpane is visible.
+
+	showOn:				'focus'
+		Same as jQueryUI DatePicker.
+
+	showOptions:		{}
+		Same as jQueryUI DatePicker.
+
+	swatches:			null
+		'null' to show swatches of HTML colors or provide your own object
+		with colornames and {r:1, g:1, b:1} array.
+		For example { 'red': {r:1, g:0, b:0}, 'blue': {r:0, g:0, b:1} }
+
+	title:				null
+		Title to display in the header. If null, use language default.
+
+Events:
+	init:			null
+		Triggered on initially setting the color. Called only once.
+		Callbacks recieve same data as select event.
+
+	close:			null
+		Triggered when the popup is closed.
+		Callbacks recieve same data as select event and an additional number
+		of fields containing the current color in all supported color spaces.
+		These are rgb{}, hsv{}, cmyk{}, lab{}, hsl{} and a.
+		Most values are floating point numbers in range [0,1] for accuracy.
+		The a and b values in the lab color space have range [-1,1].
+
+	select:			null
+		Triggered on each change, confirmation (click on OK button) and
+		cancellation (click on Cancel, outside window or window close button)
+		respectively.
+
+		The event recieves a jQuery event object and a data object containing
+		the elements 'formatted' (with the color formatted according to
+		formatColor).
+
+		Note that select may be triggered in rapid succession when dragging
+		the mouse accross the map or bar and may be triggered without a change
+		in color upon specific user interactions.
+
+Methods:
+	open
+		Open the dialog
+
+	close
+		Close the dialog
+
+	destroy
+		Destroy the widget
+
+	setColor
+		Set the current color to the specified color. Accepts any
+		CSS-confirmant color specification.

js/jquery-colorpicker/TODO

@@ -0,0 +1,20 @@
+Fix the weird one-pixel vertical shift bug.
+	Caused by ui-widget class.
+	Only happens in Chrome and only on some, not all.
+	Disappears and re-appears at different zoom levels.
+In hex input, accept (and strip) '#' symbol on copy/past.
+Completely destroy object when closed.
+Enabled/disabled
+isRTL? What to RTL, besides button?
+Disable selection in MSIE: this.dialog.on('selectstart', function(event) { return false; })
+Special rendering mode for color_none? Use [X] images?
+Fix parsing from input with websafe colors
+Recognize "transparent" color name.
+Limit number of events triggered.
+Small size variant (128x128)
+isRTL? What to RTL, besides button?
+Undo/redo memory?
+ARIA support.
+Allow only set (dec/hex) characters in inputs
+Most-recently-used swatches
+HSL/HSV distance calculations should take into account cyclic hue.

js/jquery-colorpicker/i18n/jquery.ui.colorpicker-en.js

@@ -0,0 +1,27 @@
+jQuery(function($) {
+	$.colorpicker.regional['en'] = {
+		ok:				'OK',
+		cancel:			'Cancel',
+		none:			'None',
+		button:			'Color',
+		title:			'Pick a color',
+		transparent:	'Transparent',
+		hsvH:			'H',
+		hsvS:			'S',
+		hsvV:			'V',
+		rgbR:			'R',
+		rgbG:			'G',
+		rgbB:			'B',
+		labL:			'L',
+		labA:			'a',
+		labB:			'b',
+		hslH:			'H',
+		hslS:			'S',
+		hslL:			'L',
+		cmykC:			'C',
+		cmykM:			'M',
+		cmykY:			'Y',
+		cmykK:			'K',
+		alphaA:			'A'
+	};
+});

js/jquery-colorpicker/i18n/jquery.ui.colorpicker-fr.js

@@ -0,0 +1,27 @@
+jQuery(function($) {
+	$.colorpicker.regional['fr'] = {
+		ok:				'OK',
+		cancel:			'Annuler',
+		none:			'Aucune couleur',
+		button:			'Couleur',
+		title:			'Choisir une couleur',
+		transparent:	'Transparent',
+		hsvH:			'T',
+		hsvS:			'S',
+		hsvV:			'V',
+		rgbR:			'R',
+		rgbG:			'V',
+		rgbB:			'B',
+		labL:			'L',
+		labA:			'a',
+		labB:			'b',
+		hslH:			'T',
+		hslS:			'S',
+		hslL:			'L',
+		cmykC:			'C',
+		cmykM:			'M',
+		cmykY:			'J',
+		cmykK:			'N',
+		alphaA:			'A'
+	};
+});

js/jquery-colorpicker/i18n/jquery.ui.colorpicker-nl.js

@@ -0,0 +1,27 @@
+jQuery(function($) {
+	$.colorpicker.regional['nl'] = {
+		ok:				'OK',
+		cancel:			'Annuleren',
+		none:			'Geen',
+		button:			'Kleur',
+		title:			'Kies een kleur',
+		transparent:	'Transparant',
+		hsvH:			'H',
+		hsvS:			'S',
+		hsvV:			'V',
+		rgbR:			'R',
+		rgbG:			'G',
+		rgbB:			'B',
+		labL:			'L',
+		labA:			'a',
+		labB:			'b',
+		hslH:			'H',
+		hslS:			'S',
+		hslL:			'L',
+		cmykC:			'C',
+		cmykM:			'M',
+		cmykY:			'Y',
+		cmykK:			'K',
+		alphaA:			'A'
+	};
+});

js/jquery-colorpicker/index.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+    <head>
+        <title>jQuery Colorpicker</title>
+		<!-- jQuery/jQueryUI (hosted) -->
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
+		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
+        <style>
+			body {
+				font-family:	'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
+				font-size:		62.5%;
+			}
+        </style>
+		<script src="jquery.colorpicker.js"></script>
+		<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
+		<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
+    </head>
+    <body>
+		<h1>jQuery ColorPicker</h1>
+
+		<hr/>
+
+        Basic &lt;input&gt; example, without any options: <input type="text" class="cp-basic" value="fe9810"/>
+
+		<hr/>
+
+        Basic &lt;div&gt; example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
+		<script>
+           	$( function() {
+                $('.cp-basic').colorpicker();
+			});
+		</script>
+
+		<hr/>
+
+        Fully-featured example: <input type="text" class="cp-full" value="186aa7"/>
+		<script>
+           	$( function() {
+                $('.cp-full').colorpicker({
+					parts: 'full',
+					showOn: 'both',
+					buttonColorize: true,
+					showNoneButton: true,
+					alpha: true
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Localized to Dutch (nl): <input type="text" class="cp-nl" value="ccea73"/>
+		<script>
+           	$( function() {
+				$('.cp-nl').colorpicker({
+					regional: 'nl',
+					showNoneButton: true,
+					alpha: true
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Limit to websafe colors: <input type="text" class="cp-websafe" value="0fa7c2"/>
+		<script>
+           	$( function() {
+                $('.cp-websafe').colorpicker({
+					limit: 'websafe'
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Alternative field class: <input type="text" class="cp-alt" value="b762ae"/>
+		<span class="cp-alt-target" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
+			<div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background-color on outside, text color here</div>
+		</span>
+		<script>
+           	$( function() {
+                $('.cp-alt').colorpicker({
+					altField: '.cp-alt-target',
+					altProperties: 'background-color,color',
+					altAlpha: true,
+					alpha: true
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Events: <input type="text" class="cp-events" value="92b64a"/>
+		<div class="cp-events-log" style="vertical-align: top; display: inline-block; border: thin solid black; height: 10em; overflow-y: scroll; width: 50em;"></div>
+		<script>
+           	$( function() {
+				var count = 0;
+
+				function addToEventLog(label, message) {
+					var line = '<div>#'+(++count)+' '+label+': '+message+'</div>';
+					var log = $('.cp-events-log');
+					log.append(line).scrollTop(log[0].scrollHeight);
+				}
+
+                $('.cp-events').colorpicker({
+					init:			function(event, color) {
+										addToEventLog('Init', color.formatted);
+									},
+					select:			function(event, color) {
+										addToEventLog('Select', color.formatted);
+									},
+					close:			function(event, color) {
+										addToEventLog('Close', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
+									}
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Output formatting HSLA: <input type="text" class="cp-format" value="918237"/>
+		<span class="cp-format-output"></span>
+		<script>
+           	$( function() {
+                $('.cp-format').colorpicker({
+					colorFormat: 'HSLA',
+					alpha: true,
+					init: function(event, color) {
+								$('.cp-format-output').text(color.formatted);
+							},
+					select: function(event, color) {
+								$('.cp-format-output').text(color.formatted);
+							}
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Output format list: <input type="text" class="cp-name" value="a92fb4"/>
+		<span class="cp-name-output"></span>
+		<script>
+           	$( function() {
+                $('.cp-name').colorpicker({
+					parts: 'full',
+					colorFormat: ['NAME', 'EXACT', '#HEX3', 'RGB', 'RGBA'],
+					init: function(event, color) {
+								$('.cp-name-output').text(color.formatted);
+							},
+					select: function(event, color) {
+								$('.cp-name-output').text(color.formatted);
+							}
+				});
+			});
+		</script>
+
+		<hr/>
+
+		Dialog with Colorpicker popup (demonstrates z-index):
+		<button id="cp-dialog-open">Open dialog</button>
+		<div id="cp-dialog-modal" title="Basic modal dialog">
+			Basic &lt;input&gt; example, without any options: <input type="text" class="cp-basic" value="fe9810"/>
+			<br/>
+			Basic &lt;div&gt; example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
+		</div>
+		<script>
+			$(function() {
+				var dialog = $('#cp-dialog-modal').dialog({
+					autoOpen:	false,
+					minWidth:	500,
+					modal:		true,
+					buttons:	{	'Close': function() {
+										$(this).dialog('close');
+									}
+								}
+				});
+
+				$('#cp-dialog-open').click(function() {
+					dialog.dialog('open');
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Modal (and showCancelButton, closeOnEscape, showCloseButton): <input type="text" class="cp-modal" value="9ba73f"/>
+		<script>
+           	$( function() {
+                $('.cp-modal').colorpicker({
+					parts:				'draggable',
+					showCloseButton:	false,
+					modal:				true,
+					showCancelButton:	false,
+					closeOnEscape:		false
+				});
+			});
+		</script>
+
+		<hr/>
+
+        Input formatting: <input type="text" class="cp-input" value="rgb(123,42,87)"/>
+		<script>
+           	$( function() {
+                $('.cp-input').colorpicker({
+					colorFormat: ['RGBA']
+				});
+			});
+		</script>
+    </body>
+</html>

js/jquery-colorpicker/jquery.colorpicker.css

@@ -0,0 +1,199 @@
+.ui-colorpicker,
+.ui-dialog.ui-colorpicker {
+	width:					auto;
+    white-space:			nowrap;
+
+	-webkit-touch-callout:	none;
+	-webkit-user-select:	none;
+	-khtml-user-select:		none;
+	-moz-user-select:		none;
+	-ms-user-select:		none;
+	user-select:			none;
+}
+
+.ui-colorpicker-inline {
+    position:				static;
+}
+
+.ui-colorpicker-buttonset {
+	float:					left;
+	margin-left:			.4em;
+}
+
+.ui-colorpicker-buttonset .ui-button {
+	margin:					.5em 0 .5em 0;
+	cursor:					pointer;
+}
+
+.ui-colorpicker-buttonpane {
+	background-image:		none;
+	margin:					.7em 0 0 0;
+	padding:				0 .2em;
+	border-left:			0;
+	border-right:			0;
+	border-bottom:			0;
+}
+
+.ui-colorpicker-buttonpane button {
+	float:					right;
+	margin:					.5em .2em .4em;
+	cursor:					pointer;
+	padding:				.2em .6em .3em .6em;
+	width:					auto;
+	overflow:				visible;
+}
+
+.ui-colorpicker-buttonpane button.ui-colorpicker-current {
+	float:					left;
+}
+
+.ui-colorpicker table {
+    font-size:				100%; /* Reset browser table font-size */
+	margin:					0;
+}
+
+.ui-colorpicker table td {
+	vertical-align:			top;
+}
+
+.ui-colorpicker-padding-left {
+	padding-left:			10px;
+}
+.ui-colorpicker-padding-top {
+	padding-top:			10px;
+}
+
+.ui-colorpicker-border {
+	border:					1px inset;
+    display:				inline-block;
+}
+
+/* Bar & map */
+.ui-colorpicker-map > *,
+.ui-colorpicker-bar > * {
+    position:				absolute;
+	cursor:					crosshair;
+}
+
+.ui-colorpicker-map-pointer,
+.ui-colorpicker-bar-pointer {
+    position:				absolute;
+}
+/* Map */
+.ui-colorpicker-map,
+.ui-colorpicker-map > * {
+    display:				block;
+	width:					256px;
+	height:					256px;
+	overflow:				hidden;
+}
+
+.ui-colorpicker-map-layer-1,
+.ui-colorpicker-map-layer-2 {
+	background:				url(images/map.png) no-repeat;
+}
+
+.ui-colorpicker-map-layer-alpha {
+	background:				url(images/map-opacity.png);
+}
+
+.ui-colorpicker-map-pointer {
+	display:				inline-block;
+	width:					15px;
+	height:					15px;
+	background:				url(images/map-pointer.png) no-repeat;
+}
+
+/* Bar */
+.ui-colorpicker-bar,
+.ui-colorpicker-bar > * {
+    display:				block;
+    width:					20px;
+    height:					256px;
+	overflow:				hidden;
+    background-repeat:		repeat-x;
+}
+
+.ui-colorpicker-bar-layer-1,
+.ui-colorpicker-bar-layer-2,
+.ui-colorpicker-bar-layer-3,
+.ui-colorpicker-bar-layer-4 {
+	background:				url(images/bar.png) repeat-x;
+}
+
+.ui-colorpicker-bar-layer-alpha {
+	background:				url(images/bar-opacity.png);
+}
+
+.ui-colorpicker-bar-layer-alphabar {
+	background:				url(images/bar-alpha.png);
+}
+
+.ui-colorpicker-bar-pointer {
+	display:				inline-block;
+	width:					20px;
+	height:					7px;
+	background:				url(images/bar-pointer.png) no-repeat;
+}
+
+/* Preview */
+.ui-colorpicker-preview {
+	text-align:				center;
+}
+
+.ui-colorpicker-preview-initial {
+    cursor:					pointer;
+}
+
+.ui-colorpicker-preview-initial,
+.ui-colorpicker-preview-current {
+    width:					50px;
+    height:					20px;
+    display:				inline-block;
+}
+
+.ui-colorpicker-preview-initial-alpha,
+.ui-colorpicker-preview-current-alpha {
+    width:					50px;
+    height:					20px;
+    display:				inline-block;
+	background:				url(images/preview-opacity.png) repeat;
+}
+
+/* Inputs */
+.ui-colorpicker-rgb label,
+.ui-colorpicker-hsv label,
+.ui-colorpicker-hsl label,
+.ui-colorpicker-lab label,
+.ui-colorpicker-cmyk label,
+.ui-colorpicker-alpha label {
+    width:					1.5em;
+    display:				inline-block;
+}
+
+.ui-colorpicker-number {
+	margin:					.1em;
+	width:					4em;
+}
+
+/* Hex */
+.ui-colorpicker-hex {
+	text-align:				center;
+}
+
+/* Swatches */
+.ui-colorpicker-swatches {
+	width:					84px;
+	height:					256px;
+	overflow:				auto;
+	background-color:		#f8f8f8;
+}
+
+.ui-colorpicker-swatch {
+	cursor:					pointer;
+	float:					left;
+	width:					11px;
+	height:					11px;
+    border-right:			1px solid black;
+    border-bottom:			1px solid black;
+}