Add touch events + corrections (IE8-...) + class prefix isolation + improvements

colorPicker.js

@@ -1,8 +1,9 @@
-;(function(window, undefined){
+;(function(window, namespace){
 	"use strict"
 
-	var _data = window.ColorPicker, // will be deleted in buildView() and holds:
-		// window.ColorPicker = { // comes from colorPicker.data.js and will be overwritten.
+	var	document = window.document,
+		_data = namespace.ColorPicker, // will be deleted in buildView() and holds:
+		// namespace.ColorPicker = { // comes from colorPicker.data.js and will be overwritten.
 		// 	_html: ..., // holds the HTML markup of colorPicker
 		// 	_cssFunc: ..., // CSS for all the sliders
 		// 	_cssMain: ..., // CSS of the GUI
@@ -68,7 +69,8 @@
 				mode: 'rgb-b',
 				fps: 60, // 1000 / 60 = ~16.7ms
 				delayOffset: 8,
-				CSSPrefix: 'cp-',
+				CSSPrefixIsolate: '',	//prevent classes with higher weight
+				CSSPrefix: 'cp-',	//for internal classes
 				allMixDetails: true,
 				alphaBG: 'w',
 				imagePath: ''
@@ -104,10 +106,10 @@
 				// actionCallback: undefined,
 				// convertCallback: undefined,
 			};
-			initInstance(this, options || {});
+			initInstance(this, options || {});
 		};
 
-	window.ColorPicker = ColorPicker; // export differently
+	namespace.ColorPicker = ColorPicker; // export differently
 	ColorPicker.addEvent = addEvent;
 	ColorPicker.removeEvent = removeEvent;
 	ColorPicker.getOrigin = getOrigin;
@@ -198,7 +200,7 @@
 				memory[n] = {r: tmp[0], g: tmp[1], b: tmp[2], a: tmp[3]}
 			}
 			memos[n].style.cssText = 'background-color: ' + (memory && memory[n] !== undefined ?
-				color2string(memory[n]) + ';' + getOpacityCSS(memory[n]['a'] || 1) : 'rgb(0,0,0);');
+				color2string(memory[n]) + ';' + getOpacityCSS(memory[n]['a'] || 1) : 'rgb(0,0,0);');
 		}
 	};
 
@@ -215,7 +217,7 @@
 		}
 		_isIE = document.createStyleSheet !== undefined && document.getElementById || !!window.MSInputMethodContext;
 		_doesOpacity = typeof document.body.style.opacity !== 'undefined';
-		_colorInstance = new Colors(THIS.options);
+		_colorInstance = new namespace.Colors(THIS.options);
 		// We transfer the responsibility to the instance of Color (to save space and memory)
 		delete THIS.options;
 		_options = _colorInstance.options;
@@ -301,25 +303,27 @@
 	function buildView(THIS) {
 		var app = document.createElement('div'),
 			prefix = _options.CSSPrefix,
+			prefixIsolate = _options.CSSPrefixIsolate ? _options.CSSPrefixIsolate+' ':'',
 			urlData = 'data:image/png;base64,',
 			addStyleSheet = function(cssText, id) {
-				var style = document.createElement('style');
+				var style = document.createElement('style'),
+					head = document.head || document.getElementsByTagName("head")[0] || document.body;
 
 				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;
+					style.styleSheet.cssText = cssText;
+				} else { //other browsers
+					style.innerHTML = cssText;
 				}
+				head.appendChild(style);
 			},
 			processCSS = function(doesBAS64){
 				// CSS - system
 				_data._cssFunc = _data._cssFunc.
+					replace(/‰/g, prefixIsolate).
 					replace(/§/g, prefix).
 					replace('_patches.png', doesBAS64 ? urlData + _data._patchesPng : _options.imagePath + '_patches.png').
 					replace('_vertical.png', doesBAS64 ? urlData + _data._verticalPng : _options.imagePath + '_vertical.png').
@@ -329,6 +333,7 @@
 				// CSS - main
 				if (!_options.customCSS) {
 					_data._cssMain = _data._cssMain.
+						replace(/‰/g, prefixIsolate).
 						replace(/§/g, prefix).
 						replace('_bgs.png', doesBAS64 ? urlData + _data._bgsPng : _options.imagePath + '_bgs.png').
 						replace('_icons.png', doesBAS64 ? urlData + _data._iconsPng : _options.imagePath + '_icons.png').
@@ -440,7 +445,10 @@
 	function installEventListeners(THIS, off) {
 		var onOffEvent = off ? removeEvent : addEvent;
 
-		onOffEvent(_nodes.colorPicker, 'mousedown', function(e) {
+		onOffEvent(_isIE ? document.body : window, 'mouseup', stopChange);
+		onOffEvent(_isIE ? document.body : window, 'touchend', stopChange);
+
+		function touchStart_MouseDown(e) {
 			var event = e || window.event,
 				page = getPageXY(event),
 				target = (event.button || event.which) < 2 ?
@@ -494,6 +502,7 @@
 				_mainTarget.style.display = ''; // ??? for resizer...
 				_mouseMoveAction(event);
 				addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
+				addEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
 				_renderTimer = window[requestAnimationFrame](renderAll);
 			} else {
 				// console.log(className)
@@ -506,7 +515,10 @@
 				return preventDefault(event);
 				// document.activeElement.blur();
 			}
-		});
+		};
+
+		onOffEvent(_nodes.colorPicker, 'mousedown', touchStart_MouseDown);
+		onOffEvent(_nodes.colorPicker, 'touchstart', touchStart_MouseDown);
 
 		onOffEvent(_nodes.colorPicker, 'click', function(e) {
 			focusInstance(THIS);
@@ -530,8 +542,6 @@
 		});
 	}
 
-	addEvent(_isIE ? document.body : window, 'mouseup', stopChange);
-
 	// ------------------------------------------------------ //
 	// --------- Event listner's callback functions  -------- //
 	// -------------------------------------------------------//
@@ -546,6 +556,7 @@
 			// }
 			window[cancelAnimationFrame](_renderTimer);
 			removeEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
+			removeEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
 			if (_delayState) { // hapens on inputs
 				_valueType = {type: 'alpha'};
 				renderAll();
@@ -884,7 +895,7 @@
 		// think this over again, does this need to be like this??
 		if (buttonAction) {
 			preRenderAll(_colors);
-			_mouseMoveAction = _mouseMoveAction || true; // !!!! search for: // this is dirty...
+			_mouseMoveAction = _mouseMoveAction || true; // !!!! search for: // this is dirty...
 			stopChange(e, buttonAction);
 		}
 	}
@@ -1036,7 +1047,7 @@
 			colors['rgbaMixBGMix' + bgType].WCAG2Ratio >= 7 ? 'green' :
 			colors['rgbaMixBGMix' + bgType].WCAG2Ratio >= 4.5 ? 'orange': '';
 		renderVars.noRGBZ = _options['no' + _options.mode.type.toUpperCase() + _options.mode.z] ?
-			(_options.mode.z === 'g' && colors.rgb.g < 0.59 || _options.mode.z === 'b' || _options.mode.z === 'r' ?
+			(_options.mode.z === 'g' && colors.rgb.g < 0.59 || _options.mode.z === 'b' || _options.mode.z === 'r' ?
 			'dark' : 'light') : undefined;
 	}
 
@@ -1152,9 +1163,9 @@
 			colors._rgb.b !== colors.rgb.b
 		] : [];
 		if (tmp.join('') !== cashedVars.outOfGammut) {
-			nodes.rgb_r_labl.firstChild.data = tmp[0] ? '!' : ' ';
-			nodes.rgb_g_labl.firstChild.data = tmp[1] ? '!' : ' ';
-			nodes.rgb_b_labl.firstChild.data = tmp[2] ? '!' : ' ';
+			nodes.rgb_r_labl.firstChild.data = tmp[0] ? '!' : '.';
+			nodes.rgb_g_labl.firstChild.data = tmp[1] ? '!' : '.';
+			nodes.rgb_b_labl.firstChild.data = tmp[2] ? '!' : '.';
 			cashedVars.outOfGammut = tmp.join('');
 		}
 		if (renderVars.noRGBZ) {
@@ -1290,16 +1301,18 @@
 	}
 
 	function getPageXY(e) {
-		var doc = window.document;
+		var doc = window.document,
+			_e = (typeof e.changedTouches !== 'undefined' && e.changedTouches.length)?
+					e.changedTouches[0] : e;
 
 		return {
-			X: e.pageX || e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
-			Y: e.pageY || e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
+			X: _e.pageX || _e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
+			Y: _e.pageY || _e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
 		};
 	}
 
 	function addEvent(obj, type, func) {
-		addEvent.cache = addEvent.cache || {
+		addEvent.cache = addEvent.cache || {
 			_get: function(obj, type, func, checkOnly) {
 				var cache = addEvent.cache[type] || [];
 
@@ -1411,4 +1424,4 @@
 		return _renderTimer = null;
 	};
 
-})(window);
+})(window, CPNamespace||window);

colors.js

@@ -44,7 +44,7 @@
 				// convertCallback: undefined,
 				// allMixDetails: false
 			};
-			initInstance(this, options || {});
+			initInstance(this, options || {});
 		},
 		initInstance = function(THIS, options) {
 			var matrix,
@@ -156,7 +156,7 @@
 	};
 
 	Colors.prototype.toString = function(colorMode, forceAlpha) {
-		return ColorConverter.color2text((colorMode || 'rgb').toLowerCase(), this.colors, forceAlpha);
+		return ColorConverter.color2text((colorMode || 'rgb').toLowerCase(), this.colors, forceAlpha);
 	};
 
 
@@ -374,12 +374,12 @@
 		color2text: function(colorMode, colors, forceAlpha) {
 			var alpha = forceAlpha !== false && _math.round(colors.alpha * 100) / 100,
 				hasAlpha = typeof alpha === 'number' &&
-					forceAlpha !== false && (forceAlpha || alpha !== 1),
+					forceAlpha !== false && (forceAlpha || alpha !== 1),
 				RGB = colors.RND.rgb,
 				HSL = colors.RND.hsl,
 				shouldBeHex = colorMode === 'hex' && hasAlpha,
 				isHex = colorMode === 'hex' && !shouldBeHex,
-				isRgb = colorMode === 'rgb' || shouldBeHex,
+				isRgb = colorMode === 'rgb' || shouldBeHex,
 				innerText = isRgb ? RGB.r + ', ' + RGB.g + ', ' + RGB.b :
 					!isHex ? HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' :
 					'#' + colors.HEX;
@@ -729,4 +729,4 @@
 		// return Math.max(min, Math.min(max, value)); // faster??
 		return (value > max ? max : value < min ? min : value);
 	}
-})(window);
+})(window, CPNamespace||window);

index.html

@@ -11,8 +11,7 @@
 <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
 <!-- <link href="developer/colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
 <!-- <link href="developer/colorPicker.css" rel="stylesheet" type="text/css"> -->
-<link href="index.css" rel="stylesheet" type="text/css">
-<title>colorPicker_new</title>
+<link href="index.css" rel="stylesheet" type="text/css"><title>colorPicker_new</title>
 </head>
 
 <body>
@@ -22,15 +21,13 @@
 <div id="contrastPatch"><div></div><i>-Test-</i></div>
 
 <div id="colorValues">.</div>
-
 <div id="sliders" class="sliders">
   <div id="rgbr"><div></div></div>
   <div id="rgbg"><div></div></div>
   <div id="rgbb"><div></div></div>
 
   <div id="hslh"><div></div></div>
-  <div id="hsls"><div></div></div>
-  <div id="hsll"><div></div></div>
+  <div id="hsls"><div></div></div>  <div id="hsll"><div></div></div>
 
 <!--   <div id="LabL"><div></div></div>
   <div id="Laba"><div></div></div>
@@ -70,6 +67,9 @@
 <!-- <div id="model_display"></div> -->
 <!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
 
+<script type="text/javascript">
+var CPNamespace = window;
+</script>
 <script type="text/javascript" src="colors.js"></script>
 <!-- script type="text/javascript" src="tools.js"></script -->
 <script type="text/javascript" src="colorPicker.data.js"></script>

jQuery_implementation/index.html

@@ -26,6 +26,9 @@ <h1>Simple jQuery implementation</h1>
 	<input class="color" value="hsl(32, 95%, 23%)" />
 </p>
 <!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
+<script type="text/javascript">
+var CPNamespace = window;
+</script>
 <script type="text/javascript" src="../colors.js"></script>
 <script type="text/javascript" src="../colorPicker.data.js"></script>
 <script type="text/javascript" src="../colorPicker.js"></script>

jQuery_implementation/jqColor.js

@@ -1,4 +1,4 @@
-(function ($, window) {
+(function ($, window, namespace) {
 	$.fn.extend({
 		colorPicker: function(config) {
 			var renderCallback = function(colors, mode) {
@@ -65,7 +65,7 @@
 				},
 				createInstance = function(elm, config) {
 					var initConfig = {
-							klass: window.ColorPicker,
+							klass: namespace.ColorPicker,
 							input: elm,
 							patch: elm,
 							isIE8: !!document.all && !document.addEventListener, // Opera???
@@ -163,7 +163,7 @@
 				},
 				that = this,
 				colorPickers = $.fn.colorPicker.colorPickers || [], // this is a way to prevent data binding on HTMLElements
-				testColors = new window.Colors({
+				testColors = new namespace.Colors({
 					customBG: (config && config.customBG) || '#FFFFFF',
 					allMixDetails: true
 				});
@@ -227,4 +227,4 @@
 				(options.secure  ? '; secure'                        : '');
 		}
 	};
-})(jQuery, this);
+})(jQuery, this, CPNamespace||window);

javascript_implementation/index.html

@@ -23,6 +23,9 @@ <h1>Simple javaScript implementation</h1>
 	<input class="color" value="hsla(32, 95%, 23%, 0.9)" />
 </p>
 <!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
+<script type="text/javascript">
+var CPNamespace = window;
+</script>
 <script type="text/javascript" src="../colors.js"></script>
 <script type="text/javascript" src="../colorPicker.data.js"></script>
 <script type="text/javascript" src="../colorPicker.js"></script>
@@ -34,7 +37,7 @@ <h1>Simple javaScript implementation</h1>
 <!-- <script type="text/javascript" src="jsColorPicker.min.js"></script> -->
 
 <script type="text/javascript">
-	var colors = jsColorPicker('input.color', {
+	var colors = CPNamespace.jsColorPicker('input.color', {
 			customBG: '#222',
 			readOnly: true,
 			// patch: false,