From 1eb3b0e06a940f93a12b50a996c22254faecdfa8 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Tue, 28 Jun 2016 19:34:08 +0200 Subject: [PATCH 01/24] Add touch events Add the events "touchstart", "touchmove" and "touchend" to also support touch devices. Need to change the files "README.md", "color.all.min.js", "javascript_implementation/jsColorPicker.min.js" Successfully tested on a smartphone with Android 4.4.2 / Chrome 51 --- colorPicker.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/colorPicker.js b/colorPicker.js index b57b2a5..918b969 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -440,7 +440,7 @@ function installEventListeners(THIS, off) { var onOffEvent = off ? removeEvent : addEvent; - onOffEvent(_nodes.colorPicker, 'mousedown', function(e) { + function touchStart_MouseDown(e) { var event = e || window.event, page = getPageXY(event), target = (event.button || event.which) < 2 ? @@ -494,6 +494,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 +507,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); @@ -531,6 +535,7 @@ } addEvent(_isIE ? document.body : window, 'mouseup', stopChange); + addEvent(_isIE ? document.body : window, 'touchend', stopChange); // ------------------------------------------------------ // // --------- Event listner's callback functions -------- // @@ -546,6 +551,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(); @@ -1290,11 +1296,13 @@ } 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 }; } @@ -1411,4 +1419,4 @@ return _renderTimer = null; }; -})(window); \ No newline at end of file +})(window); From 5d592f6f4e46ff22ac2f0a2a05d5e03c22bd1db1 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Wed, 17 Aug 2016 17:52:30 +0200 Subject: [PATCH 02/24] IE8- fail with 'new' in same instance See issue #1 --- colorPicker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/colorPicker.js b/colorPicker.js index 918b969..63405ea 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -1158,9 +1158,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) { From b89ac5da0bdae89ef16b57a274d7073fd453fdb9 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Wed, 17 Aug 2016 17:57:31 +0200 Subject: [PATCH 03/24] IE8- fail with 'new' in same instance See issue #1 --- colorPicker.data.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/colorPicker.data.js b/colorPicker.data.js index e4169ba..b8afc2b 100644 --- a/colorPicker.data.js +++ b/colorPicker.data.js @@ -2,7 +2,7 @@ "use strict" // see colorPicker.html for the following encrypted variables... will only be used in buildView() - var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß"> $^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß"> $^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß"> $$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß"> $$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@"> $^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">| $$^§col2">| $$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$'). + var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß">.$^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß">.$^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß">.$$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß">.$$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@">.$^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">|.$$^§col2">|.$$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$'). replace(/\^/g, '
Date: Thu, 18 Aug 2016 00:14:12 +0200 Subject: [PATCH 05/24] class prefix to isolate from higher class weight See issue #4 --- colorPicker.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/colorPicker.js b/colorPicker.js index f3f66bb..3945e89 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -69,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: '' @@ -302,6 +303,7 @@ 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'); @@ -321,6 +323,7 @@ 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'). @@ -330,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'). From 41f4d0e906decdae08b6821bf4cf4794f78c617e Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 18 Aug 2016 00:19:31 +0200 Subject: [PATCH 06/24] class prefix to isolate from higher class weight See issue #4 --- colorPicker.data.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/colorPicker.data.js b/colorPicker.data.js index b8afc2b..11dc077 100644 --- a/colorPicker.data.js +++ b/colorPicker.data.js @@ -4,9 +4,9 @@ // see colorPicker.html for the following encrypted variables... will only be used in buildView() var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß">.$^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß">.$^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß">.$$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß">.$$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@">.$^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">|.$$^§col2">|.$$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$'). replace(/\^/g, '
Date: Thu, 18 Aug 2016 00:32:56 +0200 Subject: [PATCH 07/24] invalid hidden characters See issue #5 --- colors.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/colors.js b/colors.js index e3d52f4..4622fbd 100644 --- a/colors.js +++ b/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; From e786bb311aaa2f690dfa02921cd804eaee0b1350 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 18 Aug 2016 00:40:01 +0200 Subject: [PATCH 08/24] invalid hidden characters See issue #5 --- colorPicker.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/colorPicker.js b/colorPicker.js index 3945e89..dd10b04 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -106,7 +106,7 @@ // actionCallback: undefined, // convertCallback: undefined, }; - initInstance(this, options || {}); + initInstance(this, options || {}); }; window.ColorPicker = ColorPicker; // export differently @@ -200,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);'); } }; @@ -895,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); } } @@ -1047,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; } @@ -1312,7 +1312,7 @@ } function addEvent(obj, type, func) { - addEvent.cache = addEvent.cache || { + addEvent.cache = addEvent.cache || { _get: function(obj, type, func, checkOnly) { var cache = addEvent.cache[type] || []; From b8b813c3364018c6b120988b8c0606414a89b6b8 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 18 Aug 2016 12:10:11 +0200 Subject: [PATCH 09/24] Better addStyleSheet function Simplification of the function "addStyleSheet()" using innerHTML instead of createTextNode --- colorPicker.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/colorPicker.js b/colorPicker.js index dd10b04..845f43e 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -306,19 +306,19 @@ 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 From 99d7f63b8ec9080a4e6fb67fb126b03fe87c50a2 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 18 Aug 2016 12:33:45 +0200 Subject: [PATCH 10/24] class prefix to isolate from higher class weight See issue #4 --- colorPicker.data.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/colorPicker.data.js b/colorPicker.data.js index 11dc077..e8469fa 100644 --- a/colorPicker.data.js +++ b/colorPicker.data.js @@ -5,9 +5,9 @@ var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß">.$^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß">.$^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß">.$$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß">.$$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@">.$^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">|.$$^§col2">|.$$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$'). replace(/\^/g, '
Date: Thu, 18 Aug 2016 17:23:51 +0200 Subject: [PATCH 11/24] mouseup event not fire on IE8- See isuue #6 --- colorPicker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/colorPicker.js b/colorPicker.js index 845f43e..3741cb1 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -445,6 +445,9 @@ function installEventListeners(THIS, off) { var onOffEvent = off ? removeEvent : addEvent; + 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), @@ -539,9 +542,6 @@ }); } - addEvent(_isIE ? document.body : window, 'mouseup', stopChange); - addEvent(_isIE ? document.body : window, 'touchend', stopChange); - // ------------------------------------------------------ // // --------- Event listner's callback functions -------- // // -------------------------------------------------------// From 775b4e2086574b5b23c872a03d899e5740acef79 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 26 Jan 2017 18:55:02 +0100 Subject: [PATCH 12/24] Add namespace Add a namespace to allow storing the colorpicker into "namespace" instead "window" --- colorPicker.data.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/colorPicker.data.js b/colorPicker.data.js index e8469fa..889d1e4 100644 --- a/colorPicker.data.js +++ b/colorPicker.data.js @@ -1,4 +1,4 @@ -;(function(window, undefined){ +;(function(window, namespace){ "use strict" // see colorPicker.html for the following encrypted variables... will only be used in buildView() @@ -15,7 +15,7 @@ _iconsPng = 'iVBORw0KGgoAAAANSUhEUgAAAGEAAABDCAMAAAC7vJusAAAAkFBMVEUAAAAvLy9ERERubm7///8AAAD///9EREREREREREREREQAAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8cHBwkJCQnJycoKCgpKSkqKiouLi4vLy8/Pz9AQEBCQkJDQ0NdXV1ubm58fHykpKRERERVVVUzMzPx7Ab+AAAAHXRSTlMAAAAAAAQEBQ4QGR4eIyMtLUVFVVVqapKSnJy7u9JKTggAAAFUSURBVHja7dXbUoMwEAbgSICqLYeW88F6KIogqe//dpoYZ0W4AXbv8g9TwkxmvtndZMrEwlw/F8YIRjCCEYxgBCOsFmzqGMEI28J5zzmt0Pc9rdDL0NYgMxIYC5KiKpKAzZphWtZlGm4SjlnkOV6UHeeEUx77rh/npw1dCrI9k9lnwUwF+UG9D3m4ftJJxH4SJdPtaawXcbr+tBaeFrxiur309cIv19+4ytGCU0031a5euPVigLYGqjlAqM4ShOQ+QAYQUO80AMMAAkUGGfMfR9Ul+kmvPq2QGxXKOQBAKdjUgk0t2NiCGEVP+rHT3/iCUMBT90YrPMsKsIWP3x/VolaonJEETchHCS8AYAmaUICQQwaAQnjoXgHAES7jLkEFaHO4bdq/k25HAIpgWY34FwAE5xjCffM+D2DV8B0gRsAZT7hr5gE8wdrJcU+CJqhcqQD7Cx5L7Ph4WnrKAAAAAElFTkSuQmCC', _bgsPng = 'iVBORw0KGgoAAAANSUhEUgAAASAAAABvCAYAAABM+h2NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABORJREFUeNrs3VtTW1UYBuCEcxAI4YydWqTWdqr1V7T/2QsvvPDCCy9qjxZbamsrhZIQUHsCEtfafpmJe8qFjpUxfZ4Zuvt2feydJvAOARZUut1u5bRerl692nV913f99/f6QxWAU6KAAAUEKCAABQQoIAAFBCggAAUEKCAABQQoIAAFBCggAAUEKCAABQQoIEABASggQAEBKCBAAQEoIEABASggQAEBKCBAAQEoIGBQC+jatWvd07zxrv9+Xx8fAQEoIEABASggQAEBKCBAAQEoIEABAQoIQAEBCghAAQEKCEABAQOk2u36kS6AAgLetwJKL29toFRM1be+QrVq3rx58//KvM8BAadGAQEKCFBAAAoIGHwnfhneZ+/Nmzf/LufzrI+AAE/BAAUEoIAABQTwztgLZt68eXvBAE/BABQQoIAAFBAweOwFM2/evL1ggKdgAAoIUEAACggYPPaCmTdv3l4wwFMwAAUEKCAABQQMHnvBzJs3by8Y4CkYgAICFBCAAgIGz4lfBQNQQMDgFlCtVisaaHV1tThubW1VInciD0U+ysdnz54N5+PKysphOnRTHsvHlN9EHo/1l5FrkV9Enoz8W87b29tTOS8vLx9EnoncjlyPvBe5EbkZeT4fU96NvBDr2znv7Ows57y0tLQVeSXy08gf5mNfPhPrjyOfrVarlcXFxZ9yfv78+bl8TPlh5LU8n/KDyOuxfj/y+VjfyHl3d/dCKv28fi/yp/m4sLDwQ+SLke9GvhT5Tinfjnw5f4/F/Pz8rZybzeZn+ZjyzVK+EfnzUr4S+Xopf9/L+fxzc3M5d1qt1hf531Mu5k/IxzGf85VYL+fefHH+RqNRrO/t7RW3L+UbkS9Hvhk5/386Kd/qW8/5duRLMV/OdyJfzNebnZ0t7t92u53v/07K9yJfiLwROT9+ef7HyOux/iDyWuSHkT+K+eLtZX9//2xer9frjyOfyY9/Wn8S86v59qT1p7Ge315zLt4RU16K19+O9YXIu5HnYn435hux3opcj9yOPB3z+5E/iPXf43y1yMX778HBQS3f3pTz+28l5bHIr2N+LN3+zszMzGHkoh/S+mHMF98XlNaP8zHd/0W/pMe943NAwKlSQIACAhQQgAICFBCAAgIUEIACAhQQgAIC/n9GqtXqYbfbHa38+RtSu32llPdqdNL6aOSj+LfxyMVekLTem39Ryr/mPDQ0NBznzXtROikPRW6W8k7k3m9rzXthOsPDw73bUuylGRkZ6cR63nvTSfko8oPIr+Pnz96P/DLW816ezujoaN6DdtyX9+P8eS9QZ2xs7Hxf7qa8Xlr/JO6Ljcjrcf6cj1P+OO+N6V1/fHz8XLz+/Tjfubh+sZcorZ+N9Ycxfybyo8ircf6fc56YmFiJ1/8l8mLk7cjzkfP92U15Ns63G+u9nPcKdWq12lQ8Xu3Ixd6f9Pd8P3UmJycnUszzL2N9LM7/anNzs9V7Q2q32395w/q7ubdH6L/KrVbrpPxlKX9Vyl+X8jel/G0pf5f/aDabvXy9tH6ztH63lDdKebOUH5Xyk1LeKuWd/ry2tlap9P125Onp6Zf9eWpq6lW3b8f6zMzM6/71er3+ppSP+u/XNN/pz41Go+sjIMBTMEABASggQAEBKCBAAQEoIEABASggQAEB/CN/CDAAw78uW9AVDw4AAAAASUVORK5CYII='; - window.ColorPicker = { + namespace.ColorPicker = { _html: _html, _cssFunc: _cssFunc, _cssMain: _cssMain, @@ -25,4 +25,4 @@ _iconsPng: _iconsPng, _bgsPng: _bgsPng } -})(window); +})(window, CPNamespace||window); From 3551c8d1c0105049bdfb91b53679b16bcecb308f Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 26 Jan 2017 20:51:17 +0100 Subject: [PATCH 13/24] Add namespace Add a namespace to allow storing the colorpicker into "namespace" instead "window". Need: create the variable CPNamespace before calling executing the script. --- colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/colors.js b/colors.js index 4622fbd..aae1735 100644 --- a/colors.js +++ b/colors.js @@ -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); From 05592ce362bcd55986249655dcba2b00ae606b26 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 26 Jan 2017 20:56:02 +0100 Subject: [PATCH 14/24] Add namespace Add a namespace to allow storing the colorpicker into "namespace" instead "window". Need: create the variable CPNamespace before calling executing the script. --- colorPicker.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/colorPicker.js b/colorPicker.js index 3741cb1..ae7576c 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -1,9 +1,9 @@ -;(function(window, undefined){ +;(function(window, namespace){ "use strict" var document = window.document, - _data = window.ColorPicker, // will be deleted in buildView() and holds: - // window.ColorPicker = { // comes from colorPicker.data.js and will be overwritten. + _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 @@ -109,7 +109,7 @@ initInstance(this, options || {}); }; - window.ColorPicker = ColorPicker; // export differently + namespace.ColorPicker = ColorPicker; // export differently ColorPicker.addEvent = addEvent; ColorPicker.removeEvent = removeEvent; ColorPicker.getOrigin = getOrigin; @@ -217,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; @@ -1424,4 +1424,4 @@ return _renderTimer = null; }; -})(window); +})(window, CPNamespace||window); From c957428e692ac9050738df42ab90502d07094846 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 26 Jan 2017 21:05:52 +0100 Subject: [PATCH 15/24] IE8- compatibility in doEventListeners For IE8- : use attachEvent/detachEvent instead of addEventListener/removeEventListener --- javascript_implementation/jsColor.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/javascript_implementation/jsColor.js b/javascript_implementation/jsColor.js index 89febb6..16eb25f 100644 --- a/javascript_implementation/jsColor.js +++ b/javascript_implementation/jsColor.js @@ -95,7 +95,8 @@ return new initConfig.klass(initConfig); }, doEventListeners = function(elm, multiple, off) { - var onOff = off ? 'removeEventListener' : 'addEventListener', + var ie8 = !document.addEventListener, + onOff = off ? (ie8?'detachEvent':'removeEventListener') : (ie8?'attachEvent':'addEventListener'), focusListener = function(e) { var input = this, position = window.ColorPicker.getOrigin(input), @@ -233,4 +234,4 @@ (options.secure ? '; secure' : ''); } }; -})(this); \ No newline at end of file +})(this); From ce71a287bf78ce8058e5575c95be0760986f4558 Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 26 Jan 2017 21:19:21 +0100 Subject: [PATCH 16/24] Add namespace Add a namespace to allow storing the colorpicker into "namespace" instead "window". --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index e35286f..cd1d308 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,7 @@ - -colorPicker_new +colorPicker_new @@ -22,15 +21,13 @@
-Test-
.
-
-
-
+
+ From b09e9c9b3c9b8d3a729eb0d1eb88aa24ea144b8a Mon Sep 17 00:00:00 2001 From: Ruben Almeida Date: Thu, 26 Jan 2017 21:21:42 +0100 Subject: [PATCH 17/24] Add namespace Add a namespace to allow storing the colorpicker into "namespace" instead "window". --- javascript_implementation/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/javascript_implementation/index.html b/javascript_implementation/index.html index 719df8c..ca0d62e 100644 --- a/javascript_implementation/index.html +++ b/javascript_implementation/index.html @@ -1,3 +1,4 @@ + @@ -23,6 +24,9 @@ Calling the colorPicker on all inputs with the calssName 'color': 
jsColorPi
 	
 

 
+
 
 
 

From f075a98153548d900630b7c012ee1a98246e7b61 Mon Sep 17 00:00:00 2001
From: Ruben Almeida 
Date: Thu, 26 Jan 2017 21:22:41 +0100
Subject: [PATCH 18/24] Add namespace

Add a namespace to allow storing the colorpicker into "namespace" instead "window".
---
 jQuery_implementation/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/jQuery_implementation/index.html b/jQuery_implementation/index.html
index 6972c71..030587b 100644
--- a/jQuery_implementation/index.html
+++ b/jQuery_implementation/index.html
@@ -26,6 +26,9 @@ Calling the colorPicker on all inputs with the calssName 'color': 
$('input.
 	
 

 
+
 
 
 

From 3341878f17aa79883ae86a800ca8cf2eb65fd49f Mon Sep 17 00:00:00 2001
From: Ruben Almeida 
Date: Fri, 27 Jan 2017 00:12:36 +0100
Subject: [PATCH 19/24] Add namespace

Add a namespace to allow storing the colorpicker into "namespace" instead "window".
Need: create the variable CPNamespace before calling executing the script.
---
 jQuery_implementation/jqColor.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/jQuery_implementation/jqColor.js b/jQuery_implementation/jqColor.js
index 9008ec4..d8539ff 100644
--- a/jQuery_implementation/jqColor.js
+++ b/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);

From b307eaeeae1bcbbfb3e7765b7e297553c3c7279b Mon Sep 17 00:00:00 2001
From: Ruben Almeida 
Date: Fri, 27 Jan 2017 00:14:56 +0100
Subject: [PATCH 20/24] Add namespace

Add a namespace to allow storing the colorpicker into "namespace" instead "window".
Need: create the variable CPNamespace before calling executing the script.
---
 javascript_implementation/jsColor.js | 36 ++++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/javascript_implementation/jsColor.js b/javascript_implementation/jsColor.js
index 16eb25f..6e3c938 100644
--- a/javascript_implementation/jsColor.js
+++ b/javascript_implementation/jsColor.js
@@ -1,5 +1,5 @@
-(function (window) {
-	window.jsColorPicker = function(selectors, config) {
+(function (window, namespace) {
+	namespace.jsColorPicker = function(selectors, config) {
 		var renderCallback = function(colors, mode) {
 				var options = this,
 					input = options.input,
@@ -54,18 +54,18 @@
 						);
 					}
 					cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
-					ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
+					namespace.ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
 				} else if (action === 'resizeApp') {
-					ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
+					namespace.ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
 				} else if (action === 'modeChange') {
 					var mode = colorPicker.color.options.mode;
 
-					ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
+					namespace.ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
 				}
 			},
 			createInstance = function(elm, config) {
 				var initConfig = {
-						klass: window.ColorPicker,
+						klass: namespace.ColorPicker,
 						input: elm,
 						patch: elm,
 						isIE8: !!document.all && !document.addEventListener, // Opera???
@@ -77,14 +77,14 @@
 						/* --- regular colorPicker options from this point --- */
 						color: extractValue(elm),
 						initStyle: 'display: none',
-						mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h',
+						mode: namespace.ColorPicker.docCookies('colorPickerMode') || 'hsv-h',
 						// memoryColors: (function(colors, config) {
 						// 	return config.noAlpha ?
 						// 		colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
 						// })($.docCookies('colorPickerMemos'), config || {}),
-						memoryColors: ColorPicker.docCookies('colorPickerMemos' +
+						memoryColors: namespace.ColorPicker.docCookies('colorPickerMemos' +
 							((config || {}).noAlpha ? 'NoAlpha' : '')),
-						size: ColorPicker.docCookies('colorPickerSize') || 1,
+						size: namespace.ColorPicker.docCookies('colorPickerSize') || 1,
 						renderCallback: renderCallback,
 						actionCallback: actionCallback
 					};
@@ -96,10 +96,10 @@
 			},
 			doEventListeners = function(elm, multiple, off) {
 				var ie8 = !document.addEventListener,
-				    onOff = off ? (ie8?'detachEvent':'removeEventListener') : (ie8?'attachEvent':'addEventListener'),
+					onOff = off ? (ie8?'detachEvent':'removeEventListener') : (ie8?'attachEvent':'addEventListener'),
 					focusListener = function(e) {
 						var input = this,
-							position = window.ColorPicker.getOrigin(input),
+							position = namespace.ColorPicker.getOrigin(input),
 							index = multiple ? Array.prototype.indexOf.call(elms, this) : 0,
 							colorPicker = colorPickers[index] ||
 								(colorPickers[index] = createInstance(this, config)),
@@ -136,7 +136,7 @@
 							colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined),
 							animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
 							isColorPicker = colorPicker && (function(elm) {
-								while (elm) {
+								while (elm && elm instanceof HTMLElement) {
 									if ((elm.className || '').indexOf('cp-app') !== -1) return elm;
 									elm = elm.parentNode;
 								}
@@ -167,11 +167,11 @@
 				}
 			},
 			// this is a way to prevent data binding on HTMLElements
-			colorPickers = window.jsColorPicker.colorPickers || [],
+			colorPickers = namespace.jsColorPicker.colorPickers || [],
 			elms = document.querySelectorAll(selectors),
-			testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
+			testColors = new namespace.Colors({customBG: config.customBG, allMixDetails: true});
 
-		window.jsColorPicker.colorPickers = colorPickers;
+		namespace.jsColorPicker.colorPickers = colorPickers;
 
 		for (var n = 0, m = elms.length; n < m; n++) {
 			var elm = elms[n];
@@ -197,10 +197,10 @@
 			}
 		};
 
-		return window.jsColorPicker.colorPickers;
+		return namespace.jsColorPicker.colorPickers;
 	};
 
-	window.ColorPicker.docCookies = function(key, val, options) {
+	namespace.ColorPicker.docCookies = function(key, val, options) {
 		var encode = encodeURIComponent, decode = decodeURIComponent,
 			cookies, n, tmp, cache = {},
 			days;
@@ -234,4 +234,4 @@
 				(options.secure  ? '; secure'                        : '');
 		}
 	};
-})(this);
+})(this, CPNamespace||window);

From f5a68f147f331c805cc57f0426059c0fe177399d Mon Sep 17 00:00:00 2001
From: Ruben Almeida 
Date: Fri, 27 Jan 2017 00:16:07 +0100
Subject: [PATCH 21/24] Add namespace

Add a namespace to allow storing the colorpicker into "namespace" instead "window".
---
 javascript_implementation/index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/javascript_implementation/index.html b/javascript_implementation/index.html
index ca0d62e..a950ee5 100644
--- a/javascript_implementation/index.html
+++ b/javascript_implementation/index.html
@@ -1,4 +1,3 @@
-
 
 
 	
@@ -38,7 +37,7 @@ var CPNamespace = window;