← Back to branch summary

~kosova/+junk/tuxfamily-twiki

« back to all changes in this revision

Viewing changes to foswiki/pub/System/TinyMCEPlugin/tinymce/jscripts/tiny_mce/plugins/table/jscripts/table.js

  • Committer: James Michael DuPont
  • Date: 2009-07-18 19:58:49 UTC
  • Revision ID: jamesmikedupont@gmail.com-20090718195849-vgbmaht2ys791uo2
added foswiki

Show diffs side-by-side

added added

removed removed

Lines of Context:
foswiki/pub/System/TinyMCEPlugin/tinymce/jscripts/tiny_mce/plugins/table/jscripts/table.js
 
1
var action, orgTableWidth, orgTableHeight;
 
2
 
 
3
function insertTable() {
 
4
        var formObj = document.forms[0];
 
5
        var inst = tinyMCE.selectedInstance;
 
6
        var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption;
 
7
        var html = '', capEl;
 
8
        var elm = tinyMCE.tableElm;
 
9
        var cellLimit, rowLimit, colLimit;
 
10
 
 
11
        if (!AutoValidator.validate(formObj)) {
 
12
                alert(tinyMCE.getLang('lang_invalid_data'));
 
13
                return false;
 
14
        }
 
15
 
 
16
        tinyMCEPopup.restoreSelection();
 
17
 
 
18
        // Get form data
 
19
        cols = formObj.elements['cols'].value;
 
20
        rows = formObj.elements['rows'].value;
 
21
        border = formObj.elements['border'].value != "" ? formObj.elements['border'].value  : 0;
 
22
        cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : "";
 
23
        cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : "";
 
24
        align = formObj.elements['align'].options[formObj.elements['align'].selectedIndex].value;
 
25
        width = formObj.elements['width'].value;
 
26
        height = formObj.elements['height'].value;
 
27
        bordercolor = formObj.elements['bordercolor'].value;
 
28
        bgcolor = formObj.elements['bgcolor'].value;
 
29
        className = formObj.elements['class'].options[formObj.elements['class'].selectedIndex].value;
 
30
        id = formObj.elements['id'].value;
 
31
        summary = formObj.elements['summary'].value;
 
32
        style = formObj.elements['style'].value;
 
33
        dir = formObj.elements['dir'].value;
 
34
        lang = formObj.elements['lang'].value;
 
35
        background = formObj.elements['backgroundimage'].value;
 
36
        caption = formObj.elements['caption'].checked;
 
37
 
 
38
        cellLimit = tinyMCE.getParam('table_cell_limit', false);
 
39
        rowLimit = tinyMCE.getParam('table_row_limit', false);
 
40
        colLimit = tinyMCE.getParam('table_col_limit', false);
 
41
 
 
42
        // Validate table size
 
43
        if (colLimit && cols > colLimit) {
 
44
                alert(tinyMCE.getLang('lang_table_col_limit', '', true, {cols : colLimit}));
 
45
                return false;
 
46
        } else if (rowLimit && rows > rowLimit) {
 
47
                alert(tinyMCE.getLang('lang_table_row_limit', '', true, {rows : rowLimit}));
 
48
                return false;
 
49
        } else if (cellLimit && cols * rows > cellLimit) {
 
50
                alert(tinyMCE.getLang('lang_table_cell_limit', '', true, {cells : cellLimit}));
 
51
                return false;
 
52
        }
 
53
 
 
54
        // Update table
 
55
        if (action == "update") {
 
56
                inst.execCommand('mceBeginUndoLevel');
 
57
 
 
58
                tinyMCE.setAttrib(elm, 'cellPadding', cellpadding, true);
 
59
                tinyMCE.setAttrib(elm, 'cellSpacing', cellspacing, true);
 
60
                tinyMCE.setAttrib(elm, 'border', border, true);
 
61
                tinyMCE.setAttrib(elm, 'align', align);
 
62
                tinyMCE.setAttrib(elm, 'class', className);
 
63
                tinyMCE.setAttrib(elm, 'style', style);
 
64
                tinyMCE.setAttrib(elm, 'id', id);
 
65
                tinyMCE.setAttrib(elm, 'summary', summary);
 
66
                tinyMCE.setAttrib(elm, 'dir', dir);
 
67
                tinyMCE.setAttrib(elm, 'lang', lang);
 
68
 
 
69
                capEl = elm.getElementsByTagName('caption')[0];
 
70
 
 
71
                if (capEl && !caption)
 
72
                        capEl.parentNode.removeChild(capEl);
 
73
 
 
74
                if (!capEl && caption) {
 
75
                        capEl = elm.ownerDocument.createElement('caption');
 
76
                        capEl.innerHTML = ' ';
 
77
                        elm.insertBefore(capEl, elm.firstChild);
 
78
                }
 
79
 
 
80
                // Not inline styles
 
81
                if (!tinyMCE.getParam("inline_styles"))
 
82
                        tinyMCE.setAttrib(elm, 'width', width, true);
 
83
 
 
84
                // Remove these since they are not valid XHTML
 
85
                tinyMCE.setAttrib(elm, 'borderColor', '');
 
86
                tinyMCE.setAttrib(elm, 'bgColor', '');
 
87
                tinyMCE.setAttrib(elm, 'background', '');
 
88
                tinyMCE.setAttrib(elm, 'height', '');
 
89
 
 
90
                if (background != '')
 
91
                        elm.style.backgroundImage = "url('" + background + "')";
 
92
                else
 
93
                        elm.style.backgroundImage = '';
 
94
 
 
95
                if (tinyMCE.getParam("inline_styles"))
 
96
                        elm.style.borderWidth = border + "px";
 
97
 
 
98
                if (tinyMCE.getParam("inline_styles")) {
 
99
                        if (width != '')
 
100
                                elm.style.width = getCSSSize(width);
 
101
                }
 
102
 
 
103
                if (bordercolor != "") {
 
104
                        elm.style.borderColor = bordercolor;
 
105
                        elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle;
 
106
                        elm.style.borderWidth = border == "" ? "1px" : border;
 
107
                } else
 
108
                        elm.style.borderColor = '';
 
109
 
 
110
                elm.style.backgroundColor = bgcolor;
 
111
                elm.style.height = getCSSSize(height);
 
112
 
 
113
                tinyMCE.handleVisualAid(tinyMCE.tableElm, false, inst.visualAid, inst);
 
114
 
 
115
                // Fix for stange MSIE align bug
 
116
                tinyMCE.tableElm.outerHTML = tinyMCE.tableElm.outerHTML;
 
117
 
 
118
                tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
 
119
                tinyMCE.triggerNodeChange();
 
120
                inst.execCommand('mceEndUndoLevel');
 
121
 
 
122
                // Repaint if dimensions changed
 
123
                if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight)
 
124
                        inst.repaint();
 
125
 
 
126
                tinyMCEPopup.close();
 
127
                return true;
 
128
        }
 
129
 
 
130
        // Create new table
 
131
        html += '<table';
 
132
 
 
133
        html += makeAttrib('id', id);
 
134
        html += makeAttrib('border', border);
 
135
        html += makeAttrib('cellpadding', cellpadding);
 
136
        html += makeAttrib('cellspacing', cellspacing);
 
137
        html += makeAttrib('width', width);
 
138
        //html += makeAttrib('height', height);
 
139
        //html += makeAttrib('bordercolor', bordercolor);
 
140
        //html += makeAttrib('bgcolor', bgcolor);
 
141
        html += makeAttrib('align', align);
 
142
        html += makeAttrib('class', tinyMCE.getVisualAidClass(className, border == 0));
 
143
        html += makeAttrib('style', style);
 
144
        html += makeAttrib('summary', summary);
 
145
        html += makeAttrib('dir', dir);
 
146
        html += makeAttrib('lang', lang);
 
147
        html += '>';
 
148
 
 
149
        if (caption)
 
150
                html += '<caption>&nbsp;</caption>';
 
151
 
 
152
        for (var y=0; y<rows; y++) {
 
153
                html += "<tr>";
 
154
 
 
155
                for (var x=0; x<cols; x++)
 
156
                        html += '<td>&nbsp;</td>';
 
157
 
 
158
                html += "</tr>";
 
159
        }
 
160
 
 
161
        html += "</table>";
 
162
 
 
163
        inst.execCommand('mceBeginUndoLevel');
 
164
        inst.execCommand('mceInsertContent', false, html);
 
165
        tinyMCE.handleVisualAid(inst.getBody(), true, tinyMCE.settings['visual']);
 
166
        inst.execCommand('mceEndUndoLevel');
 
167
 
 
168
        tinyMCEPopup.close();
 
169
}
 
170
 
 
171
function makeAttrib(attrib, value) {
 
172
        var formObj = document.forms[0];
 
173
        var valueElm = formObj.elements[attrib];
 
174
 
 
175
        if (typeof(value) == "undefined" || value == null) {
 
176
                value = "";
 
177
 
 
178
                if (valueElm)
 
179
                        value = valueElm.value;
 
180
        }
 
181
 
 
182
        if (value == "")
 
183
                return "";
 
184
 
 
185
        // XML encode it
 
186
        value = value.replace(/&/g, '&amp;');
 
187
        value = value.replace(/\"/g, '&quot;');
 
188
        value = value.replace(/</g, '&lt;');
 
189
        value = value.replace(/>/g, '&gt;');
 
190
 
 
191
        return ' ' + attrib + '="' + value + '"';
 
192
}
 
193
 
 
194
function init() {
 
195
        tinyMCEPopup.resizeToInnerSize();
 
196
 
 
197
        document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
 
198
        document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
 
199
        document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
 
200
        document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
 
201
 
 
202
        var cols = 2, rows = 2, border = tinyMCE.getParam('table_default_border', '0'), cellpadding = tinyMCE.getParam('table_default_cellpadding', ''), cellspacing = tinyMCE.getParam('table_default_cellspacing', '');
 
203
        var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = "";
 
204
        var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "";
 
205
        var inst = tinyMCE.selectedInstance;
 
206
        var formObj = document.forms[0];
 
207
        var elm = tinyMCE.getParentElement(inst.getFocusElement(), "table");
 
208
 
 
209
        tinyMCE.tableElm = elm;
 
210
        action = tinyMCE.getWindowArg('action');
 
211
        if (action == null)
 
212
                action = tinyMCE.tableElm ? "update" : "insert";
 
213
 
 
214
        if (tinyMCE.tableElm && action != "insert") {
 
215
                var rowsAr = tinyMCE.tableElm.rows;
 
216
                var cols = 0;
 
217
                for (var i=0; i<rowsAr.length; i++)
 
218
                        if (rowsAr[i].cells.length > cols)
 
219
                                cols = rowsAr[i].cells.length;
 
220
 
 
221
                cols = cols;
 
222
                rows = rowsAr.length;
 
223
 
 
224
                st = tinyMCE.parseStyle(tinyMCE.getAttrib(tinyMCE.tableElm, "style"));
 
225
                border = trimSize(getStyle(elm, 'border', 'borderWidth'));
 
226
                cellpadding = tinyMCE.getAttrib(tinyMCE.tableElm, 'cellpadding', "");
 
227
                cellspacing = tinyMCE.getAttrib(tinyMCE.tableElm, 'cellspacing', "");
 
228
                width = trimSize(getStyle(elm, 'width', 'width'));
 
229
                height = trimSize(getStyle(elm, 'height', 'height'));
 
230
                bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor'));
 
231
                bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor'));
 
232
                align = tinyMCE.getAttrib(tinyMCE.tableElm, 'align', align);
 
233
                className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(tinyMCE.tableElm, 'class'), false);
 
234
                id = tinyMCE.getAttrib(tinyMCE.tableElm, 'id');
 
235
                summary = tinyMCE.getAttrib(tinyMCE.tableElm, 'summary');
 
236
                style = tinyMCE.serializeStyle(st);
 
237
                dir = tinyMCE.getAttrib(tinyMCE.tableElm, 'dir');
 
238
                lang = tinyMCE.getAttrib(tinyMCE.tableElm, 'lang');
 
239
                background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 
240
                formObj.caption.checked = tinyMCE.tableElm.getElementsByTagName('caption').length > 0;
 
241
 
 
242
                orgTableWidth = width;
 
243
                orgTableHeight = height;
 
244
 
 
245
                action = "update";
 
246
        }
 
247
 
 
248
        addClassesToList('class', "table_styles");
 
249
 
 
250
        // Update form
 
251
        selectByValue(formObj, 'align', align);
 
252
        selectByValue(formObj, 'class', className);
 
253
        formObj.cols.value = cols;
 
254
        formObj.rows.value = rows;
 
255
        formObj.border.value = border;
 
256
        formObj.cellpadding.value = cellpadding;
 
257
        formObj.cellspacing.value = cellspacing;
 
258
        formObj.width.value = width;
 
259
        formObj.height.value = height;
 
260
        formObj.bordercolor.value = bordercolor;
 
261
        formObj.bgcolor.value = bgcolor;
 
262
        formObj.id.value = id;
 
263
        formObj.summary.value = summary;
 
264
        formObj.style.value = style;
 
265
        formObj.dir.value = dir;
 
266
        formObj.lang.value = lang;
 
267
        formObj.backgroundimage.value = background;
 
268
        formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true); 
 
269
 
 
270
        updateColor('bordercolor_pick', 'bordercolor');
 
271
        updateColor('bgcolor_pick', 'bgcolor');
 
272
 
 
273
        // Resize some elements
 
274
        if (isVisible('backgroundimagebrowser'))
 
275
                document.getElementById('backgroundimage').style.width = '180px';
 
276
 
 
277
        // Disable some fields in update mode
 
278
        if (action == "update") {
 
279
                formObj.cols.disabled = true;
 
280
                formObj.rows.disabled = true;
 
281
        }
 
282
}
 
283
 
 
284
function changedSize() {
 
285
        var formObj = document.forms[0];
 
286
        var st = tinyMCE.parseStyle(formObj.style.value);
 
287
 
 
288
        var width = formObj.width.value;
 
289
        if (width != "")
 
290
                st['width'] = tinyMCE.getParam("inline_styles") ? getCSSSize(width) : "";
 
291
        else
 
292
                st['width'] = "";
 
293
 
 
294
        var height = formObj.height.value;
 
295
        if (height != "")
 
296
                st['height'] = getCSSSize(height);
 
297
        else
 
298
                st['height'] = "";
 
299
 
 
300
        formObj.style.value = tinyMCE.serializeStyle(st);
 
301
}
 
302
 
 
303
function changedBackgroundImage() {
 
304
        var formObj = document.forms[0];
 
305
        var st = tinyMCE.parseStyle(formObj.style.value);
 
306
 
 
307
        st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
 
308
 
 
309
        formObj.style.value = tinyMCE.serializeStyle(st);
 
310
}
 
311
 
 
312
function changedBorder() {
 
313
        var formObj = document.forms[0];
 
314
        var st = tinyMCE.parseStyle(formObj.style.value);
 
315
 
 
316
        // Update border width if the element has a color
 
317
        if (formObj.border.value != "" && formObj.bordercolor.value != "")
 
318
                st['border-width'] = formObj.border.value + "px";
 
319
 
 
320
        formObj.style.value = tinyMCE.serializeStyle(st);
 
321
}
 
322
 
 
323
function changedColor() {
 
324
        var formObj = document.forms[0];
 
325
        var st = tinyMCE.parseStyle(formObj.style.value);
 
326
 
 
327
        st['background-color'] = formObj.bgcolor.value;
 
328
 
 
329
        if (formObj.bordercolor.value != "") {
 
330
                st['border-color'] = formObj.bordercolor.value;
 
331
 
 
332
                // Add border-width if it's missing
 
333
                if (!st['border-width'])
 
334
                        st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px";
 
335
        }
 
336
 
 
337
        formObj.style.value = tinyMCE.serializeStyle(st);
 
338
}
 
339
 
 
340
function changedStyle() {
 
341
        var formObj = document.forms[0];
 
342
        var st = tinyMCE.parseStyle(formObj.style.value);
 
343
 
 
344
        if (st['background-image'])
 
345
                formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 
346
        else
 
347
                formObj.backgroundimage.value = '';
 
348
 
 
349
        if (st['width'])
 
350
                formObj.width.value = trimSize(st['width']);
 
351
 
 
352
        if (st['height'])
 
353
                formObj.height.value = trimSize(st['height']);
 
354
 
 
355
        if (st['background-color']) {
 
356
                formObj.bgcolor.value = st['background-color'];
 
357
                updateColor('bgcolor_pick','bgcolor');
 
358
        }
 
359
 
 
360
        if (st['border-color']) {
 
361
                formObj.bordercolor.value = st['border-color'];
 
362
                updateColor('bordercolor_pick','bordercolor');
 
363
        }
 
364
}