source: sandbox/3.0/phpgwapi/js/ckeditor/_source/plugins/table/dialogs/table.js @ 2862

Revision 2862, 18.4 KB checked in by rodsouza, 14 years ago (diff)

Ticket #663 - Atualizando e centralizando o CKEditor (v. 3.2.1)

Line 
1/*
2Copyright (c) 2003-2010, 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                                if ( this._.selectedElement )
72                                {
73                                        var selection = editor.getSelection(),
74                                                bms = editor.getSelection().createBookmarks();
75                                }
76
77                                var table = this._.selectedElement || makeElement( 'table' ),
78                                        me = this,
79                                        data = {};
80
81                                this.commitContent( data, table );
82
83                                if ( data.info )
84                                {
85                                        var info = data.info;
86
87                                        // Generate the rows and cols.
88                                        if ( !this._.selectedElement )
89                                        {
90                                                var tbody = table.append( makeElement( 'tbody' ) ),
91                                                        rows = parseInt( info.txtRows, 10 ) || 0,
92                                                        cols = parseInt( info.txtCols, 10 ) || 0;
93
94                                                for ( var i = 0 ; i < rows ; i++ )
95                                                {
96                                                        var row = tbody.append( makeElement( 'tr' ) );
97                                                        for ( var j = 0 ; j < cols ; j++ )
98                                                        {
99                                                                var cell = row.append( makeElement( 'td' ) );
100                                                                if ( !CKEDITOR.env.ie )
101                                                                        cell.append( makeElement( 'br' ) );
102                                                        }
103                                                }
104                                        }
105
106                                        // Modify the table headers. Depends on having rows and cols generated
107                                        // correctly so it can't be done in commit functions.
108
109                                        // Should we make a <thead>?
110                                        var headers = info.selHeaders;
111                                        if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) )
112                                        {
113                                                var thead = new CKEDITOR.dom.element( table.$.createTHead() );
114                                                tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
115                                                var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );
116
117                                                // Change TD to TH:
118                                                for ( i = 0 ; i < theRow.getChildCount() ; i++ )
119                                                {
120                                                        var th = theRow.getChild( i );
121                                                        if ( th.type == CKEDITOR.NODE_ELEMENT )
122                                                        {
123                                                                th.renameNode( 'th' );
124                                                                th.setAttribute( 'scope', 'col' );
125                                                        }
126                                                }
127                                                thead.append( theRow.remove() );
128                                        }
129
130                                        if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) )
131                                        {
132                                                // Move the row out of the THead and put it in the TBody:
133                                                thead = new CKEDITOR.dom.element( table.$.tHead );
134                                                tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
135
136                                                var previousFirstRow = tbody.getFirst();
137                                                while ( thead.getChildCount() > 0 )
138                                                {
139                                                        theRow = thead.getFirst();
140                                                        for ( i = 0; i < theRow.getChildCount() ; i++ )
141                                                        {
142                                                                var newCell = theRow.getChild( i );
143                                                                if ( newCell.type == CKEDITOR.NODE_ELEMENT )
144                                                                {
145                                                                        newCell.renameNode( 'td' );
146                                                                        newCell.removeAttribute( 'scope' );
147                                                                }
148                                                        }
149                                                        theRow.insertBefore( previousFirstRow );
150                                                }
151                                                thead.remove();
152                                        }
153
154                                        // Should we make all first cells in a row TH?
155                                        if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )
156                                        {
157                                                for ( row = 0 ; row < table.$.rows.length ; row++ )
158                                                {
159                                                        newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );
160                                                        newCell.renameNode( 'th' );
161                                                        newCell.setAttribute( 'scope', 'row' );
162                                                }
163                                        }
164
165                                        // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
166                                        if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) )
167                                        {
168                                                for ( i = 0 ; i < table.$.rows.length ; i++ )
169                                                {
170                                                        row = new CKEDITOR.dom.element( table.$.rows[i] );
171                                                        if ( row.getParent().getName() == 'tbody' )
172                                                        {
173                                                                newCell = new CKEDITOR.dom.element( row.$.cells[0] );
174                                                                newCell.renameNode( 'td' );
175                                                                newCell.removeAttribute( 'scope' );
176                                                        }
177                                                }
178                                        }
179
180                                        // Set the width and height.
181                                        var styles = [];
182                                        if ( info.txtHeight )
183                                                table.setStyle( 'height', CKEDITOR.tools.cssLength( info.txtHeight ) );
184                                        else
185                                                table.removeStyle( 'height' );
186
187                                        if ( info.txtWidth )
188                                        {
189                                                var type = info.cmbWidthType || 'pixels';
190                                                table.setStyle( 'width', info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );
191                                        }
192                                        else
193                                                table.removeStyle( 'width' );
194
195                                        if ( !table.getAttribute( 'style' ) )
196                                                table.removeAttribute( 'style' );
197                                }
198
199                                // Insert the table element if we're creating one.
200                                if ( !this._.selectedElement )
201                                        editor.insertElement( table );
202                                // Properly restore the selection inside table. (#4822)
203                                else
204                                        selection.selectBookmarks( bms );
205
206                                return true;
207                        },
208                        contents : [
209                                {
210                                        id : 'info',
211                                        label : editor.lang.table.title,
212                                        elements :
213                                        [
214                                                {
215                                                        type : 'hbox',
216                                                        widths : [ null, null ],
217                                                        styles : [ 'vertical-align:top' ],
218                                                        children :
219                                                        [
220                                                                {
221                                                                        type : 'vbox',
222                                                                        padding : 0,
223                                                                        children :
224                                                                        [
225                                                                                {
226                                                                                        type : 'text',
227                                                                                        id : 'txtRows',
228                                                                                        'default' : 3,
229                                                                                        label : editor.lang.table.rows,
230                                                                                        style : 'width:5em',
231                                                                                        validate : function()
232                                                                                        {
233                                                                                                var pass = true,
234                                                                                                        value = this.getValue();
235                                                                                                pass = pass && CKEDITOR.dialog.validate.integer()( value )
236                                                                                                        && value > 0;
237                                                                                                if ( !pass )
238                                                                                                {
239                                                                                                        alert( editor.lang.table.invalidRows );
240                                                                                                        this.select();
241                                                                                                }
242                                                                                                return pass;
243                                                                                        },
244                                                                                        setup : function( selectedElement )
245                                                                                        {
246                                                                                                this.setValue( selectedElement.$.rows.length );
247                                                                                        },
248                                                                                        commit : commitValue
249                                                                                },
250                                                                                {
251                                                                                        type : 'text',
252                                                                                        id : 'txtCols',
253                                                                                        'default' : 2,
254                                                                                        label : editor.lang.table.columns,
255                                                                                        style : 'width:5em',
256                                                                                        validate : function()
257                                                                                        {
258                                                                                                var pass = true,
259                                                                                                        value = this.getValue();
260                                                                                                pass = pass && CKEDITOR.dialog.validate.integer()( value )
261                                                                                                        && value > 0;
262                                                                                                if ( !pass )
263                                                                                                {
264                                                                                                        alert( editor.lang.table.invalidCols );
265                                                                                                        this.select();
266                                                                                                }
267                                                                                                return pass;
268                                                                                        },
269                                                                                        setup : function( selectedTable )
270                                                                                        {
271                                                                                                this.setValue( selectedTable.$.rows[0].cells.length);
272                                                                                        },
273                                                                                        commit : commitValue
274                                                                                },
275                                                                                {
276                                                                                        type : 'html',
277                                                                                        html : '&nbsp;'
278                                                                                },
279                                                                                {
280                                                                                        type : 'select',
281                                                                                        id : 'selHeaders',
282                                                                                        'default' : '',
283                                                                                        label : editor.lang.table.headers,
284                                                                                        items :
285                                                                                        [
286                                                                                                [ editor.lang.table.headersNone, '' ],
287                                                                                                [ editor.lang.table.headersRow, 'row' ],
288                                                                                                [ editor.lang.table.headersColumn, 'col' ],
289                                                                                                [ editor.lang.table.headersBoth, 'both' ]
290                                                                                        ],
291                                                                                        setup : function( selectedTable )
292                                                                                        {
293                                                                                                // Fill in the headers field.
294                                                                                                var dialog = this.getDialog();
295                                                                                                dialog.hasColumnHeaders = true;
296
297                                                                                                // Check if all the first cells in every row are TH
298                                                                                                for ( var row = 0 ; row < selectedTable.$.rows.length ; row++ )
299                                                                                                {
300                                                                                                        // If just one cell isn't a TH then it isn't a header column
301                                                                                                        if ( selectedTable.$.rows[row].cells[0].nodeName.toLowerCase() != 'th' )
302                                                                                                        {
303                                                                                                                dialog.hasColumnHeaders = false;
304                                                                                                                break;
305                                                                                                        }
306                                                                                                }
307
308                                                                                                // Check if the table contains <thead>.
309                                                                                                if ( ( selectedTable.$.tHead !== null) )
310                                                                                                        this.setValue( dialog.hasColumnHeaders ? 'both' : 'row' );
311                                                                                                else
312                                                                                                        this.setValue( dialog.hasColumnHeaders ? 'col' : '' );
313                                                                                        },
314                                                                                        commit : commitValue
315                                                                                },
316                                                                                {
317                                                                                        type : 'text',
318                                                                                        id : 'txtBorder',
319                                                                                        'default' : 1,
320                                                                                        label : editor.lang.table.border,
321                                                                                        style : 'width:3em',
322                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),
323                                                                                        setup : function( selectedTable )
324                                                                                        {
325                                                                                                this.setValue( selectedTable.getAttribute( 'border' ) || '' );
326                                                                                        },
327                                                                                        commit : function( data, selectedTable )
328                                                                                        {
329                                                                                                if ( this.getValue() )
330                                                                                                        selectedTable.setAttribute( 'border', this.getValue() );
331                                                                                                else
332                                                                                                        selectedTable.removeAttribute( 'border' );
333                                                                                        }
334                                                                                },
335                                                                                {
336                                                                                        id : 'cmbAlign',
337                                                                                        type : 'select',
338                                                                                        'default' : '',
339                                                                                        label : editor.lang.table.align,
340                                                                                        items :
341                                                                                        [
342                                                                                                [ editor.lang.common.notSet , ''],
343                                                                                                [ editor.lang.table.alignLeft , 'left'],
344                                                                                                [ editor.lang.table.alignCenter , 'center'],
345                                                                                                [ editor.lang.table.alignRight , 'right']
346                                                                                        ],
347                                                                                        setup : function( selectedTable )
348                                                                                        {
349                                                                                                this.setValue( selectedTable.getAttribute( 'align' ) || '' );
350                                                                                        },
351                                                                                        commit : function( data, selectedTable )
352                                                                                        {
353                                                                                                if ( this.getValue() )
354                                                                                                        selectedTable.setAttribute( 'align', this.getValue() );
355                                                                                                else
356                                                                                                        selectedTable.removeAttribute( 'align' );
357                                                                                        }
358                                                                                }
359                                                                        ]
360                                                                },
361                                                                {
362                                                                        type : 'vbox',
363                                                                        padding : 0,
364                                                                        children :
365                                                                        [
366                                                                                {
367                                                                                        type : 'hbox',
368                                                                                        widths : [ '5em' ],
369                                                                                        children :
370                                                                                        [
371                                                                                                {
372                                                                                                        type : 'text',
373                                                                                                        id : 'txtWidth',
374                                                                                                        style : 'width:5em',
375                                                                                                        label : editor.lang.table.width,
376                                                                                                        'default' : 200,
377                                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),
378
379                                                                                                        // Extra labelling of width unit type.
380                                                                                                        onLoad : function()
381                                                                                                        {
382                                                                                                                var widthType = this.getDialog().getContentElement( 'info', 'cmbWidthType' ),
383                                                                                                                        labelElement = widthType.getElement(),
384                                                                                                                        inputElement = this.getInputElement(),
385                                                                                                                        ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
386
387                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
388                                                                                                        },
389
390                                                                                                        setup : function( selectedTable )
391                                                                                                        {
392                                                                                                                var widthMatch = widthPattern.exec( selectedTable.$.style.width );
393                                                                                                                if ( widthMatch )
394                                                                                                                        this.setValue( widthMatch[1] );
395                                                                                                                else
396                                                                                                                        this.setValue( '' );
397                                                                                                        },
398                                                                                                        commit : commitValue
399                                                                                                },
400                                                                                                {
401                                                                                                        id : 'cmbWidthType',
402                                                                                                        type : 'select',
403                                                                                                        label : editor.lang.table.widthUnit,
404                                                                                                        labelStyle: 'visibility:hidden',
405                                                                                                        'default' : 'pixels',
406                                                                                                        items :
407                                                                                                        [
408                                                                                                                [ editor.lang.table.widthPx , 'pixels'],
409                                                                                                                [ editor.lang.table.widthPc , 'percents']
410                                                                                                        ],
411                                                                                                        setup : function( selectedTable )
412                                                                                                        {
413                                                                                                                var widthMatch = widthPattern.exec( selectedTable.$.style.width );
414                                                                                                                if ( widthMatch )
415                                                                                                                        this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );
416                                                                                                        },
417                                                                                                        commit : commitValue
418                                                                                                }
419                                                                                        ]
420                                                                                },
421                                                                                {
422                                                                                        type : 'hbox',
423                                                                                        widths : [ '5em' ],
424                                                                                        children :
425                                                                                        [
426                                                                                                {
427                                                                                                        type : 'text',
428                                                                                                        id : 'txtHeight',
429                                                                                                        style : 'width:5em',
430                                                                                                        label : editor.lang.table.height,
431                                                                                                        'default' : '',
432                                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),
433
434                                                                                                        // Extra labelling of height unit type.
435                                                                                                        onLoad : function()
436                                                                                                        {
437                                                                                                                var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ),
438                                                                                                                        labelElement = heightType.getElement(),
439                                                                                                                        inputElement = this.getInputElement(),
440                                                                                                                        ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
441
442                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
443                                                                                                        },
444
445                                                                                                        setup : function( selectedTable )
446                                                                                                        {
447                                                                                                                var heightMatch = heightPattern.exec( selectedTable.$.style.height );
448                                                                                                                if ( heightMatch )
449                                                                                                                        this.setValue( heightMatch[1] );
450                                                                                                        },
451                                                                                                        commit : commitValue
452                                                                                                },
453                                                                                                {
454                                                                                                        id : 'htmlHeightType',
455                                                                                                        type : 'html',
456                                                                                                        html : '<div><br />' + editor.lang.table.widthPx + '</div>'
457                                                                                                }
458                                                                                        ]
459                                                                                },
460                                                                                {
461                                                                                        type : 'html',
462                                                                                        html : '&nbsp;'
463                                                                                },
464                                                                                {
465                                                                                        type : 'text',
466                                                                                        id : 'txtCellSpace',
467                                                                                        style : 'width:3em',
468                                                                                        label : editor.lang.table.cellSpace,
469                                                                                        'default' : 1,
470                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),
471                                                                                        setup : function( selectedTable )
472                                                                                        {
473                                                                                                this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );
474                                                                                        },
475                                                                                        commit : function( data, selectedTable )
476                                                                                        {
477                                                                                                if ( this.getValue() )
478                                                                                                        selectedTable.setAttribute( 'cellSpacing', this.getValue() );
479                                                                                                else
480                                                                                                        selectedTable.removeAttribute( 'cellSpacing' );
481                                                                                        }
482                                                                                },
483                                                                                {
484                                                                                        type : 'text',
485                                                                                        id : 'txtCellPad',
486                                                                                        style : 'width:3em',
487                                                                                        label : editor.lang.table.cellPad,
488                                                                                        'default' : 1,
489                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),
490                                                                                        setup : function( selectedTable )
491                                                                                        {
492                                                                                                this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );
493                                                                                        },
494                                                                                        commit : function( data, selectedTable )
495                                                                                        {
496                                                                                                if ( this.getValue() )
497                                                                                                        selectedTable.setAttribute( 'cellPadding', this.getValue() );
498                                                                                                else
499                                                                                                        selectedTable.removeAttribute( 'cellPadding' );
500                                                                                        }
501                                                                                }
502                                                                        ]
503                                                                }
504                                                        ]
505                                                },
506                                                {
507                                                        type : 'html',
508                                                        align : 'right',
509                                                        html : ''
510                                                },
511                                                {
512                                                        type : 'vbox',
513                                                        padding : 0,
514                                                        children :
515                                                        [
516                                                                {
517                                                                        type : 'text',
518                                                                        id : 'txtCaption',
519                                                                        label : editor.lang.table.caption,
520                                                                        setup : function( selectedTable )
521                                                                        {
522                                                                                var nodeList = selectedTable.getElementsByTag( 'caption' );
523                                                                                if ( nodeList.count() > 0 )
524                                                                                {
525                                                                                        var caption = nodeList.getItem( 0 );
526                                                                                        caption = ( caption.getChild( 0 ) && caption.getChild( 0 ).getText() ) || '';
527                                                                                        caption = CKEDITOR.tools.trim( caption );
528                                                                                        this.setValue( caption );
529                                                                                }
530                                                                        },
531                                                                        commit : function( data, table )
532                                                                        {
533                                                                                var caption = this.getValue(),
534                                                                                        captionElement = table.getElementsByTag( 'caption' );
535                                                                                if ( caption )
536                                                                                {
537                                                                                        if ( captionElement.count() > 0 )
538                                                                                        {
539                                                                                                captionElement = captionElement.getItem( 0 );
540                                                                                                captionElement.setHtml( '' );
541                                                                                        }
542                                                                                        else
543                                                                                        {
544                                                                                                captionElement = new CKEDITOR.dom.element( 'caption', editor.document );
545                                                                                                if ( table.getChildCount() )
546                                                                                                        captionElement.insertBefore( table.getFirst() );
547                                                                                                else
548                                                                                                        captionElement.appendTo( table );
549                                                                                        }
550                                                                                        captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );
551                                                                                }
552                                                                                else if ( captionElement.count() > 0 )
553                                                                                {
554                                                                                        for ( var i = captionElement.count() - 1 ; i >= 0 ; i-- )
555                                                                                                captionElement.getItem( i ).remove();
556                                                                                }
557                                                                        }
558                                                                },
559                                                                {
560                                                                        type : 'text',
561                                                                        id : 'txtSummary',
562                                                                        label : editor.lang.table.summary,
563                                                                        setup : function( selectedTable )
564                                                                        {
565                                                                                this.setValue( selectedTable.getAttribute( 'summary' ) || '' );
566                                                                        },
567                                                                        commit : function( data, selectedTable )
568                                                                        {
569                                                                                if ( this.getValue() )
570                                                                                        selectedTable.setAttribute( 'summary', this.getValue() );
571                                                                                else
572                                                                                        selectedTable.removeAttribute( 'summary' );
573                                                                        }
574                                                                }
575                                                        ]
576                                                }
577                                        ]
578                                }
579                        ]
580                };
581        }
582
583        CKEDITOR.dialog.add( 'table', function( editor )
584                {
585                        return tableDialog( editor, 'table' );
586                } );
587        CKEDITOR.dialog.add( 'tableProperties', function( editor )
588                {
589                        return tableDialog( editor, 'tableProperties' );
590                } );
591})();
Note: See TracBrowser for help on using the repository browser.