Statistics
| Branch: | Tag: | Revision:

root / static / js / tinymce / plugins / table / js / table.js @ 6ecbf4ec

History | View | Annotate | Download (13.7 kB)

1
tinyMCEPopup.requireLangPack();
2

    
3
var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom;
4

    
5
function insertTable() {
6
        var formObj = document.forms[0];
7
        var inst = tinyMCEPopup.editor, dom = inst.dom;
8
        var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules;
9
        var html = '', capEl, elm;
10
        var cellLimit, rowLimit, colLimit;
11

    
12
        tinyMCEPopup.restoreSelection();
13

    
14
        if (!AutoValidator.validate(formObj)) {
15
                tinyMCEPopup.alert(inst.getLang('invalid_data'));
16
                return false;
17
        }
18

    
19
        elm = dom.getParent(inst.selection.getNode(), 'table');
20

    
21
        // Get form data
22
        cols = formObj.elements['cols'].value;
23
        rows = formObj.elements['rows'].value;
24
        border = formObj.elements['border'].value != "" ? formObj.elements['border'].value  : 0;
25
        cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : "";
26
        cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : "";
27
        align = getSelectValue(formObj, "align");
28
        frame = getSelectValue(formObj, "tframe");
29
        rules = getSelectValue(formObj, "rules");
30
        width = formObj.elements['width'].value;
31
        height = formObj.elements['height'].value;
32
        bordercolor = formObj.elements['bordercolor'].value;
33
        bgcolor = formObj.elements['bgcolor'].value;
34
        className = getSelectValue(formObj, "class");
35
        id = formObj.elements['id'].value;
36
        summary = formObj.elements['summary'].value;
37
        style = formObj.elements['style'].value;
38
        dir = formObj.elements['dir'].value;
39
        lang = formObj.elements['lang'].value;
40
        background = formObj.elements['backgroundimage'].value;
41
        caption = formObj.elements['caption'].checked;
42

    
43
        cellLimit = tinyMCEPopup.getParam('table_cell_limit', false);
44
        rowLimit = tinyMCEPopup.getParam('table_row_limit', false);
45
        colLimit = tinyMCEPopup.getParam('table_col_limit', false);
46

    
47
        // Validate table size
48
        if (colLimit && cols > colLimit) {
49
                tinyMCEPopup.alert(inst.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit));
50
                return false;
51
        } else if (rowLimit && rows > rowLimit) {
52
                tinyMCEPopup.alert(inst.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit));
53
                return false;
54
        } else if (cellLimit && cols * rows > cellLimit) {
55
                tinyMCEPopup.alert(inst.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit));
56
                return false;
57
        }
58

    
59
        // Update table
60
        if (action == "update") {
61
                inst.execCommand('mceBeginUndoLevel');
62

    
63
                dom.setAttrib(elm, 'cellPadding', cellpadding, true);
64
                dom.setAttrib(elm, 'cellSpacing', cellspacing, true);
65
                dom.setAttrib(elm, 'border', border);
66
                dom.setAttrib(elm, 'align', align);
67
                dom.setAttrib(elm, 'frame', frame);
68
                dom.setAttrib(elm, 'rules', rules);
69
                dom.setAttrib(elm, 'class', className);
70
                dom.setAttrib(elm, 'style', style);
71
                dom.setAttrib(elm, 'id', id);
72
                dom.setAttrib(elm, 'summary', summary);
73
                dom.setAttrib(elm, 'dir', dir);
74
                dom.setAttrib(elm, 'lang', lang);
75

    
76
                capEl = inst.dom.select('caption', elm)[0];
77

    
78
                if (capEl && !caption)
79
                        capEl.parentNode.removeChild(capEl);
80

    
81
                if (!capEl && caption) {
82
                        capEl = elm.ownerDocument.createElement('caption');
83

    
84
                        if (!tinymce.isIE)
85
                                capEl.innerHTML = '<br _mce_bogus="1"/>';
86

    
87
                        elm.insertBefore(capEl, elm.firstChild);
88
                }
89

    
90
                if (width && inst.settings.inline_styles) {
91
                        dom.setStyle(elm, 'width', width);
92
                        dom.setAttrib(elm, 'width', '');
93
                } else {
94
                        dom.setAttrib(elm, 'width', width, true);
95
                        dom.setStyle(elm, 'width', '');
96
                }
97

    
98
                // Remove these since they are not valid XHTML
99
                dom.setAttrib(elm, 'borderColor', '');
100
                dom.setAttrib(elm, 'bgColor', '');
101
                dom.setAttrib(elm, 'background', '');
102

    
103
                if (height && inst.settings.inline_styles) {
104
                        dom.setStyle(elm, 'height', height);
105
                        dom.setAttrib(elm, 'height', '');
106
                } else {
107
                        dom.setAttrib(elm, 'height', height, true);
108
                        dom.setStyle(elm, 'height', '');
109
                 }
110

    
111
                if (background != '')
112
                        elm.style.backgroundImage = "url('" + background + "')";
113
                else
114
                        elm.style.backgroundImage = '';
115

    
116
/*                if (tinyMCEPopup.getParam("inline_styles")) {
117
                        if (width != '')
118
                                elm.style.width = getCSSSize(width);
119
                }*/
120

    
121
                if (bordercolor != "") {
122
                        elm.style.borderColor = bordercolor;
123
                        elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle;
124
                        elm.style.borderWidth = border == "" ? "1px" : border;
125
                } else
126
                        elm.style.borderColor = '';
127

    
128
                elm.style.backgroundColor = bgcolor;
129
                elm.style.height = getCSSSize(height);
130

    
131
                inst.addVisual();
132

    
133
                // Fix for stange MSIE align bug
134
                //elm.outerHTML = elm.outerHTML;
135

    
136
                inst.nodeChanged();
137
                inst.execCommand('mceEndUndoLevel');
138

    
139
                // Repaint if dimensions changed
140
                if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight)
141
                        inst.execCommand('mceRepaint');
142

    
143
                tinyMCEPopup.close();
144
                return true;
145
        }
146

    
147
        // Create new table
148
        html += '<table';
149

    
150
        html += makeAttrib('id', id);
151
        html += makeAttrib('border', border);
152
        html += makeAttrib('cellpadding', cellpadding);
153
        html += makeAttrib('cellspacing', cellspacing);
154
        html += makeAttrib('_mce_new', '1');
155

    
156
        if (width && inst.settings.inline_styles) {
157
                if (style)
158
                        style += '; ';
159

    
160
                // Force px
161
                if (/^[0-9\.]+$/.test(width))
162
                        width += 'px';
163

    
164
                style += 'width: ' + width;
165
        } else
166
                html += makeAttrib('width', width);
167

    
168
/*        if (height) {
169
                if (style)
170
                        style += '; ';
171

172
                style += 'height: ' + height;
173
        }*/
174

    
175
        //html += makeAttrib('height', height);
176
        //html += makeAttrib('bordercolor', bordercolor);
177
        //html += makeAttrib('bgcolor', bgcolor);
178
        html += makeAttrib('align', align);
179
        html += makeAttrib('frame', frame);
180
        html += makeAttrib('rules', rules);
181
        html += makeAttrib('class', className);
182
        html += makeAttrib('style', style);
183
        html += makeAttrib('summary', summary);
184
        html += makeAttrib('dir', dir);
185
        html += makeAttrib('lang', lang);
186
        html += '>';
187

    
188
        if (caption) {
189
                if (!tinymce.isIE)
190
                        html += '<caption><br _mce_bogus="1"/></caption>';
191
                else
192
                        html += '<caption></caption>';
193
        }
194

    
195
        for (var y=0; y<rows; y++) {
196
                html += "<tr>";
197

    
198
                for (var x=0; x<cols; x++) {
199
                        if (!tinymce.isIE)
200
                                html += '<td><br _mce_bogus="1"/></td>';
201
                        else
202
                                html += '<td></td>';
203
                }
204

    
205
                html += "</tr>";
206
        }
207

    
208
        html += "</table>";
209

    
210
        inst.execCommand('mceBeginUndoLevel');
211

    
212
        // Move table
213
        if (inst.settings.fix_table_elements) {
214
                var patt = '';
215

    
216
                inst.focus();
217
                inst.selection.setContent('<br class="_mce_marker" />');
218

    
219
                tinymce.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n) {
220
                        if (patt)
221
                                patt += ',';
222

    
223
                        patt += n + ' ._mce_marker';
224
                });
225

    
226
                tinymce.each(inst.dom.select(patt), function(n) {
227
                        inst.dom.split(inst.dom.getParent(n, 'h1,h2,h3,h4,h5,h6,p'), n);
228
                });
229

    
230
                dom.setOuterHTML(dom.select('br._mce_marker')[0], html);
231
        } else
232
                inst.execCommand('mceInsertContent', false, html);
233

    
234
        tinymce.each(dom.select('table[_mce_new]'), function(node) {
235
                var td = dom.select('td', node);
236

    
237
                inst.selection.select(td[0], true);
238
                inst.selection.collapse();
239

    
240
                dom.setAttrib(node, '_mce_new', '');
241
        });
242

    
243
        inst.addVisual();
244
        inst.execCommand('mceEndUndoLevel');
245

    
246
        tinyMCEPopup.close();
247
}
248

    
249
function makeAttrib(attrib, value) {
250
        var formObj = document.forms[0];
251
        var valueElm = formObj.elements[attrib];
252

    
253
        if (typeof(value) == "undefined" || value == null) {
254
                value = "";
255

    
256
                if (valueElm)
257
                        value = valueElm.value;
258
        }
259

    
260
        if (value == "")
261
                return "";
262

    
263
        // XML encode it
264
        value = value.replace(/&/g, '&amp;');
265
        value = value.replace(/\"/g, '&quot;');
266
        value = value.replace(/</g, '&lt;');
267
        value = value.replace(/>/g, '&gt;');
268

    
269
        return ' ' + attrib + '="' + value + '"';
270
}
271

    
272
function init() {
273
        tinyMCEPopup.resizeToInnerSize();
274

    
275
        document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
276
        document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
277
        document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
278
        document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
279

    
280
        var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', '');
281
        var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = "";
282
        var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules, frame;
283
        var inst = tinyMCEPopup.editor, dom = inst.dom;
284
        var formObj = document.forms[0];
285
        var elm = dom.getParent(inst.selection.getNode(), "table");
286

    
287
        action = tinyMCEPopup.getWindowArg('action');
288

    
289
        if (!action)
290
                action = elm ? "update" : "insert";
291

    
292
        if (elm && action != "insert") {
293
                var rowsAr = elm.rows;
294
                var cols = 0;
295
                for (var i=0; i<rowsAr.length; i++)
296
                        if (rowsAr[i].cells.length > cols)
297
                                cols = rowsAr[i].cells.length;
298

    
299
                cols = cols;
300
                rows = rowsAr.length;
301

    
302
                st = dom.parseStyle(dom.getAttrib(elm, "style"));
303
                border = trimSize(getStyle(elm, 'border', 'borderWidth'));
304
                cellpadding = dom.getAttrib(elm, 'cellpadding', "");
305
                cellspacing = dom.getAttrib(elm, 'cellspacing', "");
306
                width = trimSize(getStyle(elm, 'width', 'width'));
307
                height = trimSize(getStyle(elm, 'height', 'height'));
308
                bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor'));
309
                bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor'));
310
                align = dom.getAttrib(elm, 'align', align);
311
                frame = dom.getAttrib(elm, 'frame');
312
                rules = dom.getAttrib(elm, 'rules');
313
                className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, ''));
314
                id = dom.getAttrib(elm, 'id');
315
                summary = dom.getAttrib(elm, 'summary');
316
                style = dom.serializeStyle(st);
317
                dir = dom.getAttrib(elm, 'dir');
318
                lang = dom.getAttrib(elm, 'lang');
319
                background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
320
                formObj.caption.checked = elm.getElementsByTagName('caption').length > 0;
321

    
322
                orgTableWidth = width;
323
                orgTableHeight = height;
324

    
325
                action = "update";
326
                formObj.insert.value = inst.getLang('update');
327
        }
328

    
329
        addClassesToList('class', "table_styles");
330
        TinyMCE_EditableSelects.init();
331

    
332
        // Update form
333
        selectByValue(formObj, 'align', align);
334
        selectByValue(formObj, 'tframe', frame);
335
        selectByValue(formObj, 'rules', rules);
336
        selectByValue(formObj, 'class', className, true, true);
337
        formObj.cols.value = cols;
338
        formObj.rows.value = rows;
339
        formObj.border.value = border;
340
        formObj.cellpadding.value = cellpadding;
341
        formObj.cellspacing.value = cellspacing;
342
        formObj.width.value = width;
343
        formObj.height.value = height;
344
        formObj.bordercolor.value = bordercolor;
345
        formObj.bgcolor.value = bgcolor;
346
        formObj.id.value = id;
347
        formObj.summary.value = summary;
348
        formObj.style.value = style;
349
        formObj.dir.value = dir;
350
        formObj.lang.value = lang;
351
        formObj.backgroundimage.value = background;
352

    
353
        updateColor('bordercolor_pick', 'bordercolor');
354
        updateColor('bgcolor_pick', 'bgcolor');
355

    
356
        // Resize some elements
357
        if (isVisible('backgroundimagebrowser'))
358
                document.getElementById('backgroundimage').style.width = '180px';
359

    
360
        // Disable some fields in update mode
361
        if (action == "update") {
362
                formObj.cols.disabled = true;
363
                formObj.rows.disabled = true;
364
        }
365
}
366

    
367
function changedSize() {
368
        var formObj = document.forms[0];
369
        var st = dom.parseStyle(formObj.style.value);
370

    
371
/*        var width = formObj.width.value;
372
        if (width != "")
373
                st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : "";
374
        else
375
                st['width'] = "";*/
376

    
377
        var height = formObj.height.value;
378
        if (height != "")
379
                st['height'] = getCSSSize(height);
380
        else
381
                st['height'] = "";
382

    
383
        formObj.style.value = dom.serializeStyle(st);
384
}
385

    
386
function changedBackgroundImage() {
387
        var formObj = document.forms[0];
388
        var st = dom.parseStyle(formObj.style.value);
389

    
390
        st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
391

    
392
        formObj.style.value = dom.serializeStyle(st);
393
}
394

    
395
function changedBorder() {
396
        var formObj = document.forms[0];
397
        var st = dom.parseStyle(formObj.style.value);
398

    
399
        // Update border width if the element has a color
400
        if (formObj.border.value != "" && formObj.bordercolor.value != "")
401
                st['border-width'] = formObj.border.value + "px";
402

    
403
        formObj.style.value = dom.serializeStyle(st);
404
}
405

    
406
function changedColor() {
407
        var formObj = document.forms[0];
408
        var st = dom.parseStyle(formObj.style.value);
409

    
410
        st['background-color'] = formObj.bgcolor.value;
411

    
412
        if (formObj.bordercolor.value != "") {
413
                st['border-color'] = formObj.bordercolor.value;
414

    
415
                // Add border-width if it's missing
416
                if (!st['border-width'])
417
                        st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px";
418
        }
419

    
420
        formObj.style.value = dom.serializeStyle(st);
421
}
422

    
423
function changedStyle() {
424
        var formObj = document.forms[0];
425
        var st = dom.parseStyle(formObj.style.value);
426

    
427
        if (st['background-image'])
428
                formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
429
        else
430
                formObj.backgroundimage.value = '';
431

    
432
        if (st['width'])
433
                formObj.width.value = trimSize(st['width']);
434

    
435
        if (st['height'])
436
                formObj.height.value = trimSize(st['height']);
437

    
438
        if (st['background-color']) {
439
                formObj.bgcolor.value = st['background-color'];
440
                updateColor('bgcolor_pick','bgcolor');
441
        }
442

    
443
        if (st['border-color']) {
444
                formObj.bordercolor.value = st['border-color'];
445
                updateColor('bordercolor_pick','bordercolor');
446
        }
447
}
448

    
449
tinyMCEPopup.onInit.add(init);