API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 29th, 2016
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.48 KB | None | 0 0
raw download clone embed print report
  1. // derived from tinymce color_picker.js
  2.  
  3.  
  4. var detail = 50, strhex = "0123456789abcdef", i, isMouseDown = false, isMouseOver = false;
  5.  
  6. var colors = [
  7. "#000000","#000033","#000066","#000099","#0000cc","#0000ff","#330000","#330033",
  8. "#330066","#330099","#3300cc","#3300ff","#660000","#660033","#660066","#660099",
  9. "#6600cc","#6600ff","#990000","#990033","#990066","#990099","#9900cc","#9900ff",
  10. "#cc0000","#cc0033","#cc0066","#cc0099","#cc00cc","#cc00ff","#ff0000","#ff0033",
  11. "#ff0066","#ff0099","#ff00cc","#ff00ff","#003300","#003333","#003366","#003399",
  12. "#0033cc","#0033ff","#333300","#333333","#333366","#333399","#3333cc","#3333ff",
  13. "#663300","#663333","#663366","#663399","#6633cc","#6633ff","#993300","#993333",
  14. "#993366","#993399","#9933cc","#9933ff","#cc3300","#cc3333","#cc3366","#cc3399",
  15. "#cc33cc","#cc33ff","#ff3300","#ff3333","#ff3366","#ff3399","#ff33cc","#ff33ff",
  16. "#006600","#006633","#006666","#006699","#0066cc","#0066ff","#336600","#336633",
  17. "#336666","#336699","#3366cc","#3366ff","#666600","#666633","#666666","#666699",
  18. "#6666cc","#6666ff","#996600","#996633","#996666","#996699","#9966cc","#9966ff",
  19. "#cc6600","#cc6633","#cc6666","#cc6699","#cc66cc","#cc66ff","#ff6600","#ff6633",
  20. "#ff6666","#ff6699","#ff66cc","#ff66ff","#009900","#009933","#009966","#009999",
  21. "#0099cc","#0099ff","#339900","#339933","#339966","#339999","#3399cc","#3399ff",
  22. "#669900","#669933","#669966","#669999","#6699cc","#6699ff","#999900","#999933",
  23. "#999966","#999999","#9999cc","#9999ff","#cc9900","#cc9933","#cc9966","#cc9999",
  24. "#cc99cc","#cc99ff","#ff9900","#ff9933","#ff9966","#ff9999","#ff99cc","#ff99ff",
  25. "#00cc00","#00cc33","#00cc66","#00cc99","#00cccc","#00ccff","#33cc00","#33cc33",
  26. "#33cc66","#33cc99","#33cccc","#33ccff","#66cc00","#66cc33","#66cc66","#66cc99",
  27. "#66cccc","#66ccff","#99cc00","#99cc33","#99cc66","#99cc99","#99cccc","#99ccff",
  28. "#cccc00","#cccc33","#cccc66","#cccc99","#cccccc","#ccccff","#ffcc00","#ffcc33",
  29. "#ffcc66","#ffcc99","#ffcccc","#ffccff","#00ff00","#00ff33","#00ff66","#00ff99",
  30. "#00ffcc","#00ffff","#33ff00","#33ff33","#33ff66","#33ff99","#33ffcc","#33ffff",
  31. "#66ff00","#66ff33","#66ff66","#66ff99","#66ffcc","#66ffff","#99ff00","#99ff33",
  32. "#99ff66","#99ff99","#99ffcc","#99ffff","#ccff00","#ccff33","#ccff66","#ccff99",
  33. "#ccffcc","#ccffff","#ffff00","#ffff33","#ffff66","#ffff99","#ffffcc","#ffffff"
  34. ];
  35.  
  36. var named = {
  37. '#F0F8FF':'Alice Blue','#FAEBD7':'Antique White','#00FFFF':'Aqua','#7FFFD4':'Aquamarine','#F0FFFF':'Azure','#F5F5DC':'Beige',
  38. '#FFE4C4':'Bisque','#000000':'Black','#FFEBCD':'Blanched Almond','#0000FF':'Blue','#8A2BE2':'Blue Violet','#A52A2A':'Brown',
  39. '#DEB887':'Burly Wood','#5F9EA0':'Cadet Blue','#7FFF00':'Chartreuse','#D2691E':'Chocolate','#FF7F50':'Coral','#6495ED':'Cornflower Blue',
  40. '#FFF8DC':'Cornsilk','#DC143C':'Crimson','#00FFFF':'Cyan','#00008B':'Dark Blue','#008B8B':'Dark Cyan','#B8860B':'Dark Golden Rod',
  41. '#A9A9A9':'Dark Gray','#A9A9A9':'Dark Grey','#006400':'Dark Green','#BDB76B':'Dark Khaki','#8B008B':'Dark Magenta','#556B2F':'Dark Olive Green',
  42. '#FF8C00':'Darkorange','#9932CC':'Dark Orchid','#8B0000':'Dark Red','#E9967A':'Dark Salmon','#8FBC8F':'Dark Sea Green','#483D8B':'Dark Slate Blue',
  43. '#2F4F4F':'Dark Slate Gray','#2F4F4F':'Dark Slate Grey','#00CED1':'Dark Turquoise','#9400D3':'Dark Violet','#FF1493':'Deep Pink','#00BFFF':'Deep Sky Blue',
  44. '#696969':'Dim Gray','#696969':'Dim Grey','#1E90FF':'Dodger Blue','#B22222':'Fire Brick','#FFFAF0':'Floral White','#228B22':'Forest Green',
  45. '#FF00FF':'Fuchsia','#DCDCDC':'Gainsboro','#F8F8FF':'Ghost White','#FFD700':'Gold','#DAA520':'Golden Rod','#808080':'Gray','#808080':'Grey',
  46. '#008000':'Green','#ADFF2F':'Green Yellow','#F0FFF0':'Honey Dew','#FF69B4':'Hot Pink','#CD5C5C':'Indian Red','#4B0082':'Indigo','#FFFFF0':'Ivory',
  47. '#F0E68C':'Khaki','#E6E6FA':'Lavender','#FFF0F5':'Lavender Blush','#7CFC00':'Lawn Green','#FFFACD':'Lemon Chiffon','#ADD8E6':'Light Blue',
  48. '#F08080':'Light Coral','#E0FFFF':'Light Cyan','#FAFAD2':'Light Golden Rod Yellow','#D3D3D3':'Light Gray','#D3D3D3':'Light Grey','#90EE90':'Light Green',
  49. '#FFB6C1':'Light Pink','#FFA07A':'Light Salmon','#20B2AA':'Light Sea Green','#87CEFA':'Light Sky Blue','#778899':'Light Slate Gray','#778899':'Light Slate Grey',
  50. '#B0C4DE':'Light Steel Blue','#FFFFE0':'Light Yellow','#00FF00':'Lime','#32CD32':'Lime Green','#FAF0E6':'Linen','#FF00FF':'Magenta','#800000':'Maroon',
  51. '#66CDAA':'Medium Aqua Marine','#0000CD':'Medium Blue','#BA55D3':'Medium Orchid','#9370D8':'Medium Purple','#3CB371':'Medium Sea Green','#7B68EE':'Medium Slate Blue',
  52. '#00FA9A':'Medium Spring Green','#48D1CC':'Medium Turquoise','#C71585':'Medium Violet Red','#191970':'Midnight Blue','#F5FFFA':'Mint Cream','#FFE4E1':'Misty Rose','#FFE4B5':'Moccasin',
  53. '#FFDEAD':'Navajo White','#000080':'Navy','#FDF5E6':'Old Lace','#808000':'Olive','#6B8E23':'Olive Drab','#FFA500':'Orange','#FF4500':'Orange Red','#DA70D6':'Orchid',
  54. '#EEE8AA':'Pale Golden Rod','#98FB98':'Pale Green','#AFEEEE':'Pale Turquoise','#D87093':'Pale Violet Red','#FFEFD5':'Papaya Whip','#FFDAB9':'Peach Puff',
  55. '#CD853F':'Peru','#FFC0CB':'Pink','#DDA0DD':'Plum','#B0E0E6':'Powder Blue','#800080':'Purple','#FF0000':'Red','#BC8F8F':'Rosy Brown','#4169E1':'Royal Blue',
  56. '#8B4513':'Saddle Brown','#FA8072':'Salmon','#F4A460':'Sandy Brown','#2E8B57':'Sea Green','#FFF5EE':'Sea Shell','#A0522D':'Sienna','#C0C0C0':'Silver',
  57. '#87CEEB':'Sky Blue','#6A5ACD':'Slate Blue','#708090':'Slate Gray','#708090':'Slate Grey','#FFFAFA':'Snow','#00FF7F':'Spring Green',
  58. '#4682B4':'Steel Blue','#D2B48C':'Tan','#008080':'Teal','#D8BFD8':'Thistle','#FF6347':'Tomato','#40E0D0':'Turquoise','#EE82EE':'Violet',
  59. '#F5DEB3':'Wheat','#FFFFFF':'White','#F5F5F5':'White Smoke','#FFFF00':'Yellow','#9ACD32':'Yellow Green', '#FF227A':'Hot Pink'
  60. };
  61.  
  62. var namedLookup = {};
  63.  
  64. function init() {
  65. var inputColor = convertRGBToHex($("#color").val()), key, value;
  66.  
  67.  
  68. generatePicker();
  69. generateWebColors();
  70. generateNamedColors();
  71.  
  72. if (inputColor) {
  73. changeFinalColor(inputColor);
  74.  
  75. col = convertHexToRGB(inputColor);
  76.  
  77. if (col)
  78. updateLight(col.r, col.g, col.b);
  79. }
  80.  
  81. for (key in named) {
  82. value = named[key];
  83. namedLookup[value.replace(/\s+/, '').toLowerCase()] = key.replace(/#/, '').toLowerCase();
  84. }
  85. }
  86.  
  87.  
  88. function toHexColor(color) {
  89. var matches, red, green, blue, toInt = parseInt;
  90.  
  91. function hex(value) {
  92. value = parseInt(value).toString(16);
  93.  
  94. return value.length > 1 ? value : '0' + value; // Padd with leading zero
  95. };
  96.  
  97. color = color.replace(/[\s#]+/g, '').toLowerCase();
  98. color = namedLookup[color] || color;
  99. matches = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})|([a-f0-9])([a-f0-9])([a-f0-9])$/.exec(color);
  100.  
  101. if (matches) {
  102. if (matches[1]) {
  103. red = toInt(matches[1]);
  104. green = toInt(matches[2]);
  105. blue = toInt(matches[3]);
  106. } else if (matches[4]) {
  107. red = toInt(matches[4], 16);
  108. green = toInt(matches[5], 16);
  109. blue = toInt(matches[6], 16);
  110. } else if (matches[7]) {
  111. red = toInt(matches[7] + matches[7], 16);
  112. green = toInt(matches[8] + matches[8], 16);
  113. blue = toInt(matches[9] + matches[9], 16);
  114. }
  115.  
  116. return '#' + hex(red) + hex(green) + hex(blue);
  117. }
  118.  
  119. return '';
  120. }
  121.  
  122.  
  123. function showColor(color, name) {
  124. if (name)
  125. document.getElementById("colorname").innerHTML = name;
  126.  
  127. document.getElementById("preview").style.backgroundColor = color;
  128. document.getElementById("color").value = color.toUpperCase();
  129. }
  130.  
  131. function convertRGBToHex(col) {
  132. var re = new RegExp("rgb\\s*\\(\\s*([0-9]+).*,\\s*([0-9]+).*,\\s*([0-9]+).*\\)", "gi");
  133.  
  134. if (!col)
  135. return col;
  136.  
  137. var rgb = col.replace(re, "$1,$2,$3").split(',');
  138. if (rgb.length == 3) {
  139. r = parseInt(rgb[0]).toString(16);
  140. g = parseInt(rgb[1]).toString(16);
  141. b = parseInt(rgb[2]).toString(16);
  142.  
  143. r = r.length == 1 ? '0' + r : r;
  144. g = g.length == 1 ? '0' + g : g;
  145. b = b.length == 1 ? '0' + b : b;
  146.  
  147. return "#" + r + g + b;
  148. }
  149.  
  150. return col;
  151. }
  152.  
  153. function convertHexToRGB(col) {
  154. if (col.indexOf('#') != -1) {
  155. col = col.replace(new RegExp('[^0-9A-F]', 'gi'), '');
  156.  
  157. r = parseInt(col.substring(0, 2), 16);
  158. g = parseInt(col.substring(2, 4), 16);
  159. b = parseInt(col.substring(4, 6), 16);
  160.  
  161. return {r : r, g : g, b : b};
  162. }
  163.  
  164. return null;
  165. }
  166.  
  167. function generatePicker() {
  168. var el = document.getElementById('light'), h = '', i;
  169.  
  170. for (i = 0; i < detail; i++){
  171. h += '<div id="gs'+i+'" style="background-color:#000000; width:15px; height:3px; border-style:none; border-width:0px;"'
  172. + ' onclick="changeFinalColor(this.style.backgroundColor)"'
  173. + ' onmousedown="isMouseDown = true; return false;"'
  174. + ' onmouseup="isMouseDown = false;"'
  175. + ' onmousemove="if (isMouseDown && isMouseOver) changeFinalColor(this.style.backgroundColor); return false;"'
  176. + ' onmouseover="isMouseOver = true;"'
  177. + ' onmouseout="isMouseOver = false;"'
  178. + '></div>';
  179. }
  180.  
  181. el.innerHTML = h;
  182. }
  183.  
  184. function generateWebColors() {
  185. var el = document.getElementById('webcolors'), h = '', i;
  186.  
  187. if (el.className == 'generated')
  188. return;
  189.  
  190. // TODO: VoiceOver doesn't seem to support legend as a label referenced by labelledby.
  191. h += '<div role="listbox" aria-labelledby="webcolors_title" tabindex="0"><table role="presentation" border="0" cellspacing="1" cellpadding="0">'
  192. + '<tr>';
  193.  
  194. for (i=0; i<colors.length; i++) {
  195. h += '<td bgcolor="' + colors[i] + '" width="10" height="10">'
  196. + '<a href="javascript:;" role="option" onclick="taigachat.changeColor(); $(this).parents(\'.xenOverlay\').data(\'overlay\').close(); return false;" class="OverlayCloser" tabindex="-1" aria-labelledby="web_colors_' + i + '" onfocus="showColor(\'' + colors[i] + '\');" onmouseover="showColor(\'' + colors[i] + '\');" style="display:block;width:10px;height:10px;overflow:hidden;">';
  197. //if (tinyMCEPopup.editor.forcedHighContrastMode) {
  198. //h += '<canvas class="mceColorSwatch" height="10" width="10" data-color="' + colors[i] + '"></canvas>';
  199. //}
  200. h += '<span class="mceVoiceLabel" style="display:none;" id="web_colors_' + i + '">' + colors[i].toUpperCase() + '</span>';
  201. h += '</a></td>';
  202. if ((i+1) % 18 == 0)
  203. h += '</tr><tr>';
  204. }
  205.  
  206. h += '</table></div>';
  207.  
  208. el.innerHTML = h;
  209. el.className = 'generated';
  210.  
  211. paintCanvas(el);
  212. }
  213.  
  214. function paintCanvas(el) {
  215. $(el).contents().find(('canvas.mceColorSwatch', el)).each(function() {
  216. var canvas = this;
  217. var context;
  218. if (canvas.getContext && (context = canvas.getContext("2d"))) {
  219. context.fillStyle = canvas.getAttribute('data-color');
  220. context.fillRect(0, 0, 10, 10);
  221. }
  222. });
  223. }
  224. function generateNamedColors() {
  225. var el = document.getElementById('namedcolors'), h = '', n, v, i = 0;
  226.  
  227. if (el.className == 'generated')
  228. return;
  229.  
  230. for (n in named) {
  231. v = named[n];
  232. h += '<a href="javascript:;" role="option" onclick="taigachat.changeColor(); $(this).parents(\'.xenOverlay\').data(\'overlay\').close(); return false;" tabindex="-1" aria-labelledby="named_colors_' + i + '" onfocus="showColor(\'' + n + '\',\'' + v + '\');" onmouseover="showColor(\'' + n + '\',\'' + v + '\');" style="background-color: ' + n + '">';
  233. //if (tinyMCEPopup.editor.forcedHighContrastMode) {
  234. //h += '<canvas class="mceColorSwatch" height="10" width="10" data-color="' + colors[i] + '"></canvas>';
  235. //}
  236. h += '<span class="mceVoiceLabel" style="display:none;" id="named_colors_' + i + '">' + v + '</span>';
  237. h += '</a>';
  238. i++;
  239. }
  240.  
  241. el.innerHTML = h;
  242. el.className = 'generated';
  243.  
  244. paintCanvas(el);
  245. //enableKeyboardNavigation(el);
  246. }
  247.  
  248.  
  249. function dechex(n) {
  250. return strhex.charAt(Math.floor(n / 16)) + strhex.charAt(n % 16);
  251. }
  252.  
  253. function computeColor(e) {
  254. var x, y, partWidth, partDetail, imHeight, r, g, b, coef, i, finalCoef, finalR, finalG, finalB, pos = {};
  255. var offset = $(e.target).offset();
  256. pos.x = offset.left - $(window).scrollLeft();
  257. pos.y = offset.top - $(window).scrollTop();
  258.  
  259. x = e.offsetX ? e.offsetX : (e.target ? e.clientX - pos.x : 0);
  260. y = e.offsetY ? e.offsetY : (e.target ? e.clientY - pos.y : 0);
  261.  
  262. partWidth = document.getElementById('colors').width / 6;
  263. partDetail = detail / 2;
  264. imHeight = document.getElementById('colors').height;
  265.  
  266. r = (x >= 0)*(x < partWidth)*255 + (x >= partWidth)*(x < 2*partWidth)*(2*255 - x * 255 / partWidth) + (x >= 4*partWidth)*(x < 5*partWidth)*(-4*255 + x * 255 / partWidth) + (x >= 5*partWidth)*(x < 6*partWidth)*255;
  267. g = (x >= 0)*(x < partWidth)*(x * 255 / partWidth) + (x >= partWidth)*(x < 3*partWidth)*255 + (x >= 3*partWidth)*(x < 4*partWidth)*(4*255 - x * 255 / partWidth);
  268. b = (x >= 2*partWidth)*(x < 3*partWidth)*(-2*255 + x * 255 / partWidth) + (x >= 3*partWidth)*(x < 5*partWidth)*255 + (x >= 5*partWidth)*(x < 6*partWidth)*(6*255 - x * 255 / partWidth);
  269.  
  270. coef = (imHeight - y) / imHeight;
  271. r = 128 + (r - 128) * coef;
  272. g = 128 + (g - 128) * coef;
  273. b = 128 + (b - 128) * coef;
  274.  
  275. changeFinalColor('#' + dechex(r) + dechex(g) + dechex(b));
  276. updateLight(r, g, b);
  277. }
  278.  
  279. function updateLight(r, g, b) {
  280. var i, partDetail = detail / 2, finalCoef, finalR, finalG, finalB, color;
  281.  
  282. for (i=0; i<detail; i++) {
  283. if ((i>=0) && (i<partDetail)) {
  284. finalCoef = i / partDetail;
  285. finalR = dechex(255 - (255 - r) * finalCoef);
  286. finalG = dechex(255 - (255 - g) * finalCoef);
  287. finalB = dechex(255 - (255 - b) * finalCoef);
  288. } else {
  289. finalCoef = 2 - i / partDetail;
  290. finalR = dechex(r * finalCoef);
  291. finalG = dechex(g * finalCoef);
  292. finalB = dechex(b * finalCoef);
  293. }
  294.  
  295. color = finalR + finalG + finalB;
  296.  
  297. setCol('gs' + i, '#'+color);
  298. }
  299. }
  300.  
  301. function changeFinalColor(color) {
  302. if (color.indexOf('#') == -1)
  303. color = convertRGBToHex(color);
  304.  
  305. setCol('preview', color);
  306. document.getElementById('color').value = color;
  307. }
  308.  
  309. function setCol(e, c) {
  310. try {
  311. document.getElementById(e).style.backgroundColor = c;
  312. } catch (ex) {
  313. // Ignore IE warning
  314. }
  315. }
  316.  
  317.  
  318. var isMouseDown = false;
  319. var isMouseOver = false;
  320.  
  321. var tccLoadDelay;
  322. function finalLoad(){
  323. if(document.getElementById('light')){
  324. clearInterval(tccLoadDelay);
  325.  
  326. init();
  327.  
  328. $("#colors").click(function(event){
  329. computeColor(event);
  330. }).mousedown(function(){
  331. isMouseDown = true;
  332. return false;
  333. }).mouseup(function(){
  334. isMouseDown = false;
  335. }).mousemove(function(event){
  336. if(isMouseDown && isMouseOver)
  337. computeColor(event);
  338. return false;
  339. }).mouseover(function(){
  340. isMouseOver=true;
  341. }).mouseout(function(){
  342. isMouseOver=false;
  343. });
  344.  
  345. $("#colorpicker > form").bind('AutoValidationComplete', function(e){
  346. taigachat.changeColor();
  347. $(this).parents('.xenOverlay').data('overlay').close();
  348. e.preventDefault();
  349. return true;
  350. });
  351.  
  352. }
  353. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!