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

Revision 2862, 16.1 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
6CKEDITOR.dialog.add( 'cellProperties', function( editor )
7        {
8                var langTable = editor.lang.table;
9                var langCell = langTable.cell;
10                var langCommon = editor.lang.common;
11                var validate = CKEDITOR.dialog.validate;
12                var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,
13                        heightPattern = /^(\d+(?:\.\d+)?)px$/;
14                var bind = CKEDITOR.tools.bind;
15
16                function spacer()
17                {
18                        return { type : 'html', html : ' ' };
19                }
20
21                /**
22                 *
23                 * @param dialogName
24                 * @param callback [ childDialog ]
25                 */
26                function getDialogValue( dialogName, callback )
27                {
28                        var onOk = function()
29                        {
30                                releaseHandlers( this );
31                                callback( this );
32                        };
33                        var onCancel = function()
34                        {
35                                releaseHandlers( this );
36                        };
37                        var bindToDialog = function( dialog )
38                        {
39                                dialog.on( 'ok', onOk );
40                                dialog.on( 'cancel', onCancel );
41                        };
42                        var releaseHandlers = function( dialog )
43                        {
44                                dialog.removeListener( 'ok', onOk );
45                                dialog.removeListener( 'cancel', onCancel );
46                        };
47                        editor.execCommand( dialogName );
48                        if ( editor._.storedDialogs.colordialog )
49                                bindToDialog( editor._.storedDialogs.colordialog );
50                        else
51                        {
52                                CKEDITOR.on( 'dialogDefinition', function( e )
53                                {
54                                        if ( e.data.name != dialogName )
55                                                return;
56
57                                        var definition = e.data.definition;
58
59                                        e.removeListener();
60                                        definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )
61                                        {
62                                                return function()
63                                                {
64                                                        bindToDialog( this );
65                                                        definition.onLoad = orginal;
66                                                        if ( typeof orginal == 'function' )
67                                                                orginal.call( this );
68                                                };
69                                        } );
70                                });
71                        }
72                }
73
74                return {
75                        title : langCell.title,
76                        minWidth : CKEDITOR.env.ie && CKEDITOR.env.quirks ? 550 : 480,
77                        minHeight : CKEDITOR.env.ie ? ( CKEDITOR.env.quirks ? 180 : 150 ) : 140,
78                        contents : [
79                                {
80                                        id : 'info',
81                                        label : langCell.title,
82                                        accessKey : 'I',
83                                        elements :
84                                        [
85                                                {
86                                                        type : 'hbox',
87                                                        widths : [ '40%', '5%', '40%' ],
88                                                        children :
89                                                        [
90                                                                {
91                                                                        type : 'vbox',
92                                                                        padding : 0,
93                                                                        children :
94                                                                        [
95                                                                                {
96                                                                                        type : 'hbox',
97                                                                                        widths : [ '70%', '30%' ],
98                                                                                        children :
99                                                                                        [
100                                                                                                {
101                                                                                                        type : 'text',
102                                                                                                        id : 'width',
103                                                                                                        label : langTable.width,
104                                                                                                        widths : [ '71%', '29%' ],
105                                                                                                        labelLayout : 'horizontal',
106                                                                                                        validate : validate[ 'number' ]( langCell.invalidWidth ),
107
108                                                                                                        // Extra labelling of width unit type.
109                                                                                                        onLoad : function()
110                                                                                                        {
111                                                                                                                var widthType = this.getDialog().getContentElement( 'info', 'widthType' ),
112                                                                                                                        labelElement = widthType.getElement(),
113                                                                                                                        inputElement = this.getInputElement(),
114                                                                                                                        ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
115
116                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
117                                                                                                        },
118
119                                                                                                        setup : function( element )
120                                                                                                        {
121                                                                                                                var widthAttr = parseInt( element.getAttribute( 'width' ), 10 ),
122                                                                                                                                widthStyle = parseInt( element.getStyle( 'width' ), 10 );
123
124                                                                                                                !isNaN( widthAttr ) && this.setValue( widthAttr );
125                                                                                                                !isNaN( widthStyle ) && this.setValue( widthStyle );
126                                                                                                        },
127                                                                                                        commit : function( element )
128                                                                                                        {
129                                                                                                                var value = parseInt( this.getValue(), 10 ),
130                                                                                                                                unit = this.getDialog().getValueOf( 'info', 'widthType' );
131
132                                                                                                                if ( !isNaN( value ) )
133                                                                                                                        element.setStyle( 'width', value + unit );
134                                                                                                                else
135                                                                                                                        element.removeStyle( 'width' );
136
137                                                                                                                element.removeAttribute( 'width' );
138                                                                                                        },
139                                                                                                        'default' : ''
140                                                                                                },
141                                                                                                {
142                                                                                                        type : 'select',
143                                                                                                        id : 'widthType',
144                                                                                                        labelLayout : 'horizontal',
145                                                                                                        widths : [ '0%', '100%' ],
146                                                                                                        label : editor.lang.table.widthUnit,
147                                                                                                        labelStyle: 'display:none',
148                                                                                                        'default' : 'px',
149                                                                                                        items :
150                                                                                                        [
151                                                                                                                [ langTable.widthPx, 'px' ],
152                                                                                                                [ langTable.widthPc, '%' ]
153                                                                                                        ],
154                                                                                                        setup : function( selectedCell )
155                                                                                                        {
156                                                                                                                var widthMatch = widthPattern.exec( selectedCell.$.style.width );
157                                                                                                                if ( widthMatch )
158                                                                                                                        this.setValue( widthMatch[2] );
159                                                                                                        }
160                                                                                                }
161                                                                                        ]
162                                                                                },
163                                                                                {
164                                                                                        type : 'hbox',
165                                                                                        widths : [ '70%', '30%' ],
166                                                                                        children :
167                                                                                        [
168                                                                                                {
169                                                                                                        type : 'text',
170                                                                                                        id : 'height',
171                                                                                                        label : langTable.height,
172                                                                                                        'default' : '',
173                                                                                                        widths : [ '71%', '29%' ],
174                                                                                                        labelLayout : 'horizontal',
175                                                                                                        validate : validate[ 'number' ]( langCell.invalidHeight ),
176
177                                                                                                        // Extra labelling of height unit type.
178                                                                                                        onLoad : function()
179                                                                                                        {
180                                                                                                                var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ),
181                                                                                                                        labelElement = heightType.getElement(),
182                                                                                                                        inputElement = this.getInputElement(),
183                                                                                                                        ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
184
185                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
186                                                                                                        },
187
188                                                                                                        setup : function( element )
189                                                                                                        {
190                                                                                                                var heightAttr = parseInt( element.getAttribute( 'height' ), 10 ),
191                                                                                                                                heightStyle = parseInt( element.getStyle( 'height' ), 10 );
192
193                                                                                                                !isNaN( heightAttr ) && this.setValue( heightAttr );
194                                                                                                                !isNaN( heightStyle ) && this.setValue( heightStyle );
195                                                                                                        },
196                                                                                                        commit : function( element )
197                                                                                                        {
198                                                                                                                var value = parseInt( this.getValue(), 10 );
199
200                                                                                                                if ( !isNaN( value ) )
201                                                                                                                        element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
202                                                                                                                else
203                                                                                                                        element.removeStyle( 'height' );
204
205                                                                                                                element.removeAttribute( 'height' );
206                                                                                                        }
207                                                                                                },
208                                                                                                {
209                                                                                                        id : 'htmlHeightType',
210                                                                                                        type : 'html',
211                                                                                                        html : langTable.widthPx
212                                                                                                }
213                                                                                        ]
214                                                                                },
215                                                                                spacer(),
216                                                                                {
217                                                                                        type : 'select',
218                                                                                        id : 'wordWrap',
219                                                                                        labelLayout : 'horizontal',
220                                                                                        label : langCell.wordWrap,
221                                                                                        widths : [ '50%', '50%' ],
222                                                                                        'default' : 'yes',
223                                                                                        items :
224                                                                                        [
225                                                                                                [ langCell.yes, 'yes' ],
226                                                                                                [ langCell.no, 'no' ]
227                                                                                        ],
228                                                                                        setup : function( element )
229                                                                                        {
230                                                                                                var wordWrapAttr = element.getAttribute( 'noWrap' ),
231                                                                                                                wordWrapStyle = element.getStyle( 'white-space' );
232
233                                                                                                if ( wordWrapStyle == 'nowrap' || wordWrapAttr )
234                                                                                                        this.setValue( 'no' );
235                                                                                        },
236                                                                                        commit : function( element )
237                                                                                        {
238                                                                                                if ( this.getValue() == 'no' )
239                                                                                                        element.setStyle( 'white-space', 'nowrap' );
240                                                                                                else
241                                                                                                        element.removeStyle( 'white-space' );
242
243                                                                                                element.removeAttribute( 'noWrap' );
244                                                                                        }
245                                                                                },
246                                                                                spacer(),
247                                                                                {
248                                                                                        type : 'select',
249                                                                                        id : 'hAlign',
250                                                                                        labelLayout : 'horizontal',
251                                                                                        label : langCell.hAlign,
252                                                                                        widths : [ '50%', '50%' ],
253                                                                                        'default' : '',
254                                                                                        items :
255                                                                                        [
256                                                                                                [ langCommon.notSet, '' ],
257                                                                                                [ langTable.alignLeft, 'left' ],
258                                                                                                [ langTable.alignCenter, 'center' ],
259                                                                                                [ langTable.alignRight, 'right' ]
260                                                                                        ],
261                                                                                        setup : function( element )
262                                                                                        {
263                                                                                                var alignAttr = element.getAttribute( 'align' ),
264                                                                                                                textAlignStyle = element.getStyle( 'text-align');
265
266                                                                                                this.setValue(  textAlignStyle || alignAttr || '' );
267                                                                                        },
268                                                                                        commit : function( selectedCell )
269                                                                                        {
270                                                                                                var value = this.getValue();
271
272                                                                                                if ( value )
273                                                                                                        selectedCell.setStyle( 'text-align', value );
274                                                                                                else
275                                                                                                        selectedCell.removeStyle( 'text-align' );
276
277                                                                                                selectedCell.removeAttribute( 'align' );
278                                                                                        }
279                                                                                },
280                                                                                {
281                                                                                        type : 'select',
282                                                                                        id : 'vAlign',
283                                                                                        labelLayout : 'horizontal',
284                                                                                        label : langCell.vAlign,
285                                                                                        widths : [ '50%', '50%' ],
286                                                                                        'default' : '',
287                                                                                        items :
288                                                                                        [
289                                                                                                [ langCommon.notSet, '' ],
290                                                                                                [ langCell.alignTop, 'top' ],
291                                                                                                [ langCell.alignMiddle, 'middle' ],
292                                                                                                [ langCell.alignBottom, 'bottom' ],
293                                                                                                [ langCell.alignBaseline, 'baseline' ]
294                                                                                        ],
295                                                                                        setup : function( element )
296                                                                                        {
297                                                                                                var vAlignAttr = element.getAttribute( 'vAlign' ),
298                                                                                                                vAlignStyle = element.getStyle( 'vertical-align' );
299
300                                                                                                switch( vAlignStyle )
301                                                                                                {
302                                                                                                        // Ignore all other unrelated style values..
303                                                                                                        case 'top':
304                                                                                                        case 'middle':
305                                                                                                        case 'bottom':
306                                                                                                        case 'baseline':
307                                                                                                                break;
308                                                                                                        default:
309                                                                                                                vAlignStyle = '';
310                                                                                                }
311
312                                                                                                this.setValue( vAlignStyle || vAlignAttr || '' );
313                                                                                        },
314                                                                                        commit : function( element )
315                                                                                        {
316                                                                                                var value = this.getValue();
317
318                                                                                                if ( value )
319                                                                                                        element.setStyle( 'vertical-align', value );
320                                                                                                else
321                                                                                                        element.removeStyle( 'vertical-align' );
322
323                                                                                                element.removeAttribute( 'vAlign' );
324                                                                                        }
325                                                                                }
326                                                                        ]
327                                                                },
328                                                                spacer(),
329                                                                {
330                                                                        type : 'vbox',
331                                                                        padding : 0,
332                                                                        children :
333                                                                        [
334                                                                                {
335                                                                                        type : 'select',
336                                                                                        id : 'cellType',
337                                                                                        label : langCell.cellType,
338                                                                                        labelLayout : 'horizontal',
339                                                                                        widths : [ '50%', '50%' ],
340                                                                                        'default' : 'td',
341                                                                                        items :
342                                                                                        [
343                                                                                                [ langCell.data, 'td' ],
344                                                                                                [ langCell.header, 'th' ]
345                                                                                        ],
346                                                                                        setup : function( selectedCell )
347                                                                                        {
348                                                                                                this.setValue( selectedCell.getName() );
349                                                                                        },
350                                                                                        commit : function( selectedCell )
351                                                                                        {
352                                                                                                selectedCell.renameNode( this.getValue() );
353                                                                                        }
354                                                                                },
355                                                                                spacer(),
356                                                                                {
357                                                                                        type : 'text',
358                                                                                        id : 'rowSpan',
359                                                                                        label : langCell.rowSpan,
360                                                                                        labelLayout : 'horizontal',
361                                                                                        widths : [ '50%', '50%' ],
362                                                                                        'default' : '',
363                                                                                        validate : validate.integer( langCell.invalidRowSpan ),
364                                                                                        setup : function( selectedCell )
365                                                                                        {
366                                                                                                var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 );
367                                                                                                if ( attrVal && attrVal  != 1 )
368                                                                                                        this.setValue(  attrVal );
369                                                                                        },
370                                                                                        commit : function( selectedCell )
371                                                                                        {
372                                                                                                var value = parseInt( this.getValue(), 10 );
373                                                                                                if ( value && value != 1 )
374                                                                                                        selectedCell.setAttribute( 'rowSpan', this.getValue() );
375                                                                                                else
376                                                                                                        selectedCell.removeAttribute( 'rowSpan' );
377                                                                                        }
378                                                                                },
379                                                                                {
380                                                                                        type : 'text',
381                                                                                        id : 'colSpan',
382                                                                                        label : langCell.colSpan,
383                                                                                        labelLayout : 'horizontal',
384                                                                                        widths : [ '50%', '50%' ],
385                                                                                        'default' : '',
386                                                                                        validate : validate.integer( langCell.invalidColSpan ),
387                                                                                        setup : function( element )
388                                                                                        {
389                                                                                                var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 );
390                                                                                                if ( attrVal && attrVal  != 1 )
391                                                                                                        this.setValue(  attrVal );
392                                                                                        },
393                                                                                        commit : function( selectedCell )
394                                                                                        {
395                                                                                                var value = parseInt( this.getValue(), 10 );
396                                                                                                if ( value && value != 1 )
397                                                                                                        selectedCell.setAttribute( 'colSpan', this.getValue() );
398                                                                                                else
399                                                                                                        selectedCell.removeAttribute( 'colSpan' );
400                                                                                        }
401                                                                                },
402                                                                                spacer(),
403                                                                                {
404                                                                                        type : 'hbox',
405                                                                                        padding : 0,
406                                                                                        widths : [ '80%', '20%' ],
407                                                                                        children :
408                                                                                        [
409                                                                                                {
410                                                                                                        type : 'text',
411                                                                                                        id : 'bgColor',
412                                                                                                        label : langCell.bgColor,
413                                                                                                        labelLayout : 'horizontal',
414                                                                                                        widths : [ '70%', '30%' ],
415                                                                                                        'default' : '',
416                                                                                                        setup : function( element )
417                                                                                                        {
418                                                                                                                var bgColorAttr = element.getAttribute( 'bgColor' ),
419                                                                                                                                bgColorStyle = element.getStyle( 'background-color' );
420
421                                                                                                                this.setValue( bgColorStyle || bgColorAttr );
422                                                                                                        },
423                                                                                                        commit : function( selectedCell )
424                                                                                                        {
425                                                                                                                var value = this.getValue();
426
427                                                                                                                if ( value )
428                                                                                                                        selectedCell.setStyle( 'background-color', this.getValue() );
429                                                                                                                else
430                                                                                                                        selectedCell.removeStyle( 'background-color' );
431
432                                                                                                                selectedCell.removeAttribute( 'bgColor');
433                                                                                                        }
434                                                                                                },
435                                                                                                {
436                                                                                                        type : 'button',
437                                                                                                        id : 'bgColorChoose',
438                                                                                                        label : langCell.chooseColor,
439                                                                                                        style : 'margin-left: 10px',
440                                                                                                        onClick : function()
441                                                                                                        {
442                                                                                                                var self = this;
443                                                                                                                getDialogValue( 'colordialog', function( colorDialog )
444                                                                                                                {
445                                                                                                                        self.getDialog().getContentElement( 'info', 'bgColor' ).setValue(
446                                                                                                                                colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
447                                                                                                                        );
448                                                                                                                } );
449                                                                                                        }
450                                                                                                }
451                                                                                        ]
452                                                                                },
453                                                                                spacer(),
454                                                                                {
455                                                                                        type : 'hbox',
456                                                                                        padding : 0,
457                                                                                        widths : [ '80%', '20%' ],
458                                                                                        children :
459                                                                                        [
460                                                                                                {
461                                                                                                        type : 'text',
462                                                                                                        id : 'borderColor',
463                                                                                                        label : langCell.borderColor,
464                                                                                                        labelLayout : 'horizontal',
465                                                                                                        widths : [ '70%', '30%' ],
466                                                                                                        'default' : '',
467                                                                                                        setup : function( element )
468                                                                                                        {
469                                                                                                                var borderColorAttr = element.getAttribute( 'borderColor' ),
470                                                                                                                                borderColorStyle = element.getStyle( 'border-color' );
471
472                                                                                                                this.setValue( borderColorStyle || borderColorAttr );
473                                                                                                        },
474                                                                                                        commit : function( selectedCell )
475                                                                                                        {
476                                                                                                                var value = this.getValue();
477                                                                                                                if ( value )
478                                                                                                                        selectedCell.setStyle( 'border-color', this.getValue() );
479                                                                                                                else
480                                                                                                                        selectedCell.removeStyle( 'border-color' );
481
482                                                                                                                selectedCell.removeAttribute( 'borderColor');
483                                                                                                        }
484                                                                                                },
485                                                                                                {
486                                                                                                        type : 'button',
487                                                                                                        id : 'borderColorChoose',
488                                                                                                        label : langCell.chooseColor,
489                                                                                                        style : 'margin-left: 10px',
490                                                                                                        onClick : function()
491                                                                                                        {
492                                                                                                                var self = this;
493                                                                                                                getDialogValue( 'colordialog', function( colorDialog )
494                                                                                                                {
495                                                                                                                        self.getDialog().getContentElement( 'info', 'borderColor' ).setValue(
496                                                                                                                                colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
497                                                                                                                        );
498                                                                                                                } );
499                                                                                                        }
500                                                                                                }
501                                                                                        ]
502                                                                                }
503                                                                        ]
504                                                                }
505                                                        ]
506                                                }
507                                        ]
508                                }
509                        ],
510                        onShow : function()
511                        {
512                                this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(
513                                        this._.editor.getSelection() );
514                                this.setupContent( this.cells[ 0 ] );
515                        },
516                        onOk : function()
517                        {
518                                var selection = this._.editor.getSelection(),
519                                        bookmarks = selection.createBookmarks();
520
521                                var cells = this.cells;
522                                for ( var i = 0 ; i < cells.length ; i++ )
523                                        this.commitContent( cells[ i ] );
524
525                                selection.selectBookmarks( bookmarks );
526                        }
527                };
528        } );
Note: See TracBrowser for help on using the repository browser.