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