1 /*
  2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5
  6 CKEDITOR.dialog.add( 'cellProperties', function( editor )
  7 	{
  8 		var langTable = editor.lang.table;
  9 		var langCell = langTable.cell;
 10 		var langCommon = editor.lang.common;
 11 		var validate = CKEDITOR.dialog.validate;
 12 		var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,
 13 			heightPattern = /^(\d+(?:\.\d+)?)px$/;
 14 		var bind = CKEDITOR.tools.bind;
 15
 16 		function spacer()
 17 		{
 18 			return { type : 'html', html : ' ' };
 19 		}
 20
 21 		return {
 22 			title : langCell.title,
 23 			minWidth : 480,
 24 			minHeight : 140,
 25 			contents : [
 26 				{
 27 					id : 'info',
 28 					label : langCell.title,
 29 					accessKey : 'I',
 30 					elements :
 31 					[
 32 						{
 33 							type : 'hbox',
 34 							widths : [ '45%', '10%', '45%' ],
 35 							children :
 36 							[
 37 								{
 38 									type : 'vbox',
 39 									padding : 0,
 40 									children :
 41 									[
 42 										{
 43 											type : 'hbox',
 44 											widths : [ '70%', '30%' ],
 45 											children :
 46 											[
 47 												{
 48 													type : 'text',
 49 													id : 'width',
 50 													label : langTable.width,
 51 													widths : [ '71%', '29%' ],
 52 													labelLayout : 'horizontal',
 53 													validate : validate[ 'number' ]( langCell.invalidWidth ),
 54 													setup : function( selectedCell )
 55 													{
 56 														var widthMatch = widthPattern.exec( selectedCell.$.style.width );
 57 														if ( widthMatch )
 58 															this.setValue( widthMatch[1] );
 59 													},
 60 													commit : function( selectedCell )
 61 													{
 62 														var unit = this.getDialog().getValueOf( 'info', 'widthType' );
 63 														if ( this.getValue() !== '' )
 64 															selectedCell.$.style.width = this.getValue() + unit;
 65 														else
 66 															selectedCell.$.style.width = '';
 67 													},
 68 													'default' : ''
 69 												},
 70 												{
 71 													type : 'select',
 72 													id : 'widthType',
 73 													labelLayout : 'horizontal',
 74 													widths : [ '0%', '100%' ],
 75 													label : '',
 76 													'default' : 'px',
 77 													items :
 78 													[
 79 														[ langTable.widthPx, 'px' ],
 80 														[ langTable.widthPc, '%' ]
 81 													],
 82 													setup : function( selectedCell )
 83 													{
 84 														var widthMatch = widthPattern.exec( selectedCell.$.style.width );
 85 														if ( widthMatch )
 86 															this.setValue( widthMatch[2] );
 87 													}
 88 												}
 89 											]
 90 										},
 91 										{
 92 											type : 'hbox',
 93 											widths : [ '70%', '30%' ],
 94 											children :
 95 											[
 96 												{
 97 													type : 'text',
 98 													id : 'height',
 99 													label : langTable.height,
100 													'default' : '',
101 													widths : [ '71%', '29%' ],
102 													labelLayout : 'horizontal',
103 													validate : validate[ 'number' ]( langCell.invalidHeight ),
104 													setup : function( selectedCell )
105 													{
106 														var heightMatch = heightPattern.exec( selectedCell.$.style.height );
107 														if ( heightMatch )
108 															this.setValue( heightMatch[1] );
109 													},
110 													commit : function( selectedCell )
111 													{
112 														if ( this.getValue() !== '' )
113 															selectedCell.$.style.height = this.getValue() + 'px';
114 														else
115 															selectedCell.$.style.height = '';
116 													}
117 												},
118 												{
119 													type : 'html',
120 													html : langTable.widthPx
121 												}
122 											]
123 										},
124 										spacer(),
125 										{
126 											type : 'select',
127 											id : 'wordWrap',
128 											labelLayout : 'horizontal',
129 											label : langCell.wordWrap,
130 											widths : [ '50%', '50%' ],
131 											'default' : 'yes',
132 											items :
133 											[
134 												[ langCell.yes, 'yes' ],
135 												[ langCell.no, 'no' ]
136 											],
137 											commit : function( selectedCell )
138 											{
139 												if ( this.getValue() == 'no' )
140 													selectedCell.setAttribute( 'noWrap', 'nowrap' );
141 												else
142 													selectedCell.removeAttribute( 'noWrap' );
143 											}
144 										},
145 										spacer(),
146 										{
147 											type : 'select',
148 											id : 'hAlign',
149 											labelLayout : 'horizontal',
150 											label : langCell.hAlign,
151 											widths : [ '50%', '50%' ],
152 											'default' : '',
153 											items :
154 											[
155 												[ langCommon.notSet, '' ],
156 												[ langTable.alignLeft, 'left' ],
157 												[ langTable.alignCenter, 'center' ],
158 												[ langTable.alignRight, 'right' ]
159 											],
160 											setup : function( selectedCell )
161 											{
162 												this.setValue( selectedCell.getAttribute( 'align' ) || '' );
163 											},
164 											commit : function( selectedCell )
165 											{
166 												if ( this.getValue() )
167 													selectedCell.setAttribute( 'align', this.getValue() );
168 												else
169 													selectedCell.removeAttribute( 'align' );
170 											}
171 										},
172 										{
173 											type : 'select',
174 											id : 'vAlign',
175 											labelLayout : 'horizontal',
176 											label : langCell.vAlign,
177 											widths : [ '50%', '50%' ],
178 											'default' : '',
179 											items :
180 											[
181 												[ langCommon.notSet, '' ],
182 												[ langCell.alignTop, 'top' ],
183 												[ langCell.alignMiddle, 'middle' ],
184 												[ langCell.alignBottom, 'bottom' ],
185 												[ langCell.alignBaseline, 'baseline' ]
186 											],
187 											setup : function( selectedCell )
188 											{
189 												this.setValue( selectedCell.getAttribute( 'vAlign' ) || '' );
190 											},
191 											commit : function( selectedCell )
192 											{
193 												if ( this.getValue() )
194 													selectedCell.setAttribute( 'vAlign', this.getValue() );
195 												else
196 													selectedCell.removeAttribute( 'vAlign' );
197 											}
198 										}
199 									]
200 								},
201 								spacer(),
202 								{
203 									type : 'vbox',
204 									padding : 0,
205 									children :
206 									[
207 										{
208 											type : 'select',
209 											id : 'cellType',
210 											label : langCell.cellType,
211 											labelLayout : 'horizontal',
212 											widths : [ '50%', '50%' ],
213 											'default' : 'td',
214 											items :
215 											[
216 												[ langCell.data, 'td' ],
217 												[ langCell.header, 'th' ]
218 											],
219 											setup : function( selectedCell )
220 											{
221 												this.setValue( selectedCell.getName() );
222 											},
223 											commit : function( selectedCell )
224 											{
225 												selectedCell.renameNode( this.getValue() );
226 											}
227 										},
228 										spacer(),
229 										{
230 											type : 'text',
231 											id : 'rowSpan',
232 											label : langCell.rowSpan,
233 											labelLayout : 'horizontal',
234 											widths : [ '50%', '50%' ],
235 											'default' : '',
236 											validate : validate.integer( langCell.invalidRowSpan ),
237 											setup : function( selectedCell )
238 											{
239 												this.setValue( selectedCell.getAttribute( 'rowSpan' ) || '' );
240 											},
241 											commit : function( selectedCell )
242 											{
243 												if ( this.getValue() )
244 													selectedCell.setAttribute( 'rowSpan', this.getValue() );
245 												else
246 													selectedCell.removeAttribute( 'rowSpan' );
247 											}
248 										},
249 										{
250 											type : 'text',
251 											id : 'colSpan',
252 											label : langCell.colSpan,
253 											labelLayout : 'horizontal',
254 											widths : [ '50%', '50%' ],
255 											'default' : '',
256 											validate : validate.integer( langCell.invalidColSpan ),
257 											setup : function( selectedCell )
258 											{
259 												this.setValue( selectedCell.getAttribute( 'colSpan' ) || '' );
260 											},
261 											commit : function( selectedCell )
262 											{
263 												if ( this.getValue() )
264 													selectedCell.setAttribute( 'colSpan', this.getValue() );
265 												else
266 													selectedCell.removeAttribute( 'colSpan' );
267 											}
268 										},
269 										spacer(),
270 										{
271 											type : 'text',
272 											id : 'bgColor',
273 											label : langCell.bgColor,
274 											labelLayout : 'horizontal',
275 											widths : [ '50%', '50%' ],
276 											'default' : '',
277 											setup : function( selectedCell )
278 											{
279 												this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' );
280 											},
281 											commit : function( selectedCell )
282 											{
283 												if ( this.getValue() )
284 													selectedCell.setAttribute( 'bgColor', this.getValue() );
285 												else
286 													selectedCell.removeAttribute( 'bgColor' );
287 											}
288 										},
289 										{
290 											type : 'text',
291 											id : 'borderColor',
292 											label : langCell.borderColor,
293 											labelLayout : 'horizontal',
294 											widths : [ '50%', '50%' ],
295 											'default' : '',
296 											setup : function( selectedCell )
297 											{
298 												this.setValue( selectedCell.getAttribute( 'borderColor' ) || '' );
299 											},
300 											commit : function( selectedCell )
301 											{
302 												if ( this.getValue() )
303 													selectedCell.setAttribute( 'borderColor', this.getValue() );
304 												else
305 													selectedCell.removeAttribute( 'borderColor' );
306 											}
307 										}
308 									]
309 								}
310 							]
311 						}
312 					]
313 				}
314 			],
315 			onShow : function()
316 			{
317 				// Get the selected table cell.
318 				var startElement = editor.getSelection().getStartElement();
319 				this.cell = startElement.getAscendant( 'td', true ) || startElement.getAscendant( 'th', true );
320
321 				// Call setupContent().
322 				this.setupContent( this.cell );
323 			},
324 			onOk : function()
325 			{
326 				// Call commitContent().
327 				this.commitContent( this.cell );
328 			}
329 		};
330 	} );
331