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 | CKEDITOR.dialog.add( 'select', function( editor )
|
---|
6 | {
|
---|
7 | // Add a new option to a SELECT object (combo or list).
|
---|
8 | function addOption( combo, optionText, optionValue, documentObject, index )
|
---|
9 | {
|
---|
10 | combo = getSelect( combo );
|
---|
11 | var oOption;
|
---|
12 | if ( documentObject )
|
---|
13 | oOption = documentObject.createElement( "OPTION" );
|
---|
14 | else
|
---|
15 | oOption = document.createElement( "OPTION" );
|
---|
16 |
|
---|
17 | if ( combo && oOption && oOption.getName() == 'option' )
|
---|
18 | {
|
---|
19 | if ( CKEDITOR.env.ie ) {
|
---|
20 | if ( !isNaN( parseInt( index, 10) ) )
|
---|
21 | combo.$.options.add( oOption.$, index );
|
---|
22 | else
|
---|
23 | combo.$.options.add( oOption.$ );
|
---|
24 |
|
---|
25 | oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
|
---|
26 | oOption.$.value = optionValue;
|
---|
27 | }
|
---|
28 | else
|
---|
29 | {
|
---|
30 | if ( index !== null && index < combo.getChildCount() )
|
---|
31 | combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
|
---|
32 | else
|
---|
33 | combo.append( oOption );
|
---|
34 |
|
---|
35 | oOption.setText( optionText.length > 0 ? optionText : '' );
|
---|
36 | oOption.setValue( optionValue );
|
---|
37 | }
|
---|
38 | }
|
---|
39 | else
|
---|
40 | return false;
|
---|
41 |
|
---|
42 | return oOption;
|
---|
43 | }
|
---|
44 | // Remove all selected options from a SELECT object.
|
---|
45 | function removeSelectedOptions( combo )
|
---|
46 | {
|
---|
47 | combo = getSelect( combo );
|
---|
48 |
|
---|
49 | // Save the selected index
|
---|
50 | var iSelectedIndex = getSelectedIndex( combo );
|
---|
51 |
|
---|
52 | // Remove all selected options.
|
---|
53 | for ( var i = combo.getChildren().count() - 1 ; i >= 0 ; i-- )
|
---|
54 | {
|
---|
55 | if ( combo.getChild( i ).$.selected )
|
---|
56 | combo.getChild( i ).remove();
|
---|
57 | }
|
---|
58 |
|
---|
59 | // Reset the selection based on the original selected index.
|
---|
60 | setSelectedIndex( combo, iSelectedIndex );
|
---|
61 | }
|
---|
62 | //Modify option from a SELECT object.
|
---|
63 | function modifyOption( combo, index, title, value )
|
---|
64 | {
|
---|
65 | combo = getSelect( combo );
|
---|
66 | if ( index < 0 )
|
---|
67 | return false;
|
---|
68 | var child = combo.getChild( index );
|
---|
69 | child.setText( title );
|
---|
70 | child.setValue( value );
|
---|
71 | return child;
|
---|
72 | }
|
---|
73 | function removeAllOptions( combo )
|
---|
74 | {
|
---|
75 | combo = getSelect( combo );
|
---|
76 | while( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
|
---|
77 | { /*jsl:pass*/ }
|
---|
78 | }
|
---|
79 | // Moves the selected option by a number of steps (also negative).
|
---|
80 | function changeOptionPosition( combo, steps, documentObject )
|
---|
81 | {
|
---|
82 | combo = getSelect( combo );
|
---|
83 | var iActualIndex = getSelectedIndex( combo );
|
---|
84 | if ( iActualIndex < 0 )
|
---|
85 | return false;
|
---|
86 |
|
---|
87 | var iFinalIndex = iActualIndex + steps;
|
---|
88 | iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;
|
---|
89 | iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;
|
---|
90 |
|
---|
91 | if ( iActualIndex == iFinalIndex )
|
---|
92 | return false;
|
---|
93 |
|
---|
94 | var oOption = combo.getChild( iActualIndex ),
|
---|
95 | sText = oOption.getText(),
|
---|
96 | sValue = oOption.getValue();
|
---|
97 |
|
---|
98 | oOption.remove();
|
---|
99 |
|
---|
100 | oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );
|
---|
101 | setSelectedIndex( combo, iFinalIndex );
|
---|
102 | return oOption;
|
---|
103 | }
|
---|
104 | function getSelectedIndex( combo )
|
---|
105 | {
|
---|
106 | combo = getSelect( combo );
|
---|
107 | return combo ? combo.$.selectedIndex : -1;
|
---|
108 | }
|
---|
109 | function setSelectedIndex( combo, index )
|
---|
110 | {
|
---|
111 | combo = getSelect( combo );
|
---|
112 | if ( index < 0 )
|
---|
113 | return null;
|
---|
114 | var count = combo.getChildren().count();
|
---|
115 | combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;
|
---|
116 | return combo;
|
---|
117 | }
|
---|
118 | function getOptions( combo )
|
---|
119 | {
|
---|
120 | combo = getSelect( combo );
|
---|
121 | return combo ? combo.getChildren() : false;
|
---|
122 | }
|
---|
123 | function getSelect( obj )
|
---|
124 | {
|
---|
125 | if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.
|
---|
126 | return obj.getInputElement();
|
---|
127 | else if ( obj && obj.$ )
|
---|
128 | return obj;
|
---|
129 | return false;
|
---|
130 | }
|
---|
131 |
|
---|
132 | return {
|
---|
133 | title : editor.lang.select.title,
|
---|
134 | minWidth : CKEDITOR.env.ie ? 460 : 395,
|
---|
135 | minHeight : CKEDITOR.env.ie ? 320 : 300,
|
---|
136 | onShow : function()
|
---|
137 | {
|
---|
138 | delete this.selectBox;
|
---|
139 | this.setupContent( 'clear' );
|
---|
140 | var element = this.getParentEditor().getSelection().getSelectedElement();
|
---|
141 | if ( element && element.getName() == "select" )
|
---|
142 | {
|
---|
143 | this.selectBox = element;
|
---|
144 | this.setupContent( element.getName(), element );
|
---|
145 |
|
---|
146 | // Load Options into dialog.
|
---|
147 | var objOptions = getOptions( element );
|
---|
148 | for ( var i = 0 ; i < objOptions.count() ; i++ )
|
---|
149 | this.setupContent( 'option', objOptions.getItem( i ) );
|
---|
150 | }
|
---|
151 | },
|
---|
152 | onOk : function()
|
---|
153 | {
|
---|
154 | var editor = this.getParentEditor(),
|
---|
155 | element = this.selectBox,
|
---|
156 | isInsertMode = !element;
|
---|
157 |
|
---|
158 | if ( isInsertMode )
|
---|
159 | element = editor.document.createElement( 'select' );
|
---|
160 | this.commitContent( element );
|
---|
161 |
|
---|
162 | if ( isInsertMode )
|
---|
163 | editor.insertElement( element );
|
---|
164 | },
|
---|
165 | contents : [
|
---|
166 | {
|
---|
167 | id : 'info',
|
---|
168 | label : editor.lang.select.selectInfo,
|
---|
169 | title : editor.lang.select.selectInfo,
|
---|
170 | accessKey : '',
|
---|
171 | elements : [
|
---|
172 | {
|
---|
173 | id : 'txtName',
|
---|
174 | type : 'text',
|
---|
175 | widths : [ '25%','75%' ],
|
---|
176 | labelLayout : 'horizontal',
|
---|
177 | label : editor.lang.common.name,
|
---|
178 | 'default' : '',
|
---|
179 | accessKey : 'N',
|
---|
180 | align : 'center',
|
---|
181 | style : 'width:350px',
|
---|
182 | setup : function( name, element )
|
---|
183 | {
|
---|
184 | if ( name == 'clear' )
|
---|
185 | this.setValue( '' );
|
---|
186 | else if ( name == 'select' )
|
---|
187 | {
|
---|
188 | this.setValue(
|
---|
189 | element.getAttribute( '_cke_saved_name' ) ||
|
---|
190 | element.getAttribute( 'name' ) ||
|
---|
191 | '' );
|
---|
192 | }
|
---|
193 | },
|
---|
194 | commit : function( element )
|
---|
195 | {
|
---|
196 | if ( this.getValue() )
|
---|
197 | element.setAttribute( '_cke_saved_name', this.getValue() );
|
---|
198 | else
|
---|
199 | {
|
---|
200 | element.removeAttribute( '_cke_saved_name' ) ;
|
---|
201 | element.removeAttribute( 'name' );
|
---|
202 | }
|
---|
203 | }
|
---|
204 | },
|
---|
205 | {
|
---|
206 | id : 'txtValue',
|
---|
207 | type : 'text',
|
---|
208 | widths : [ '25%','75%' ],
|
---|
209 | labelLayout : 'horizontal',
|
---|
210 | label : editor.lang.select.value,
|
---|
211 | style : 'width:350px',
|
---|
212 | 'default' : '',
|
---|
213 | className : 'cke_disabled',
|
---|
214 | onLoad : function()
|
---|
215 | {
|
---|
216 | this.getInputElement().setAttribute( 'readOnly', true );
|
---|
217 | },
|
---|
218 | setup : function( name, element )
|
---|
219 | {
|
---|
220 | if ( name == 'clear' )
|
---|
221 | this.setValue( '' );
|
---|
222 | else if ( name == 'option' && element.getAttribute( 'selected' ) )
|
---|
223 | this.setValue( element.$.value );
|
---|
224 | }
|
---|
225 | },
|
---|
226 | {
|
---|
227 | type : 'hbox',
|
---|
228 | widths : [ '175px', '170px' ],
|
---|
229 | align : 'center',
|
---|
230 | children :
|
---|
231 | [
|
---|
232 | {
|
---|
233 | id : 'txtSize',
|
---|
234 | type : 'text',
|
---|
235 | align : 'center',
|
---|
236 | labelLayout : 'horizontal',
|
---|
237 | label : editor.lang.select.size,
|
---|
238 | 'default' : '',
|
---|
239 | accessKey : 'S',
|
---|
240 | style : 'width:175px',
|
---|
241 | validate: function()
|
---|
242 | {
|
---|
243 | var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
|
---|
244 | return ( ( this.getValue() === '' ) || func.apply( this ) );
|
---|
245 | },
|
---|
246 | setup : function( name, element )
|
---|
247 | {
|
---|
248 | if ( name == 'select' )
|
---|
249 | this.setValue( element.getAttribute( 'size' ) || '' );
|
---|
250 | if ( CKEDITOR.env.webkit )
|
---|
251 | this.getInputElement().setStyle( 'width', '86px' );
|
---|
252 | },
|
---|
253 | commit : function( element )
|
---|
254 | {
|
---|
255 | if ( this.getValue() )
|
---|
256 | element.setAttribute( 'size', this.getValue() );
|
---|
257 | else
|
---|
258 | element.removeAttribute( 'size' );
|
---|
259 | }
|
---|
260 | },
|
---|
261 | {
|
---|
262 | type : 'html',
|
---|
263 | html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'
|
---|
264 | }
|
---|
265 | ]
|
---|
266 | },
|
---|
267 | {
|
---|
268 | type : 'html',
|
---|
269 | html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'
|
---|
270 | },
|
---|
271 | {
|
---|
272 | type : 'hbox',
|
---|
273 | widths : [ '115px', '115px' ,'100px' ],
|
---|
274 | align : 'top',
|
---|
275 | children :
|
---|
276 | [
|
---|
277 | {
|
---|
278 | type : 'vbox',
|
---|
279 | children :
|
---|
280 | [
|
---|
281 | {
|
---|
282 | id : 'txtOptName',
|
---|
283 | type : 'text',
|
---|
284 | label : editor.lang.select.opText,
|
---|
285 | style : 'width:115px',
|
---|
286 | setup : function( name, element )
|
---|
287 | {
|
---|
288 | if ( name == 'clear' )
|
---|
289 | this.setValue( "" );
|
---|
290 | }
|
---|
291 | },
|
---|
292 | {
|
---|
293 | type : 'select',
|
---|
294 | id : 'cmbName',
|
---|
295 | label : '',
|
---|
296 | title : '',
|
---|
297 | size : 5,
|
---|
298 | style : 'width:115px;height:75px',
|
---|
299 | items : [],
|
---|
300 | onChange : function()
|
---|
301 | {
|
---|
302 | var dialog = this.getDialog(),
|
---|
303 | values = dialog.getContentElement( 'info', 'cmbValue' ),
|
---|
304 | optName = dialog.getContentElement( 'info', 'txtOptName' ),
|
---|
305 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
|
---|
306 | iIndex = getSelectedIndex( this );
|
---|
307 |
|
---|
308 | setSelectedIndex( values, iIndex );
|
---|
309 | optName.setValue( this.getValue() );
|
---|
310 | optValue.setValue( values.getValue() );
|
---|
311 | },
|
---|
312 | setup : function( name, element )
|
---|
313 | {
|
---|
314 | if ( name == 'clear' )
|
---|
315 | removeAllOptions( this );
|
---|
316 | else if ( name == 'option' )
|
---|
317 | addOption( this, element.getText(), element.getText(),
|
---|
318 | this.getDialog().getParentEditor().document );
|
---|
319 | },
|
---|
320 | commit : function( element )
|
---|
321 | {
|
---|
322 | var dialog = this.getDialog(),
|
---|
323 | optionsNames = getOptions( this ),
|
---|
324 | optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
|
---|
325 | selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
|
---|
326 |
|
---|
327 | removeAllOptions( element );
|
---|
328 |
|
---|
329 | for ( var i = 0 ; i < optionsNames.count() ; i++ )
|
---|
330 | {
|
---|
331 | var oOption = addOption( element, optionsNames.getItem( i ).getValue(),
|
---|
332 | optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
|
---|
333 | if ( optionsValues.getItem( i ).getValue() == selectValue )
|
---|
334 | {
|
---|
335 | oOption.setAttribute( 'selected', 'selected' );
|
---|
336 | oOption.selected = true;
|
---|
337 | }
|
---|
338 | }
|
---|
339 | }
|
---|
340 | }
|
---|
341 | ]
|
---|
342 | },
|
---|
343 | {
|
---|
344 | type : 'vbox',
|
---|
345 | children :
|
---|
346 | [
|
---|
347 | {
|
---|
348 | id : 'txtOptValue',
|
---|
349 | type : 'text',
|
---|
350 | label : editor.lang.select.opValue,
|
---|
351 | style : 'width:115px',
|
---|
352 | setup : function( name, element )
|
---|
353 | {
|
---|
354 | if ( name == 'clear' )
|
---|
355 | this.setValue( "" );
|
---|
356 | }
|
---|
357 | },
|
---|
358 | {
|
---|
359 | type : 'select',
|
---|
360 | id : 'cmbValue',
|
---|
361 | label : '',
|
---|
362 | size : 5,
|
---|
363 | style : 'width:115px;height:75px',
|
---|
364 | items : [],
|
---|
365 | onChange : function()
|
---|
366 | {
|
---|
367 | var dialog = this.getDialog(),
|
---|
368 | names = dialog.getContentElement( 'info', 'cmbName' ),
|
---|
369 | optName = dialog.getContentElement( 'info', 'txtOptName' ),
|
---|
370 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
|
---|
371 | iIndex = getSelectedIndex( this );
|
---|
372 |
|
---|
373 | setSelectedIndex( names, iIndex );
|
---|
374 | optName.setValue( names.getValue() );
|
---|
375 | optValue.setValue( this.getValue() );
|
---|
376 | },
|
---|
377 | setup : function( name, element )
|
---|
378 | {
|
---|
379 | if ( name == 'clear' )
|
---|
380 | removeAllOptions( this );
|
---|
381 | else if ( name == 'option' )
|
---|
382 | {
|
---|
383 | var oValue = element.getValue();
|
---|
384 | addOption( this, oValue, oValue,
|
---|
385 | this.getDialog().getParentEditor().document );
|
---|
386 | if ( element.getAttribute( 'selected' ) == 'selected' )
|
---|
387 | this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );
|
---|
388 | }
|
---|
389 | }
|
---|
390 | }
|
---|
391 | ]
|
---|
392 | },
|
---|
393 | {
|
---|
394 | type : 'vbox',
|
---|
395 | padding : 5,
|
---|
396 | children :
|
---|
397 | [
|
---|
398 | {
|
---|
399 | type : 'button',
|
---|
400 | style : '',
|
---|
401 | label : editor.lang.select.btnAdd,
|
---|
402 | title : editor.lang.select.btnAdd,
|
---|
403 | style : 'width:100%;',
|
---|
404 | onClick : function()
|
---|
405 | {
|
---|
406 | //Add new option.
|
---|
407 | var dialog = this.getDialog(),
|
---|
408 | parentEditor = dialog.getParentEditor(),
|
---|
409 | optName = dialog.getContentElement( 'info', 'txtOptName' ),
|
---|
410 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
|
---|
411 | names = dialog.getContentElement( 'info', 'cmbName' ),
|
---|
412 | values = dialog.getContentElement( 'info', 'cmbValue' );
|
---|
413 |
|
---|
414 | addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
|
---|
415 | addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
|
---|
416 |
|
---|
417 | optName.setValue( "" );
|
---|
418 | optValue.setValue( "" );
|
---|
419 | }
|
---|
420 | },
|
---|
421 | {
|
---|
422 | type : 'button',
|
---|
423 | label : editor.lang.select.btnModify,
|
---|
424 | title : editor.lang.select.btnModify,
|
---|
425 | style : 'width:100%;',
|
---|
426 | onClick : function()
|
---|
427 | {
|
---|
428 | //Modify selected option.
|
---|
429 | var dialog = this.getDialog(),
|
---|
430 | optName = dialog.getContentElement( 'info', 'txtOptName' ),
|
---|
431 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
|
---|
432 | names = dialog.getContentElement( 'info', 'cmbName' ),
|
---|
433 | values = dialog.getContentElement( 'info', 'cmbValue' ),
|
---|
434 | iIndex = getSelectedIndex( names );
|
---|
435 |
|
---|
436 | if ( iIndex >= 0 )
|
---|
437 | {
|
---|
438 | modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
|
---|
439 | modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
|
---|
440 | }
|
---|
441 | }
|
---|
442 | },
|
---|
443 | {
|
---|
444 | type : 'button',
|
---|
445 | style : 'width:100%;',
|
---|
446 | label : editor.lang.select.btnUp,
|
---|
447 | title : editor.lang.select.btnUp,
|
---|
448 | onClick : function()
|
---|
449 | {
|
---|
450 | //Move up.
|
---|
451 | var dialog = this.getDialog(),
|
---|
452 | names = dialog.getContentElement( 'info', 'cmbName' ),
|
---|
453 | values = dialog.getContentElement( 'info', 'cmbValue' );
|
---|
454 |
|
---|
455 | changeOptionPosition( names, -1, dialog.getParentEditor().document );
|
---|
456 | changeOptionPosition( values, -1, dialog.getParentEditor().document );
|
---|
457 | }
|
---|
458 | },
|
---|
459 | {
|
---|
460 | type : 'button',
|
---|
461 | style : 'width:100%;',
|
---|
462 | label : editor.lang.select.btnDown,
|
---|
463 | title : editor.lang.select.btnDown,
|
---|
464 | onClick : function()
|
---|
465 | {
|
---|
466 | //Move down.
|
---|
467 | var dialog = this.getDialog(),
|
---|
468 | names = dialog.getContentElement( 'info', 'cmbName' ),
|
---|
469 | values = dialog.getContentElement( 'info', 'cmbValue' );
|
---|
470 |
|
---|
471 | changeOptionPosition( names, 1, dialog.getParentEditor().document );
|
---|
472 | changeOptionPosition( values, 1, dialog.getParentEditor().document );
|
---|
473 | }
|
---|
474 | }
|
---|
475 | ]
|
---|
476 | }
|
---|
477 | ]
|
---|
478 | },
|
---|
479 | {
|
---|
480 | type : 'hbox',
|
---|
481 | widths : [ '40%', '20%', '40%' ],
|
---|
482 | children :
|
---|
483 | [
|
---|
484 | {
|
---|
485 | type : 'button',
|
---|
486 | label : editor.lang.select.btnSetValue,
|
---|
487 | title : editor.lang.select.btnSetValue,
|
---|
488 | onClick : function()
|
---|
489 | {
|
---|
490 | //Set as default value.
|
---|
491 | var dialog = this.getDialog(),
|
---|
492 | values = dialog.getContentElement( 'info', 'cmbValue' ),
|
---|
493 | txtValue = dialog.getContentElement( 'info', 'txtValue' );
|
---|
494 | txtValue.setValue( values.getValue() );
|
---|
495 | }
|
---|
496 | },
|
---|
497 | {
|
---|
498 | type : 'button',
|
---|
499 | label : editor.lang.select.btnDelete,
|
---|
500 | title : editor.lang.select.btnDelete,
|
---|
501 | onClick : function()
|
---|
502 | {
|
---|
503 | // Delete option.
|
---|
504 | var dialog = this.getDialog(),
|
---|
505 | names = dialog.getContentElement( 'info', 'cmbName' ),
|
---|
506 | values = dialog.getContentElement( 'info', 'cmbValue' ),
|
---|
507 | optName = dialog.getContentElement( 'info', 'txtOptName' ),
|
---|
508 | optValue = dialog.getContentElement( 'info', 'txtOptValue' );
|
---|
509 |
|
---|
510 | removeSelectedOptions( names );
|
---|
511 | removeSelectedOptions( values );
|
---|
512 |
|
---|
513 | optName.setValue( "" );
|
---|
514 | optValue.setValue( "" );
|
---|
515 | }
|
---|
516 | },
|
---|
517 | {
|
---|
518 | id : 'chkMulti',
|
---|
519 | type : 'checkbox',
|
---|
520 | label : editor.lang.select.chkMulti,
|
---|
521 | 'default' : '',
|
---|
522 | accessKey : 'M',
|
---|
523 | value : "checked",
|
---|
524 | setup : function( name, element )
|
---|
525 | {
|
---|
526 | if ( name == 'select' )
|
---|
527 | this.setValue( element.getAttribute( 'multiple' ) );
|
---|
528 | if ( CKEDITOR.env.webkit )
|
---|
529 | this.getElement().getParent().setStyle( 'vertical-align', 'middle' );
|
---|
530 | },
|
---|
531 | commit : function( element )
|
---|
532 | {
|
---|
533 | if ( this.getValue() )
|
---|
534 | element.setAttribute( 'multiple', this.getValue() );
|
---|
535 | else
|
---|
536 | element.removeAttribute( 'multiple' );
|
---|
537 | }
|
---|
538 | }
|
---|
539 | ]
|
---|
540 | }
|
---|
541 | ]
|
---|
542 | }
|
---|
543 | ]
|
---|
544 | };
|
---|
545 | });
|
---|