New swatches method

index.html

@@ -15,6 +15,7 @@
 		<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>
+		<script src="swatches/jquery.ui.colorpicker-pantone.js"></script>
 
 		<script>
 			$(function() {
@@ -40,6 +41,8 @@ <h1>jQuery ColorPicker</h1>
 			  <li><a href="#tab-dialog">In a dialog</a></li>
 			  <li><a href="#tab-modal">Modal</a></li>
 			  <li><a href="#tab-no-inline">Any element to popup</a></li>
+			  <li><a href="#tab-layout">Custom layout</a></li>
+			  <li><a href="#tab-pantone">Custom swatches</a></li>
 			</ul>
 
 			<div id="tab-input">
@@ -89,7 +92,7 @@ <h2>Output formatting HSLA</h2>
 
 			<div id="tab-format-list">
 				<h2>Output format list</h2>
-				You can specify a list of output formats, the first perfect match for the color is output.
+				You can specify a list of output formats, the first perfect match for the color is output.<br/>
 				<input type="text" class="cp-name" value="a92fb4"/>
 				<span class="cp-name-output"></span>
 			</div>
@@ -111,14 +114,27 @@ <h2>Modal (and showCancelButton, closeOnEscape, showCloseButton)</h2>
 
 			<div id="tab-input-format">
 				<h2>Input formatting</h2>
-				Demonstrates the ability to parse common color formats as input.
+				Demonstrates the ability to parse common color formats as input.<br/>
 				<input type="text" class="cp-input" value="rgb(123,42,87)"/>
 			</div>
 
 			<div id="tab-no-inline">
 				<h2>Popup from any element (&lt;em&gt;)</h2>
 				Just click on this <em>Emphasized</em> word to show the colorpicker. 
 			</div>
+
+			<div id="tab-layout">
+				<h2>Custom layout</h2>
+				It's easy to arrange a new layout for the dialog. Especially handy when used in a sidebar.<br/>
+				<input type="text" class="cp-layout" value="92b7a5"/>
+			</div>
+
+			<div id="tab-pantone">
+				<h2>Custom swatches</h2>
+				Use the Pantone PMS colors as swatches<br/>
+				<input type="text" class="cp-pantone" value="242"/>
+				<span class="cp-pantone-output"></span>
+			</div>
 		</div>
 
 		<script>
@@ -223,6 +239,37 @@ <h2>Popup from any element (&lt;em&gt;)</h2>
                 $('em').colorpicker({
 					inline: false
 				});
+
+                $('.cp-layout').colorpicker({
+					parts:	['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'swatches', 'footer'],
+					alpha: true,
+					layout: {
+						hex:		[0, 0, 2, 1],
+						preview:	[2, 0, 1, 1],
+						map:		[0, 1, 3, 1],	// Left, Top, Width, Height (in table cells).
+						bar:		[0, 2, 1, 4],
+						swatches:	[2, 2, 1, 4],
+						rgb:		[1, 2, 1, 1],
+						hsv:		[1, 3, 1, 1],
+						alpha:		[1, 4, 1, 1],
+						lab:		[0, 5, 1, 1],
+						cmyk:		[1, 5, 1, 2]
+					}
+				});
+
+                $('.cp-pantone').colorpicker({
+					parts:			'full',
+					swatches:		'pantone',
+					colorFormat:	'NAME',
+					swatchesWidth:	173,
+					limit:			'name',
+					init:			function(event, color) {
+										$('.cp-pantone-output').text(color.formatted);
+									},
+					select:			function(event, color) {
+										$('.cp-pantone-output').text(color.formatted);
+									}
+				});
 			});
 		</script>
     </body>

jquery.colorpicker.css

@@ -183,7 +183,6 @@
 
 /* Swatches */
 .ui-colorpicker-swatches {
-	width:					84px;
 	height:					256px;
 	overflow:				auto;
 	background-color:		#f8f8f8;