scratch – Diff between revs 58 and 125
?pathlinks?
Rev 58 | Rev 125 | |||
---|---|---|---|---|
1 | /* =========================================================== |
1 | /* =========================================================== |
|
2 | * trumbowyg.colors.js v1.2 |
2 | * trumbowyg.colors.js v1.2 |
|
3 | * Colors picker plugin for Trumbowyg |
3 | * Colors picker plugin for Trumbowyg |
|
4 | * http://alex-d.github.com/Trumbowyg |
4 | * http://alex-d.github.com/Trumbowyg |
|
5 | * =========================================================== |
5 | * =========================================================== |
|
6 | * Author : Alexandre Demode (Alex-D) |
6 | * Author : Alexandre Demode (Alex-D) |
|
7 | * Twitter : @AlexandreDemode |
7 | * Twitter : @AlexandreDemode |
|
8 | * Website : alex-d.fr |
8 | * Website : alex-d.fr |
|
9 | */ |
9 | */ |
|
10 | |
10 | |
|
11 | (function ($) { |
11 | (function ($) { |
|
12 | 'use strict'; |
12 | 'use strict'; |
|
13 | |
13 | |
|
14 | $.extend(true, $.trumbowyg, { |
14 | $.extend(true, $.trumbowyg, { |
|
15 | langs: { |
15 | langs: { |
|
16 | // jshint camelcase:false |
16 | // jshint camelcase:false |
|
17 | cs: { |
17 | cs: { |
|
18 | foreColor: 'Barva textu', |
18 | foreColor: 'Barva textu', |
|
19 | backColor: 'Barva pozadí' |
19 | backColor: 'Barva pozadí' |
|
20 | }, |
20 | }, |
|
21 | en: { |
21 | en: { |
|
22 | foreColor: 'Text color', |
22 | foreColor: 'Text color', |
|
23 | backColor: 'Background color' |
23 | backColor: 'Background color' |
|
24 | }, |
24 | }, |
|
25 | fr: { |
25 | fr: { |
|
26 | foreColor: 'Couleur du texte', |
26 | foreColor: 'Couleur du texte', |
|
27 | backColor: 'Couleur de fond' |
27 | backColor: 'Couleur de fond' |
|
28 | }, |
28 | }, |
|
29 | sk: { |
29 | sk: { |
|
30 | foreColor: 'Farba textu', |
30 | foreColor: 'Farba textu', |
|
31 | backColor: 'Farba pozadia' |
31 | backColor: 'Farba pozadia' |
|
32 | }, |
32 | }, |
|
33 | zh_cn: { |
33 | zh_cn: { |
|
34 | foreColor: '文字颜色', |
34 | foreColor: '文字颜色', |
|
35 | backColor: '背景颜色' |
35 | backColor: '背景颜色' |
|
- | 36 | }, |
||
- | 37 | ja: { |
||
- | 38 | foreColor: '文字色', |
||
- | 39 | backColor: '背景色' |
||
36 | } |
40 | } |
|
37 | } |
41 | } |
|
38 | }); |
42 | }); |
|
39 | // jshint camelcase:true |
43 | // jshint camelcase:true |
|
40 | |
44 | |
|
41 | |
45 | |
|
42 | function hex(x) { |
46 | function hex(x) { |
|
43 | return ('0' + parseInt(x).toString(16)).slice(-2); |
47 | return ('0' + parseInt(x).toString(16)).slice(-2); |
|
44 | } |
48 | } |
|
45 | |
49 | |
|
46 | function colorToHex(rgb) { |
50 | function colorToHex(rgb) { |
|
47 | if (rgb.search('rgb') === -1) { |
51 | if (rgb.search('rgb') === -1) { |
|
48 | return rgb.replace('#', ''); |
52 | return rgb.replace('#', ''); |
|
49 | } else if (rgb === 'rgba(0, 0, 0, 0)') { |
53 | } else if (rgb === 'rgba(0, 0, 0, 0)') { |
|
50 | return 'transparent'; |
54 | return 'transparent'; |
|
51 | } else { |
55 | } else { |
|
52 | rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); |
56 | rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); |
|
53 | return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); |
57 | return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); |
|
54 | } |
58 | } |
|
55 | } |
59 | } |
|
56 | |
60 | |
|
57 | function colorTagHandler(element, trumbowyg) { |
61 | function colorTagHandler(element, trumbowyg) { |
|
58 | var tags = []; |
62 | var tags = []; |
|
59 | |
63 | |
|
60 | if(!element.style){ |
64 | if(!element.style){ |
|
61 | return tags; |
65 | return tags; |
|
62 | } |
66 | } |
|
63 | |
67 | |
|
64 | // background color |
68 | // background color |
|
65 | if (element.style.backgroundColor !== '') { |
69 | if (element.style.backgroundColor !== '') { |
|
66 | var backColor = colorToHex(element.style.backgroundColor); |
70 | var backColor = colorToHex(element.style.backgroundColor); |
|
67 | if (trumbowyg.o.plugins.colors.colorList.indexOf(backColor) >= 0) { |
71 | if (trumbowyg.o.plugins.colors.colorList.indexOf(backColor) >= 0) { |
|
68 | tags.push('backColor' + backColor); |
72 | tags.push('backColor' + backColor); |
|
69 | } else { |
73 | } else { |
|
70 | tags.push('backColorFree'); |
74 | tags.push('backColorFree'); |
|
71 | } |
75 | } |
|
72 | } |
76 | } |
|
73 | |
77 | |
|
74 | // text color |
78 | // text color |
|
75 | var foreColor; |
79 | var foreColor; |
|
76 | if (element.style.color !== '') { |
80 | if (element.style.color !== '') { |
|
77 | foreColor = colorToHex(element.style.color); |
81 | foreColor = colorToHex(element.style.color); |
|
78 | } else if (element.hasAttribute('color')) { |
82 | } else if (element.hasAttribute('color')) { |
|
79 | foreColor = colorToHex(element.getAttribute('color')); |
83 | foreColor = colorToHex(element.getAttribute('color')); |
|
80 | } |
84 | } |
|
81 | if (foreColor) { |
85 | if (foreColor) { |
|
82 | if (trumbowyg.o.plugins.colors.colorList.indexOf(foreColor) >= 0) { |
86 | if (trumbowyg.o.plugins.colors.colorList.indexOf(foreColor) >= 0) { |
|
83 | tags.push('foreColor' + foreColor); |
87 | tags.push('foreColor' + foreColor); |
|
84 | } else { |
88 | } else { |
|
85 | tags.push('foreColorFree'); |
89 | tags.push('foreColorFree'); |
|
86 | } |
90 | } |
|
87 | } |
91 | } |
|
88 | |
92 | |
|
89 | return tags; |
93 | return tags; |
|
90 | } |
94 | } |
|
91 | |
95 | |
|
92 | var defaultOptions = { |
96 | var defaultOptions = { |
|
93 | 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'] |
97 | 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'] |
|
94 | }; |
98 | }; |
|
95 | |
99 | |
|
96 | // Add all colors in two dropdowns |
100 | // Add all colors in two dropdowns |
|
97 | $.extend(true, $.trumbowyg, { |
101 | $.extend(true, $.trumbowyg, { |
|
98 | plugins: { |
102 | plugins: { |
|
99 | color: { |
103 | color: { |
|
100 | init: function (trumbowyg) { |
104 | init: function (trumbowyg) { |
|
101 | trumbowyg.o.plugins.colors = trumbowyg.o.plugins.colors || defaultOptions; |
105 | trumbowyg.o.plugins.colors = trumbowyg.o.plugins.colors || defaultOptions; |
|
102 | var foreColorBtnDef = { |
106 | var foreColorBtnDef = { |
|
103 | dropdown: buildDropdown('foreColor', trumbowyg) |
107 | dropdown: buildDropdown('foreColor', trumbowyg) |
|
104 | }, |
108 | }, |
|
105 | backColorBtnDef = { |
109 | backColorBtnDef = { |
|
106 | dropdown: buildDropdown('backColor', trumbowyg) |
110 | dropdown: buildDropdown('backColor', trumbowyg) |
|
107 | }; |
111 | }; |
|
108 | |
112 | |
|
109 | trumbowyg.addBtnDef('foreColor', foreColorBtnDef); |
113 | trumbowyg.addBtnDef('foreColor', foreColorBtnDef); |
|
110 | trumbowyg.addBtnDef('backColor', backColorBtnDef); |
114 | trumbowyg.addBtnDef('backColor', backColorBtnDef); |
|
111 | }, |
115 | }, |
|
112 | tagHandler: colorTagHandler |
116 | tagHandler: colorTagHandler |
|
113 | } |
117 | } |
|
114 | } |
118 | } |
|
115 | }); |
119 | }); |
|
116 | |
120 | |
|
117 | function buildDropdown(fn, trumbowyg) { |
121 | function buildDropdown(fn, trumbowyg) { |
|
118 | var dropdown = []; |
122 | var dropdown = []; |
|
119 | |
123 | |
|
120 | $.each(trumbowyg.o.plugins.colors.colorList, function (i, color) { |
124 | $.each(trumbowyg.o.plugins.colors.colorList, function (i, color) { |
|
121 | var btn = fn + color, |
125 | var btn = fn + color, |
|
122 | btnDef = { |
126 | btnDef = { |
|
123 | fn: fn, |
127 | fn: fn, |
|
124 | forceCss: true, |
128 | forceCss: true, |
|
125 | param: '#' + color, |
129 | param: '#' + color, |
|
126 | style: 'background-color: #' + color + ';' |
130 | style: 'background-color: #' + color + ';' |
|
127 | }; |
131 | }; |
|
128 | trumbowyg.addBtnDef(btn, btnDef); |
132 | trumbowyg.addBtnDef(btn, btnDef); |
|
129 | dropdown.push(btn); |
133 | dropdown.push(btn); |
|
130 | }); |
134 | }); |
|
131 | |
135 | |
|
132 | var removeColorButtonName = fn + 'Remove', |
136 | var removeColorButtonName = fn + 'Remove', |
|
133 | removeColorBtnDef = { |
137 | removeColorBtnDef = { |
|
134 | fn: 'removeFormat', |
138 | fn: 'removeFormat', |
|
135 | param: fn, |
139 | param: fn, |
|
136 | style: 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkQAAfEJMRmwBYhoGBYQtMBYoAADziAp0jtJTgAAAAAElFTkSuQmCC);' |
140 | style: 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkQAAfEJMRmwBYhoGBYQtMBYoAADziAp0jtJTgAAAAAElFTkSuQmCC);' |
|
137 | }; |
141 | }; |
|
138 | trumbowyg.addBtnDef(removeColorButtonName, removeColorBtnDef); |
142 | trumbowyg.addBtnDef(removeColorButtonName, removeColorBtnDef); |
|
139 | dropdown.push(removeColorButtonName); |
143 | dropdown.push(removeColorButtonName); |
|
140 | |
144 | |
|
141 | // add free color btn |
145 | // add free color btn |
|
142 | var freeColorButtonName = fn + 'Free', |
146 | var freeColorButtonName = fn + 'Free', |
|
143 | freeColorBtnDef = { |
147 | freeColorBtnDef = { |
|
144 | fn: function () { |
148 | fn: function () { |
|
145 | trumbowyg.openModalInsert(trumbowyg.lang[fn], |
149 | trumbowyg.openModalInsert(trumbowyg.lang[fn], |
|
146 | { |
150 | { |
|
147 | color: { |
151 | color: { |
|
148 | label: fn, |
152 | label: fn, |
|
149 | value: '#FFFFFF' |
153 | value: '#FFFFFF' |
|
150 | } |
154 | } |
|
151 | }, |
155 | }, |
|
152 | // callback |
156 | // callback |
|
153 | function (values) { |
157 | function (values) { |
|
154 | trumbowyg.execCmd(fn, values.color); |
158 | trumbowyg.execCmd(fn, values.color); |
|
155 | return true; |
159 | return true; |
|
156 | } |
160 | } |
|
157 | ); |
161 | ); |
|
158 | }, |
162 | }, |
|
159 | text: '#', |
163 | text: '#', |
|
160 | // style adjust for displaying the text |
164 | // style adjust for displaying the text |
|
161 | style: 'text-indent: 0;line-height: 20px;padding: 0 5px;' |
165 | style: 'text-indent: 0;line-height: 20px;padding: 0 5px;' |
|
162 | }; |
166 | }; |
|
163 | trumbowyg.addBtnDef(freeColorButtonName, freeColorBtnDef); |
167 | trumbowyg.addBtnDef(freeColorButtonName, freeColorBtnDef); |
|
164 | dropdown.push(freeColorButtonName); |
168 | dropdown.push(freeColorButtonName); |
|
165 | |
169 | |
|
166 | return dropdown; |
170 | return dropdown; |
|
167 | } |
171 | } |
|
168 | })(jQuery); |
172 | })(jQuery); |
|
169 | |
173 | |