← Back to branch summary

~ubuntu-branches/debian/sid/wordpress/sid

« back to all changes in this revision

Viewing changes to wp-includes/js/tinymce/plugins/textcolor/plugin.js

  • Committer: Package Import Robot
  • Author(s): Craig Small
  • Date: 2014-09-05 20:58:06 UTC
  • mfrom: (1.2.38)
  • Revision ID: package-import@ubuntu.com-20140905205806-e4h6dkg4190n0svf
Tags: 4.0+dfsg-1
New upstream release

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-includes/js/tinymce/plugins/textcolor/plugin.js
12
12
/*eslint consistent-this:0 */
13
13
 
14
14
tinymce.PluginManager.add('textcolor', function(editor) {
 
15
        var cols, rows;
 
16
 
 
17
        rows = editor.settings.textcolor_rows || 5;
 
18
        cols = editor.settings.textcolor_cols || 8;
 
19
 
 
20
        function getCurrentColor(format) {
 
21
                var color;
 
22
 
 
23
                editor.dom.getParents(editor.selection.getStart(), function(elm) {
 
24
                        var value;
 
25
 
 
26
                        if ((value = elm.style[format == 'forecolor' ? 'color' : 'background-color'])) {
 
27
                                color = value;
 
28
                        }
 
29
                });
 
30
 
 
31
                return color;
 
32
        }
 
33
 
15
34
        function mapColors() {
16
35
                var i, colors = [], colorMap;
17
36
 
46
65
                        "00FF00", "Lime",
47
66
                        "00FFFF", "Aqua",
48
67
                        "00CCFF", "Sky blue",
49
 
                        "993366", "Brown",
50
 
                        "C0C0C0", "Silver",
 
68
                        "993366", "Red violet",
 
69
                        "FFFFFF", "White",
51
70
                        "FF99CC", "Pink",
52
71
                        "FFCC99", "Peach",
53
72
                        "FFFF99", "Light yellow",
54
73
                        "CCFFCC", "Pale green",
55
74
                        "CCFFFF", "Pale cyan",
56
75
                        "99CCFF", "Light sky blue",
57
 
                        "CC99FF", "Plum",
58
 
                        "FFFFFF", "White"
 
76
                        "CC99FF", "Plum"
59
77
                ];
60
78
 
61
79
                for (i = 0; i < colorMap.length; i += 2) {
62
80
                        colors.push({
63
81
                                text: colorMap[i + 1],
64
 
                                color: colorMap[i]
 
82
                                color: '#' + colorMap[i]
65
83
                        });
66
84
                }
67
85
 
69
87
        }
70
88
 
71
89
        function renderColorPicker() {
72
 
                var ctrl = this, colors, color, html, last, rows, cols, x, y, i;
 
90
                var ctrl = this, colors, color, html, last, x, y, i, id = ctrl._id, count = 0;
 
91
 
 
92
                function getColorCellHtml(color, title) {
 
93
                        var isNoColor = color == 'transparent';
 
94
 
 
95
                        return (
 
96
                                '<td class="mce-grid-cell' + (isNoColor ? ' mce-colorbtn-trans' : '') + '">' +
 
97
                                        '<div id="' + id + '-' + (count++) + '"' +
 
98
                                                ' data-mce-color="' + (color ? color : '') + '"' +
 
99
                                                ' role="option"' +
 
100
                                                ' tabIndex="-1"' +
 
101
                                                ' style="' + (color ? 'background-color: ' + color : '') + '"' +
 
102
                                                ' title="' + tinymce.translate(title) + '">' +
 
103
                                                (isNoColor ? '&#215;' : '') +
 
104
                                        '</div>' +
 
105
                                '</td>'
 
106
                        );
 
107
                }
73
108
 
74
109
                colors = mapColors();
 
110
                colors.push({
 
111
                        text: tinymce.translate("No color"),
 
112
                        color: "transparent"
 
113
                });
75
114
 
76
115
                html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="list" cellspacing="0"><tbody>';
77
116
                last = colors.length - 1;
78
 
                rows = editor.settings.textcolor_rows || 5;
79
 
                cols = editor.settings.textcolor_cols || 8;
80
117
 
81
118
                for (y = 0; y < rows; y++) {
82
119
                        html += '<tr>';
88
125
                                        html += '<td></td>';
89
126
                                } else {
90
127
                                        color = colors[i];
91
 
                                        html += (
92
 
                                                '<td>' +
93
 
                                                        '<div id="' + ctrl._id + '-' + i + '"' +
94
 
                                                                ' data-mce-color="' + color.color + '"' +
95
 
                                                                ' role="option"' +
96
 
                                                                ' tabIndex="-1"' +
97
 
                                                                ' style="' + (color ? 'background-color: #' + color.color : '') + '"' +
98
 
                                                                ' title="' + color.text + '">' +
99
 
                                                        '</div>' +
100
 
                                                '</td>'
101
 
                                        );
 
128
                                        html += getColorCellHtml(color.color, color.text);
102
129
                                }
103
130
                        }
104
131
 
105
132
                        html += '</tr>';
106
133
                }
107
134
 
 
135
                if (editor.settings.color_picker_callback) {
 
136
                        html += (
 
137
                                '<tr>' +
 
138
                                        '<td colspan="' + cols + '" class="mce-custom-color-btn">' +
 
139
                                                '<div id="' + id + '-c" class="mce-widget mce-btn mce-btn-small mce-btn-flat" ' +
 
140
                                                        'role="button" tabindex="-1" aria-labelledby="' + id + '-c" style="width: 100%">' +
 
141
                                                        '<button type="button" role="presentation" tabindex="-1">' + tinymce.translate('Custom...') + '</button>' +
 
142
                                                '</div>' +
 
143
                                        '</td>' +
 
144
                                '</tr>'
 
145
                        );
 
146
 
 
147
                        html += '<tr>';
 
148
 
 
149
                        for (x = 0; x < cols; x++) {
 
150
                                html += getColorCellHtml('', 'Custom color');
 
151
                        }
 
152
 
 
153
                        html += '</tr>';
 
154
                }
 
155
 
108
156
                html += '</tbody></table>';
109
157
 
110
158
                return html;
111
159
        }
112
160
 
 
161
        function applyFormat(format, value) {
 
162
                editor.focus();
 
163
                editor.formatter.apply(format, {value: value});
 
164
                editor.nodeChanged();
 
165
        }
 
166
 
 
167
        function removeFormat(format) {
 
168
                editor.focus();
 
169
                editor.formatter.remove(format, {value: null}, null, true);
 
170
                editor.nodeChanged();
 
171
        }
 
172
 
113
173
        function onPanelClick(e) {
114
174
                var buttonCtrl = this.parent(), value;
115
175
 
116
 
                if ((value = e.target.getAttribute('data-mce-color'))) {
 
176
                function selectColor(value) {
 
177
                        buttonCtrl.hidePanel();
 
178
                        buttonCtrl.color(value);
 
179
                        applyFormat(buttonCtrl.settings.format, value);
 
180
                }
 
181
 
 
182
                function setDivColor(div, value) {
 
183
                        div.style.background = value;
 
184
                        div.setAttribute('data-mce-color', value);
 
185
                }
 
186
 
 
187
                if (tinymce.DOM.getParent(e.target, '.mce-custom-color-btn')) {
 
188
                        buttonCtrl.hidePanel();
 
189
 
 
190
                        editor.settings.color_picker_callback.call(editor, function(value) {
 
191
                                var tableElm = buttonCtrl.panel.getEl().getElementsByTagName('table')[0];
 
192
                                var customColorCells, div, i;
 
193
 
 
194
                                customColorCells = tinymce.map(tableElm.rows[tableElm.rows.length - 1].childNodes, function(elm) {
 
195
                                        return elm.firstChild;
 
196
                                });
 
197
 
 
198
                                for (i = 0; i < customColorCells.length; i++) {
 
199
                                        div = customColorCells[i];
 
200
                                        if (!div.getAttribute('data-mce-color')) {
 
201
                                                break;
 
202
                                        }
 
203
                                }
 
204
 
 
205
                                // Shift colors to the right
 
206
                                // TODO: Might need to be the left on RTL
 
207
                                if (i == cols) {
 
208
                                        for (i = 0; i < cols - 1; i++) {
 
209
                                                setDivColor(customColorCells[i], customColorCells[i + 1].getAttribute('data-mce-color'));
 
210
                                        }
 
211
                                }
 
212
 
 
213
                                setDivColor(div, value);
 
214
                                selectColor(value);
 
215
                        }, getCurrentColor(buttonCtrl.settings.format));
 
216
                }
 
217
 
 
218
                value = e.target.getAttribute('data-mce-color');
 
219
                if (value) {
117
220
                        if (this.lastId) {
118
221
                                document.getElementById(this.lastId).setAttribute('aria-selected', false);
119
222
                        }
121
224
                        e.target.setAttribute('aria-selected', true);
122
225
                        this.lastId = e.target.id;
123
226
 
 
227
                        if (value == 'transparent') {
 
228
                                removeFormat(buttonCtrl.settings.format);
 
229
                                buttonCtrl.hidePanel();
 
230
                                return;
 
231
                        }
 
232
 
 
233
                        selectColor(value);
 
234
                } else if (value !== null) {
124
235
                        buttonCtrl.hidePanel();
125
 
                        value = '#' + value;
126
 
                        buttonCtrl.color(value);
127
 
                        editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
128
236
                }
129
237
        }
130
238
 
132
240
                var self = this;
133
241
 
134
242
                if (self._color) {
135
 
                        editor.execCommand(self.settings.selectcmd, false, self._color);
 
243
                        applyFormat(self.settings.format, self._color);
136
244
                }
137
245
        }
138
246
 
139
247
        editor.addButton('forecolor', {
140
248
                type: 'colorbutton',
141
249
                tooltip: 'Text color',
142
 
                selectcmd: 'ForeColor',
 
250
                format: 'forecolor',
143
251
                panel: {
144
252
                        role: 'application',
145
253
                        ariaRemember: true,
152
260
        editor.addButton('backcolor', {
153
261
                type: 'colorbutton',
154
262
                tooltip: 'Background color',
155
 
                selectcmd: 'HiliteColor',
 
263
                format: 'hilitecolor',
156
264
                panel: {
157
265
                        role: 'application',
158
266
                        ariaRemember: true,