1/**
2 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.html or http://ckeditor.com/license
4 */
5
6CKEDITOR.dialog.add( 'cellProperties', function( editor ) {
7	var langTable = editor.lang.table,
8		langCell = langTable.cell,
9		langCommon = editor.lang.common,
10		validate = CKEDITOR.dialog.validate,
11		widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,
12		heightPattern = /^(\d+(?:\.\d+)?)px$/,
13		bind = CKEDITOR.tools.bind,
14		spacer = { type: 'html', html: ' ' },
15		rtl = editor.lang.dir == 'rtl',
16		colorDialog = editor.plugins.colordialog;
17
18	return {
19		title: langCell.title,
20		minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 450 : 410,
21		minHeight: CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks ) ? 230 : 220,
22		contents: [
23			{
24			id: 'info',
25			label: langCell.title,
26			accessKey: 'I',
27			elements: [
28				{
29				type: 'hbox',
30				widths: [ '40%', '5%', '40%' ],
31				children: [
32					{
33					type: 'vbox',
34					padding: 0,
35					children: [
36						{
37						type: 'hbox',
38						widths: [ '70%', '30%' ],
39						children: [
40							{
41							type: 'text',
42							id: 'width',
43							hidden: true,
44							width: '100px',
45							label: langCommon.width,
46							validate: validate[ 'number' ]( langCell.invalidWidth ),
47
48							// Extra labelling of width unit type.
49							onLoad: function() {
50								var widthType = this.getDialog().getContentElement( 'info', 'widthType' ),
51									labelElement = widthType.getElement(),
52									inputElement = this.getInputElement(),
53									ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
54
55								inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
56							},
57
58							setup: function( element ) {
59								var widthAttr = parseInt( element.getAttribute( 'width' ), 10 ),
60									widthStyle = parseInt( element.getStyle( 'width' ), 10 );
61
62								!isNaN( widthAttr ) && this.setValue( widthAttr );
63								!isNaN( widthStyle ) && this.setValue( widthStyle );
64							},
65							commit: function( element ) {
66								var value = parseInt( this.getValue(), 10 ),
67									unit = this.getDialog().getValueOf( 'info', 'widthType' );
68
69								if ( !isNaN( value ) )
70									element.setStyle( 'width', value + unit );
71								else
72									element.removeStyle( 'width' );
73
74								element.removeAttribute( 'width' );
75							},
76							'default': ''
77						},
78							{
79							type: 'select',
80							id: 'widthType',
81							hidden: true,
82							label: editor.lang.table.widthUnit,
83							labelStyle: 'visibility:hidden',
84							'default': 'px',
85							items: [
86								[ langTable.widthPx, 'px' ],
87								[ langTable.widthPc, '%' ]
88								],
89							setup: function( selectedCell ) {
90								var widthMatch = widthPattern.exec( selectedCell.getStyle( 'width' ) || selectedCell.getAttribute( 'width' ) );
91								if ( widthMatch )
92									this.setValue( widthMatch[ 2 ] );
93							}
94						}
95						]
96					},
97						spacer,
98					{
99						type: 'select',
100						id: 'hAlign',
101						label: langCell.hAlign,
102						'default': '',
103						items: [
104							[ langCommon.notSet, '' ],
105							[ langCommon.alignLeft, 'left' ],
106							[ langCommon.alignCenter, 'center' ],
107							[ langCommon.alignRight, 'right' ]
108							],
109						setup: function( element ) {
110							var alignClass = element.getAttribute( 'class' );
111							//var alignClass = element.getAttribute( 'class' );
112
113							var matches =  alignClass ? alignClass.match(/(\w+)align/): "";
114                            if(matches) {
115						    	alignClass = matches[1];
116							}
117							else alignClass = "";
118
119                            this.setValue( alignClass);
120
121						},
122						commit: function( selectedCell ) {
123							var value = this.getValue();
124
125							if ( value ) {
126								selectedCell.setStyle( 'text-align', value );
127								selectedCell.setAttribute('class', value + 'align');
128							}
129							else
130								selectedCell.removeStyle( 'text-align' );
131
132							selectedCell.removeAttribute( 'align' );
133						}
134					},
135
136					]
137				},
138					spacer,
139				{
140					type: 'vbox',
141					padding: 0,
142					children: [
143						{
144						type: 'select',
145						id: 'cellType',
146						label: langCell.cellType,
147						'default': 'td',
148						items: [
149							[ langCell.data, 'td' ],
150							[ langCell.header, 'th' ]
151							],
152						setup: function( selectedCell ) {
153							this.setValue( selectedCell.getName() );
154						},
155						commit: function( selectedCell ) {
156							selectedCell.renameNode( this.getValue() );
157						}
158					},
159						spacer,
160					{
161						type: 'text',
162						id: 'rowSpan',
163						label: langCell.rowSpan,
164						'default': '',
165						validate: validate.integer( langCell.invalidRowSpan ),
166						setup: function( selectedCell ) {
167							var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 );
168							if ( attrVal && attrVal != 1 )
169								this.setValue( attrVal );
170						},
171						commit: function( selectedCell ) {
172							var value = parseInt( this.getValue(), 10 );
173							if ( value && value != 1 )
174								selectedCell.setAttribute( 'rowSpan', this.getValue() );
175							else
176								selectedCell.removeAttribute( 'rowSpan' );
177						}
178					},
179						{
180						type: 'text',
181						id: 'colSpan',
182						label: langCell.colSpan,
183						'default': '',
184						validate: validate.integer( langCell.invalidColSpan ),
185						setup: function( element ) {
186							var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 );
187							if ( attrVal && attrVal != 1 )
188								this.setValue( attrVal );
189						},
190						commit: function( selectedCell ) {
191							var value = parseInt( this.getValue(), 10 );
192							if ( value && value != 1 )
193								selectedCell.setAttribute( 'colSpan', this.getValue() );
194							else
195								selectedCell.removeAttribute( 'colSpan' );
196						}
197					},
198						spacer,
199					/*{
200						type: 'hbox',
201						padding: 0,
202						widths: [ '60%', '40%' ],
203						children: [
204							{
205							type: 'text',
206							id: 'bgColor',
207							hidden: true,
208							label: langCell.bgColor,
209							'default': '',
210							setup: function( element ) {
211								var bgColorAttr = element.getAttribute( 'bgColor' ),
212									bgColorStyle = element.getStyle( 'background-color' );
213
214								this.setValue( bgColorStyle || bgColorAttr );
215							},
216							commit: function( selectedCell ) {
217								var value = this.getValue();
218
219								if ( value )
220									selectedCell.setStyle( 'background-color', this.getValue() );
221								else
222									selectedCell.removeStyle( 'background-color' );
223
224								selectedCell.removeAttribute( 'bgColor' );
225							}
226						},
227						colorDialog ? {
228							type: 'button',
229							hidden: true,
230							id: 'bgColorChoose',
231							"class": 'colorChooser',
232							label: langCell.chooseColor,
233							onLoad: function() {
234								// Stick the element to the bottom (#5587)
235								this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );
236							},
237							onClick: function() {
238								editor.getColorFromDialog( function( color ) {
239									if ( color )
240										this.getDialog().getContentElement( 'info', 'bgColor' ).setValue( color );
241									this.focus();
242								}, this );
243							}
244						} : spacer
245						]
246					},*/
247					/*	spacer,
248					{
249						type: 'hbox',
250						padding: 0,
251						hidden: true,
252						widths: [ '60%', '40%' ],
253						children: [
254							{
255							type: 'text',
256							id: 'borderColor',
257							label: langCell.borderColor,
258							'default': '',
259							setup: function( element ) {
260								var borderColorAttr = element.getAttribute( 'borderColor' ),
261									borderColorStyle = element.getStyle( 'border-color' );
262
263								this.setValue( borderColorStyle || borderColorAttr );
264							},
265							commit: function( selectedCell ) {
266								var value = this.getValue();
267								if ( value )
268									selectedCell.setStyle( 'border-color', this.getValue() );
269								else
270									selectedCell.removeStyle( 'border-color' );
271
272								selectedCell.removeAttribute( 'borderColor' );
273							}
274						},
275
276						colorDialog ? {
277							type: 'button',
278							id: 'borderColorChoose',
279							"class": 'colorChooser',
280							hidden: true,
281							label: langCell.chooseColor,
282							style: ( rtl ? 'margin-right' : 'margin-left' ) + ': 10px',
283							onLoad: function() {
284								// Stick the element to the bottom (#5587)
285								this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );
286							},
287							onClick: function() {
288								editor.getColorFromDialog( function( color ) {
289									if ( color )
290										this.getDialog().getContentElement( 'info', 'borderColor' ).setValue( color );
291									this.focus();
292								}, this );
293							}
294						} : spacer
295						]
296					}*/
297					]
298				}
299				]
300			}
301			]
302		}
303		],
304		onShow: function() {
305			this.cells = CKEDITOR.plugins.tabletools.getSelectedCells( this._.editor.getSelection() );
306			this.setupContent( this.cells[ 0 ] );
307		},
308		onOk: function() {
309			var selection = this._.editor.getSelection(),
310				bookmarks = selection.createBookmarks();
311
312			var cells = this.cells;
313			for ( var i = 0; i < cells.length; i++ )
314				this.commitContent( cells[ i ] );
315
316			this._.editor.forceNextSelectionCheck();
317			selection.selectBookmarks( bookmarks );
318			this._.editor.selectionChange();
319		}
320	};
321});
322