From 32d23e31788258d70bf34f4228b175b45a5c8823 Mon Sep 17 00:00:00 2001
From: peterd <peter@dematte.at>
Date: Thu, 5 Feb 2015 12:52:39 +0100
Subject: [PATCH] Demo improvements

---
 index.css  |  18 +++++-
 index.html | 166 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 168 insertions(+), 16 deletions(-)

diff --git a/index.css b/index.css
index 155d5d3..cbb3b7f 100644
--- a/index.css
+++ b/index.css
@@ -34,11 +34,12 @@ pre {
 	position: relative;
 	display: inline-block;
 	width: 40px;
-	padding: 5px;
+	padding: 4px;
 	height: 25px;
 	border: 1px solid #666;
 	border-radius: 2px;
 	background: #eee;
+	box-shadow: inset 0 -17px 8px rgba(0,0,0,0.3), inset 0 -4px 7px rgba(0,0,0,0.3);
 }
 .div-toggles .color:after {
 	content: "";
@@ -50,6 +51,20 @@ pre {
 	border: 5px solid;
 	border-color: #000 transparent transparent;
 }
+.div-toggles .color:before {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 50%;
+	right: 4px;
+	margin-top: -1px;
+	border: 5px solid;
+	border-color: #eee transparent transparent;
+}
+.div-toggles .active:before {
+	margin-top: -7px;
+	border-color: transparent transparent #eee;
+}
 .div-toggles .active:after {
 	margin-top: -8px;
 	border-color: transparent transparent #000;
@@ -62,5 +77,6 @@ pre {
 }
 .div-toggles .color div div {
 	border: 1px solid #666;
+	border-color: #666 #ccc #ccc #666;
 	background: #aaa;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index a27cbf0..a9e59a1 100644
--- a/index.html
+++ b/index.html
@@ -34,9 +34,9 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
 	<input class="color" value="hsl(32, 95%, 23%)" />
 </div>
 <div class="div-toggles">
-	<div class="color trigger" value="#44A647"><div><div></div></div></div>
+	<div class="color trigger" value="#556B2F"><div><div></div></div></div>
 	<div class="color trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
-	<div class="color trigger" value="hsl(167, 29%, 68%)"><div><div></div></div></div>
+	<div class="color trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
 </div>
 <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>
@@ -73,9 +73,9 @@ window.myColorPicker = $('input.color').colorPicker({
 <p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
 <!-- <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> -->
+<!-- <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>
 <script type="text/javascript">
 	(function(window, undefined){
 		'use strict';
@@ -287,8 +287,148 @@ window.myColorPicker = $('input.color').colorPicker({
 		// skinned similar to dev tools color picker (but then way smaller and faster...)
 		plugin.dev_skinned = {
 			customBG: '#222',
-			margin: '5px -2px',
+			margin: '5px 0px',
 			doRender: 'div div',
+			colorNames: {
+				'191970': 'midnightblue',
+				'696969': 'dimgrey',
+				'708090': 'slategrey',
+				'778899': 'lightslategrey',
+				'800000': 'maroon',
+				'800080': 'purple',
+				'808000': 'olive',
+				'808080': 'grey',
+				'F0F8FF': 'aliceblue',
+				'FAEBD7': 'antiquewhite',
+				'00FFFF': 'cyan',
+				'7FFFD4': 'aquamarine',
+				'F0FFFF': 'azure',
+				'F5F5DC': 'beige',
+				'FFE4C4': 'bisque',
+				'000000': 'black',
+				'FFEBCD': 'blanchedalmond',
+				'0000FF': 'blue',
+				'8A2BE2': 'blueviolet',
+				'A52A2A': 'brown',
+				'DEB887': 'burlywood',
+				'5F9EA0': 'cadetblue',
+				'7FFF00': 'chartreuse',
+				'D2691E': 'chocolate',
+				'FF7F50': 'coral',
+				'6495ED': 'cornflowerblue',
+				'FFF8DC': 'cornsilk',
+				'DC143C': 'crimson',
+				'00008B': 'darkblue',
+				'008B8B': 'darkcyan',
+				'B8860B': 'darkgoldenrod',
+				'A9A9A9': 'darkgrey',
+				'006400': 'darkgreen',
+				'BDB76B': 'darkkhaki',
+				'8B008B': 'darkmagenta',
+				'556B2F': 'darkolivegreen',
+				'FF8C00': 'darkorange',
+				'9932CC': 'darkorchid',
+				'8B0000': 'darkred',
+				'E9967A': 'darksalmon',
+				'8FBC8F': 'darkseagreen',
+				'483D8B': 'darkslateblue',
+				'2F4F4F': 'darkslategrey',
+				'00CED1': 'darkturquoise',
+				'9400D3': 'darkviolet',
+				'FF1493': 'deeppink',
+				'00BFFF': 'deepskyblue',
+				'1E90FF': 'dodgerblue',
+				'B22222': 'firebrick',
+				'FFFAF0': 'floralwhite',
+				'228B22': 'forestgreen',
+				'FF00FF': 'magenta',
+				'DCDCDC': 'gainsboro',
+				'F8F8FF': 'ghostwhite',
+				'FFD700': 'gold',
+				'DAA520': 'goldenrod',
+				'008000': 'green',
+				'ADFF2F': 'greenyellow',
+				'F0FFF0': 'honeydew',
+				'FF69B4': 'hotpink',
+				'CD5C5C': 'indianred',
+				'4B0082': 'indigo',
+				'FFFFF0': 'ivory',
+				'F0E68C': 'khaki',
+				'E6E6FA': 'lavender',
+				'FFF0F5': 'lavenderblush',
+				'7CFC00': 'lawngreen',
+				'FFFACD': 'lemonchiffon',
+				'ADD8E6': 'lightblue',
+				'F08080': 'lightcoral',
+				'E0FFFF': 'lightcyan',
+				'FAFAD2': 'lightgoldenrodyellow',
+				'D3D3D3': 'lightgrey',
+				'90EE90': 'lightgreen',
+				'FFB6C1': 'lightpink',
+				'FFA07A': 'lightsalmon',
+				'20B2AA': 'lightseagreen',
+				'87CEFA': 'lightskyblue',
+				'B0C4DE': 'lightsteelblue',
+				'FFFFE0': 'lightyellow',
+				'00FF00': 'lime',
+				'32CD32': 'limegreen',
+				'FAF0E6': 'linen',
+				'66CDAA': 'mediumaquamarine',
+				'0000CD': 'mediumblue',
+				'BA55D3': 'mediumorchid',
+				'9370DB': 'mediumpurple',
+				'3CB371': 'mediumseagreen',
+				'7B68EE': 'mediumslateblue',
+				'00FA9A': 'mediumspringgreen',
+				'48D1CC': 'mediumturquoise',
+				'C71585': 'mediumvioletred',
+				'F5FFFA': 'mintcream',
+				'FFE4E1': 'mistyrose',
+				'FFE4B5': 'moccasin',
+				'FFDEAD': 'navajowhite',
+				'000080': 'navy',
+				'FDF5E6': 'oldlace',
+				'6B8E23': 'olivedrab',
+				'FFA500': 'orange',
+				'FF4500': 'orangered',
+				'DA70D6': 'orchid',
+				'EEE8AA': 'palegoldenrod',
+				'98FB98': 'palegreen',
+				'AFEEEE': 'paleturquoise',
+				'DB7093': 'palevioletred',
+				'FFEFD5': 'papayawhip',
+				'FFDAB9': 'peachpuff',
+				'CD853F': 'peru',
+				'FFC0CB': 'pink',
+				'DDA0DD': 'plum',
+				'B0E0E6': 'powderblue',
+				'FF0000': 'red',
+				'BC8F8F': 'rosybrown',
+				'4169E1': 'royalblue',
+				'8B4513': 'saddlebrown',
+				'FA8072': 'salmon',
+				'F4A460': 'sandybrown',
+				'2E8B57': 'seagreen',
+				'FFF5EE': 'seashell',
+				'A0522D': 'sienna',
+				'C0C0C0': 'silver',
+				'87CEEB': 'skyblue',
+				'6A5ACD': 'slateblue',
+				'FFFAFA': 'snow',
+				'00FF7F': 'springgreen',
+				'4682B4': 'steelblue',
+				'D2B48C': 'tan',
+				'008080': 'teal',
+				'D8BFD8': 'thistle',
+				'FF6347': 'tomato',
+				'40E0D0': 'turquoise',
+				'EE82EE': 'violet',
+				'F5DEB3': 'wheat',
+				'FFFFFF': 'white',
+				'F5F5F5': 'whitesmoke',
+				'FFFF00': 'yellow',
+				'9ACD32': 'yellowgreen'
+			},
 
 			buidCallback: function($elm) {
 				var that = this;
@@ -296,11 +436,8 @@ window.myColorPicker = $('input.color').colorPicker({
 				$elm.append('<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
 				$('.trigger').on('click', function(e) {
 					if (e.target === this && $(this).hasClass('active')) {
-						if (typeof e.stopPropagation != "undefined") {
-							e.stopPropagation();
-						} else {
-							e.cancelBubble = true;
-						}
+						e.cancelBubble = true;
+						e.stopPropagation && e.stopPropagation();
 						that.toggle();
 					}
 				})
@@ -316,11 +453,11 @@ window.myColorPicker = $('input.color').colorPicker({
 				'.cp-color-picker{border:1px solid #999; padding:8px; box-shadow:5px 5px 16px rgba(0,0,0,0.4);' +
 					'background:#eee; overflow:visible; border-radius:3px;}' +
 				'.cp-color-picker:after{content:""; display:block; ' +
-					'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
+					'position:absolute; top:-15px; left:8px; border:8px solid #eee;' +
 					'border-color: transparent transparent #eee}' +
 				// simulate border...
 				'.cp-color-picker:before{content:""; display:block; ' +
-					'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
+					'position:absolute; top:-16px; left:8px; border:8px solid #eee;' +
 					'border-color: transparent transparent #999}' +
 				'.cp-xy-slider{border:1px solid #aaa; margin-bottom:10px; width:150px; height:150px;}' +
 				'.cp-xy-slider:active{cursor:none;}' +
@@ -341,7 +478,7 @@ window.myColorPicker = $('input.color').colorPicker({
 					rgb = colors.RND.rgb;
 
 				$('.cp-patch div').css({'background-color': $elm.css('background-color')});
-				$('.cp-disp').text($elm.val());
+				$('.cp-disp').text(this.color.options.colorNames[colors.HEX] || $elm.val());
 				if (toggled === true) {
 					// here you can recalculate position after showing the color picker
 					// in case it doesn't fit into view.
@@ -351,7 +488,6 @@ window.myColorPicker = $('input.color').colorPicker({
 					$elm.closest('.color').removeClass('active');
 				}
 			}
-
 		};