trumbowyg.colors.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. /* ===========================================================
  2. * trumbowyg.colors.js v1.2
  3. * Colors picker plugin for Trumbowyg
  4. * http://alex-d.github.com/Trumbowyg
  5. * ===========================================================
  6. * Author : Alexandre Demode (Alex-D)
  7. * Twitter : @AlexandreDemode
  8. * Website : alex-d.fr
  9. */
  10. (function ($) {
  11. 'use strict';
  12. $.extend(true, $.trumbowyg, {
  13. langs: {
  14. // jshint camelcase:false
  15. cs: {
  16. foreColor: 'Barva textu',
  17. backColor: 'Barva pozadí'
  18. },
  19. en: {
  20. foreColor: 'Text color',
  21. backColor: 'Background color'
  22. },
  23. fr: {
  24. foreColor: 'Couleur du texte',
  25. backColor: 'Couleur de fond'
  26. },
  27. nl: {
  28. foreColor: 'Tekstkleur',
  29. backColor: 'Achtergrondkleur'
  30. },
  31. sk: {
  32. foreColor: 'Farba textu',
  33. backColor: 'Farba pozadia'
  34. },
  35. zh_cn: {
  36. foreColor: '文字颜色',
  37. backColor: '背景颜色'
  38. },
  39. ru: {
  40. foreColor: 'Цвет текста',
  41. backColor: 'Цвет выделения текста'
  42. },
  43. ja: {
  44. foreColor: '文字色',
  45. backColor: '背景色'
  46. },
  47. tr: {
  48. foreColor: 'Yazı rengi',
  49. backColor: 'Arkaplan rengi'
  50. }
  51. }
  52. });
  53. // jshint camelcase:true
  54. function hex(x) {
  55. return ('0' + parseInt(x).toString(16)).slice(-2);
  56. }
  57. function colorToHex(rgb) {
  58. if (rgb.search('rgb') === -1) {
  59. return rgb.replace('#', '');
  60. } else if (rgb === 'rgba(0, 0, 0, 0)') {
  61. return 'transparent';
  62. } else {
  63. rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
  64. return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  65. }
  66. }
  67. function colorTagHandler(element, trumbowyg) {
  68. var tags = [];
  69. if (!element.style) {
  70. return tags;
  71. }
  72. // background color
  73. if (element.style.backgroundColor !== '') {
  74. var backColor = colorToHex(element.style.backgroundColor);
  75. if (trumbowyg.o.plugins.colors.colorList.indexOf(backColor) >= 0) {
  76. tags.push('backColor' + backColor);
  77. } else {
  78. tags.push('backColorFree');
  79. }
  80. }
  81. // text color
  82. var foreColor;
  83. if (element.style.color !== '') {
  84. foreColor = colorToHex(element.style.color);
  85. } else if (element.hasAttribute('color')) {
  86. foreColor = colorToHex(element.getAttribute('color'));
  87. }
  88. if (foreColor) {
  89. if (trumbowyg.o.plugins.colors.colorList.indexOf(foreColor) >= 0) {
  90. tags.push('foreColor' + foreColor);
  91. } else {
  92. tags.push('foreColorFree');
  93. }
  94. }
  95. return tags;
  96. }
  97. var defaultOptions = {
  98. colorList: ['ffffff', '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646', 'ffff00', 'f2f2f2', '7f7f7f', 'ddd9c3', 'c6d9f0', 'dbe5f1', 'f2dcdb', 'ebf1dd', 'e5e0ec', 'dbeef3', 'fdeada', 'fff2ca', 'd8d8d8', '595959', 'c4bd97', '8db3e2', 'b8cce4', 'e5b9b7', 'd7e3bc', 'ccc1d9', 'b7dde8', 'fbd5b5', 'ffe694', 'bfbfbf', '3f3f3f', '938953', '548dd4', '95b3d7', 'd99694', 'c3d69b', 'b2a2c7', 'b7dde8', 'fac08f', 'f2c314', 'a5a5a5', '262626', '494429', '17365d', '366092', '953734', '76923c', '5f497a', '92cddc', 'e36c09', 'c09100', '7f7f7f', '0c0c0c', '1d1b10', '0f243e', '244061', '632423', '4f6128', '3f3151', '31859b', '974806', '7f6000']
  99. };
  100. // Add all colors in two dropdowns
  101. $.extend(true, $.trumbowyg, {
  102. plugins: {
  103. color: {
  104. init: function (trumbowyg) {
  105. trumbowyg.o.plugins.colors = trumbowyg.o.plugins.colors || defaultOptions;
  106. var foreColorBtnDef = {
  107. dropdown: buildDropdown('foreColor', trumbowyg)
  108. },
  109. backColorBtnDef = {
  110. dropdown: buildDropdown('backColor', trumbowyg)
  111. };
  112. trumbowyg.addBtnDef('foreColor', foreColorBtnDef);
  113. trumbowyg.addBtnDef('backColor', backColorBtnDef);
  114. },
  115. tagHandler: colorTagHandler
  116. }
  117. }
  118. });
  119. function buildDropdown(fn, trumbowyg) {
  120. var dropdown = [];
  121. $.each(trumbowyg.o.plugins.colors.colorList, function (i, color) {
  122. var btn = fn + color,
  123. btnDef = {
  124. fn: fn,
  125. forceCss: true,
  126. param: '#' + color,
  127. style: 'background-color: #' + color + ';'
  128. };
  129. trumbowyg.addBtnDef(btn, btnDef);
  130. dropdown.push(btn);
  131. });
  132. var removeColorButtonName = fn + 'Remove',
  133. removeColorBtnDef = {
  134. fn: 'removeFormat',
  135. param: fn,
  136. style: 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkQAAfEJMRmwBYhoGBYQtMBYoAADziAp0jtJTgAAAAAElFTkSuQmCC);'
  137. };
  138. trumbowyg.addBtnDef(removeColorButtonName, removeColorBtnDef);
  139. dropdown.push(removeColorButtonName);
  140. // add free color btn
  141. var freeColorButtonName = fn + 'Free',
  142. freeColorBtnDef = {
  143. fn: function () {
  144. trumbowyg.openModalInsert(trumbowyg.lang[fn],
  145. {
  146. color: {
  147. label: fn,
  148. value: '#FFFFFF'
  149. }
  150. },
  151. // callback
  152. function (values) {
  153. trumbowyg.execCmd(fn, values.color);
  154. return true;
  155. }
  156. );
  157. },
  158. text: '#',
  159. // style adjust for displaying the text
  160. style: 'text-indent: 0;line-height: 20px;padding: 0 5px;'
  161. };
  162. trumbowyg.addBtnDef(freeColorButtonName, freeColorBtnDef);
  163. dropdown.push(freeColorButtonName);
  164. return dropdown;
  165. }
  166. })(jQuery);