minor changes

buildView - shortened
devPicker - added
colorPicker.css - IE7 fixes
indec.js - IE8 imagePath support

README.md

@@ -56,6 +56,7 @@ var myColorPicker = new ColorPicker({
     XYZReference: ..., // see Colors...
     grey: ..., // see Colors...
     luminance: ..., // see Colors...
+    devPicker: false // uses existing HTML instead of internal template for developing
     renderCallback: // function(colors, mode){}, // callback on after rendering (for further rendering outside colorPicker)
     actionCallback: function(e, action){}, // callback on any action within colorPicker (buttons, sliders, ...)
     convertCallback: function(colors, type){}, // see Colors...

colorPicker.js

@@ -68,7 +68,8 @@
 				CSSPrefix: 'cp-',
 				allMixDetails: true,
 				alphaBG: 'w',
-				imagePath: '',
+				imagePath: ''
+				// devPicker: false // uses existing HTML for development...
 				// noAlpha: true,
 				// customBG: '#808080'
 				// size: 0,
@@ -281,9 +282,23 @@
 
 	function buildView(THIS) {
 		var app = document.createElement('div'),
-			style,
 			prefix = _options.CSSPrefix,
-			urlData = 'data:image/png;base64,';
+			urlData = 'data:image/png;base64,',
+			addStyleSheet = function(cssText, id) {
+				var style = document.createElement('style');
+
+				style.setAttribute('type', 'text/css');
+				if (id) {
+					style.setAttribute('id', id);
+				}
+				if (!style.styleSheet) {
+					style.appendChild(document.createTextNode(cssText));
+				}
+				document.getElementsByTagName('head')[0].appendChild(style);
+				if (style.styleSheet) { // IE compatible
+					document.styleSheets[document.styleSheets.length-1].cssText = cssText;
+				}
+			};
 
 		// development mode
 		if (_devMode) {
@@ -301,28 +316,15 @@
 		// CSS
 		if (!document.getElementById('colorPickerCSS')) { // only once needed
 			// CSS - system
-			style = document.createElement('style');
-			style.setAttribute('type', 'text/css');
-			style.setAttribute('id', 'colorPickerCSS');
-
 			_data._cssFunc = _data._cssFunc.
 				replace(/§/g, prefix).
 				replace('_patches.png', !_isIE ? urlData + _data._patchesPng : _options.imagePath + '_patches.png').
 				replace('_vertical.png', !_isIE ? urlData + _data._verticalPng : _options.imagePath + '_vertical.png').
 				replace('_horizontal.png', !_isIE ? urlData + _data._horizontalPng :
 					_options.imagePath + '_horizontal.png');
-			if (!style.styleSheet) {
+			addStyleSheet(_data._cssFunc, 'colorPickerCSS');
-				style.appendChild(document.createTextNode(_data._cssFunc));
-			}
-			document.getElementsByTagName('head')[0].appendChild(style);
-			if (style.styleSheet) { // IE compatible
-				document.styleSheets[document.styleSheets.length-1].cssText = _data._cssFunc;
-			}
-
 			// CSS - main
 			if (!_options.customCSS) {
-				style = document.createElement('style');
-				style.setAttribute('type', 'text/css');
 				_data._cssMain = _data._cssMain.
 					replace(/§/g, prefix).
 					replace('_bgs.png', !_isIE ? urlData + _data._bgsPng : _options.imagePath + '_bgs.png').
@@ -330,20 +332,14 @@
 					replace('_blank.png', !_isIE ? urlData + _data._blankPng : _options.imagePath + '_blank.cur').
 					replace('"Courier New",', !_isIE ? '' : '"Courier New",');
 				// style.appendChild(document.createTextNode(_data._cssFunc));
-				if (!style.styleSheet) {
+				addStyleSheet(_data._cssMain);
-					style.appendChild(document.createTextNode(_data._cssMain));
-				}
-				document.getElementsByTagName('head')[0].appendChild(style);
-				if (style.styleSheet) { // IE compatible
-					document.styleSheets[document.styleSheets.length-1].cssText = _data._cssMain;
-				}
 			}
 			for (var n in _data) { // almost 25k of memory ;o)
 				_data[n] = null;
 			}
 		}
 
-		app.children[0].style.cssText = _options.initStyle || '';
+		app.children[0].style.cssText = _options.initStyle || ''; // for initial hiding...
 
 		return (_options.appenTo || document.body).appendChild(app.children[0]);
 	}

developer/colorPicker.css

@@ -328,7 +328,7 @@
 	top: 10px;
 	right: 10px;
 	bottom: 10px;
-	width: 96px;
+	width: 94px;
 	background-color: #333;
 	border: 1px solid;
 	border-color: #222 #555 #555 #222;
@@ -429,11 +429,15 @@
 .cp-panel .hsl-mode {
 	position: absolute;
 	right: 0;
-	top: 0; /* IE 7 */
+	top: 1px; /* IE 7 */
-	height: 52px;
+	height: 50px;
+}
+.cp-panel .hsv-mode,
+.cp-panel .hsl-mode {
+	top: 2px; /* IE 7 */
 }
 .cp-panel .cmyk-mode {
-	height: 70px;
+	height: 68px;
 }
 .hsl-h .hsl-h-labl,
 .hsl-s .hsl-s-labl,
@@ -572,7 +576,7 @@
 	border: 1px solid;
 	border-color: #555 #222 #222 #555;
 	float: left;
-	width: 47px; width: 46px; /* IE7 */
+	width: 47px; width: 45px; /* IE7 */
 	line-height: 28px;
 	text-align: center;
 	top: 0;

index.js

@@ -4,6 +4,7 @@
 
 	if (1 === 2) { // to run ColorPicker on its own....
 		myColor = window.myColor = new window.ColorPicker({
+			imagePath: 'images/' // IE8-
 			// customCSS: true
 		});
 		return;
@@ -423,7 +424,7 @@
 		renderCallback = doRender,
 		// finally the instance of either ColorPicker or Colors (export for debugging purposes)
 		color_ColorPicker = new (ColorPicker || Colors)({
-			customBG: '#808080',
+			customBG: '#808080'
 			// renderCallback: renderCallback, // doesn't work in Colors, but also doesn't matter
 			// convertCallback: function(color, type){console.log(color, type)}
 			// resizeCallback: function(e, value, scale, original){console.log(e, value, scale, original)}