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