      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