source: sandbox/2.3-MailArchiver/filemanager/tp/ckeditor/_source/plugins/table/dialogs/table.js @ 6779

Revision 6779, 16.8 KB checked in by rafaelraymundo, 12 years ago (diff)

Ticket #2946 - Liberado Expresso(branch 2.3) integrado ao MailArchiver?.

Line 
1/*
2Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
3For licensing, see LICENSE.html or http://ckeditor.com/license
4*/
5
6(function()
7{
8        var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,
9                heightPattern = /^(\d+(?:\.\d+)?)px$/;
10
11        var commitValue = function( data )
12        {
13                var id = this.id;
14                if ( !data.info )
15                        data.info = {};
16                data.info[id] = this.getValue();
17        };
18
19        function tableDialog( editor, command )
20        {
21                var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };
22
23                return {
24                        title : editor.lang.table.title,
25                        minWidth : 310,
26                        minHeight : CKEDITOR.env.ie ? 310 : 280,
27                        onShow : function()
28                        {
29                                // Detect if there's a selected table.
30                                var selection = editor.getSelection(),
31                                        ranges = selection.getRanges(),
32                                        selectedTable = null;
33
34                                var rowsInput = this.getContentElement( 'info', 'txtRows' ),
35                                        colsInput = this.getContentElement( 'info', 'txtCols' ),
36                                        widthInput = this.getContentElement( 'info', 'txtWidth' );
37                                if ( command == 'tableProperties' )
38                                {
39                                        if ( ( selectedTable = editor.getSelection().getSelectedElement() ) )
40                                        {
41                                                if ( selectedTable.getName() != 'table' )
42                                                        selectedTable = null;
43                                        }
44                                        else if ( ranges.length > 0 )
45                                        {
46                                                var rangeRoot = ranges[0].getCommonAncestor( true );
47                                                selectedTable = rangeRoot.getAscendant( 'table', true );
48                                        }
49
50                                        // Save a reference to the selected table, and push a new set of default values.
51                                        this._.selectedElement = selectedTable;
52                                }
53
54                                // Enable, disable and select the row, cols, width fields.
55                                if ( selectedTable )
56                                {
57                                        this.setupContent( selectedTable );
58                                        rowsInput && rowsInput.disable();
59                                        colsInput && colsInput.disable();
60                                        widthInput && widthInput.select();
61                                }
62                                else
63                                {
64                                        rowsInput && rowsInput.enable();
65                                        colsInput && colsInput.enable();
66                                        rowsInput && rowsInput.select();
67                                }
68                        },
69                        onOk : function()
70                        {
71                                var table = this._.selectedElement || makeElement( 'table' ),
72                                        me = this,
73                                        data = {};
74
75                                this.commitContent( data, table );
76
77                                if ( data.info )
78                                {
79                                        var info = data.info;
80
81                                        // Generate the rows and cols.
82                                        if ( !this._.selectedElement )
83                                        {
84                                                var tbody = table.append( makeElement( 'tbody' ) ),
85                                                        rows = parseInt( info.txtRows, 10 ) || 0,
86                                                        cols = parseInt( info.txtCols, 10 ) || 0;
87
88                                                for ( var i = 0 ; i < rows ; i++ )
89                                                {
90                                                        var row = tbody.append( makeElement( 'tr' ) );
91                                                        for ( var j = 0 ; j < cols ; j++ )
92                                                        {
93                                                                var cell = row.append( makeElement( 'td' ) );
94                                                                if ( !CKEDITOR.env.ie )
95                                                                        cell.append( makeElement( 'br' ) );
96                                                        }
97                                                }
98                                        }
99
100                                        // Modify the table headers. Depends on having rows and cols generated
101                                        // correctly so it can't be done in commit functions.
102
103                                        // Should we make a <thead>?
104                                        var headers = info.selHeaders;
105                                        if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) )
106                                        {
107                                                var thead = new CKEDITOR.dom.element( table.$.createTHead() );
108                                                tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
109                                                var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );
110
111                                                // Change TD to TH:
112                                                for ( i = 0 ; i < theRow.getChildCount() ; i++ )
113                                                {
114                                                        var th = theRow.getChild( i );
115                                                        if ( th.type == CKEDITOR.NODE_ELEMENT )
116                                                        {
117                                                                th.renameNode( 'th' );
118                                                                th.setAttribute( 'scope', 'col' );
119                                                        }
120                                                }
121                                                thead.append( theRow.remove() );
122                                        }
123
124                                        if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) )
125                                        {
126                                                // Move the row out of the THead and put it in the TBody:
127                                                thead = new CKEDITOR.dom.element( table.$.tHead );
128                                                tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
129
130                                                var previousFirstRow = tbody.getFirst();
131                                                while ( thead.getChildCount() > 0 )
132                                                {
133                                                        theRow = thead.getFirst();
134                                                        for ( i = 0; i < theRow.getChildCount() ; i++ )
135                                                        {
136                                                                var newCell = theRow.getChild( i );
137                                                                if ( newCell.type == CKEDITOR.NODE_ELEMENT )
138                                                                {
139                                                                        newCell.renameNode( 'td' );
140                                                                        newCell.removeAttribute( 'scope' );
141                                                                }
142                                                        }
143                                                        theRow.insertBefore( previousFirstRow );
144                                                }
145                                                thead.remove();
146                                        }
147
148                                        // Should we make all first cells in a row TH?
149                                        if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )
150                                        {
151                                                for( row = 0 ; row < table.$.rows.length ; row++ )
152                                                {
153                                                        newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );
154                                                        newCell.renameNode( 'th' );
155                                                        newCell.setAttribute( 'scope', 'row' );
156                                                }
157                                        }
158
159                                        // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
160                                        if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) )
161                                        {
162                                                for( i = 0 ; i < table.$.rows.length ; i++ )
163                                                {
164                                                        row = new CKEDITOR.dom.element( table.$.rows[i] );
165                                                        if ( row.getParent().getName() == 'tbody' )
166                                                        {
167                                                                newCell = new CKEDITOR.dom.element( row.$.cells[0] );
168                                                                newCell.renameNode( 'td' );
169                                                                newCell.removeAttribute( 'scope' );
170                                                        }
171                                                }
172                                        }
173
174                                        // Set the width and height.
175                                        var styles = [];
176                                        if ( info.txtHeight )
177                                                styles.push( 'height:' + info.txtHeight + 'px' );
178                                        if ( info.txtWidth )
179                                        {
180                                                var type = info.cmbWidthType || 'pixels';
181                                                styles.push( 'width:' + info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );
182                                        }
183                                        styles = styles.join( ';' );
184                                        if ( styles )
185                                                table.$.style.cssText = styles;
186                                        else
187                                                table.removeAttribute( 'style' );
188                                }
189
190                                // Insert the table element if we're creating one.
191                                if ( !this._.selectedElement )
192                                        editor.insertElement( table );
193
194                                return true;
195                        },
196                        contents : [
197                                {
198                                        id : 'info',
199                                        label : editor.lang.table.title,
200                                        elements :
201                                        [
202                                                {
203                                                        type : 'hbox',
204                                                        widths : [ null, null ],
205                                                        styles : [ 'vertical-align:top' ],
206                                                        children :
207                                                        [
208                                                                {
209                                                                        type : 'vbox',
210                                                                        padding : 0,
211                                                                        children :
212                                                                        [
213                                                                                {
214                                                                                        type : 'text',
215                                                                                        id : 'txtRows',
216                                                                                        'default' : 3,
217                                                                                        label : editor.lang.table.rows,
218                                                                                        style : 'width:5em',
219                                                                                        validate : function()
220                                                                                        {
221                                                                                                var pass = true,
222                                                                                                        value = this.getValue();
223                                                                                                pass = pass && CKEDITOR.dialog.validate.integer()( value )
224                                                                                                        && value > 0;
225                                                                                                if ( !pass )
226                                                                                                {
227                                                                                                        alert( editor.lang.table.invalidRows );
228                                                                                                        this.select();
229                                                                                                }
230                                                                                                return pass;
231                                                                                        },
232                                                                                        setup : function( selectedElement )
233                                                                                        {
234                                                                                                this.setValue( selectedElement.$.rows.length );
235                                                                                        },
236                                                                                        commit : commitValue
237                                                                                },
238                                                                                {
239                                                                                        type : 'text',
240                                                                                        id : 'txtCols',
241                                                                                        'default' : 2,
242                                                                                        label : editor.lang.table.columns,
243                                                                                        style : 'width:5em',
244                                                                                        validate : function()
245                                                                                        {
246                                                                                                var pass = true,
247                                                                                                        value = this.getValue();
248                                                                                                pass = pass && CKEDITOR.dialog.validate.integer()( value )
249                                                                                                        && value > 0;
250                                                                                                if ( !pass )
251                                                                                                {
252                                                                                                        alert( editor.lang.table.invalidCols );
253                                                                                                        this.select();
254                                                                                                }
255                                                                                                return pass;
256                                                                                        },
257                                                                                        setup : function( selectedTable )
258                                                                                        {
259                                                                                                this.setValue( selectedTable.$.rows[0].cells.length);
260                                                                                        },
261                                                                                        commit : commitValue
262                                                                                },
263                                                                                {
264                                                                                        type : 'html',
265                                                                                        html : '&nbsp;'
266                                                                                },
267                                                                                {
268                                                                                        type : 'select',
269                                                                                        id : 'selHeaders',
270                                                                                        'default' : '',
271                                                                                        label : editor.lang.table.headers,
272                                                                                        items :
273                                                                                        [
274                                                                                                [ editor.lang.table.headersNone, '' ],
275                                                                                                [ editor.lang.table.headersRow, 'row' ],
276                                                                                                [ editor.lang.table.headersColumn, 'col' ],
277                                                                                                [ editor.lang.table.headersBoth, 'both' ]
278                                                                                        ],
279                                                                                        setup : function( selectedTable )
280                                                                                        {
281                                                                                                // Fill in the headers field.
282                                                                                                var dialog = this.getDialog();
283                                                                                                dialog.hasColumnHeaders = true;
284
285                                                                                                // Check if all the first cells in every row are TH
286                                                                                                for ( var row = 0 ; row < selectedTable.$.rows.length ; row++ )
287                                                                                                {
288                                                                                                        // If just one cell isn't a TH then it isn't a header column
289                                                                                                        if ( selectedTable.$.rows[row].cells[0].nodeName.toLowerCase() != 'th' )
290                                                                                                        {
291                                                                                                                dialog.hasColumnHeaders = false;
292                                                                                                                break;
293                                                                                                        }
294                                                                                                }
295
296                                                                                                // Check if the table contains <thead>.
297                                                                                                if ( ( selectedTable.$.tHead !== null) )
298                                                                                                        this.setValue( dialog.hasColumnHeaders ? 'both' : 'row' );
299                                                                                                else
300                                                                                                        this.setValue( dialog.hasColumnHeaders ? 'col' : '' );
301                                                                                        },
302                                                                                        commit : commitValue
303                                                                                },
304                                                                                {
305                                                                                        type : 'text',
306                                                                                        id : 'txtBorder',
307                                                                                        'default' : 1,
308                                                                                        label : editor.lang.table.border,
309                                                                                        style : 'width:3em',
310                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),
311                                                                                        setup : function( selectedTable )
312                                                                                        {
313                                                                                                this.setValue( selectedTable.getAttribute( 'border' ) || '' );
314                                                                                        },
315                                                                                        commit : function( data, selectedTable )
316                                                                                        {
317                                                                                                if ( this.getValue() )
318                                                                                                        selectedTable.setAttribute( 'border', this.getValue() );
319                                                                                                else
320                                                                                                        selectedTable.removeAttribute( 'border' );
321                                                                                        }
322                                                                                },
323                                                                                {
324                                                                                        id : 'cmbAlign',
325                                                                                        type : 'select',
326                                                                                        'default' : '',
327                                                                                        label : editor.lang.table.align,
328                                                                                        items :
329                                                                                        [
330                                                                                                [ editor.lang.table.alignNotSet , ''],
331                                                                                                [ editor.lang.table.alignLeft , 'left'],
332                                                                                                [ editor.lang.table.alignCenter , 'center'],
333                                                                                                [ editor.lang.table.alignRight , 'right']
334                                                                                        ],
335                                                                                        setup : function( selectedTable )
336                                                                                        {
337                                                                                                this.setValue( selectedTable.getAttribute( 'align' ) || '' );
338                                                                                        },
339                                                                                        commit : function( data, selectedTable )
340                                                                                        {
341                                                                                                if ( this.getValue() )
342                                                                                                        selectedTable.setAttribute( 'align', this.getValue() );
343                                                                                                else
344                                                                                                        selectedTable.removeAttribute( 'align' );
345                                                                                        }
346                                                                                }
347                                                                        ]
348                                                                },
349                                                                {
350                                                                        type : 'vbox',
351                                                                        padding : 0,
352                                                                        children :
353                                                                        [
354                                                                                {
355                                                                                        type : 'hbox',
356                                                                                        widths : [ '5em' ],
357                                                                                        children :
358                                                                                        [
359                                                                                                {
360                                                                                                        type : 'text',
361                                                                                                        id : 'txtWidth',
362                                                                                                        style : 'width:5em',
363                                                                                                        label : editor.lang.table.width,
364                                                                                                        'default' : 200,
365                                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),
366                                                                                                        setup : function( selectedTable )
367                                                                                                        {
368                                                                                                                var widthMatch = widthPattern.exec( selectedTable.$.style.width );
369                                                                                                                if ( widthMatch )
370                                                                                                                        this.setValue( widthMatch[1] );
371                                                                                                        },
372                                                                                                        commit : commitValue
373                                                                                                },
374                                                                                                {
375                                                                                                        id : 'cmbWidthType',
376                                                                                                        type : 'select',
377                                                                                                        label : '&nbsp;',
378                                                                                                        'default' : 'pixels',
379                                                                                                        items :
380                                                                                                        [
381                                                                                                                [ editor.lang.table.widthPx , 'pixels'],
382                                                                                                                [ editor.lang.table.widthPc , 'percents']
383                                                                                                        ],
384                                                                                                        setup : function( selectedTable )
385                                                                                                        {
386                                                                                                                var widthMatch = widthPattern.exec( selectedTable.$.style.width );
387                                                                                                                if ( widthMatch )
388                                                                                                                        this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );
389                                                                                                        },
390                                                                                                        commit : commitValue
391                                                                                                }
392                                                                                        ]
393                                                                                },
394                                                                                {
395                                                                                        type : 'hbox',
396                                                                                        widths : [ '5em' ],
397                                                                                        children :
398                                                                                        [
399                                                                                                {
400                                                                                                        type : 'text',
401                                                                                                        id : 'txtHeight',
402                                                                                                        style : 'width:5em',
403                                                                                                        label : editor.lang.table.height,
404                                                                                                        'default' : '',
405                                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),
406                                                                                                        setup : function( selectedTable )
407                                                                                                        {
408                                                                                                                var heightMatch = heightPattern.exec( selectedTable.$.style.height );
409                                                                                                                if ( heightMatch )
410                                                                                                                        this.setValue( heightMatch[1] );
411                                                                                                        },
412                                                                                                        commit : commitValue
413                                                                                                },
414                                                                                                {
415                                                                                                        type : 'html',
416                                                                                                        html : '<br />' + editor.lang.table.widthPx
417                                                                                                }
418                                                                                        ]
419                                                                                },
420                                                                                {
421                                                                                        type : 'html',
422                                                                                        html : '&nbsp;'
423                                                                                },
424                                                                                {
425                                                                                        type : 'text',
426                                                                                        id : 'txtCellSpace',
427                                                                                        style : 'width:3em',
428                                                                                        label : editor.lang.table.cellSpace,
429                                                                                        'default' : 1,
430                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),
431                                                                                        setup : function( selectedTable )
432                                                                                        {
433                                                                                                this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );
434                                                                                        },
435                                                                                        commit : function( data, selectedTable )
436                                                                                        {
437                                                                                                if ( this.getValue() )
438                                                                                                        selectedTable.setAttribute( 'cellSpacing', this.getValue() );
439                                                                                                else
440                                                                                                        selectedTable.removeAttribute( 'cellSpacing' );
441                                                                                        }
442                                                                                },
443                                                                                {
444                                                                                        type : 'text',
445                                                                                        id : 'txtCellPad',
446                                                                                        style : 'width:3em',
447                                                                                        label : editor.lang.table.cellPad,
448                                                                                        'default' : 1,
449                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),
450                                                                                        setup : function( selectedTable )
451                                                                                        {
452                                                                                                this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );
453                                                                                        },
454                                                                                        commit : function( data, selectedTable )
455                                                                                        {
456                                                                                                if ( this.getValue() )
457                                                                                                        selectedTable.setAttribute( 'cellPadding', this.getValue() );
458                                                                                                else
459                                                                                                        selectedTable.removeAttribute( 'cellPadding' );
460                                                                                        }
461                                                                                }
462                                                                        ]
463                                                                }
464                                                        ]
465                                                },
466                                                {
467                                                        type : 'html',
468                                                        align : 'right',
469                                                        html : ''
470                                                },
471                                                {
472                                                        type : 'vbox',
473                                                        padding : 0,
474                                                        children :
475                                                        [
476                                                                {
477                                                                        type : 'text',
478                                                                        id : 'txtCaption',
479                                                                        label : editor.lang.table.caption,
480                                                                        setup : function( selectedTable )
481                                                                        {
482                                                                                var nodeList = selectedTable.getElementsByTag( 'caption' );
483                                                                                if ( nodeList.count() > 0 )
484                                                                                {
485                                                                                        var caption = nodeList.getItem( 0 );
486                                                                                        caption = ( caption.getChild( 0 ) && caption.getChild( 0 ).getText() ) || '';
487                                                                                        caption = CKEDITOR.tools.trim( caption );
488                                                                                        this.setValue( caption );
489                                                                                }
490                                                                        },
491                                                                        commit : function( data, table )
492                                                                        {
493                                                                                var caption = this.getValue(),
494                                                                                        captionElement = table.getElementsByTag( 'caption' );
495                                                                                if ( caption )
496                                                                                {
497                                                                                        if ( captionElement.count() > 0 )
498                                                                                        {
499                                                                                                captionElement = captionElement.getItem( 0 );
500                                                                                                captionElement.setHtml( '' );
501                                                                                        }
502                                                                                        else
503                                                                                        {
504                                                                                                captionElement = new CKEDITOR.dom.element( 'caption', editor.document );
505                                                                                                if ( table.getChildCount() )
506                                                                                                        captionElement.insertBefore( table.getFirst() );
507                                                                                                else
508                                                                                                        captionElement.appendTo( table );
509                                                                                        }
510                                                                                        captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );
511                                                                                }
512                                                                                else if ( captionElement.count() > 0 )
513                                                                                {
514                                                                                        for ( var i = captionElement.count() - 1 ; i >= 0 ; i-- )
515                                                                                                captionElement.getItem( i ).remove();
516                                                                                }
517                                                                        }
518                                                                },
519                                                                {
520                                                                        type : 'text',
521                                                                        id : 'txtSummary',
522                                                                        label : editor.lang.table.summary,
523                                                                        setup : function( selectedTable )
524                                                                        {
525                                                                                this.setValue( selectedTable.getAttribute( 'summary' ) || '' );
526                                                                        },
527                                                                        commit : function( data, selectedTable )
528                                                                        {
529                                                                                if ( this.getValue() )
530                                                                                        selectedTable.setAttribute( 'summary', this.getValue() );
531                                                                        }
532                                                                }
533                                                        ]
534                                                }
535                                        ]
536                                }
537                        ]
538                };
539        }
540
541        CKEDITOR.dialog.add( 'table', function( editor )
542                {
543                        return tableDialog( editor, 'table' );
544                } );
545        CKEDITOR.dialog.add( 'tableProperties', function( editor )
546                {
547                        return tableDialog( editor, 'tableProperties' );
548                } );
549})();
Note: See TracBrowser for help on using the repository browser.