From b37a93479eb9f250227d7b29edd35c0e5e702cce Mon Sep 17 00:00:00 2001 From: peterd Date: Tue, 5 Aug 2014 17:16:42 +0200 Subject: [PATCH] Restructuring MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit …and added path support for non BASE64 URI browsers --- color.html | 64 -------- colorPicker.js | 21 ++- color.js => colors.js | 0 colorPicker.css => developer/colorPicker.css | 0 .../colorPicker.dev.js | 0 .../colorPicker.html | 4 +- developer/colorPicker.sys.css | 151 ++++++++++++++++++ developer/fusion.html | 48 ++++++ developer/patches.html | 20 +++ developer/patches.js | 43 +++++ _bgs.png => images/_bgs.png | Bin _blank.cur => images/_blank.cur | Bin _blank.png => images/_blank.png | Bin images/_horizontal.png | Bin 0 -> 392 bytes _icons.png => images/_icons.png | Bin images/_patches.png | Bin 0 -> 3082 bytes images/_vertical.png | Bin 0 -> 1241 bytes index.html | 8 +- index.js | 35 ++-- 19 files changed, 302 insertions(+), 92 deletions(-) delete mode 100644 color.html rename color.js => colors.js (100%) rename colorPicker.css => developer/colorPicker.css (100%) rename colorPicker.dev.js => developer/colorPicker.dev.js (100%) rename colorPicker.html => developer/colorPicker.html (97%) create mode 100644 developer/colorPicker.sys.css create mode 100644 developer/fusion.html create mode 100644 developer/patches.html create mode 100644 developer/patches.js rename _bgs.png => images/_bgs.png (100%) rename _blank.cur => images/_blank.cur (100%) rename _blank.png => images/_blank.png (100%) create mode 100644 images/_horizontal.png rename _icons.png => images/_icons.png (100%) create mode 100644 images/_patches.png create mode 100644 images/_vertical.png diff --git a/color.html b/color.html deleted file mode 100644 index b81e57f..0000000 --- a/color.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - color_new - - - - -
- -
- -
-
-
-
- -
-
-
-
- -
- -
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
- - - - - - - - - - - - - - - - diff --git a/colorPicker.js b/colorPicker.js index c50d536..693c29d 100644 --- a/colorPicker.js +++ b/colorPicker.js @@ -68,11 +68,13 @@ CSSPrefix: 'cp-', scale: 1, allMixDetails: true, - alphaBG: 'w' + alphaBG: 'w', + imagePath: '', // noAlpha: true, // customBG: '#808080' // size: 0, // cmyOnly: false, + // initStyle: 'display: none', // memoryColors: [{r: 100, g: 200, b: 10}]// , a: 0.5 @@ -88,7 +90,7 @@ // noRGBg: false, // noRGBb: false, - // CSSStrength: 'div.', + // ------ CSSStrength: 'div.', // XYZMatrix: XYZMatrix, // XYZReference: {}, // grey: grey, @@ -305,9 +307,10 @@ _data._cssFunc = _data._cssFunc. replace(/§/g, prefix). - replace('_patches.png', !_isIE ? urlData + _data._patchesPng : '_patches.png'). - replace('_vertical.png', !_isIE ? urlData + _data._verticalPng : '_vertical.png'). - replace('_horizontal.png', !_isIE ? urlData + _data._horizontalPng : '_horizontal.png'); + 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) { style.appendChild(document.createTextNode(_data._cssFunc)); } @@ -322,9 +325,9 @@ style.setAttribute('type', 'text/css'); _data._cssMain = _data._cssMain. replace(/§/g, prefix). - replace('_bgs.png', !_isIE ? urlData + _data._bgsPng : '_bgs.png'). - replace('_icons.png', !_isIE ? urlData + _data._iconsPng : '_icons.png'). - replace('_blank.png', !_isIE ? urlData + _data._blankPng : '_blank.cur'). + replace('_bgs.png', !_isIE ? urlData + _data._bgsPng : _options.imagePath + '_bgs.png'). + replace('_icons.png', !_isIE ? urlData + _data._iconsPng : _options.imagePath + '_icons.png'). + 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) { @@ -340,6 +343,8 @@ } } + app.children[0].style.cssText = _options.initStyle || ''; + return (_options.appenTo || document.body).appendChild(app.children[0]); } diff --git a/color.js b/colors.js similarity index 100% rename from color.js rename to colors.js diff --git a/colorPicker.css b/developer/colorPicker.css similarity index 100% rename from colorPicker.css rename to developer/colorPicker.css diff --git a/colorPicker.dev.js b/developer/colorPicker.dev.js similarity index 100% rename from colorPicker.dev.js rename to developer/colorPicker.dev.js diff --git a/colorPicker.html b/developer/colorPicker.html similarity index 97% rename from colorPicker.html rename to developer/colorPicker.html index be6d5d2..f613ad4 100644 --- a/colorPicker.html +++ b/developer/colorPicker.html @@ -181,8 +181,8 @@ - - + + + + diff --git a/developer/patches.html b/developer/patches.html new file mode 100644 index 0000000..f116147 --- /dev/null +++ b/developer/patches.html @@ -0,0 +1,20 @@ + + + + + +patches + + + + + + + + + + diff --git a/developer/patches.js b/developer/patches.js new file mode 100644 index 0000000..c369530 --- /dev/null +++ b/developer/patches.js @@ -0,0 +1,43 @@ +;(function(window, undefined){ + "use strict" + + var shades = document.getElementById('shades'), + ctx = shades.getContext('2d'), + myImage, + counter = 1, + scale = 1, + dim = 256 / scale, + DIM = 255, + imageData = ctx.createImageData(dim * counter, dim), + data = imageData.data, + x = 0, y = 0, count = 0, z = 0; + + shades.width = dim * counter; + shades.height = dim; + + for (x = 0; x < dim; x += 1) { + for (y = 0; y < dim; y += 1) { + count = (x * dim * 4 * counter) + (y * 4); + z = 0; + + + // data[z + count++] = DIM - x * scale; + // data[z + count++] = DIM - x * scale; + // data[z + count++] = DIM - x * scale; + // data[z + count++] = Math.abs(DIM - x * 2 * scale); + + data[z + count++] = 128; // 127 ??? + data[z + count++] = 128; + data[z + count++] = 128; + data[z + count++] = Math.abs(DIM - y * scale); + + z += DIM * 4; + } + } + + ctx.putImageData(imageData, 0, 0); + + myImage = shades.toDataURL("image/png"); + console.log(myImage.length) + document.getElementById("MyPix").src = myImage; +})(window); \ No newline at end of file diff --git a/_bgs.png b/images/_bgs.png similarity index 100% rename from _bgs.png rename to images/_bgs.png diff --git a/_blank.cur b/images/_blank.cur similarity index 100% rename from _blank.cur rename to images/_blank.cur diff --git a/_blank.png b/images/_blank.png similarity index 100% rename from _blank.png rename to images/_blank.png diff --git a/images/_horizontal.png b/images/_horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..aaa6bd005debce286952a25e776d7019f5f11462 GIT binary patch literal 392 zcmV;30eAk1P)-h_W$(J72-~@p%j{=__!@g;^AV&e^K#HVs)uQ}-u9l9P`)?X=U$1OPzS zk4MQD^@!j9;$i^`4I@{AC;C5eCM%+bT(wvBeP7Qn|M?AgHPyc(zm%_tJs$c8O?~@R zVrjj{*EuG7r>iP*{s%lU$D_c3oLWf*JiH#ZPj4y3#2!TrtRD`B#3Pm-^ZWBW2LJ>? z027~ei(TJJ@Wpe4JTZQDJ-+u^`n_M`cX>Yjy6awMhEht3g?-}r_tLjsheP*htudKQ zdhG4%`%Yfhb(l`4H#+B8-?D96L{W5M7=~z?2D91hLgRnMr_%{>9HXvl%;$3)k4Gd) zf~u;pTrRQS?~!F0%Cf|2wL(!8Sg+UE?RMC1w;&?qd4493Rb~$U?fvpz>)C&oHz}pq m%p9BfVlz9OrYUbW8~p(_!C^c5PP*d&0000*ag>?C!5!(_{PG>igZf(Uarv z@4Tr0{*Kh|cjs!?%zS=F+dBE+InNkL&W1D&28IU_4Q!0FrcPwY09wZ=#gb9O$lJic z%fP^KLBZiQKZ68N*a4_S>M!E~Ad`W~gyX^sgm6?n1F|q1P=&w(#|Aef;a|)QFyUoD zOMz@WDu5adfMx()z+{4?@tQoca04Sy2}_2+f{O^@E&mwc!kKPN3xG=Sr~qo@0h*!U z(9F<_r12{|vTy=W1vp5)AcWW2Gr)ysAp#AD3ZO7E&=GQ-quK*^HE19GZIWCrW)7qDjxpb}U%$B|^9Db}T-&g_O|=d+z)n+_<0ay?RZ1m@D= zmBHwd1}%ATq;IJ3hGv{45x8WF%l>}qck$2v#V4(P)NBvudsO~(Ca@?47Ig6rhyR_F z#Tui3*g?f8usElzsDma8JO$b19u@~+S%*gjummJf)De-_O_Uig0Lwy(Y9S)(7+!dl zg`*}zt&rfVk%X~lO(tYvq|zKmErguyvBob;22yDbu45D)ih-(6%F6(Xq7qbV(IZn0 zuLeaTxVXiiRl#KesG)`Q?K3^>mvR5Y~BjmF(saUIg4H@vx;Ed z($`_2vn(UITH~LH`8o{zau(7@##IFCmcH!+-DGJ>|NZ=HDvu*jPRA1ONaS6fF7x0Dys_!1FHv0E2!A#uuRg01OW9{X^IY0{}2M$nQT= z`6qA;R2SGUMu*Xi5ap|jKR-VWWmyJni}LqJhcnFnyYW}PKga!?EB_0)a4xTXY99@J zs?^t<&j*@Sa|>c7-)b8z2z)_4jRw9JeHFBi-;)&&s2N0k5e;}>t*J^|8kn_;?;fWD zbG=?y1A(bnE|(iV#ryla>!BdPpPZ5;$tg|KoQ{r;aymOZ%VqwvG6*f*+}x1(NTMX= zNNP~|;Vf0?9nVMG2q?IH8$LddxXEW;4S19LszFINho)DxrcC!0pPIg$n!bpS#sbaI z9`dHPH1PRyK{V#mVs1eH-qzcN_LEfMES#ARP+!j)IAs1>Ep@Q znbYZXQC{D>ySs^8^N9o|Qf?xt95|ozaWfn^v-2s`)POG+_%usU*GD5TJQA1Y{{B9p zr>Cb>X8w&!>z__yDu(9h_UJm_FFb^pGJZ@(&OW!rStQ1OV7{GmQGJkExo?JT3Ku? z&F6DV$H&K3))`Ba$;8S8Wo4?eGL$Wi$73r~i&NgmlZ=(s%0*T2xVJL@Z77~;tlSVz z#mf1pD%rNm-Q$#xdS5IWQ?VL>veI|5oeq^R*X(OnEm}~kwm(Mmal1Y@Rl3M|pPIFZ zm5XI=uG?0%ZA;r$b#s=xw59FQc4<}D{kMIaTW0 - - + + colorPicker_new @@ -57,8 +57,8 @@ - - + + diff --git a/index.js b/index.js index b2f90df..6378096 100644 --- a/index.js +++ b/index.js @@ -446,6 +446,7 @@ isColorPicker = colorSourceSelector.value === 'ColorPicker'; myColor = window.myColor = color_Colors; + // color_ColorPicker.nodes.colorPicker.style.cssText = ''; // mySecondColor = window.mySecondColor = new ColorPicker({instanceName: 'mySecondColor'}); // in case ColorPicker is not there... @@ -468,7 +469,9 @@ } - function conversionTest () { + function conversionTest (skipDisplay) { + if (skipDisplay) console.time('convertAll'); + // conversion test var convert = myColor.color ? myColor.color.convertColor : myColor.convertColor, x = 0.85, y = 0.33, z = 0.23, k = 0.1, @@ -506,20 +509,22 @@ // do nothing } else { value = convert(color, fromMode + '2' + toMode); - colorOut = []; - for (var s in color) { - colorOut.push(s + ': ' + color[s]); - } - colorOut = fromMode === 'HEX' ? '"' + color + '"' : '{' + colorOut.join(', ') + '}'; - - valueOut = []; - for (var s in value) { - valueOut.push(s + ': ' + value[s]); + if (!skipDisplay) { + colorOut = []; + for (var s in color) { + colorOut.push(s + ': ' + color[s]); + } + colorOut = fromMode === 'HEX' ? '"' + color + '"' : '{' + colorOut.join(', ') + '}'; + + valueOut = []; + for (var s in value) { + valueOut.push(s + ': ' + value[s]); + } + valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}'; + + console.log('convertColor(' + colorOut + ', "' + fromMode + + '2' + toMode + '") = ' + valueOut); } - valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}'; - - console.log('convertColor(' + colorOut + ', "' + fromMode + - '2' + toMode + '") = ' + valueOut); counter++; } } @@ -528,6 +533,8 @@ } } console.log('Tested ' + counter + ' conversion combinations (excluding same to same)'); + if (!skipDisplay) console.log('Call conversionTest(true) for timer (incl. calculations in for loops though...)'); + if (skipDisplay) console.timeEnd('convertAll'); } window.conversionTest = conversionTest;