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